@dust-tt/sparkle 0.3.4 → 0.3.5

package/dist/esm/stories/IconButton.stories.d.ts

@@ -2,16 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        variant?: "primary" | "highlight" | "warning" | "outline" | "ghost" | "ghost-secondary" | null | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-        size?: "xs" | "sm" | "md" | "xmini" | "mini" | undefined;
-        tooltip?: string | undefined;
-        tooltipPosition?: "top" | "right" | "bottom" | "left" | undefined;
-        icon: import("react").ComponentType;
-        className?: string | undefined;
-        disabled?: boolean | undefined;
-    } & import("react").RefAttributes<HTMLButtonElement>>;
+    component: import("react").ForwardRefExoticComponent<import("../components/IconButton").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/esm/stories/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/IconButton.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAGyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAMjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/IconButton.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;CAGyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAMjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC"}

package/dist/esm/styles/global.css

@@ -50,4 +50,4 @@
     background-color: theme("colors.black"); /* Dark mode base color */
     --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "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",

package/src/components/Avatar.tsx

@@ -6,11 +6,19 @@ import { UserIcon } from "@sparkle/icons/app";
 import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
 import { cn } from "@sparkle/lib/utils";
 
-const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl", "auto"] as const;
-type AvatarSizeType = (typeof AVATAR_SIZES)[number];
+export const AVATAR_SIZES = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "auto",
+] as const;
+export type AvatarSizeType = (typeof AVATAR_SIZES)[number];
 
-const AVATAR_VARIANTS = ["default", "clickable", "disabled"] as const;
-type AvatarVariantType = (typeof AVATAR_VARIANTS)[number];
+export const AVATAR_VARIANTS = ["default", "clickable", "disabled"] as const;
+export type AvatarVariantType = (typeof AVATAR_VARIANTS)[number];
 
 const avatarVariants = cva(
   "s-flex s-flex-shrink-0 s-items-center s-justify-center s-overflow-hidden",

package/src/components/Card.tsx

@@ -12,39 +12,10 @@ import { XMarkIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
 export const CARD_VARIANTS = ["primary", "secondary", "tertiary"] as const;
-
 export type CardVariantType = (typeof CARD_VARIANTS)[number];
 
-const variantClasses: Record<CardVariantType, string> = {
-  primary: cn(
-    "s-bg-muted-background",
-    "s-border-border/0",
-    "dark:s-bg-muted-background-night",
-    "dark:s-border-border-night/0"
-  ),
-  secondary: cn(
-    "s-bg-background",
-    "s-border-border",
-    "dark:s-bg-background-night",
-    "dark:s-border-border-night"
-  ),
-  tertiary: cn(
-    "s-bg-background",
-    "s-border-border/0",
-    "dark:s-bg-background-night",
-    "dark:s-border-border-night/0"
-  ),
-};
-
-export const CARD_VARIANTS_SIZES = ["sm", "md", "lg"] as const;
-
-export type CardSizeType = (typeof CARD_VARIANTS_SIZES)[number];
-
-const sizeVariants: Record<CardSizeType, string> = {
-  sm: "s-p-3 s-rounded-xl",
-  md: "s-p-4 s-rounded-2xl",
-  lg: "s-p-5 s-rounded-3xl",
-};
+export const CARD_SIZES = ["sm", "md", "lg"] as const;
+export type CardSizeType = (typeof CARD_SIZES)[number];
 
 const interactiveClasses = cn(
   "s-cursor-pointer",
@@ -64,8 +35,31 @@ const cardVariants = cva(
   ),
   {
     variants: {
-      variant: variantClasses,
-      size: sizeVariants,
+      variant: {
+        primary: cn(
+          "s-bg-muted-background",
+          "s-border-border/0",
+          "dark:s-bg-muted-background-night",
+          "dark:s-border-border-night/0"
+        ),
+        secondary: cn(
+          "s-bg-background",
+          "s-border-border",
+          "dark:s-bg-background-night",
+          "dark:s-border-border-night"
+        ),
+        tertiary: cn(
+          "s-bg-background",
+          "s-border-border/0",
+          "dark:s-bg-background-night",
+          "dark:s-border-border-night/0"
+        ),
+      },
+      size: {
+        sm: "s-p-3 s-rounded-xl",
+        md: "s-p-4 s-rounded-2xl",
+        lg: "s-p-5 s-rounded-3xl",
+      },
     },
     defaultVariants: {
       variant: "primary",

package/src/components/Checkbox.tsx

@@ -10,12 +10,7 @@ import { Label } from "./Label";
 import { Tooltip } from "./Tooltip";
 
 export const CHECKBOX_SIZES = ["xs", "sm"] as const;
-type CheckboxSizeType = (typeof CHECKBOX_SIZES)[number];
-
-const checkboxSizeVariant: Record<CheckboxSizeType, string> = {
-  xs: "s-h-4 s-w-4 s-rounded",
-  sm: "s-h-5 s-w-5 s-rounded-md",
-};
+export type CheckboxSizeType = (typeof CHECKBOX_SIZES)[number];
 
 const checkboxStyles = cva(
   cn(
@@ -34,7 +29,10 @@ const checkboxStyles = cva(
           "data-[state=indeterminate]:s-bg-primary dark:data-[state=indeterminate]:s-bg-primary-night data-[state=indeterminate]:s-text-white data-[state=indeterminate]:s-border-primary",
         false: "",
       },
-      size: checkboxSizeVariant,
+      size: {
+        xs: "s-h-4 s-w-4 s-rounded",
+        sm: "s-h-5 s-w-5 s-rounded-md",
+      },
     },
     defaultVariants: {
       size: "sm",

package/src/components/Chip.tsx

@@ -29,62 +29,75 @@ export const CHIP_COLORS = [
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
 
-const sizeVariants: Record<ChipSizeType, string> = {
-  mini: "s-rounded-md s-min-h-5 s-text-xs s-font-medium s-px-1.5 s-py-1 s-gap-0.5",
-  xs: "s-rounded-lg s-min-h-7 s-heading-xs s-px-3 s-gap-1",
-  sm: "s-rounded-xl s-min-h-9 s-heading-sm s-px-4 s-gap-1.5",
-};
-
-const backgroundVariants: Record<ChipColorType, string> = {
-  primary: cn(
-    "s-bg-muted-background s-border-border",
-    "dark:s-bg-muted-background-night dark:s-border-border-night"
-  ),
-  highlight: cn(
-    "s-bg-highlight-100 s-border-highlight-200",
-    "dark:s-bg-highlight-100-night dark:s-border-highlight-200-night"
-  ),
-  success: cn(
-    "s-bg-success-100 s-border-success-200",
-    "dark:s-bg-success-100-night dark:s-border-success-200-night"
-  ),
-  info: cn(
-    "s-bg-info-100 s-border-info-200",
-    "dark:s-bg-info-100-night dark:s-border-info-200-night"
-  ),
-  warning: cn(
-    "s-bg-warning-100 s-border-warning-200",
-    "dark:s-bg-warning-100-night dark:s-border-warning-200-night"
-  ),
-  green: cn(
-    "s-bg-green-100 s-border-green-200",
-    "dark:s-bg-green-100-night dark:s-border-green-200-night"
-  ),
-  blue: cn(
-    "s-bg-blue-100 s-border-blue-200",
-    "dark:s-bg-blue-100-night dark:s-border-blue-200-night"
-  ),
-  rose: cn(
-    "s-bg-rose-100 s-border-rose-200",
-    "dark:s-bg-rose-100-night dark:s-border-rose-200-night"
-  ),
-  golden: cn(
-    "s-bg-golden-100 s-border-golden-200",
-    "dark:s-bg-golden-100-night dark:s-border-golden-200-night"
-  ),
-};
-
-const textVariants: Record<ChipColorType, string> = {
-  primary: "s-text-primary-900 dark:s-text-primary-900-night",
-  highlight: "s-text-highlight-900 dark:s-text-highlight-900-night",
-  success: "s-text-success-900 dark:s-text-success-900-night",
-  warning: "s-text-warning-900 dark:s-text-warning-900-night",
-  info: "s-text-info-900 dark:s-text-info-900-night",
-  green: "s-text-green-900 dark:s-text-green-900-night",
-  blue: "s-text-blue-900 dark:s-text-blue-900-night",
-  rose: "s-text-rose-900 dark:s-text-rose-900-night",
-  golden: "s-text-golden-900 dark:s-text-golden-900-night",
-};
+const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
+  variants: {
+    size: {
+      mini: "s-rounded-md s-min-h-5 s-text-xs s-font-medium s-px-1.5 s-py-1 s-gap-0.5",
+      xs: "s-rounded-lg s-min-h-7 s-heading-xs s-px-3 s-gap-1",
+      sm: "s-rounded-xl s-min-h-9 s-heading-sm s-px-4 s-gap-1.5",
+    },
+    color: {
+      primary: cn(
+        "s-bg-muted-background s-border-border",
+        "s-text-primary-900",
+        "dark:s-bg-muted-background-night dark:s-border-border-night",
+        "dark:s-text-primary-900-night"
+      ),
+      highlight: cn(
+        "s-bg-highlight-100 s-border-highlight-200",
+        "s-text-highlight-900",
+        "dark:s-bg-highlight-100-night dark:s-border-highlight-200-night",
+        "dark:s-text-highlight-900-night"
+      ),
+      success: cn(
+        "s-bg-success-100 s-border-success-200",
+        "s-text-success-900",
+        "dark:s-bg-success-100-night dark:s-border-success-200-night",
+        "dark:s-text-success-900-night"
+      ),
+      info: cn(
+        "s-bg-info-100 s-border-info-200",
+        "s-text-info-900",
+        "dark:s-bg-info-100-night dark:s-border-info-200-night",
+        "dark:s-text-info-900-night"
+      ),
+      warning: cn(
+        "s-bg-warning-100 s-border-warning-200",
+        "s-text-warning-900",
+        "dark:s-bg-warning-100-night dark:s-border-warning-200-night",
+        "dark:s-text-warning-900-night"
+      ),
+      green: cn(
+        "s-bg-green-100 s-border-green-200",
+        "s-text-green-900",
+        "dark:s-bg-green-100-night dark:s-border-green-200-night",
+        "dark:s-text-green-900-night"
+      ),
+      blue: cn(
+        "s-bg-blue-100 s-border-blue-200",
+        "s-text-blue-900",
+        "dark:s-bg-blue-100-night dark:s-border-blue-200-night",
+        "dark:s-text-blue-900-night"
+      ),
+      rose: cn(
+        "s-bg-rose-100 s-border-rose-200",
+        "s-text-rose-900",
+        "dark:s-bg-rose-100-night dark:s-border-rose-200-night",
+        "dark:s-text-rose-900-night"
+      ),
+      golden: cn(
+        "s-bg-golden-100 s-border-golden-200",
+        "s-text-golden-900",
+        "dark:s-bg-golden-100-night dark:s-border-golden-200-night",
+        "dark:s-text-golden-900-night"
+      ),
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+    color: "primary",
+  },
+});
 
 const closeIconVariants: Record<ChipColorType, string> = {
   primary: cn(
@@ -125,19 +138,6 @@ const closeIconVariants: Record<ChipColorType, string> = {
   ),
 };
 
-const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
-  variants: {
-    size: sizeVariants,
-    text: textVariants,
-    background: backgroundVariants,
-  },
-  defaultVariants: {
-    size: "xs",
-    text: "primary",
-    background: "primary",
-  },
-});
-
 type ChipBaseProps = {
   size?: ChipSizeType;
   color?: ChipColorType;
@@ -187,7 +187,7 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
     const chipContent = (
       <div
         className={cn(
-          chipVariants({ size, background: color, text: color }),
+          chipVariants({ size, color }),
           className,
           onClick && "s-cursor-pointer"
         )}

package/src/components/IconButton.tsx

@@ -2,78 +2,73 @@ import { cva } from "class-variance-authority";
 import React, { ComponentType, MouseEventHandler } from "react";
 
 import { Tooltip } from "@sparkle/components";
-import { Button, ButtonVariantType } from "@sparkle/components/Button";
+import { Button, BUTTON_VARIANTS } from "@sparkle/components/Button";
 import { cn } from "@sparkle/lib/utils";
 
-type IconButtonProps = {
-  variant?: React.ComponentProps<typeof Button>["variant"];
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  size?: React.ComponentProps<typeof Button>["size"];
-  tooltip?: string;
-  tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
-  icon: ComponentType;
-  className?: string;
-  disabled?: boolean;
-};
-
-const styleVariants: Record<ButtonVariantType, string> = {
-  primary: cn(
-    "s-text-highlight-500 dark:s-text-highlight-500-night",
-    "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
-    "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
-    "s-text-primary-500 dark:s-text-primary-500-night"
-  ),
-  warning: cn(
-    "s-text-warning-500 dark:s-text-warning-500-night",
-    "hover:s-text-warning-400 dark:hover:s-text-warning-500-night",
-    "active:s-text-warning-600 dark:active:s-text-warning-600-night",
-    "s-text-primary-500 dark:s-text-primary-500-night"
-  ),
-  highlight: cn(
-    "s-text-foreground dark:s-text-foreground-night",
-    "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
-    "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
-    "s-text-primary-500 dark:s-text-primary-500-night"
-  ),
-  outline: cn(
-    "s-text-primary-700 dark:s-text-primary-700-night",
-    "hover:s-text-primary-400 dark:hover:s-text-primary-400-night",
-    "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
-    "s-text-primary-500 dark:s-text-primary-500-night"
-  ),
-  ghost: cn(
-    "s-text-white dark:s-text-primary-950",
-    "hover:s-text-primary-100 dark:hover:s-text-primary-100-night",
-    "active:s-text-primary-200 dark:active:s-text-primary-200-night",
-    "s-text-white/50 dark:s-text-primary-950/50"
-  ),
-  "ghost-secondary": cn(
-    "s-text-white",
-    "hover:s-text-primary-100 dark:hover:s-text-primary-100-night",
-    "active:s-text-primary-200 dark:active:s-text-primary-200-night",
-    "s-text-white/50 dark:s-text-primary-950/50"
-  ),
-};
+export const ICON_BUTTON_VARIANTS = BUTTON_VARIANTS;
+export type IconButtonVariantType = (typeof ICON_BUTTON_VARIANTS)[number];
 
 const iconButtonVariants = cva(
   "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110",
   {
     variants: {
-      variant: styleVariants,
-      disabled: {
-        true: cn(
-          "s-text-primary-500 dark:s-text-primary-500-night",
-          "s-cursor-default hover:s-scale-100"
+      variant: {
+        primary: cn(
+          "s-text-highlight-500 dark:s-text-highlight-500-night",
+          "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
+          "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
+          "s-text-primary-500 dark:s-text-primary-500-night"
+        ),
+        warning: cn(
+          "s-text-warning-500 dark:s-text-warning-500-night",
+          "hover:s-text-warning-400 dark:hover:s-text-warning-500-night",
+          "active:s-text-warning-600 dark:active:s-text-warning-600-night",
+          "s-text-primary-500 dark:s-text-primary-500-night"
+        ),
+        highlight: cn(
+          "s-text-foreground dark:s-text-foreground-night",
+          "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
+          "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
+          "s-text-primary-500 dark:s-text-primary-500-night"
+        ),
+        outline: cn(
+          "s-text-primary-700 dark:s-text-primary-700-night",
+          "hover:s-text-primary-400 dark:hover:s-text-primary-400-night",
+          "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
+          "s-text-primary-500 dark:s-text-primary-500-night"
+        ),
+        ghost: cn(
+          "s-text-white dark:s-text-primary-950",
+          "hover:s-text-primary-100 dark:hover:s-text-primary-100-night",
+          "active:s-text-primary-200 dark:active:s-text-primary-200-night",
+          "s-text-white/50 dark:s-text-primary-950/50"
+        ),
+        "ghost-secondary": cn(
+          "s-text-white",
+          "hover:s-text-primary-100 dark:hover:s-text-primary-100-night",
+          "active:s-text-primary-200 dark:active:s-text-primary-200-night",
+          "s-text-white/50 dark:s-text-primary-950/50"
         ),
       },
     },
     defaultVariants: {
       variant: "outline",
-      disabled: false,
     },
   }
 );
 
+export interface IconButtonProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof Button>,
+    "label" | "variant"
+  > {
+  variant?: IconButtonVariantType;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tooltip?: string;
+  tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
+  icon: ComponentType;
+}
+
 const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   (
     {
@@ -90,16 +85,26 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   ) => (
     <Button
       tooltip={tooltip}
-      className={cn(iconButtonVariants({ variant, disabled }), className)}
+      className={cn(
+        iconButtonVariants({ variant }),
+        disabled &&
+          cn(
+            "s-text-primary-500 dark:s-text-primary-500-night",
+            "s-cursor-default hover:s-scale-100"
+          ),
+        className
+      )}
       onClick={onClick}
       disabled={disabled}
       ref={ref}
       size={size}
       icon={icon}
-      variant={null}
+      variant="ghost"
       {...props}
     />
   )
 );
 
-export { IconButton };
+IconButton.displayName = "IconButton";
+
+export { IconButton, iconButtonVariants };

package/src/components/Label.tsx

@@ -1,33 +1,50 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "@sparkle/lib/utils";
 
+const labelVariants = cva(
+  cn(
+    "s-heading-sm",
+    "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70"
+  ),
+  {
+    variants: {
+      variant: {
+        default: cn("s-text-foreground", "dark:s-text-foreground-night"),
+        muted: cn(
+          "s-text-muted-foreground",
+          "dark:s-text-muted-foreground-night"
+        ),
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
 export interface LabelProps
-  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
+    VariantProps<typeof labelVariants> {
   isMuted?: boolean;
 }
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   LabelProps
->(({ className, isMuted = false, ...props }, ref) => {
-  const labelVariants = cn(
-    "s-heading-sm",
-    isMuted
-      ? "s-text-muted-foreground dark:s-text-muted-foreground-night"
-      : "s-text-foreground dark:s-text-foreground-night",
-    "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70"
-  );
+>(({ className, variant, isMuted = false, ...props }, ref) => {
+  const effectiveVariant = isMuted ? "muted" : variant;
 
   return (
     <LabelPrimitive.Root
       ref={ref}
-      className={cn(labelVariants, className)}
+      className={cn(labelVariants({ variant: effectiveVariant }), className)}
       {...props}
     />
   );
 });
 Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label };
+export { Label, labelVariants };

package/src/components/Notification.tsx

@@ -23,6 +23,16 @@ const NotificationsContext = React.createContext<(n: NotificationType) => void>(
   (n) => n
 );
 
+const notificationVariants = cva("s-pt-0.5", {
+  variants: {
+    type: {
+      success: "s-text-success-600 dark:s-text-success-400-night",
+      error: "s-text-warning-500 dark:s-text-warning-500-night",
+      info: "s-text-info-600 dark:s-text-info-400-night",
+    },
+  },
+});
+
 function NotificationContent({
   type,
   title,
@@ -42,16 +52,6 @@ function NotificationContent({
     }
   })();
 
-  const variantClassName = cva("s-pt-0.5", {
-    variants: {
-      type: {
-        success: "s-text-success-600 dark:s-text-success-400-night",
-        error: "s-text-warning-500 dark:s-text-warning-500-night",
-        info: "s-text-info-600 dark:s-text-info-400-night",
-      },
-    },
-  });
-
   return (
     <div
       className={cn(
@@ -65,14 +65,14 @@ function NotificationContent({
       <Icon
         size="lg"
         visual={icon}
-        className={variantClassName({ type })}
+        className={notificationVariants({ type })}
         aria-hidden="true"
       />
       <div className="s-flex s-min-w-0 s-flex-grow s-flex-col">
         <div
           className={cn(
             "s-heading-md s-line-clamp-1 s-h-6 s-grow",
-            variantClassName({ type })
+            notificationVariants({ type })
           )}
         >
           {title || type}

package/src/stories/Card.stories.tsx

@@ -3,8 +3,8 @@ import React, { ComponentType } from "react";
 
 import { Card, Icon } from "@sparkle/components";
 import {
+  CARD_SIZES,
   CARD_VARIANTS,
-  CARD_VARIANTS_SIZES,
   CardActionButton,
   CardGrid,
 } from "@sparkle/components/Card";
@@ -28,7 +28,7 @@ export default meta;
 
 export const Demo = () => {
   const variants = CARD_VARIANTS;
-  const sizes = CARD_VARIANTS_SIZES;
+  const sizes = CARD_SIZES;
 
   return (
     <div className="s-flex s-flex-col s-gap-8 s-text-foreground dark:s-text-foreground-night">

package/src/styles/global.css

@@ -50,4 +50,4 @@
     background-color: theme("colors.black"); /* Dark mode base color */
     --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
   }
-}
+}