From 5459b91fde8c9c40277b32d1fbb29f7a309f7c09 Mon Sep 17 00:00:00 2001
From: Hayden Bleasel <hello@haydenbleasel.com>
Date: Wed, 22 Jan 2025 11:06:52 -0500
Subject: [PATCH] Resolves #57

---
 apps/docs/public/registry/spinner.json |  2 +-
 packages/spinner/index.tsx             | 34 +++++++++++++++++++-------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/apps/docs/public/registry/spinner.json b/apps/docs/public/registry/spinner.json
index a5c966ab..1eb8f2fe 100644
--- a/apps/docs/public/registry/spinner.json
+++ b/apps/docs/public/registry/spinner.json
@@ -13,7 +13,7 @@
     {
       "type": "registry:ui",
       "path": "index.tsx",
-      "content": "import { cn } from '@/lib/utils';\nimport {\n  LoaderCircleIcon,\n  LoaderIcon,\n  LoaderPinwheelIcon,\n  type LucideProps,\n} from 'lucide-react';\n\ntype SpinnerVariantProps = Omit<SpinnerProps, 'variant'>;\n\nconst Default = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst Circle = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderCircleIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst Pinwheel = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderPinwheelIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst CircleFilled = ({\n  className,\n  size = 24,\n  ...props\n}: SpinnerVariantProps) => (\n  <div className=\"relative\" style={{ width: size, height: size }}>\n    <div className=\"absolute inset-0.5 rounded-full border-2 border-current opacity-20\" />\n    <LoaderCircleIcon\n      className={cn('relative animate-spin', className)}\n      {...props}\n    />\n  </div>\n);\n\nconst Ellipsis = (props: SpinnerVariantProps) => {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Loading...</title>\n      <circle cx=\"4\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n        <animate\n          id=\"ellipsis1\"\n          begin=\"0;ellipsis3.end+0.25s\"\n          attributeName=\"cy\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          values=\"12;6;12\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n        <animate\n          begin=\"ellipsis1.begin+0.1s\"\n          attributeName=\"cy\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          values=\"12;6;12\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n        <animate\n          id=\"ellipsis3\"\n          begin=\"ellipsis1.begin+0.2s\"\n          attributeName=\"cy\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          values=\"12;6;12\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n        />\n      </circle>\n    </svg>\n  );\n};\n\nconst Ring = ({ className, size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth=\"2\">\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n\nconst Bars = ({ className, size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <style>{`\n      .spinner-bar {\n        animation: spinner-bars-animation .8s linear infinite;\n        animation-delay: -.8s;\n      }\n      .spinner-bars-2 {\n        animation-delay: -.65s;\n      }\n      .spinner-bars-3 {\n        animation-delay: -0.5s;\n      }\n      @keyframes spinner-bars-animation {\n        0% {\n          y: 1px;\n          height: 22px;\n        }\n        93.75% {\n          y: 5px;\n          height: 14px;\n          opacity: 0.2;\n        }\n      }\n    `}</style>\n    <rect className=\"spinner-bar\" x=\"1\" y=\"1\" width=\"6\" height=\"22\" />\n    <rect\n      className=\"spinner-bar spinner-bars-2\"\n      x=\"9\"\n      y=\"1\"\n      width=\"6\"\n      height=\"22\"\n    />\n    <rect\n      className=\"spinner-bar spinner-bars-3\"\n      x=\"17\"\n      y=\"1\"\n      width=\"6\"\n      height=\"22\"\n    />\n  </svg>\n);\n\nconst Infinite = ({ className, size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <path\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"10\"\n      strokeDasharray=\"205.271142578125 51.317785644531256\"\n      d=\"M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z\"\n      strokeLinecap=\"round\"\n      style={{\n        transform: 'scale(0.8)',\n        transformOrigin: '50px 50px',\n      }}\n    >\n      <animate\n        attributeName=\"stroke-dashoffset\"\n        repeatCount=\"indefinite\"\n        dur=\"2s\"\n        keyTimes=\"0;1\"\n        values=\"0;256.58892822265625\"\n      />\n    </path>\n  </svg>\n);\n\nexport type SpinnerProps = LucideProps & {\n  variant?:\n    | 'default'\n    | 'circle'\n    | 'pinwheel'\n    | 'circle-filled'\n    | 'ellipsis'\n    | 'ring'\n    | 'bars'\n    | 'infinite';\n};\n\nexport const Spinner = ({ variant, ...props }: SpinnerProps) => {\n  switch (variant) {\n    case 'circle':\n      return <Circle {...props} />;\n    case 'pinwheel':\n      return <Pinwheel {...props} />;\n    case 'circle-filled':\n      return <CircleFilled {...props} />;\n    case 'ellipsis':\n      return <Ellipsis {...props} />;\n    case 'ring':\n      return <Ring {...props} />;\n    case 'bars':\n      return <Bars {...props} />;\n    case 'infinite':\n      return <Infinite {...props} />;\n    default:\n      return <Default {...props} />;\n  }\n};\n",
+      "content": "import { cn } from '@/lib/utils';\nimport {\n  LoaderCircleIcon,\n  LoaderIcon,\n  LoaderPinwheelIcon,\n  type LucideProps,\n} from 'lucide-react';\n\ntype SpinnerVariantProps = Omit<SpinnerProps, 'variant'>;\n\nconst Default = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst Circle = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderCircleIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst Pinwheel = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderPinwheelIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst CircleFilled = ({\n  className,\n  size = 24,\n  ...props\n}: SpinnerVariantProps) => (\n  <div className=\"relative\" style={{ width: size, height: size }}>\n    <div className=\"absolute inset-0 rotate-180\">\n      <LoaderCircleIcon\n        className={cn('animate-spin', className, 'text-foreground opacity-20')}\n        size={size}\n        {...props}\n      />\n    </div>\n    <LoaderCircleIcon\n      className={cn('relative animate-spin', className)}\n      size={size}\n      {...props}\n    />\n  </div>\n);\n\nconst Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <title>Loading...</title>\n      <circle cx=\"4\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n        <animate\n          id=\"ellipsis1\"\n          begin=\"0;ellipsis3.end+0.25s\"\n          attributeName=\"cy\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          values=\"12;6;12\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n        <animate\n          begin=\"ellipsis1.begin+0.1s\"\n          attributeName=\"cy\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          values=\"12;6;12\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n        <animate\n          id=\"ellipsis3\"\n          begin=\"ellipsis1.begin+0.2s\"\n          attributeName=\"cy\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          values=\"12;6;12\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n        />\n      </circle>\n    </svg>\n  );\n};\n\nconst Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth=\"2\">\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n\nconst Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 24 24\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <style>{`\n      .spinner-bar {\n        animation: spinner-bars-animation .8s linear infinite;\n        animation-delay: -.8s;\n      }\n      .spinner-bars-2 {\n        animation-delay: -.65s;\n      }\n      .spinner-bars-3 {\n        animation-delay: -0.5s;\n      }\n      @keyframes spinner-bars-animation {\n        0% {\n          y: 1px;\n          height: 22px;\n        }\n        93.75% {\n          y: 5px;\n          height: 14px;\n          opacity: 0.2;\n        }\n      }\n    `}</style>\n    <rect\n      className=\"spinner-bar\"\n      x=\"1\"\n      y=\"1\"\n      width=\"6\"\n      height=\"22\"\n      fill=\"currentColor\"\n    />\n    <rect\n      className=\"spinner-bar spinner-bars-2\"\n      x=\"9\"\n      y=\"1\"\n      width=\"6\"\n      height=\"22\"\n      fill=\"currentColor\"\n    />\n    <rect\n      className=\"spinner-bar spinner-bars-3\"\n      x=\"17\"\n      y=\"1\"\n      width=\"6\"\n      height=\"22\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nconst Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    height={size}\n    viewBox=\"0 0 100 100\"\n    preserveAspectRatio=\"xMidYMid\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <path\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"10\"\n      strokeDasharray=\"205.271142578125 51.317785644531256\"\n      d=\"M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z\"\n      strokeLinecap=\"round\"\n      style={{\n        transform: 'scale(0.8)',\n        transformOrigin: '50px 50px',\n      }}\n    >\n      <animate\n        attributeName=\"stroke-dashoffset\"\n        repeatCount=\"indefinite\"\n        dur=\"2s\"\n        keyTimes=\"0;1\"\n        values=\"0;256.58892822265625\"\n      />\n    </path>\n  </svg>\n);\n\nexport type SpinnerProps = LucideProps & {\n  variant?:\n    | 'default'\n    | 'circle'\n    | 'pinwheel'\n    | 'circle-filled'\n    | 'ellipsis'\n    | 'ring'\n    | 'bars'\n    | 'infinite';\n};\n\nexport const Spinner = ({ variant, ...props }: SpinnerProps) => {\n  switch (variant) {\n    case 'circle':\n      return <Circle {...props} />;\n    case 'pinwheel':\n      return <Pinwheel {...props} />;\n    case 'circle-filled':\n      return <CircleFilled {...props} />;\n    case 'ellipsis':\n      return <Ellipsis {...props} />;\n    case 'ring':\n      return <Ring {...props} />;\n    case 'bars':\n      return <Bars {...props} />;\n    case 'infinite':\n      return <Infinite {...props} />;\n    default:\n      return <Default {...props} />;\n  }\n};\n",
       "target": "components/ui/kibo-ui/spinner.tsx"
     }
   ]
diff --git a/packages/spinner/index.tsx b/packages/spinner/index.tsx
index 43a0ea4c..f08d943c 100644
--- a/packages/spinner/index.tsx
+++ b/packages/spinner/index.tsx
@@ -26,21 +26,28 @@ const CircleFilled = ({
   ...props
 }: SpinnerVariantProps) => (
   <div className="relative" style={{ width: size, height: size }}>
-    <div className="absolute inset-0.5 rounded-full border-2 border-current opacity-20" />
+    <div className="absolute inset-0 rotate-180">
+      <LoaderCircleIcon
+        className={cn('animate-spin', className, 'text-foreground opacity-20')}
+        size={size}
+        {...props}
+      />
+    </div>
     <LoaderCircleIcon
       className={cn('relative animate-spin', className)}
+      size={size}
       {...props}
     />
   </div>
 );
 
-const Ellipsis = (props: SpinnerVariantProps) => {
+const Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
       {...props}
     >
       <title>Loading...</title>
@@ -80,7 +87,7 @@ const Ellipsis = (props: SpinnerVariantProps) => {
   );
 };
 
-const Ring = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
+const Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -139,7 +146,7 @@ const Ring = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
   </svg>
 );
 
-const Bars = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
+const Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}
@@ -171,13 +178,21 @@ const Bars = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
         }
       }
     `}</style>
-    <rect className="spinner-bar" x="1" y="1" width="6" height="22" />
+    <rect
+      className="spinner-bar"
+      x="1"
+      y="1"
+      width="6"
+      height="22"
+      fill="currentColor"
+    />
     <rect
       className="spinner-bar spinner-bars-2"
       x="9"
       y="1"
       width="6"
       height="22"
+      fill="currentColor"
     />
     <rect
       className="spinner-bar spinner-bars-3"
@@ -185,11 +200,12 @@ const Bars = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
       y="1"
       width="6"
       height="22"
+      fill="currentColor"
     />
   </svg>
 );
 
-const Infinite = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
+const Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}