@saasflare/ui 3.0.2 → 3.1.1

package/dist/entries/calendar.d.ts

@@ -1,13 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { DayPicker, DayButton } from 'react-day-picker';
-import { B as Button } from '../button-DUQJ0X7e.js';
+import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
+import { B as Button } from '../button-0Bdl7Nqm.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+type CalendarProps = React.ComponentProps<typeof DayPicker> & SaasflareComponentProps & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}): react_jsx_runtime.JSX.Element;
+};
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, surface, radius, animated, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
 
 export { Calendar, CalendarDayButton };

package/dist/entries/calendar.js

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
-var chunkYAE5VBWJ_js = require('../chunk-YAE5VBWJ.js');
-require('../chunk-CWW36RYE.js');
-var chunkM3ICCPCU_js = require('../chunk-M3ICCPCU.js');
+var chunkDNLCSV5M_js = require('../chunk-DNLCSV5M.js');
+require('../chunk-FT66KYRN.js');
+var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
 var React = require('react');
 var lucideReact = require('lucide-react');
 var reactDayPicker = require('react-day-picker');
@@ -37,14 +37,22 @@ function Calendar({
   buttonVariant = "ghost",
   formatters,
   components,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactDayPicker.DayPicker,
     {
+      "data-slot": "calendar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       showOutsideDays,
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
@@ -56,86 +64,86 @@ function Calendar({
         ...formatters
       },
       classNames: {
-        root: chunkM3ICCPCU_js.cn("w-fit", defaultClassNames.root),
-        months: chunkM3ICCPCU_js.cn(
+        root: chunkD5LKWKG7_js.cn("w-fit", defaultClassNames.root),
+        months: chunkD5LKWKG7_js.cn(
           "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: chunkM3ICCPCU_js.cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: chunkM3ICCPCU_js.cn(
+        month: chunkD5LKWKG7_js.cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: chunkD5LKWKG7_js.cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
-        button_previous: chunkM3ICCPCU_js.cn(
-          chunkYAE5VBWJ_js.buttonVariants({ variant: buttonVariant }),
+        button_previous: chunkD5LKWKG7_js.cn(
+          chunkDNLCSV5M_js.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
-        button_next: chunkM3ICCPCU_js.cn(
-          chunkYAE5VBWJ_js.buttonVariants({ variant: buttonVariant }),
+        button_next: chunkD5LKWKG7_js.cn(
+          chunkDNLCSV5M_js.buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
-        month_caption: chunkM3ICCPCU_js.cn(
+        month_caption: chunkD5LKWKG7_js.cn(
           "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
-        dropdowns: chunkM3ICCPCU_js.cn(
+        dropdowns: chunkD5LKWKG7_js.cn(
           "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
-        dropdown_root: chunkM3ICCPCU_js.cn(
+        dropdown_root: chunkD5LKWKG7_js.cn(
           "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
           defaultClassNames.dropdown_root
         ),
-        dropdown: chunkM3ICCPCU_js.cn(
+        dropdown: chunkD5LKWKG7_js.cn(
           "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
-        caption_label: chunkM3ICCPCU_js.cn(
+        caption_label: chunkD5LKWKG7_js.cn(
           "font-medium select-none",
           captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
-        weekdays: chunkM3ICCPCU_js.cn("flex", defaultClassNames.weekdays),
-        weekday: chunkM3ICCPCU_js.cn(
+        weekdays: chunkD5LKWKG7_js.cn("flex", defaultClassNames.weekdays),
+        weekday: chunkD5LKWKG7_js.cn(
           "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: chunkM3ICCPCU_js.cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: chunkM3ICCPCU_js.cn(
+        week: chunkD5LKWKG7_js.cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: chunkD5LKWKG7_js.cn(
           "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
-        week_number: chunkM3ICCPCU_js.cn(
+        week_number: chunkD5LKWKG7_js.cn(
           "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
-        day: chunkM3ICCPCU_js.cn(
+        day: chunkD5LKWKG7_js.cn(
           "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
           props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
           defaultClassNames.day
         ),
-        range_start: chunkM3ICCPCU_js.cn(
+        range_start: chunkD5LKWKG7_js.cn(
           "rounded-l-md bg-accent",
           defaultClassNames.range_start
         ),
-        range_middle: chunkM3ICCPCU_js.cn("rounded-none", defaultClassNames.range_middle),
-        range_end: chunkM3ICCPCU_js.cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: chunkM3ICCPCU_js.cn(
+        range_middle: chunkD5LKWKG7_js.cn("rounded-none", defaultClassNames.range_middle),
+        range_end: chunkD5LKWKG7_js.cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: chunkD5LKWKG7_js.cn(
           "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
-        outside: chunkM3ICCPCU_js.cn(
+        outside: chunkD5LKWKG7_js.cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
           defaultClassNames.outside
         ),
-        disabled: chunkM3ICCPCU_js.cn(
+        disabled: chunkD5LKWKG7_js.cn(
           "text-muted-foreground opacity-50",
           defaultClassNames.disabled
         ),
-        hidden: chunkM3ICCPCU_js.cn("invisible", defaultClassNames.hidden),
+        hidden: chunkD5LKWKG7_js.cn("invisible", defaultClassNames.hidden),
         ...classNames
       },
       components: {
@@ -145,25 +153,25 @@ function Calendar({
             {
               "data-slot": "calendar",
               ref: rootRef,
-              className: chunkM3ICCPCU_js.cn(className2),
+              className: chunkD5LKWKG7_js.cn(className2),
               ...props2
             }
           );
         },
         Chevron: ({ className: className2, orientation, ...props2 }) => {
           if (orientation === "left") {
-            return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: chunkM3ICCPCU_js.cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: chunkD5LKWKG7_js.cn("size-4", className2), ...props2 });
           }
           if (orientation === "right") {
             return /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.ChevronRightIcon,
               {
-                className: chunkM3ICCPCU_js.cn("size-4", className2),
+                className: chunkD5LKWKG7_js.cn("size-4", className2),
                 ...props2
               }
             );
           }
-          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: chunkM3ICCPCU_js.cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: chunkD5LKWKG7_js.cn("size-4", className2), ...props2 });
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props2 }) => {
@@ -187,7 +195,7 @@ function CalendarDayButton({
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkYAE5VBWJ_js.Button,
+    chunkDNLCSV5M_js.Button,
     {
       ref,
       variant: "ghost",
@@ -197,7 +205,7 @@ function CalendarDayButton({
       "data-range-start": modifiers.range_start,
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className

package/dist/entries/calendar.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { buttonVariants, Button } from '../chunk-ORB66UYT.mjs';
-import '../chunk-W53NTFPB.mjs';
-import { cn } from '../chunk-BIU2MD4T.mjs';
+import { buttonVariants, Button } from '../chunk-WPOOC2FX.mjs';
+import '../chunk-EJHYM2HP.mjs';
+import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
 import * as React from 'react';
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -15,12 +15,20 @@ function Calendar({
   buttonVariant = "ghost",
   formatters,
   components,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   const defaultClassNames = getDefaultClassNames();
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
+      "data-slot": "calendar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       showOutsideDays,
       className: cn(
         "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",

package/dist/entries/carousel.d.mts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
-import { B as Button } from '../button-DUQJ0X7e.mjs';
+import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
+import { B as Button } from '../button-Brb4BhPO.mjs';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
@@ -9,13 +10,13 @@ type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
-type CarouselProps = {
+type CarouselProps = SaasflareComponentProps & {
     opts?: CarouselOptions;
     plugins?: CarouselPlugin;
     orientation?: "horizontal" | "vertical";
     setApi?: (api: CarouselApi) => void;
 };
-declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): react_jsx_runtime.JSX.Element;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, surface, radius, animated, ...props }: Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps> & CarouselProps): react_jsx_runtime.JSX.Element;
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;

package/dist/entries/carousel.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
-import { B as Button } from '../button-DUQJ0X7e.js';
+import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
+import { B as Button } from '../button-0Bdl7Nqm.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
@@ -9,13 +10,13 @@ type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
-type CarouselProps = {
+type CarouselProps = SaasflareComponentProps & {
     opts?: CarouselOptions;
     plugins?: CarouselPlugin;
     orientation?: "horizontal" | "vertical";
     setApi?: (api: CarouselApi) => void;
 };
-declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): react_jsx_runtime.JSX.Element;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, surface, radius, animated, ...props }: Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps> & CarouselProps): react_jsx_runtime.JSX.Element;
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;

package/dist/entries/carousel.js

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
-var chunkYAE5VBWJ_js = require('../chunk-YAE5VBWJ.js');
-require('../chunk-CWW36RYE.js');
-var chunkM3ICCPCU_js = require('../chunk-M3ICCPCU.js');
+var chunkDNLCSV5M_js = require('../chunk-DNLCSV5M.js');
+require('../chunk-FT66KYRN.js');
+var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
 var React = require('react');
 var useEmblaCarousel = require('embla-carousel-react');
 var lucideReact = require('lucide-react');
@@ -47,8 +47,12 @@ function Carousel({
   plugins,
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
   const [carouselRef, api] = useEmblaCarousel__default.default(
     {
       ...opts,
@@ -110,12 +114,15 @@ function Carousel({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
+          ...props,
           onKeyDownCapture: handleKeyDown,
-          className: chunkM3ICCPCU_js.cn("relative", className),
+          className: chunkD5LKWKG7_js.cn("relative", className),
           role: "region",
           "aria-roledescription": "carousel",
           "data-slot": "carousel",
-          ...props,
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
           children
         }
       )
@@ -133,7 +140,7 @@ function CarouselContent({ className, ...props }) {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: chunkM3ICCPCU_js.cn(
+          className: chunkD5LKWKG7_js.cn(
             "flex",
             orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
             className
@@ -152,7 +159,7 @@ function CarouselItem({ className, ...props }) {
       role: "group",
       "aria-roledescription": "slide",
       "data-slot": "carousel-item",
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
         className
@@ -169,12 +176,12 @@ function CarouselPrevious({
 }) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkYAE5VBWJ_js.Button,
+    chunkDNLCSV5M_js.Button,
     {
       "data-slot": "carousel-previous",
       variant,
       size,
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "absolute size-8 rounded-full",
         orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
@@ -197,12 +204,12 @@ function CarouselNext({
 }) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkYAE5VBWJ_js.Button,
+    chunkDNLCSV5M_js.Button,
     {
       "data-slot": "carousel-next",
       variant,
       size,
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "absolute size-8 rounded-full",
         orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className

package/dist/entries/carousel.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { Button } from '../chunk-ORB66UYT.mjs';
-import '../chunk-W53NTFPB.mjs';
-import { cn } from '../chunk-BIU2MD4T.mjs';
+import { Button } from '../chunk-WPOOC2FX.mjs';
+import '../chunk-EJHYM2HP.mjs';
+import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
@@ -22,8 +22,12 @@ function Carousel({
   plugins,
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
@@ -85,12 +89,15 @@ function Carousel({
       children: /* @__PURE__ */ jsx(
         "div",
         {
+          ...props,
           onKeyDownCapture: handleKeyDown,
           className: cn("relative", className),
           role: "region",
           "aria-roledescription": "carousel",
           "data-slot": "carousel",
-          ...props,
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
           children
         }
       )

package/dist/entries/chart.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
+import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
 
 declare const THEMES: {
     readonly light: "";
@@ -18,10 +19,11 @@ type ChartConfig = {
         theme: Record<keyof typeof THEMES, string>;
     });
 };
-declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+interface ChartContainerProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}): react_jsx_runtime.JSX.Element;
+}
+declare function ChartContainer({ id, className, children, config, surface, radius, animated, ...props }: ChartContainerProps): react_jsx_runtime.JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;

package/dist/entries/chart.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
+import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
 
 declare const THEMES: {
     readonly light: "";
@@ -18,10 +19,11 @@ type ChartConfig = {
         theme: Record<keyof typeof THEMES, string>;
     });
 };
-declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+interface ChartContainerProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}): react_jsx_runtime.JSX.Element;
+}
+declare function ChartContainer({ id, className, children, config, surface, radius, animated, ...props }: ChartContainerProps): react_jsx_runtime.JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;

package/dist/entries/chart.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkM3ICCPCU_js = require('../chunk-M3ICCPCU.js');
+var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
 var React = require('react');
 var RechartsPrimitive = require('recharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -41,16 +41,23 @@ function ChartContainer({
   className,
   children,
   config,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
   const uniqueId = React__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       "data-slot": "chart",
       "data-chart": chartId,
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
         className
       ),
@@ -113,12 +120,12 @@ function ChartTooltipContent({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
     if (labelFormatter) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkM3ICCPCU_js.cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkD5LKWKG7_js.cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkM3ICCPCU_js.cn("font-medium", labelClassName), children: value });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkD5LKWKG7_js.cn("font-medium", labelClassName), children: value });
   }, [
     label,
     labelFormatter,
@@ -135,7 +142,7 @@ function ChartTooltipContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       ),
@@ -148,7 +155,7 @@ function ChartTooltipContent({
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: chunkM3ICCPCU_js.cn(
+              className: chunkD5LKWKG7_js.cn(
                 "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center"
               ),
@@ -156,7 +163,7 @@ function ChartTooltipContent({
                 itemConfig?.icon ? /* @__PURE__ */ jsxRuntime.jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: chunkM3ICCPCU_js.cn(
+                    className: chunkD5LKWKG7_js.cn(
                       "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
@@ -174,7 +181,7 @@ function ChartTooltipContent({
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: chunkM3ICCPCU_js.cn(
+                    className: chunkD5LKWKG7_js.cn(
                       "flex flex-1 justify-between leading-none",
                       nestLabel ? "items-end" : "items-center"
                     ),
@@ -211,7 +218,7 @@ function ChartLegendContent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "flex items-center justify-center gap-4",
         verticalAlign === "top" ? "pb-3" : "pt-3",
         className
@@ -222,7 +229,7 @@ function ChartLegendContent({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: chunkM3ICCPCU_js.cn(
+            className: chunkD5LKWKG7_js.cn(
               "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
             ),
             children: [

package/dist/entries/chart.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from '../chunk-BIU2MD4T.mjs';
+import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -18,13 +18,20 @@ function ChartContainer({
   className,
   children,
   config,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   const uniqueId = React.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       "data-slot": "chart",
       "data-chart": chartId,
       className: cn(

package/dist/entries/command.d.mts

@@ -1,10 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Command as Command$1 } from 'cmdk';
-import { D as Dialog } from '../dialog-CwyBJeNl.mjs';
+import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
+import { D as Dialog } from '../dialog-CcaHMAsS.mjs';
 import '@radix-ui/react-dialog';
 
-declare function Command({ className, ...props }: React.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
+interface CommandProps extends Omit<React.ComponentProps<typeof Command$1>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Command({ className, surface, radius, animated, ...props }: CommandProps): react_jsx_runtime.JSX.Element;
 declare function CommandDialog({ title, description, children, className, ...props }: React.ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;

package/dist/entries/command.d.ts

@@ -1,10 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Command as Command$1 } from 'cmdk';
-import { D as Dialog } from '../dialog-CwyBJeNl.js';
+import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
+import { D as Dialog } from '../dialog-BmY55WSX.js';
 import '@radix-ui/react-dialog';
 
-declare function Command({ className, ...props }: React.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
+interface CommandProps extends Omit<React.ComponentProps<typeof Command$1>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Command({ className, surface, radius, animated, ...props }: CommandProps): react_jsx_runtime.JSX.Element;
 declare function CommandDialog({ title, description, children, className, ...props }: React.ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;