@dust-tt/sparkle 0.5.12 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -48,6 +48,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@chromatic-com/storybook": "^3.2.5",
+    "@radix-ui/react-focus-scope": "^1.0.3",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-interactions": "^8.6.4",
     "@storybook/addon-links": "^8.6.4",
@@ -68,14 +69,12 @@
     "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^8.48.0",
     "@typescript-eslint/parser": "^8.48.0",
-    "@typescript/native-preview": "^7.0.0-dev.20251201.1",
-    "@tanstack/react-virtual": "^3.5.0",
-    "@radix-ui/react-focus-scope": "^1.0.3",
-    "autoprefixer": "^10.4.14",
+    "@typescript/native-preview": "^7.0.0-dev.20260105.1",
+    "autoprefixer": "^10.4.23",
     "babel-loader": "^9.1.3",
     "babel-preset-react-app": "^10.0.1",
     "copyfiles": "^2.4.1",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.12",
     "esbuild-plugin-postcss2": "^0.1.2",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
@@ -89,10 +88,10 @@
     "react-dom": "^18.3.1",
     "sass-loader": "^13.3.2",
     "storybook": "^8.6.4",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.10",
-    "typescript": "^5.4.5",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.0",
     "typescript-transform-paths": "^3.4.7",
     "uuid": "^9.0.1"
@@ -130,6 +129,7 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",
+    "@tanstack/react-virtual": "^3.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.5.2",

package/src/components/AnimatedText.tsx

@@ -14,6 +14,7 @@ const ANIMATED_TEXT_VARIANTS = [
   "blue",
   "rose",
   "golden",
+  "white",
 ] as const;
 
 type AnimatedTextVariantType = (typeof ANIMATED_TEXT_VARIANTS)[number];
@@ -59,6 +60,10 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "s-from-golden-800 s-via-golden-950 s-via-50% s-to-golden-800",
     "dark:s-from-golden-800-night dark:s-via-golden-950-night dark:s-via-50% dark:s-to-golden-800-night"
   ),
+  white: cn(
+    "s-from-primary-800 s-via-primary-950 s-via-50% s-to-primary-800",
+    "dark:s-from-primary-800-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-800-night"
+  ),
 };
 
 const animVariants = cva(
@@ -84,6 +89,7 @@ const animatedTextVariants: Record<AnimatedTextVariantType, string> = {
   blue: "s-text-sky-800 dark:s-text-sky-800-night",
   rose: "s-text-rose-800 dark:s-text-rose-800-night",
   golden: "s-text-golden-800 dark:s-text-rose-golden-night",
+  white: "s-text-primary-800 dark:s-text-primary-800-night",
 };
 
 const textVariants = cva("s-absolute s-inset-0", {

package/src/components/Chip.tsx

@@ -25,6 +25,7 @@ export const CHIP_COLORS = [
   "blue",
   "rose",
   "golden",
+  "white",
 ] as const;
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
@@ -91,6 +92,12 @@ const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
         "dark:s-bg-golden-100-night dark:s-border-golden-200-night",
         "dark:s-text-golden-900-night"
       ),
+      white: cn(
+        "s-border s-bg-white s-border-border",
+        "s-text-primary-900",
+        "dark:s-bg-background-night dark:s-border-border-night",
+        "dark:s-text-primary-900-night"
+      ),
     },
   },
   defaultVariants: {
@@ -136,8 +143,40 @@ const closeIconVariants: Record<ChipColorType, string> = {
     "s-text-golden-900 hover:s-text-golden-700 active:s-text-golden-950",
     "dark:s-text-golden-900-night dark:hover:s-text-golden-700-night dark:active:s-text-golden-950-night"
   ),
+  white: cn(
+    "s-text-primary-700 hover:s-text-primary-500 active:s-text-primary-950",
+    "dark:s-text-primary-700-night dark:hover:s-text-primary-500-night dark:active:s-text-primary-950-night"
+  ),
 };
 
+interface ChipInternalButtonProps {
+  icon: ComponentType;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  size?: "xs" | "sm";
+  "aria-label"?: string;
+}
+
+const ChipButton = React.forwardRef<HTMLButtonElement, ChipInternalButtonProps>(
+  ({ icon, onClick, className, size = "xs", "aria-label": ariaLabel }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onClick}
+      aria-label={ariaLabel}
+      className={cn(
+        "s-rounded-md s-p-0.5",
+        "s-transition-colors s-duration-200",
+        "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring",
+        className
+      )}
+    >
+      <Icon visual={icon} size={size} />
+    </button>
+  )
+);
+ChipButton.displayName = "ChipButton";
+
 type ChipBaseProps = {
   size?: ChipSizeType;
   color?: ChipColorType;
@@ -225,21 +264,16 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
           </span>
         )}
         {onRemove && (
-          <button
+          <ChipButton
+            icon={XMarkIcon}
+            size={size === "mini" ? "xs" : "sm"}
+            className={cn("-s-mr-1", closeIconVariants[color || "primary"])}
+            aria-label="Remove"
             onClick={(e) => {
               e.stopPropagation();
               onRemove();
             }}
-          >
-            <Icon
-              visual={XMarkIcon}
-              size={size === "mini" ? "xs" : (size as IconProps["size"])}
-              className={cn(
-                "s-transition-color -s-mr-1 s-duration-200",
-                closeIconVariants[color || "primary"]
-              )}
-            />
-          </button>
+          />
         )}
       </div>
     );

package/src/components/Citation.tsx

@@ -53,7 +53,7 @@ const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
         variant={variant}
         size="sm"
         className={cn(
-          "s-min-w-24 s-relative s-flex s-flex-none s-flex-col s-overflow-hidden",
+          "s-relative s-flex s-min-w-24 s-flex-none s-flex-col s-overflow-hidden",
           // Use min() to maintain aspect ratio in grid mode (8% of width) while capping
           // padding at 3 (0.75rem) for list mode to prevent excessive top padding on wide items.
           "s-pt-[min(8%,theme(spacing.3))]",

package/src/components/DataTable.tsx

@@ -333,8 +333,9 @@ export function DataTable<TData extends TBaseData>({
   );
 }
 
-export interface ScrollableDataTableProps<TData extends TBaseData>
-  extends DataTableProps<TData> {
+export interface ScrollableDataTableProps<
+  TData extends TBaseData,
+> extends DataTableProps<TData> {
   maxHeight?: string | boolean;
   onLoadMore?: () => void;
   isLoading?: boolean;
@@ -871,8 +872,7 @@ interface BaseMenuItem {
 }
 
 interface RegularMenuItem
-  extends BaseMenuItem,
-    Omit<DropdownMenuItemProps, "children" | "label"> {
+  extends BaseMenuItem, Omit<DropdownMenuItemProps, "children" | "label"> {
   kind: "item";
 }
 
@@ -900,7 +900,7 @@ const renderSubmenuItem = (
     <DropdownMenuPortal>
       <DropdownMenuSubContent>
         <ScrollArea
-          className="s-min-w-24 s-flex s-max-h-72 s-flex-col"
+          className="s-flex s-max-h-72 s-min-w-24 s-flex-col"
           hideScrollBar
         >
           {item.items.map((subItem) => (

package/src/components/NavigationList.tsx

@@ -69,7 +69,8 @@ const NavigationList = React.forwardRef<
 NavigationList.displayName = "NavigationList";
 
 interface NavigationListItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     Omit<LinkWrapperProps, "children" | "className"> {
   selected?: boolean;
   label?: string;
@@ -178,8 +179,7 @@ const NavigationListItem = React.forwardRef<
 );
 NavigationListItem.displayName = "NavigationListItem";
 
-interface NavigationListItemActionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface NavigationListItemActionProps extends React.HTMLAttributes<HTMLDivElement> {
   showOnHover?: boolean;
 }
 
@@ -228,7 +228,8 @@ const labelStyles = cva(
 );
 
 interface NavigationListLabelProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof variantStyles> {
   label: string;
   action?: React.ReactNode;
@@ -257,8 +258,7 @@ const NavigationListLabel = React.forwardRef<
 
 NavigationListLabel.displayName = "NavigationListLabel";
 
-interface NavigationListCollapsibleSectionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface NavigationListCollapsibleSectionProps extends React.HTMLAttributes<HTMLDivElement> {
   label: string;
   action?: React.ReactNode;
   defaultOpen?: boolean;