@saasflare/ui 3.1.1 → 3.2.0

package/dist/entries/chart.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
+var chunk2GOPD64T_js = require('../chunk-2GOPD64T.js');
 var React = require('react');
 var RechartsPrimitive = require('recharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -46,7 +46,7 @@ function ChartContainer({
   animated,
   ...props
 }) {
-  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
+  const sf = chunk2GOPD64T_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(
@@ -57,7 +57,7 @@ function ChartContainer({
       "data-animated": String(sf.animated),
       "data-slot": "chart",
       "data-chart": chartId,
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_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
       ),
@@ -120,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: chunkD5LKWKG7_js.cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk2GOPD64T_js.cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkD5LKWKG7_js.cn("font-medium", labelClassName), children: value });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk2GOPD64T_js.cn("font-medium", labelClassName), children: value });
   }, [
     label,
     labelFormatter,
@@ -142,7 +142,7 @@ function ChartTooltipContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_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
       ),
@@ -155,7 +155,7 @@ function ChartTooltipContent({
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: chunkD5LKWKG7_js.cn(
+              className: chunk2GOPD64T_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"
               ),
@@ -163,7 +163,7 @@ function ChartTooltipContent({
                 itemConfig?.icon ? /* @__PURE__ */ jsxRuntime.jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: chunkD5LKWKG7_js.cn(
+                    className: chunk2GOPD64T_js.cn(
                       "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
@@ -181,7 +181,7 @@ function ChartTooltipContent({
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: chunkD5LKWKG7_js.cn(
+                    className: chunk2GOPD64T_js.cn(
                       "flex flex-1 justify-between leading-none",
                       nestLabel ? "items-end" : "items-center"
                     ),
@@ -218,7 +218,7 @@ function ChartLegendContent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "flex items-center justify-center gap-4",
         verticalAlign === "top" ? "pb-3" : "pt-3",
         className
@@ -229,7 +229,7 @@ function ChartLegendContent({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: chunkD5LKWKG7_js.cn(
+            className: chunk2GOPD64T_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 { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
+import { useSaasflareProps, cn } from '../chunk-RMQBB72G.mjs';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/entries/command.d.mts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Command as Command$1 } from 'cmdk';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
-import { D as Dialog } from '../dialog-CcaHMAsS.mjs';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.mjs';
+import { D as Dialog } from '../dialog-Cr0becOL.mjs';
 import '@radix-ui/react-dialog';
 
 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 Command({ className, surface, radius, animated, iconWeight, ...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,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Command as Command$1 } from 'cmdk';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
-import { D as Dialog } from '../dialog-BmY55WSX.js';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.js';
+import { D as Dialog } from '../dialog-CZRwrqDa.js';
 import '@radix-ui/react-dialog';
 
 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 Command({ className, surface, radius, animated, iconWeight, ...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.js

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var chunk4BOMMZEY_js = require('../chunk-4BOMMZEY.js');
-require('../chunk-FT66KYRN.js');
-var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
+var chunkJC7EIEGI_js = require('../chunk-JC7EIEGI.js');
+require('../chunk-ITALEYDI.js');
+var chunkR3AVBLJ3_js = require('../chunk-R3AVBLJ3.js');
+var chunk2GOPD64T_js = require('../chunk-2GOPD64T.js');
 var cmdk = require('cmdk');
-var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Command({
@@ -13,9 +13,10 @@ function Command({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command,
     {
@@ -24,7 +25,7 @@ function Command({
       "data-surface": sf.surface,
       "data-radius": sf.radius,
       "data-animated": String(sf.animated),
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         className
       )
@@ -38,15 +39,15 @@ function CommandDialog({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunk4BOMMZEY_js.Dialog, { ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(chunk4BOMMZEY_js.DialogHeader, { className: "sr-only", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunk4BOMMZEY_js.DialogTitle, { children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunk4BOMMZEY_js.DialogDescription, { children: description })
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkJC7EIEGI_js.Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkJC7EIEGI_js.DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkJC7EIEGI_js.DialogTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkJC7EIEGI_js.DialogDescription, { children: description })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk4BOMMZEY_js.DialogContent,
+      chunkJC7EIEGI_js.DialogContent,
       {
-        className: chunkD5LKWKG7_js.cn("overflow-hidden p-0", className),
+        className: chunk2GOPD64T_js.cn("overflow-hidden p-0", className),
         children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
       }
     )
@@ -56,18 +57,19 @@ function CommandInput({
   className,
   ...props
 }) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.MagnifyingGlassIcon, { weight: sf.iconWeight, className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           cmdk.Command.Input,
           {
             "data-slot": "command-input",
-            className: chunkD5LKWKG7_js.cn(
+            className: chunk2GOPD64T_js.cn(
               "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
@@ -86,7 +88,7 @@ function CommandList({
     cmdk.Command.List,
     {
       "data-slot": "command-list",
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
         className
       ),
@@ -114,7 +116,7 @@ function CommandGroup({
     cmdk.Command.Group,
     {
       "data-slot": "command-group",
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className
       ),
@@ -130,7 +132,7 @@ function CommandSeparator({
     cmdk.Command.Separator,
     {
       "data-slot": "command-separator",
-      className: chunkD5LKWKG7_js.cn("-mx-1 h-px bg-border", className),
+      className: chunk2GOPD64T_js.cn("-mx-1 h-px bg-border", className),
       ...props
     }
   );
@@ -143,7 +145,7 @@ function CommandItem({
     cmdk.Command.Item,
     {
       "data-slot": "command-item",
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       ),
@@ -159,7 +161,7 @@ function CommandShortcut({
     "span",
     {
       "data-slot": "command-shortcut",
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       ),

package/dist/entries/command.mjs

@@ -1,9 +1,9 @@
 "use client";
-import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent } from '../chunk-RW2S3KNB.mjs';
-import '../chunk-EJHYM2HP.mjs';
-import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent } from '../chunk-5C65JNGY.mjs';
+import '../chunk-OZAWULTM.mjs';
+import { MagnifyingGlassIcon } from '../chunk-GI6VN7XU.mjs';
+import { useSaasflareProps, cn } from '../chunk-RMQBB72G.mjs';
 import { Command as Command$1 } from 'cmdk';
-import { SearchIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function Command({
@@ -11,9 +11,10 @@ function Command({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(
     Command$1,
     {
@@ -54,13 +55,14 @@ function CommandInput({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(MagnifyingGlassIcon, { weight: sf.iconWeight, className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ jsx(
           Command$1.Input,
           {

package/dist/entries/drawer.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Drawer as Drawer$1 } from 'vaul';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.mjs';
 
 declare function Drawer({ ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
 declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;

package/dist/entries/drawer.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Drawer as Drawer$1 } from 'vaul';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.js';
 
 declare function Drawer({ ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
 declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;

package/dist/entries/drawer.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
+var chunk2GOPD64T_js = require('../chunk-2GOPD64T.js');
 var vaul = require('vaul');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -33,7 +33,7 @@ function DrawerOverlay({
     vaul.Drawer.Overlay,
     {
       "data-slot": "drawer-overlay",
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px]",
         className
       ),
@@ -49,7 +49,7 @@ function DrawerContent({
   animated,
   ...props
 }) {
-  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -60,8 +60,8 @@ function DrawerContent({
         "data-surface": sf.surface,
         "data-radius": sf.radius,
         "data-animated": String(sf.animated),
-        className: chunkD5LKWKG7_js.cn(
-          "group/drawer-content fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[96dvh] flex-col rounded-t-lg border-t bg-background",
+        className: chunk2GOPD64T_js.cn(
+          "group/drawer-content fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[96dvh] flex-col rounded-t-lg border-t surface-card",
           className
         ),
         children: [
@@ -77,7 +77,7 @@ function DrawerHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-header",
-      className: chunkD5LKWKG7_js.cn("flex flex-col gap-1.5 p-4", className),
+      className: chunk2GOPD64T_js.cn("flex flex-col gap-1.5 p-4", className),
       ...props
     }
   );
@@ -87,7 +87,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: chunkD5LKWKG7_js.cn("mt-auto flex flex-col gap-2 p-4", className),
+      className: chunk2GOPD64T_js.cn("mt-auto flex flex-col gap-2 p-4", className),
       ...props
     }
   );
@@ -100,7 +100,7 @@ function DrawerTitle({
     vaul.Drawer.Title,
     {
       "data-slot": "drawer-title",
-      className: chunkD5LKWKG7_js.cn("text-lg leading-none font-semibold", className),
+      className: chunk2GOPD64T_js.cn("text-lg leading-none font-semibold", className),
       ...props
     }
   );
@@ -113,7 +113,7 @@ function DrawerDescription({
     vaul.Drawer.Description,
     {
       "data-slot": "drawer-description",
-      className: chunkD5LKWKG7_js.cn("text-sm text-muted-foreground", className),
+      className: chunk2GOPD64T_js.cn("text-sm text-muted-foreground", className),
       ...props
     }
   );

package/dist/entries/drawer.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { cn, useSaasflareProps } from '../chunk-WRONFPRI.mjs';
+import { cn, useSaasflareProps } from '../chunk-RMQBB72G.mjs';
 import { Drawer as Drawer$1 } from 'vaul';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -59,7 +59,7 @@ function DrawerContent({
         "data-radius": sf.radius,
         "data-animated": String(sf.animated),
         className: cn(
-          "group/drawer-content fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[96dvh] flex-col rounded-t-lg border-t bg-background",
+          "group/drawer-content fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[96dvh] flex-col rounded-t-lg border-t surface-card",
           className
         ),
         children: [

package/dist/entries/input-otp.d.mts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OTPInput } from 'input-otp';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.mjs';
 
 type InputOTPProps = React.ComponentProps<typeof OTPInput> & SaasflareComponentProps & {
     containerClassName?: string;
 };
-declare function InputOTP({ className, containerClassName, surface, radius, animated, ...props }: InputOTPProps): react_jsx_runtime.JSX.Element;
+declare function InputOTP({ className, containerClassName, surface, radius, animated, iconWeight, ...props }: InputOTPProps): react_jsx_runtime.JSX.Element;
 declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
     index: number;

package/dist/entries/input-otp.d.ts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OTPInput } from 'input-otp';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.js';
 
 type InputOTPProps = React.ComponentProps<typeof OTPInput> & SaasflareComponentProps & {
     containerClassName?: string;
 };
-declare function InputOTP({ className, containerClassName, surface, radius, animated, ...props }: InputOTPProps): react_jsx_runtime.JSX.Element;
+declare function InputOTP({ className, containerClassName, surface, radius, animated, iconWeight, ...props }: InputOTPProps): react_jsx_runtime.JSX.Element;
 declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
     index: number;

package/dist/entries/input-otp.js

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
-var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
+var chunkR3AVBLJ3_js = require('../chunk-R3AVBLJ3.js');
+var chunk2GOPD64T_js = require('../chunk-2GOPD64T.js');
 var React = require('react');
 var inputOtp = require('input-otp');
-var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -33,9 +33,10 @@ function InputOTP({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsxRuntime.jsx(
     inputOtp.OTPInput,
     {
@@ -44,11 +45,11 @@ function InputOTP({
       "data-surface": sf.surface,
       "data-radius": sf.radius,
       "data-animated": String(sf.animated),
-      containerClassName: chunkD5LKWKG7_js.cn(
+      containerClassName: chunk2GOPD64T_js.cn(
         "flex items-center gap-2 has-disabled:opacity-50",
         containerClassName
       ),
-      className: chunkD5LKWKG7_js.cn("disabled:cursor-not-allowed", className)
+      className: chunk2GOPD64T_js.cn("disabled:cursor-not-allowed", className)
     }
   );
 }
@@ -57,7 +58,7 @@ function InputOTPGroup({ className, ...props }) {
     "div",
     {
       "data-slot": "input-otp-group",
-      className: chunkD5LKWKG7_js.cn("flex items-center", className),
+      className: chunk2GOPD64T_js.cn("flex items-center", className),
       ...props
     }
   );
@@ -74,7 +75,7 @@ function InputOTPSlot({
     {
       "data-slot": "input-otp-slot",
       "data-active": isActive,
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       ),
@@ -87,7 +88,8 @@ function InputOTPSlot({
   );
 }
 function InputOTPSeparator({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinusIcon, {}) });
+  const sf = chunk2GOPD64T_js.useSaasflareProps();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.MinusIcon, { weight: sf.iconWeight }) });
 }
 
 exports.InputOTP = InputOTP;

package/dist/entries/input-otp.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
+import { MinusIcon } from '../chunk-GI6VN7XU.mjs';
+import { useSaasflareProps, cn } from '../chunk-RMQBB72G.mjs';
 import * as React from 'react';
 import { OTPInput, OTPInputContext } from 'input-otp';
-import { MinusIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function InputOTP({
@@ -11,9 +11,10 @@ function InputOTP({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(
     OTPInput,
     {
@@ -65,7 +66,8 @@ function InputOTPSlot({
   );
 }
 function InputOTPSeparator({ ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(MinusIcon, {}) });
+  const sf = useSaasflareProps();
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(MinusIcon, { weight: sf.iconWeight }) });
 }
 
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/entries/resizable.d.mts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ResizablePrimitive from 'react-resizable-panels';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.mjs';
+import 'react';
 
 type ResizablePanelGroupProps = ResizablePrimitive.GroupProps & SaasflareComponentProps;
-declare function ResizablePanelGroup({ className, surface, radius, animated, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
+declare function ResizablePanelGroup({ className, surface, radius, animated, iconWeight, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
 declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): react_jsx_runtime.JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
     withHandle?: boolean;

package/dist/entries/resizable.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ResizablePrimitive from 'react-resizable-panels';
-import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.js';
+import { d as SaasflareComponentProps } from '../use-saasflare-props-BrjMhU0U.js';
+import 'react';
 
 type ResizablePanelGroupProps = ResizablePrimitive.GroupProps & SaasflareComponentProps;
-declare function ResizablePanelGroup({ className, surface, radius, animated, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
+declare function ResizablePanelGroup({ className, surface, radius, animated, iconWeight, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
 declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): react_jsx_runtime.JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
     withHandle?: boolean;

package/dist/entries/resizable.js

@@ -1,8 +1,8 @@
 "use client";
 'use strict';
 
-var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
-var lucideReact = require('lucide-react');
+var chunkR3AVBLJ3_js = require('../chunk-R3AVBLJ3.js');
+var chunk2GOPD64T_js = require('../chunk-2GOPD64T.js');
 var ResizablePrimitive = require('react-resizable-panels');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -31,9 +31,10 @@ function ResizablePanelGroup({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsxRuntime.jsx(
     ResizablePrimitive__namespace.Group,
     {
@@ -42,7 +43,7 @@ function ResizablePanelGroup({
       "data-surface": sf.surface,
       "data-radius": sf.radius,
       "data-animated": String(sf.animated),
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )
@@ -57,16 +58,17 @@ function ResizableHandle({
   className,
   ...props
 }) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ResizablePrimitive__namespace.Separator,
     {
       "data-slot": "resizable-handle",
-      className: chunkD5LKWKG7_js.cn(
+      className: chunk2GOPD64T_js.cn(
         "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVerticalIcon, { className: "size-2.5" }) })
+      children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.DotsSixVerticalIcon, { weight: sf.iconWeight, className: "size-2.5" }) })
     }
   );
 }