@snapcall/design-system 1.24.3 → 1.25.1

package/dist/{chunk-CBQRH67Z.mjs → chunk-SSZ45TLL.mjs}

@@ -158,7 +158,7 @@ var CommandEmpty = React.forwardRef((_a, ref) => {
 });
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 var CommandLoading = React.forwardRef((_a, ref) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  var _b = _a, { children: _children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsx2(CommandPrimitive.Loading, __spreadProps(__spreadValues({ ref }, props), { children: /* @__PURE__ */ jsx2("div", { className: "flex justify-center p-4 text-center", children: /* @__PURE__ */ jsx2(SpinnerIcon, { className: "text-blue-700 animate-spin" }) }) }));
 });
 CommandLoading.displayName = CommandPrimitive.Loading.displayName;

package/dist/components/AlertDialog/index.js

@@ -237,7 +237,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogOverlay = React2.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  var _b = _a, { className, children: _children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     AlertDialogPrimitive.Overlay,
     __spreadProps(__spreadValues({
@@ -260,7 +260,7 @@ var AlertDialogContent = React2.forwardRef((_a, ref) => {
       __spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl md:w-full",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl md:w-full",
           className
         )
       }, props)

package/dist/components/AlertDialog/index.mjs

@@ -17,7 +17,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogOverlay = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  var _b = _a, { className, children: _children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Overlay,
     __spreadProps(__spreadValues({
@@ -40,7 +40,7 @@ var AlertDialogContent = React.forwardRef((_a, ref) => {
       __spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl md:w-full",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[400px] max-h-[90vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-6 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl md:w-full",
           className
         )
       }, props)

package/dist/components/Command/index.js

@@ -453,7 +453,7 @@ var CommandEmpty = React3.forwardRef((_a, ref) => {
 });
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
 var CommandLoading = React3.forwardRef((_a, ref) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  var _b = _a, { children: _children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_cmdk.Command.Loading, __spreadProps(__spreadValues({ ref }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-center p-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SpinnerIcon, { className: "text-blue-700 animate-spin" }) }) }));
 });
 CommandLoading.displayName = import_cmdk.Command.Loading.displayName;

package/dist/components/Command/index.mjs

@@ -7,7 +7,7 @@ import {
   CommandList,
   CommandLoading,
   CommandSeparator
-} from "../../chunk-CBQRH67Z.mjs";
+} from "../../chunk-SSZ45TLL.mjs";
 import "../../chunk-FMJFBQTF.mjs";
 import "../../chunk-TU6HU32A.mjs";
 import "../../chunk-AFJWE6PJ.mjs";

package/dist/components/CreatableSelect/index.js

@@ -624,7 +624,7 @@ var CommandEmpty = React4.forwardRef((_a, ref) => {
 });
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
 var CommandLoading = React4.forwardRef((_a, ref) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  var _b = _a, { children: _children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_cmdk.Command.Loading, __spreadProps(__spreadValues({ ref }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-center p-4 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpinnerIcon, { className: "text-blue-700 animate-spin" }) }) }));
 });
 CommandLoading.displayName = import_cmdk.Command.Loading.displayName;

package/dist/components/CreatableSelect/index.mjs

@@ -3,7 +3,7 @@ import {
   CommandItem,
   CommandList,
   CommandLoading
-} from "../../chunk-CBQRH67Z.mjs";
+} from "../../chunk-SSZ45TLL.mjs";
 import {
   XCloseIcon
 } from "../../chunk-FMJFBQTF.mjs";

package/dist/components/Dialog/index.js

@@ -296,7 +296,7 @@ var DialogContent = React2.forwardRef(
               "top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] rounded-t-3xl": bottomSheet
             },
             {
-              "duration-200 rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95": !bottomSheet
+              "duration-200 rounded-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95": !bottomSheet
             },
             className
           )

package/dist/components/Dialog/index.mjs

@@ -48,7 +48,7 @@ var DialogContent = React.forwardRef(
               "top-auto bottom-0 translate-y-0 ease-[cubic-bezier(0.075,0.82,0.165,1)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom-[100%] data-[state=closed]:slide-out-to-bottom-[100%] rounded-t-3xl": bottomSheet
             },
             {
-              "duration-200 rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95": !bottomSheet
+              "duration-200 rounded-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95": !bottomSheet
             },
             className
           )

package/dist/components/Form/index.d.mts

@@ -5,7 +5,7 @@ import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName> & {
     disabled?: boolean;
 }) => react_jsx_runtime.JSX.Element;

package/dist/components/Form/index.d.ts

@@ -5,7 +5,7 @@ import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName> & {
     disabled?: boolean;
 }) => react_jsx_runtime.JSX.Element;

package/dist/components/Input/index.js

@@ -100,7 +100,7 @@ var Input = React.forwardRef(
         "div",
         {
           className: cn(
-            "flex h-9 w-full rounded-md border border-gray-200 bg-transparent focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px]",
+            "flex h-9 w-full rounded-md border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
             { "cursor-not-allowed opacity-50": isDisabled },
             {
               "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]

package/dist/components/Input/index.mjs

@@ -33,7 +33,7 @@ var Input = React.forwardRef(
         "div",
         {
           className: cn(
-            "flex h-9 w-full rounded-md border border-gray-200 bg-transparent focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px]",
+            "flex h-9 w-full rounded-md border border-gray-200 bg-transparent focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2",
             { "cursor-not-allowed opacity-50": isDisabled },
             {
               "border-red-700 focus-within:border-gray-200 focus-within:outline-red-700": !!props["data-has-error"]

package/dist/components/MediaCard/index.d.mts

@@ -1,21 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HTMLAttributes } from 'react';
+import React__default, { HTMLAttributes } from 'react';
 
 type MediaCardProps = {
     title: string;
     description?: string;
     duration?: number;
     type: 'audio' | 'video' | 'image' | 'other';
-    image?: string | React.JSX.Element;
-    icon?: React.JSX.Element;
-    action?: React.JSX.Element;
+    image?: string | React__default.JSX.Element;
+    icon?: React__default.JSX.Element;
+    action?: React__default.JSX.Element;
     actionBehavior?: 'default' | 'hover';
     moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
     isLoading?: boolean;
     size: 'small' | 'medium' | 'large';
     author?: {
         name: string;
-        image?: React.JSX.Element;
+        image?: React__default.JSX.Element;
     };
 } & HTMLAttributes<HTMLDivElement>;
 declare const MediaCard: {

package/dist/components/MediaCard/index.d.ts

@@ -1,21 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HTMLAttributes } from 'react';
+import React__default, { HTMLAttributes } from 'react';
 
 type MediaCardProps = {
     title: string;
     description?: string;
     duration?: number;
     type: 'audio' | 'video' | 'image' | 'other';
-    image?: string | React.JSX.Element;
-    icon?: React.JSX.Element;
-    action?: React.JSX.Element;
+    image?: string | React__default.JSX.Element;
+    icon?: React__default.JSX.Element;
+    action?: React__default.JSX.Element;
     actionBehavior?: 'default' | 'hover';
     moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
     isLoading?: boolean;
     size: 'small' | 'medium' | 'large';
     author?: {
         name: string;
-        image?: React.JSX.Element;
+        image?: React__default.JSX.Element;
     };
 } & HTMLAttributes<HTMLDivElement>;
 declare const MediaCard: {

package/dist/components/Select/index.js

@@ -126,7 +126,7 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white in-[.dark-theme]:bg-gray-50 focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px] items-center justify-between",
+        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2px items-center justify-between",
         { "cursor-not-allowed opacity-50": isDisabled },
         "disabled:cursor-not-allowed disabled:opacity-50",
         // when the disabled attr is set by reference
@@ -137,8 +137,14 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "truncate", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ChevronSelectorVerticalIcon,
+          {
+            size: "16",
+            className: "w-4 h-4 opacity-50 shrink-0"
+          }
+        ) })
       ]
     })
   );
@@ -162,7 +168,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
         {
           className: cn(
             "p-1",
-            position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] h-[var(--radix-select-trigger-height)]"
+            position === "popper" && "w-full min-w-(--radix-select-trigger-width) h-(--radix-select-trigger-height)"
           ),
           children
         }

package/dist/components/Select/index.mjs

@@ -54,7 +54,7 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white in-[.dark-theme]:bg-gray-50 focus-within:outline focus-within:outline-[2px] focus-within:outline-blue-300 focus-within:outline-offset-[2px] items-center justify-between",
+        "flex gap-2 h-9 w-full px-3 py-2 text-sm outline-hidden text-black placeholder:text-gray-700 rounded-md border border-gray-200 bg-white focus-within:outline-2 focus-within:outline-blue-300 focus-within:outline-offset-2px items-center justify-between",
         { "cursor-not-allowed opacity-50": isDisabled },
         "disabled:cursor-not-allowed disabled:opacity-50",
         // when the disabled attr is set by reference
@@ -65,8 +65,14 @@ var SelectTrigger = React.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        children,
-        /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(ChevronSelectorVerticalIcon, { size: "16", className: "w-4 h-4 opacity-50" }) })
+        /* @__PURE__ */ jsx2("div", { className: "truncate", children }),
+        /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(
+          ChevronSelectorVerticalIcon,
+          {
+            size: "16",
+            className: "w-4 h-4 opacity-50 shrink-0"
+          }
+        ) })
       ]
     })
   );
@@ -90,7 +96,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
         {
           className: cn(
             "p-1",
-            position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] h-[var(--radix-select-trigger-height)]"
+            position === "popper" && "w-full min-w-(--radix-select-trigger-width) h-(--radix-select-trigger-height)"
           ),
           children
         }

package/dist/components/Skeleton/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ className, ...props }: React__default.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 
 export { Skeleton };

package/dist/components/Skeleton/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ className, ...props }: React__default.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 
 export { Skeleton };

package/dist/components/Switch/index.js

@@ -87,7 +87,7 @@ var Switch = React.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchPrimitive.Thumb, { className: "flex w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
     })
   );
 });

package/dist/components/Switch/index.mjs

@@ -20,7 +20,7 @@ var Switch = React.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "flex w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white dark:data-[state=checked]:bg-black transition-transform ease-linear will-change-transform" })
     })
   );
 });

package/dist/components/Toaster/index.js

@@ -324,7 +324,7 @@ var RawToast = React2.forwardRef((_a, ref) => {
 });
 RawToast.displayName = "RawToast";
 var ToastAction = React2.forwardRef((_a, ref) => {
-  var _b = _a, { className, altText } = _b, props = __objRest(_b, ["className", "altText"]);
+  var _b = _a, { className: _className, altText } = _b, props = __objRest(_b, ["className", "altText"]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToastPrimitives.Action, { altText, ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, __spreadValues({ size: "xs" }, props)) });
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
@@ -532,7 +532,7 @@ function Toaster(_a) {
       (_a2) => {
         var _b2 = _a2, {
           id,
-          parentId,
+          parentId: _parentId,
           title,
           description,
           actions,

package/dist/components/Toaster/index.mjs

@@ -71,7 +71,7 @@ var RawToast = React.forwardRef((_a, ref) => {
 });
 RawToast.displayName = "RawToast";
 var ToastAction = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, altText } = _b, props = __objRest(_b, ["className", "altText"]);
+  var _b = _a, { className: _className, altText } = _b, props = __objRest(_b, ["className", "altText"]);
   return /* @__PURE__ */ jsx(ToastPrimitives.Action, { altText, ref, asChild: true, children: /* @__PURE__ */ jsx(Button, __spreadValues({ size: "xs" }, props)) });
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
@@ -279,7 +279,7 @@ function Toaster(_a) {
       (_a2) => {
         var _b2 = _a2, {
           id,
-          parentId,
+          parentId: _parentId,
           title,
           description,
           actions,

package/dist/components/ToggleGroup/index.js

@@ -131,80 +131,96 @@ var ToggleGroup = React.forwardRef((_a, ref) => {
   );
 });
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React.forwardRef((_a, ref) => {
-  var _b = _a, { title, description, icon, image, className, children } = _b, props = __objRest(_b, ["title", "description", "icon", "image", "className", "children"]);
-  const { direction, type } = React.useContext(ToggleGroupContext);
-  const isRow = direction === "row";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    ToggleGroupPrimitive.Item,
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "flex border-2 border-gray-200 data-[state=on]:border-blue-700 p-2 rounded-lg group",
-        "focus-visible:outline-hidden focus-visible:ring-blue-300 focus-visible:ring-2 focus-visible:ring-offset-2",
-        isRow ? "gap-2" : "gap-2.5",
-        className
-      )
-    }, props), {
-      children: [
-        isRow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col flex-1 self-center min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            className: cn(
-              "flex items-center",
-              isRow ? "flex-col gap-2" : "flex-row gap-2.5"
-            ),
-            children: [
-              (icon || image) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                "div",
-                {
-                  className: cn(
-                    "flex justify-center items-center w-8 h-8 border-gray-200 rounded-sm shrink-0",
-                    { border: !isRow }
-                  ),
-                  children: [
-                    icon && React.cloneElement(icon, { size: isRow ? 24 : 16 }),
-                    image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-full border border-gray-200 rounded-sm min-w-0 overflow-hidden", children: image })
-                  ]
-                }
+var ToggleGroupItem = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      title,
+      description,
+      icon,
+      image,
+      className,
+      children: _children
+    } = _b, props = __objRest(_b, [
+      "title",
+      "description",
+      "icon",
+      "image",
+      "className",
+      "children"
+    ]);
+    const { direction, type } = React.useContext(ToggleGroupContext);
+    const isRow = direction === "row";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      ToggleGroupPrimitive.Item,
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex border-2 border-gray-200 data-[state=on]:border-blue-700 p-2 rounded-lg group",
+          "focus-visible:outline-hidden focus-visible:ring-blue-300 focus-visible:ring-2 focus-visible:ring-offset-2",
+          isRow ? "gap-2" : "gap-2.5",
+          className
+        )
+      }, props), {
+        children: [
+          isRow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col flex-1 self-center min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex items-center",
+                isRow ? "flex-col gap-2" : "flex-row gap-2.5"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                "div",
+              children: [
+                (icon || image) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex justify-center items-center w-8 h-8 border-gray-200 rounded-sm shrink-0",
+                      { border: !isRow }
+                    ),
+                    children: [
+                      icon && React.cloneElement(icon, { size: isRow ? 24 : 16 }),
+                      image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-full border border-gray-200 rounded-sm min-w-0 overflow-hidden", children: image })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col w-full min-w-0",
+                      isRow ? "text-center" : "text-left"
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "text-sm text-black font-medium truncate", children: title }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-gray-900 truncate", children: description })
+                    ]
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center w-4 h-4 bg-gray-50 border border-gray-200 group-data-[state=on]:border-blue-700",
+                type === "single" ? "rounded-full" : "rounded-sm"
+              ),
+              children: type === "single" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "h-2 w-2 rounded-full bg-blue-700 group-data-[state=off]:bg-transparent" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex justify-center items-center w-full h-full bg-blue-700 group-data-[state=off]:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                CheckIcon,
                 {
-                  className: cn(
-                    "flex flex-col w-full min-w-0",
-                    isRow ? "text-center" : "text-left"
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "text-sm text-black font-medium truncate", children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-gray-900 truncate", children: description })
-                  ]
+                  size: 10,
+                  className: "text-white group-data-[state=off]:text-transparent"
                 }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-center w-4 h-4 bg-gray-50 border border-gray-200 group-data-[state=on]:border-blue-700",
-              type === "single" ? "rounded-full" : "rounded-sm"
-            ),
-            children: type === "single" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "h-2 w-2 rounded-full bg-blue-700 group-data-[state=off]:bg-transparent" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex justify-center items-center w-full h-full bg-blue-700 group-data-[state=off]:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              CheckIcon,
-              {
-                size: 10,
-                className: "text-white group-data-[state=off]:text-transparent"
-              }
-            ) })
-          }
-        )
-      ]
-    })
-  );
-});
+              ) })
+            }
+          )
+        ]
+      })
+    );
+  }
+);
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {