@dust-tt/sparkle 0.2.613 → 0.2.615

package/src/components/Spinner.tsx

@@ -13,7 +13,7 @@ import animLightLG from "@sparkle/lottie/spinnerLightLG";
 import animLightXS from "@sparkle/lottie/spinnerLightXS";
 
 type SpinnerSizeType = (typeof SPINNER_SIZES)[number];
-const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl"] as const;
+const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"] as const;
 
 type SpinnerVariant =
   | "mono"
@@ -43,7 +43,7 @@ const pxSizeClasses: Record<SpinnerSizeType, string> = {
   md: "24",
   lg: "32",
   xl: "128",
-  xxl: "192",
+  "2xl": "192",
 };
 
 type LottieColorType = [number, number, number, number];
@@ -111,7 +111,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animLightLG;
         break;
       default:
@@ -139,7 +139,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animColorXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animColorLG;
         break;
       default:
@@ -162,7 +162,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animLightLG;
         break;
       default:
@@ -185,7 +185,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animDarkXS;
         break;
       case "xl":
-      case "xxl":
+      case "2xl":
         anim = animDarkLG;
         break;
       default:
@@ -210,7 +210,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
       darkAnim = animDarkXS;
       break;
     case "xl":
-    case "xxl":
+    case "2xl":
       lightAnim = animLightLG;
       darkAnim = animDarkLG;
       break;

package/src/components/WindowUtility.tsx

@@ -2,30 +2,25 @@ import { useEffect, useState } from "react";
 
 // Define breakpoints
 export const breakpoints = {
-  xs: 0,
+  xxs: 0,
+  xs: 512,
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
-  xxl: 1536,
+  "2xl": 1536,
 };
 
 // Helper function to determine active breakpoint
 function getActiveBreakpoint(width: number): keyof typeof breakpoints {
-  if (width >= breakpoints.xxl) {
-    return "xxl";
-  }
-  if (width >= breakpoints.xl) {
-    return "xl";
-  }
-  if (width >= breakpoints.lg) {
-    return "lg";
-  }
-  if (width >= breakpoints.md) {
-    return "md";
-  }
-  if (width >= breakpoints.sm) {
-    return "sm";
+  const breakpointEntries = Object.entries(breakpoints) as [keyof typeof breakpoints, number][];
+  // Sort breakpoints from largest to smallest
+  const sortedBreakpoints = breakpointEntries.sort(([, a], [, b]) => b - a);
+  
+  for (const [breakpoint, minWidth] of sortedBreakpoints) {
+    if (width >= minWidth) {
+      return breakpoint;
+    }
   }
   return "xs";
 }
@@ -62,5 +57,3 @@ export function useWindowSize() {
 
   return windowSize;
 }
-
-export default useWindowSize;

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./components";
+export * from "./components/WindowUtility";
 export { SparkleContext } from "./context";
 export * from "./hooks";
 export * from "./icons";

package/src/stories/Avatar.stories.tsx

@@ -44,7 +44,7 @@ export const AvatarExample = () => (
       <Avatar size="md" />
       <Avatar size="lg" />
       <Avatar size="xl" />
-      <Avatar size="xxl" />
+      <Avatar size="2xl" />
     </div>
     <div>With name</div>
     <div className="s-flex s-gap-4">
@@ -53,7 +53,7 @@ export const AvatarExample = () => (
       <Avatar size="md" name="Aria Doe" />
       <Avatar size="lg" name="Omar Doe" />
       <Avatar size="xl" name="Omar Doe" />
-      <Avatar size="xxl" name="Omar Doe" />
+      <Avatar size="2xl" name="Omar Doe" />
     </div>
     <div>With emoji url</div>
     <div className="s-flex s-gap-4">
@@ -69,7 +69,7 @@ export const AvatarExample = () => (
       <Avatar size="md" emoji="😂" backgroundColor="s-bg-info-200" />
       <Avatar size="lg" emoji="🧑‍🚀" backgroundColor="s-bg-gray-200" />
       <Avatar size="xl" emoji="👕" backgroundColor="s-bg-blue-200" />
-      <Avatar size="xxl" emoji="👕" backgroundColor="s-bg-blue-200" />
+      <Avatar size="2xl" emoji="👕" backgroundColor="s-bg-blue-200" />
     </div>
     <div className="s-flex s-gap-4">
       <Avatar size="sm" name="Eleanor Wright" />
@@ -126,7 +126,7 @@ export const AvatarExample = () => (
       <Avatar size="lg" icon={ActionFlagIcon} />
       <Avatar size="lg" icon={SlackLogo} hexBgColor="#421D51" />
       <Avatar size="xl" icon={ActionShirtIcon} />
-      <Avatar size="xxl" icon={StarStrokeIcon} />
+      <Avatar size="2xl" icon={StarStrokeIcon} />
     </div>
     <div className="heading-2xl">Tools example</div>
     <div>Remote MCP Servers</div>

package/src/stories/Spinner.stories.tsx

@@ -89,13 +89,13 @@ export const SpinnerExample = () => {
       </div>
       <div className="s-flex s-gap-4">
         <div className="s-p-20">
-          <Spinner variant="color" size="xxl" />
+          <Spinner variant="color" size="2xl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="mono" size="xxl" />
+          <Spinner variant="mono" size="2xl" />
         </div>
         <div className="s-p-20">
-          <Spinner variant="rose300" size="xxl" />
+          <Spinner variant="rose300" size="2xl" />
         </div>
       </div>
     </div>