@saasflare/ui 3.0.2 → 3.1.1

package/dist/entries/command.js

@@ -1,26 +1,33 @@
 "use client";
 'use strict';
 
-var chunkXXT4HKND_js = require('../chunk-XXT4HKND.js');
-require('../chunk-CWW36RYE.js');
-var chunkM3ICCPCU_js = require('../chunk-M3ICCPCU.js');
+var chunk4BOMMZEY_js = require('../chunk-4BOMMZEY.js');
+require('../chunk-FT66KYRN.js');
+var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
 var cmdk = require('cmdk');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Command({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command,
     {
+      ...props,
       "data-slot": "command",
-      className: chunkM3ICCPCU_js.cn(
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: chunkD5LKWKG7_js.cn(
         "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -31,15 +38,15 @@ function CommandDialog({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkXXT4HKND_js.Dialog, { ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(chunkXXT4HKND_js.DialogHeader, { className: "sr-only", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXXT4HKND_js.DialogTitle, { children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkXXT4HKND_js.DialogDescription, { children: description })
+  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 })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkXXT4HKND_js.DialogContent,
+      chunk4BOMMZEY_js.DialogContent,
       {
-        className: chunkM3ICCPCU_js.cn("overflow-hidden p-0", className),
+        className: chunkD5LKWKG7_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 })
       }
     )
@@ -60,7 +67,7 @@ function CommandInput({
           cmdk.Command.Input,
           {
             "data-slot": "command-input",
-            className: chunkM3ICCPCU_js.cn(
+            className: chunkD5LKWKG7_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
             ),
@@ -79,7 +86,7 @@ function CommandList({
     cmdk.Command.List,
     {
       "data-slot": "command-list",
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
         className
       ),
@@ -107,7 +114,7 @@ function CommandGroup({
     cmdk.Command.Group,
     {
       "data-slot": "command-group",
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_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
       ),
@@ -123,7 +130,7 @@ function CommandSeparator({
     cmdk.Command.Separator,
     {
       "data-slot": "command-separator",
-      className: chunkM3ICCPCU_js.cn("-mx-1 h-px bg-border", className),
+      className: chunkD5LKWKG7_js.cn("-mx-1 h-px bg-border", className),
       ...props
     }
   );
@@ -136,7 +143,7 @@ function CommandItem({
     cmdk.Command.Item,
     {
       "data-slot": "command-item",
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_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
       ),
@@ -152,7 +159,7 @@ function CommandShortcut({
     "span",
     {
       "data-slot": "command-shortcut",
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       ),

package/dist/entries/command.mjs

@@ -1,24 +1,31 @@
 "use client";
-import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent } from '../chunk-2DNKXA5A.mjs';
-import '../chunk-W53NTFPB.mjs';
-import { cn } from '../chunk-BIU2MD4T.mjs';
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent } from '../chunk-RW2S3KNB.mjs';
+import '../chunk-EJHYM2HP.mjs';
+import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
 import { Command as Command$1 } from 'cmdk';
 import { SearchIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function Command({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     Command$1,
     {
+      ...props,
       "data-slot": "command",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         className
-      ),
-      ...props
+      )
     }
   );
 }

package/dist/entries/drawer.d.mts

@@ -1,13 +1,16 @@
 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';
 
 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;
 declare function DrawerPortal({ ...props }: React.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
 declare function DrawerClose({ ...props }: React.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
+interface DrawerContentProps extends Omit<React.ComponentProps<typeof Drawer$1.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function DrawerContent({ className, children, surface, radius, animated, ...props }: DrawerContentProps): react_jsx_runtime.JSX.Element;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;

package/dist/entries/drawer.d.ts

@@ -1,13 +1,16 @@
 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';
 
 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;
 declare function DrawerPortal({ ...props }: React.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
 declare function DrawerClose({ ...props }: React.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
+interface DrawerContentProps extends Omit<React.ComponentProps<typeof Drawer$1.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function DrawerContent({ className, children, surface, radius, animated, ...props }: DrawerContentProps): react_jsx_runtime.JSX.Element;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;

package/dist/entries/drawer.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkM3ICCPCU_js = require('../chunk-M3ICCPCU.js');
+var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.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: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_js.cn(
         "fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px]",
         className
       ),
@@ -44,19 +44,26 @@ function DrawerOverlay({
 function DrawerContent({
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
       vaul.Drawer.Content,
       {
+        ...props,
         "data-slot": "drawer-content",
-        className: chunkM3ICCPCU_js.cn(
+        "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
         ),
-        ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-4 h-1.5 w-12 shrink-0 rounded-full bg-muted" }),
           children
@@ -70,7 +77,7 @@ function DrawerHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-header",
-      className: chunkM3ICCPCU_js.cn("flex flex-col gap-1.5 p-4", className),
+      className: chunkD5LKWKG7_js.cn("flex flex-col gap-1.5 p-4", className),
       ...props
     }
   );
@@ -80,7 +87,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: chunkM3ICCPCU_js.cn("mt-auto flex flex-col gap-2 p-4", className),
+      className: chunkD5LKWKG7_js.cn("mt-auto flex flex-col gap-2 p-4", className),
       ...props
     }
   );
@@ -93,7 +100,7 @@ function DrawerTitle({
     vaul.Drawer.Title,
     {
       "data-slot": "drawer-title",
-      className: chunkM3ICCPCU_js.cn("text-lg leading-none font-semibold", className),
+      className: chunkD5LKWKG7_js.cn("text-lg leading-none font-semibold", className),
       ...props
     }
   );
@@ -106,7 +113,7 @@ function DrawerDescription({
     vaul.Drawer.Description,
     {
       "data-slot": "drawer-description",
-      className: chunkM3ICCPCU_js.cn("text-sm text-muted-foreground", className),
+      className: chunkD5LKWKG7_js.cn("text-sm text-muted-foreground", className),
       ...props
     }
   );

package/dist/entries/drawer.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from '../chunk-BIU2MD4T.mjs';
+import { cn, useSaasflareProps } from '../chunk-WRONFPRI.mjs';
 import { Drawer as Drawer$1 } from 'vaul';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -42,19 +42,26 @@ function DrawerOverlay({
 function DrawerContent({
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
     /* @__PURE__ */ jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsxs(
       Drawer$1.Content,
       {
+        ...props,
         "data-slot": "drawer-content",
+        "data-surface": sf.surface,
+        "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",
           className
         ),
-        ...props,
         children: [
           /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-1.5 w-12 shrink-0 rounded-full bg-muted" }),
           children

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

@@ -1,10 +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';
 
-declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+type InputOTPProps = React.ComponentProps<typeof OTPInput> & SaasflareComponentProps & {
     containerClassName?: string;
-}): react_jsx_runtime.JSX.Element;
+};
+declare function InputOTP({ className, containerClassName, surface, radius, animated, ...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,10 +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';
 
-declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+type InputOTPProps = React.ComponentProps<typeof OTPInput> & SaasflareComponentProps & {
     containerClassName?: string;
-}): react_jsx_runtime.JSX.Element;
+};
+declare function InputOTP({ className, containerClassName, surface, radius, animated, ...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,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 inputOtp = require('input-otp');
 var lucideReact = require('lucide-react');
@@ -30,18 +30,25 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function InputOTP({
   className,
   containerClassName,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxRuntime.jsx(
     inputOtp.OTPInput,
     {
+      ...props,
       "data-slot": "input-otp",
-      containerClassName: chunkM3ICCPCU_js.cn(
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      containerClassName: chunkD5LKWKG7_js.cn(
         "flex items-center gap-2 has-disabled:opacity-50",
         containerClassName
       ),
-      className: chunkM3ICCPCU_js.cn("disabled:cursor-not-allowed", className),
-      ...props
+      className: chunkD5LKWKG7_js.cn("disabled:cursor-not-allowed", className)
     }
   );
 }
@@ -50,7 +57,7 @@ function InputOTPGroup({ className, ...props }) {
     "div",
     {
       "data-slot": "input-otp-group",
-      className: chunkM3ICCPCU_js.cn("flex items-center", className),
+      className: chunkD5LKWKG7_js.cn("flex items-center", className),
       ...props
     }
   );
@@ -67,7 +74,7 @@ function InputOTPSlot({
     {
       "data-slot": "input-otp-slot",
       "data-active": isActive,
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_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
       ),

package/dist/entries/input-otp.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 { OTPInput, OTPInputContext } from 'input-otp';
 import { MinusIcon } from 'lucide-react';
@@ -8,18 +8,25 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function InputOTP({
   className,
   containerClassName,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     OTPInput,
     {
+      ...props,
       "data-slot": "input-otp",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       containerClassName: cn(
         "flex items-center gap-2 has-disabled:opacity-50",
         containerClassName
       ),
-      className: cn("disabled:cursor-not-allowed", className),
-      ...props
+      className: cn("disabled:cursor-not-allowed", className)
     }
   );
 }

package/dist/entries/resizable.d.mts

@@ -1,7 +1,9 @@
 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';
 
-declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): react_jsx_runtime.JSX.Element;
+type ResizablePanelGroupProps = ResizablePrimitive.GroupProps & SaasflareComponentProps;
+declare function ResizablePanelGroup({ className, surface, radius, animated, ...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,7 +1,9 @@
 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';
 
-declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): react_jsx_runtime.JSX.Element;
+type ResizablePanelGroupProps = ResizablePrimitive.GroupProps & SaasflareComponentProps;
+declare function ResizablePanelGroup({ className, surface, radius, animated, ...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,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkM3ICCPCU_js = require('../chunk-M3ICCPCU.js');
+var chunkD5LKWKG7_js = require('../chunk-D5LKWKG7.js');
 var lucideReact = require('lucide-react');
 var ResizablePrimitive = require('react-resizable-panels');
 var jsxRuntime = require('react/jsx-runtime');
@@ -28,17 +28,24 @@ var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrim
 
 function ResizablePanelGroup({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxRuntime.jsx(
     ResizablePrimitive__namespace.Group,
     {
+      ...props,
       "data-slot": "resizable-panel-group",
-      className: chunkM3ICCPCU_js.cn(
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: chunkD5LKWKG7_js.cn(
         "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -54,7 +61,7 @@ function ResizableHandle({
     ResizablePrimitive__namespace.Separator,
     {
       "data-slot": "resizable-handle",
-      className: chunkM3ICCPCU_js.cn(
+      className: chunkD5LKWKG7_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
       ),

package/dist/entries/resizable.mjs

@@ -1,22 +1,29 @@
 "use client";
-import { cn } from '../chunk-BIU2MD4T.mjs';
+import { useSaasflareProps, cn } from '../chunk-WRONFPRI.mjs';
 import { GripVerticalIcon } from 'lucide-react';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import { jsx } from 'react/jsx-runtime';
 
 function ResizablePanelGroup({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     ResizablePrimitive.Group,
     {
+      ...props,
       "data-slot": "resizable-panel-group",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
-      ),
-      ...props
+      )
     }
   );
 }