@dust-tt/sparkle 0.3.4 → 0.3.6

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/icons/actions/Frame.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgFrame = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M21 3.107v18H3v-18h18Zm-9.811 10.158L5 14.355v4.752h7.218l-1.03-5.842ZM19 5.107h-7.219l2.468 14H19v-14Zm-9.25 0H5v7.218l5.841-1.03L9.75 5.108Z"
+    />
+  </svg>
+);
+export default SvgFrame;

package/src/icons/actions/index.ts

@@ -52,6 +52,7 @@ export { default as ActionFlightTakeoffIcon } from "./FlightTakeoff";
 export { default as ActionFolderIcon } from "./Folder";
 export { default as ActionFolderAddIcon } from "./FolderAdd";
 export { default as ActionFolderOpenIcon } from "./FolderOpen";
+export { default as ActionFrameIcon } from "./Frame";
 export { default as ActionFullscreenIcon } from "./Fullscreen";
 export { default as ActionFullscreenExitIcon } from "./FullscreenExit";
 export { default as ActionGamepadIcon } from "./Gamepad";

package/src/icons/src/actions/frame.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 3.10669C21 9.10669 21 15.1067 21 21.1067H3.00003C2.9995 15.1067 2.9995 9.10669 3.00003 3.10669H21ZM11.1888 13.2651L4.99999 14.3557V19.1067H12.218L11.1888 13.2651ZM19 5.10669H11.781L14.249 19.1067H19V5.10669ZM9.74999 5.10669H4.99999V12.3247L10.8415 11.2955L9.74999 5.10669Z" fill="#111418"/>
+</svg>

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 */
   }
-}
+}