@dust-tt/sparkle 0.2.512 → 0.2.513

package/src/components/Spinner.tsx

@@ -8,16 +8,24 @@ import animColorXS from "@sparkle/lottie/spinnerColorXS";
 import animDark from "@sparkle/lottie/spinnerDark";
 import animDarkLG from "@sparkle/lottie/spinnerDarkLG";
 import animDarkXS from "@sparkle/lottie/spinnerDarkXS";
-import animLightXS from "@sparkle/lottie/spinnerLight";
+import animLight from "@sparkle/lottie/spinnerLight";
 import animLightLG from "@sparkle/lottie/spinnerLightLG";
-import animSimpleLight from "@sparkle/lottie/spinnerLightXS";
+import animLightXS from "@sparkle/lottie/spinnerLightXS";
 
 type SpinnerSizeType = (typeof SPINNER_SIZES)[number];
 const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl"] as const;
 
+type SpinnerVariant =
+  | "mono"
+  | "revert"
+  | "light"
+  | "dark"
+  | "color"
+  | SpinnerVariantType;
+
 export interface SpinnerProps {
   size?: SpinnerSizeType;
-  variant?: SpinnerVariantType;
+  variant?: SpinnerVariant;
 }
 
 // Generate all possible color-shade combinations
@@ -25,9 +33,10 @@ const colorVariants = Object.entries(customColors).flatMap(([color, shades]) =>
   Object.keys(shades).map((shade) => `${color}${shade}` as const)
 );
 
-const SPINNER_VARIANTS = ["color", "light", "dark", ...colorVariants] as const;
+const SPINNER_VARIANTS = ["color", ...colorVariants] as const;
 
 type SpinnerVariantType = (typeof SPINNER_VARIANTS)[number];
+
 const pxSizeClasses: Record<SpinnerSizeType, string> = {
   xs: "16",
   sm: "20",
@@ -48,8 +57,6 @@ const hexToRgba = (hex: string): [number, number, number, number] => {
 };
 
 const colors: Record<Exclude<SpinnerVariantType, "color">, LottieColorType> = {
-  light: [1, 1, 1, 1],
-  dark: hexToRgba(customColors.gray[900]),
   ...Object.fromEntries(
     colorVariants.map((variant) => {
       const color = variant.match(/[a-z]+/)?.[0] as keyof typeof customColors;
@@ -87,53 +94,148 @@ const replaceColors = (obj: any, newColor: LottieColorType): any => {
   return obj;
 };
 
-const Spinner: React.FC<SpinnerProps> = ({
-  size = "md",
-  variant = "color",
-}) => {
+const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
   const fullSize = parseInt(pxSizeClasses[size], 10);
 
-  let anim;
+  // Handle custom color variants
+  if (
+    variant !== "revert" &&
+    variant !== "mono" &&
+    variant !== "color" &&
+    variant !== "light" &&
+    variant !== "dark"
+  ) {
+    let anim;
+    switch (size) {
+      case "xs":
+        anim = animLightXS;
+        break;
+      case "xl":
+      case "xxl":
+        anim = animLightLG;
+        break;
+      default:
+        anim = animLight;
+    }
+    const animationData = replaceColors(
+      JSON.parse(JSON.stringify(anim)),
+      colors[variant]
+    );
+    return (
+      <Lottie
+        animationData={animationData}
+        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+        loop
+        autoplay
+      />
+    );
+  }
+
+  // Handle color variant
+  if (variant === "color") {
+    let anim;
+    switch (size) {
+      case "xs":
+        anim = animColorXS;
+        break;
+      case "xl":
+      case "xxl":
+        anim = animColorLG;
+        break;
+      default:
+        anim = animColor;
+    }
+    return (
+      <Lottie
+        animationData={anim}
+        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+        loop
+        autoplay
+      />
+    );
+  }
+
+  if (variant === "light") {
+    let anim;
+    switch (size) {
+      case "xs":
+        anim = animLightXS;
+        break;
+      case "xl":
+      case "xxl":
+        anim = animLightLG;
+        break;
+      default:
+        anim = animLight;
+    }
+    return (
+      <Lottie
+        animationData={anim}
+        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+        loop
+        autoplay
+      />
+    );
+  }
 
+  if (variant === "dark") {
+    let anim;
+    switch (size) {
+      case "xs":
+        anim = animDarkXS;
+        break;
+      case "xl":
+      case "xxl":
+        anim = animDarkLG;
+        break;
+      default:
+        anim = animDark;
+    }
+    return (
+      <Lottie
+        animationData={anim}
+        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+        loop
+        autoplay
+      />
+    );
+  }
+
+  // Handle mono variant (default)
+  let lightAnim;
+  let darkAnim;
   switch (size) {
     case "xs":
-      anim =
-        variant === "light"
-          ? animSimpleLight
-          : variant === "dark"
-            ? animDarkXS
-            : animColorXS;
+      lightAnim = animLightXS;
+      darkAnim = animDarkXS;
       break;
     case "xl":
     case "xxl":
-      anim =
-        variant === "light"
-          ? animLightLG
-          : variant === "dark"
-            ? animDarkLG
-            : animColorLG;
+      lightAnim = animLightLG;
+      darkAnim = animDarkLG;
       break;
     default:
-      anim =
-        variant === "light"
-          ? animLightXS
-          : variant === "dark"
-            ? animDark
-            : animColor;
+      lightAnim = animLight;
+      darkAnim = animDark;
   }
 
-  const animationData =
-    variant === "color"
-      ? anim
-      : replaceColors(JSON.parse(JSON.stringify(anim)), colors[variant]);
-
   return (
-    <Lottie
-      animationData={animationData}
-      style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
-      loop
-      autoplay
-    />
+    <>
+      <Lottie
+        animationData={variant && variant === "mono" ? darkAnim : lightAnim}
+        className="s-block dark:s-hidden"
+        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+        loop
+        autoplay
+      />
+      <Lottie
+        animationData={variant && variant === "mono" ? lightAnim : darkAnim}
+        className="s-hidden dark:s-block"
+        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+        loop
+        autoplay
+      />
+    </>
   );
 };
 

package/src/stories/Spinner.stories.tsx

@@ -14,100 +14,88 @@ type Story = StoryObj<typeof meta>;
 export const SpinnerExample = () => {
   return (
     <div className="s-flex s-flex-col s-gap-4">
-      Size = XS
+      <div className="s-heading-base s-text-foreground dark:s-text-white">
+        Size = XS
+      </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
           <Spinner variant="color" size="xs" />
         </div>
-        <div className="s-bg-primary-900 s-p-20">
-          <Spinner variant="light" size="xs" />
-        </div>
-        <div className="s-bg-blue-500 s-p-20">
-          <Spinner variant="light" size="xs" />
-        </div>
         <div className="s-p-20">
-          <Spinner variant="dark" size="xs" />
+          <Spinner variant="mono" size="xs" />
         </div>
         <div className="s-p-20">
           <Spinner variant="rose300" size="xs" />
         </div>
       </div>
-      Size = SM
+      <div className="s-heading-base s-text-foreground dark:s-text-white">
+        Size = SM
+      </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
           <Spinner variant="color" size="sm" />
         </div>
-        <div className="s-bg-primary-900 s-p-20">
-          <Spinner variant="light" size="sm" />
-        </div>
-        <div className="s-bg-blue-500 s-p-20">
-          <Spinner variant="light" size="sm" />
-        </div>
         <div className="s-p-20">
-          <Spinner variant="dark" size="sm" />
+          <Spinner variant="mono" size="sm" />
         </div>
         <div className="s-p-20">
           <Spinner variant="rose300" size="sm" />
         </div>
       </div>
-      Size = MD
+      <div className="s-heading-base s-text-foreground dark:s-text-white">
+        Size = MD
+      </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
           <Spinner variant="color" size="md" />
         </div>
-        <div className="s-bg-primary-900 s-p-20">
-          <Spinner variant="light" size="md" />
-        </div>
-        <div className="s-bg-blue-500 s-p-20">
-          <Spinner variant="light" size="md" />
+        <div className="s-p-20">
+          <Spinner variant="mono" size="md" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="dark" size="md" />
+          <Spinner variant="rose300" size="md" />
         </div>
       </div>
-      Size = LG
+      <div className="s-heading-base s-text-foreground dark:s-text-white">
+        Size = LG
+      </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
           <Spinner variant="color" size="lg" />
         </div>
-        <div className="s-bg-primary-900 s-p-20">
-          <Spinner variant="light" size="lg" />
-        </div>
-        <div className="s-bg-blue-500 s-p-20">
-          <Spinner variant="light" size="lg" />
+        <div className="s-p-20">
+          <Spinner variant="mono" size="lg" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="dark" size="lg" />
+          <Spinner variant="rose300" size="lg" />
         </div>
       </div>
-      Size = XL
+      <div className="s-heading-base s-text-foreground dark:s-text-white">
+        Size = XL
+      </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
           <Spinner variant="color" size="xl" />
         </div>
-        <div className="s-bg-primary-900 s-p-20">
-          <Spinner variant="light" size="xl" />
-        </div>
-        <div className="s-bg-blue-500 s-p-20">
-          <Spinner variant="light" size="xl" />
+        <div className="s-p-20">
+          <Spinner variant="mono" size="xl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="dark" size="xl" />
+          <Spinner variant="rose300" size="xl" />
         </div>
       </div>
-      Size = XXL
+      <div className="s-heading-base s-text-foreground dark:s-text-white">
+        Size = XXL
+      </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
           <Spinner variant="color" size="xxl" />
         </div>
-        <div className="s-bg-primary-900 s-p-20">
-          <Spinner variant="light" size="xxl" />
-        </div>
-        <div className="s-bg-blue-500 s-p-20">
-          <Spinner variant="light" size="xxl" />
+        <div className="s-p-20">
+          <Spinner variant="mono" size="xxl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="dark" size="xxl" />
+          <Spinner variant="rose300" size="xxl" />
         </div>
       </div>
     </div>