@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Select/Select.js

@@ -1,26 +1,26 @@
-import { jsx as l, jsxs as m, Fragment as X } from "react/jsx-runtime";
-import s from "react";
+import { jsx as s, jsxs as m, Fragment as X } from "react/jsx-runtime";
+import n from "react";
 import { MultiSelect as Y, MultiSelectTrigger as Z, MultiSelectValue as $, MultiSelectContent as B, MultiSelectGroup as F, MultiSelectItem as H, MultiSelectSeparator as R } from "../../packages/ui/src/components/select.js";
 import { Combobox as q } from "../../packages/ui/src/components/combobox.js";
 import { cn as o } from "../../packages/ui/src/lib/utils.js";
 import { FloatingLabel as O } from "../FloatLabel.js";
 import { Info as z } from "lucide-react";
 import { Tooltip as L } from "../Tooltip/Tooltip.js";
-const ee = s.forwardRef(
+const ee = n.forwardRef(
   ({
     className: N,
     label: u,
     helperText: w,
     state: f = "default",
-    size: t = "normal",
-    isFloatLabel: n,
+    size: l = "normal",
+    isFloatLabel: t,
     infoTooltip: p,
     clearable: y = !1,
     placeholder: b = "",
     options: g = [],
-    tagRender: d,
+    tagRender: a,
     multiple: S = !1,
-    value: a,
+    value: c,
     defaultValue: T,
     onValueChange: I,
     values: A,
@@ -35,58 +35,58 @@ const ee = s.forwardRef(
     onBlur: E,
     required: M
   }, K) => {
-    const i = s.useId(), [V, _] = s.useState(
-      a ?? T ?? ""
+    const i = n.useId(), [V, _] = n.useState(
+      c ?? T ?? ""
     );
-    s.useEffect(() => {
-      !S && a !== void 0 && _(a);
-    }, [S, a]);
-    const P = s.useCallback(
-      (r) => {
-        const c = r || "";
-        a === void 0 && _(c), I?.(c), x?.(c);
+    n.useEffect(() => {
+      !S && c !== void 0 && _(c);
+    }, [S, c]);
+    const P = n.useCallback(
+      (d) => {
+        const r = d || "";
+        c === void 0 && _(r), I?.(r), x?.(r);
       },
-      [I, x, a]
-    ), Q = s.useCallback(
-      (r) => {
-        j?.(r), x?.(r);
+      [I, x, c]
+    ), Q = n.useCallback(
+      (d) => {
+        j?.(d), x?.(d);
       },
       [j, x]
     ), U = {
-      default: "text-muted-foreground",
-      success: "text-success",
-      warning: "text-warning",
-      error: "text-error"
-    }, G = n ? t === "xl" || t === "lg" ? t : "xl" : t, W = s.useMemo(() => {
-      const r = /* @__PURE__ */ new Map();
-      return g.forEach((c) => {
-        const e = c.group;
-        r.has(e) || r.set(e, []), r.get(e).push(c);
-      }), r;
+      default: "ds:text-muted-foreground",
+      success: "ds:text-success",
+      warning: "ds:text-warning",
+      error: "ds:text-error"
+    }, G = t ? l === "xl" || l === "lg" ? l : "xl" : l, W = n.useMemo(() => {
+      const d = /* @__PURE__ */ new Map();
+      return g.forEach((r) => {
+        const e = r.group;
+        d.has(e) || d.set(e, []), d.get(e).push(r);
+      }), d;
     }, [g]);
-    return /* @__PURE__ */ l("div", { className: N, children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ s("div", { className: N, children: /* @__PURE__ */ m(
       "div",
       {
         ref: K,
-        className: o("flex flex-col gap-1.5 relative", {
-          "floating-label relative": n
+        className: o("ds:flex ds:flex-col ds:gap-1.5 ds:relative", {
+          "ds:floating-label ds:relative": t
         }),
         children: [
-          !n && u && /* @__PURE__ */ m(
+          !t && u && /* @__PURE__ */ m(
             "label",
             {
               htmlFor: i,
-              className: "flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              className: "ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70",
               children: [
                 /* @__PURE__ */ m("span", { children: [
                   u,
-                  M && /* @__PURE__ */ l("span", { className: "text-error ml-0.5", children: "*" })
+                  M && /* @__PURE__ */ s("span", { className: "ds:text-error ds:ml-0.5", children: "*" })
                 ] }),
-                p && /* @__PURE__ */ l(L, { content: p, children: /* @__PURE__ */ l(z, { className: "size-3.5 min-w-3.5" }) })
+                p && /* @__PURE__ */ s(L, { content: p, children: /* @__PURE__ */ s(z, { className: "ds:size-3.5 ds:min-w-3.5" }) })
               ]
             }
           ),
-          /* @__PURE__ */ l("div", { className: "relative", children: S ? (
+          /* @__PURE__ */ s("div", { className: "ds:relative", children: S ? (
             // Multi Mode
             /* @__PURE__ */ m(
               Y,
@@ -95,15 +95,15 @@ const ee = s.forwardRef(
                 defaultValues: typeof v == "string" ? [v] : v,
                 onValuesChange: Q,
                 children: [
-                  /* @__PURE__ */ l(
+                  /* @__PURE__ */ s(
                     Z,
                     {
                       id: i,
                       disabled: C,
                       className: o(
-                        "peer w-full",
+                        "ds:peer ds:w-full",
                         {
-                          "pt-5 pb-1": n && t !== "lg"
+                          "ds:pt-5 ds:pb-1": t && l !== "lg"
                         },
                         N
                       ),
@@ -111,7 +111,7 @@ const ee = s.forwardRef(
                       state: f,
                       onFocus: k,
                       onBlur: E,
-                      children: /* @__PURE__ */ l(
+                      children: /* @__PURE__ */ s(
                         $,
                         {
                           placeholder: b,
@@ -121,37 +121,37 @@ const ee = s.forwardRef(
                       )
                     }
                   ),
-                  n && /* @__PURE__ */ l(
+                  t && /* @__PURE__ */ s(
                     O,
                     {
                       htmlFor: i,
-                      size: t,
+                      size: l,
                       infoTooltip: p,
                       required: M,
                       children: u
                     }
                   ),
-                  /* @__PURE__ */ l(B, { search: h, children: [...W.entries()].map(([r, c]) => r ? /* @__PURE__ */ m(s.Fragment, { children: [
-                    /* @__PURE__ */ l(F, { heading: r, children: c.map((e) => /* @__PURE__ */ l(
+                  /* @__PURE__ */ s(B, { search: h, children: [...W.entries()].map(([d, r]) => d ? /* @__PURE__ */ m(n.Fragment, { children: [
+                    /* @__PURE__ */ s(F, { heading: d, children: r.map((e) => /* @__PURE__ */ s(
                       H,
                       {
                         value: e.value,
                         disabled: e?.disabled,
                         icon: e?.icon,
-                        tagRender: !!d,
-                        children: d ? d(e) : e.label
+                        tagRender: !!a,
+                        children: a ? a(e) : e.label
                       },
                       e.value
                     )) }),
-                    /* @__PURE__ */ l(R, {})
-                  ] }, r) : c.map((e) => /* @__PURE__ */ l(
+                    /* @__PURE__ */ s(R, {})
+                  ] }, d) : r.map((e) => /* @__PURE__ */ s(
                     H,
                     {
                       value: e.value,
                       disabled: e?.disabled,
                       icon: e?.icon,
-                      tagRender: !!d,
-                      children: d ? d(e) : e.label
+                      tagRender: !!a,
+                      children: a ? a(e) : e.label
                     },
                     e.value
                   ))) })
@@ -161,10 +161,10 @@ const ee = s.forwardRef(
           ) : (
             // Single Mode
             /* @__PURE__ */ m(X, { children: [
-              /* @__PURE__ */ l(
+              /* @__PURE__ */ s(
                 q,
                 {
-                  value: a ?? V,
+                  value: c ?? V,
                   options: g,
                   placeHolder: b,
                   emptyText: typeof h == "object" ? h.emptyMessage : "No results found",
@@ -173,38 +173,38 @@ const ee = s.forwardRef(
                   disabled: C,
                   id: i,
                   className: o(
-                    "peer w-full justify-start",
+                    "ds:peer ds:w-full ds:justify-start",
                     {
-                      "pt-5 pb-1": n && t !== "lg"
+                      "ds:pt-5 ds:pb-1": t && l !== "lg"
                     }
                     // className,
                   ),
                   size: G,
                   state: f,
-                  dropdownClassName: o("opacity-40", {
-                    "translate-y-[-8px]": n && t !== "lg"
+                  dropdownClassName: o("ds:opacity-40", {
+                    "ds:translate-y-[-8px]": t && l !== "lg"
                   }),
                   searchable: !!h,
-                  tagRender: d,
+                  tagRender: a,
                   onFocus: k,
                   onBlur: E
                 }
               ),
-              n && /* @__PURE__ */ l(
+              t && /* @__PURE__ */ s(
                 O,
                 {
                   htmlFor: i,
-                  size: t,
+                  size: l,
                   infoTooltip: p,
                   required: M,
-                  shouldFloat: !!(a ?? V),
-                  className: "pointer-events-none",
+                  shouldFloat: !!(c ?? V),
+                  className: "ds:pointer-events-none",
                   children: u
                 }
               )
             ] })
           ) }),
-          w && /* @__PURE__ */ l("p", { className: o("text-xs", f ? U[f] : ""), children: w })
+          w && /* @__PURE__ */ s("p", { className: o("ds:text-xs", f ? U[f] : ""), children: w })
         ]
       }
     ) });

package/dist/esm/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  MultiSelect as BaseMultiSelect,\n  MultiSelectTrigger as BaseMultiSelectTrigger,\n  MultiSelectValue as BaseMultiSelectValue,\n  MultiSelectContent as BaseMultiSelectContent,\n  MultiSelectItem as BaseMultiSelectItem,\n  MultiSelectGroup as BaseMultiSelectGroup,\n  MultiSelectSeparator as BaseMultiSelectSeparator,\n} from \"@dsui/ui/components/select\";\nimport {\n  Combobox,\n  type ComboboxProps,\n  type SelectOption as SSelectOption,\n} from \"@dsui/ui/components/combobox\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport type SelectOption = SSelectOption;\n\nexport type SelectProps = Omit<ComboboxProps, \"ref\"> & {\n  label?: string;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"success\" | \"warning\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  isFloatLabel?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  placeholder?: string;\n  options?: SelectOption[];\n  tagRender?: (option: SelectOption) => React.ReactNode;\n  multiple?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  values?: string[];\n  defaultValues?: string | string[];\n  onValuesChange?: (values: string[]) => void;\n  search?: boolean | { placeholder?: string; emptyMessage?: string };\n  clickToRemove?: boolean;\n  overflowBehavior?: \"wrap\" | \"wrap-when-open\" | \"cutoff\";\n  className?: string;\n  disabled?: boolean;\n  onChange?: (value: string | string[]) => void;\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  required?: boolean;\n};\n\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state = \"default\",\n      size = \"normal\",\n      isFloatLabel,\n      infoTooltip,\n      clearable = false,\n      placeholder = \"\",\n      options = [],\n      tagRender,\n      multiple = false,\n      value,\n      defaultValue,\n      onValueChange,\n      values,\n      defaultValues,\n      onValuesChange,\n      search,\n      clickToRemove = true,\n      overflowBehavior = \"wrap-when-open\",\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      required,\n    },\n    ref\n  ) => {\n    const selectId = React.useId();\n\n    // For single select, use controlled value or internal state\n    const [internalValue, setInternalValue] = React.useState(\n      value ?? defaultValue ?? \"\"\n    );\n\n    React.useEffect(() => {\n      if (!multiple && value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [multiple, value]);\n\n    // Handle single select value change\n    const handleSingleValueChange = React.useCallback(\n      (newValue?: string | null) => {\n        const val = newValue || \"\";\n        if (value === undefined) {\n          setInternalValue(val);\n        }\n        onValueChange?.(val);\n        onChange?.(val);\n      },\n      [onValueChange, onChange, value]\n    );\n\n    // Handle multi select values change\n    const handleMultiValuesChange = React.useCallback(\n      (newValues: string[]) => {\n        onValuesChange?.(newValues);\n        onChange?.(newValues);\n      },\n      [onValuesChange, onChange]\n    );\n\n    // Helper text styles\n    const helperTextStyles = {\n      default: \"text-muted-foreground\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      error: \"text-error\",\n    };\n\n    // Calculate current size\n    const currentSize = isFloatLabel\n      ? size === \"xl\" || size === \"lg\"\n        ? size\n        : \"xl\"\n      : size;\n\n    // Group options by group property\n    const groupedOptions = React.useMemo(() => {\n      const groups = new Map<string | undefined, SelectOption[]>();\n      options.forEach((option) => {\n        const group = option.group;\n        if (!groups.has(group)) {\n          groups.set(group, []);\n        }\n        groups.get(group)!.push(option);\n      });\n      return groups;\n    }, [options]);\n\n    return (\n      <div className={className}>\n        <div\n          ref={ref}\n          className={cn(\"flex flex-col gap-1.5 relative\", {\n            \"floating-label relative\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <label\n              htmlFor={selectId}\n              className=\"flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n              <span>\n                {label}\n                {required && <span className=\"text-error ml-0.5\">*</span>}\n              </span>\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"size-3.5 min-w-3.5\" />\n                </Tooltip>\n              )}\n            </label>\n          )}\n\n          <div className=\"relative\">\n            {!multiple ? (\n              // Single Mode\n              <>\n                <Combobox\n                  value={value ?? internalValue}\n                  options={options}\n                  placeHolder={placeholder}\n                  emptyText={\n                    typeof search === \"object\"\n                      ? search.emptyMessage\n                      : \"No results found\"\n                  }\n                  onChange={handleSingleValueChange}\n                  clearable={clearable}\n                  disabled={disabled}\n                  id={selectId}\n                  className={cn(\n                    \"peer w-full justify-start\",\n                    {\n                      \"pt-5 pb-1\": isFloatLabel && size !== \"lg\",\n                    }\n                    // className,\n                  )}\n                  size={currentSize}\n                  state={state}\n                  dropdownClassName={cn(\"opacity-40\", {\n                    \"translate-y-[-8px]\": isFloatLabel && size !== \"lg\",\n                  })}\n                  searchable={!!search}\n                  tagRender={tagRender}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                />\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                    shouldFloat={!!(value ?? internalValue)}\n                    className=\"pointer-events-none\"\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n              </>\n            ) : (\n              // Multi Mode\n              <BaseMultiSelect\n                values={values}\n                defaultValues={\n                  typeof defaultValues === \"string\"\n                    ? [defaultValues]\n                    : defaultValues\n                }\n                onValuesChange={handleMultiValuesChange}\n              >\n                <BaseMultiSelectTrigger\n                  id={selectId}\n                  disabled={disabled}\n                  className={cn(\n                    \"peer w-full\",\n                    {\n                      \"pt-5 pb-1\": isFloatLabel && size !== \"lg\",\n                    },\n                    className\n                  )}\n                  size={currentSize}\n                  state={state}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                >\n                  <BaseMultiSelectValue\n                    placeholder={placeholder}\n                    clickToRemove={clickToRemove && clearable}\n                    overflowBehavior={overflowBehavior}\n                  />\n                </BaseMultiSelectTrigger>\n\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n\n                <BaseMultiSelectContent search={search}>\n                  {[...groupedOptions.entries()].map(([group, items]) => {\n                    if (group) {\n                      return (\n                        <React.Fragment key={group}>\n                          <BaseMultiSelectGroup heading={group}>\n                            {items.map((option) => (\n                              <BaseMultiSelectItem\n                                key={option.value}\n                                value={option.value}\n                                disabled={option?.disabled}\n                                icon={option?.icon}\n                                tagRender={!!tagRender}\n                              >\n                                {tagRender ? tagRender(option) : option.label}\n                              </BaseMultiSelectItem>\n                            ))}\n                          </BaseMultiSelectGroup>\n                          <BaseMultiSelectSeparator />\n                        </React.Fragment>\n                      );\n                    }\n                    return items.map((option) => (\n                      <BaseMultiSelectItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={option?.disabled}\n                        icon={option?.icon}\n                        tagRender={!!tagRender}\n                      >\n                        {tagRender ? tagRender(option) : option.label}\n                      </BaseMultiSelectItem>\n                    ));\n                  })}\n                </BaseMultiSelectContent>\n              </BaseMultiSelect>\n            )}\n          </div>\n\n          {helperText && (\n            <p className={cn(\"text-xs\", state ? helperTextStyles[state] : \"\")}>\n              {helperText}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSelect.displayName = \"Select\";\nexport default Select;\n"],"names":["Select","React","className","label","helperText","state","size","isFloatLabel","infoTooltip","clearable","placeholder","options","tagRender","multiple","value","defaultValue","onValueChange","values","defaultValues","onValuesChange","search","clickToRemove","overflowBehavior","disabled","onChange","onFocus","onBlur","required","ref","selectId","internalValue","setInternalValue","handleSingleValueChange","newValue","val","handleMultiValuesChange","newValues","helperTextStyles","currentSize","groupedOptions","groups","option","group","jsx","jsxs","cn","Tooltip","Info","BaseMultiSelect","BaseMultiSelectTrigger","BaseMultiSelectValue","FloatingLabel","BaseMultiSelectContent","items","BaseMultiSelectGroup","BaseMultiSelectItem","BaseMultiSelectSeparator","Fragment","Combobox"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  MultiSelect as BaseMultiSelect,\n  MultiSelectTrigger as BaseMultiSelectTrigger,\n  MultiSelectValue as BaseMultiSelectValue,\n  MultiSelectContent as BaseMultiSelectContent,\n  MultiSelectItem as BaseMultiSelectItem,\n  MultiSelectGroup as BaseMultiSelectGroup,\n  MultiSelectSeparator as BaseMultiSelectSeparator,\n} from \"@dsui/ui/components/select\";\nimport {\n  Combobox,\n  type ComboboxProps,\n  type SelectOption as SSelectOption,\n} from \"@dsui/ui/components/combobox\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport type SelectOption = SSelectOption;\n\nexport type SelectProps = Omit<ComboboxProps, \"ref\"> & {\n  label?: string;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"success\" | \"warning\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  isFloatLabel?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  placeholder?: string;\n  options?: SelectOption[];\n  tagRender?: (option: SelectOption) => React.ReactNode;\n  multiple?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  values?: string[];\n  defaultValues?: string | string[];\n  onValuesChange?: (values: string[]) => void;\n  search?: boolean | { placeholder?: string; emptyMessage?: string };\n  clickToRemove?: boolean;\n  overflowBehavior?: \"wrap\" | \"wrap-when-open\" | \"cutoff\";\n  className?: string;\n  disabled?: boolean;\n  onChange?: (value: string | string[]) => void;\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  required?: boolean;\n};\n\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state = \"default\",\n      size = \"normal\",\n      isFloatLabel,\n      infoTooltip,\n      clearable = false,\n      placeholder = \"\",\n      options = [],\n      tagRender,\n      multiple = false,\n      value,\n      defaultValue,\n      onValueChange,\n      values,\n      defaultValues,\n      onValuesChange,\n      search,\n      clickToRemove = true,\n      overflowBehavior = \"wrap-when-open\",\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      required,\n    },\n    ref\n  ) => {\n    const selectId = React.useId();\n\n    // For single select, use controlled value or internal state\n    const [internalValue, setInternalValue] = React.useState(\n      value ?? defaultValue ?? \"\"\n    );\n\n    React.useEffect(() => {\n      if (!multiple && value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [multiple, value]);\n\n    // Handle single select value change\n    const handleSingleValueChange = React.useCallback(\n      (newValue?: string | null) => {\n        const val = newValue || \"\";\n        if (value === undefined) {\n          setInternalValue(val);\n        }\n        onValueChange?.(val);\n        onChange?.(val);\n      },\n      [onValueChange, onChange, value]\n    );\n\n    // Handle multi select values change\n    const handleMultiValuesChange = React.useCallback(\n      (newValues: string[]) => {\n        onValuesChange?.(newValues);\n        onChange?.(newValues);\n      },\n      [onValuesChange, onChange]\n    );\n\n    // Helper text styles\n    const helperTextStyles = {\n      default: \"ds:text-muted-foreground\",\n      success: \"ds:text-success\",\n      warning: \"ds:text-warning\",\n      error: \"ds:text-error\",\n    };\n\n    // Calculate current size\n    const currentSize = isFloatLabel\n      ? size === \"xl\" || size === \"lg\"\n        ? size\n        : \"xl\"\n      : size;\n\n    // Group options by group property\n    const groupedOptions = React.useMemo(() => {\n      const groups = new Map<string | undefined, SelectOption[]>();\n      options.forEach((option) => {\n        const group = option.group;\n        if (!groups.has(group)) {\n          groups.set(group, []);\n        }\n        groups.get(group)!.push(option);\n      });\n      return groups;\n    }, [options]);\n\n    return (\n      <div className={className}>\n        <div\n          ref={ref}\n          className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {\n            \"ds:floating-label ds:relative\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <label\n              htmlFor={selectId}\n              className=\"ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\"\n            >\n              <span>\n                {label}\n                {required && <span className=\"ds:text-error ds:ml-0.5\">*</span>}\n              </span>\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                </Tooltip>\n              )}\n            </label>\n          )}\n\n          <div className=\"ds:relative\">\n            {!multiple ? (\n              // Single Mode\n              <>\n                <Combobox\n                  value={value ?? internalValue}\n                  options={options}\n                  placeHolder={placeholder}\n                  emptyText={\n                    typeof search === \"object\"\n                      ? search.emptyMessage\n                      : \"No results found\"\n                  }\n                  onChange={handleSingleValueChange}\n                  clearable={clearable}\n                  disabled={disabled}\n                  id={selectId}\n                  className={cn(\n                    \"ds:peer ds:w-full ds:justify-start\",\n                    {\n                      \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n                    }\n                    // className,\n                  )}\n                  size={currentSize}\n                  state={state}\n                  dropdownClassName={cn(\"ds:opacity-40\", {\n                    \"ds:translate-y-[-8px]\": isFloatLabel && size !== \"lg\",\n                  })}\n                  searchable={!!search}\n                  tagRender={tagRender}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                />\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                    shouldFloat={!!(value ?? internalValue)}\n                    className=\"ds:pointer-events-none\"\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n              </>\n            ) : (\n              // Multi Mode\n              <BaseMultiSelect\n                values={values}\n                defaultValues={\n                  typeof defaultValues === \"string\"\n                    ? [defaultValues]\n                    : defaultValues\n                }\n                onValuesChange={handleMultiValuesChange}\n              >\n                <BaseMultiSelectTrigger\n                  id={selectId}\n                  disabled={disabled}\n                  className={cn(\n                    \"ds:peer ds:w-full\",\n                    {\n                      \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n                    },\n                    className\n                  )}\n                  size={currentSize}\n                  state={state}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                >\n                  <BaseMultiSelectValue\n                    placeholder={placeholder}\n                    clickToRemove={clickToRemove && clearable}\n                    overflowBehavior={overflowBehavior}\n                  />\n                </BaseMultiSelectTrigger>\n\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n\n                <BaseMultiSelectContent search={search}>\n                  {[...groupedOptions.entries()].map(([group, items]) => {\n                    if (group) {\n                      return (\n                        <React.Fragment key={group}>\n                          <BaseMultiSelectGroup heading={group}>\n                            {items.map((option) => (\n                              <BaseMultiSelectItem\n                                key={option.value}\n                                value={option.value}\n                                disabled={option?.disabled}\n                                icon={option?.icon}\n                                tagRender={!!tagRender}\n                              >\n                                {tagRender ? tagRender(option) : option.label}\n                              </BaseMultiSelectItem>\n                            ))}\n                          </BaseMultiSelectGroup>\n                          <BaseMultiSelectSeparator />\n                        </React.Fragment>\n                      );\n                    }\n                    return items.map((option) => (\n                      <BaseMultiSelectItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={option?.disabled}\n                        icon={option?.icon}\n                        tagRender={!!tagRender}\n                      >\n                        {tagRender ? tagRender(option) : option.label}\n                      </BaseMultiSelectItem>\n                    ));\n                  })}\n                </BaseMultiSelectContent>\n              </BaseMultiSelect>\n            )}\n          </div>\n\n          {helperText && (\n            <p className={cn(\"ds:text-xs\", state ? helperTextStyles[state] : \"\")}>\n              {helperText}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSelect.displayName = \"Select\";\nexport default Select;\n"],"names":["Select","React","className","label","helperText","state","size","isFloatLabel","infoTooltip","clearable","placeholder","options","tagRender","multiple","value","defaultValue","onValueChange","values","defaultValues","onValuesChange","search","clickToRemove","overflowBehavior","disabled","onChange","onFocus","onBlur","required","ref","selectId","internalValue","setInternalValue","handleSingleValueChange","newValue","val","handleMultiValuesChange","newValues","helperTextStyles","currentSize","groupedOptions","groups","option","group","jsx","jsxs","cn","Tooltip","Info","BaseMultiSelect","BaseMultiSelectTrigger","BaseMultiSelectValue","FloatingLabel","BaseMultiSelectContent","items","BaseMultiSelectGroup","BaseMultiSelectItem","BaseMultiSelectSeparator","Fragment","Combobox"],"mappings":";;;;;;;;AAmDA,MAAMA,KAASC,EAAM;AAAA,EACnB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,SAAAC,IAAU,CAAA;AAAA,IACV,WAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,GAEFC,MACG;AACH,UAAMC,IAAW5B,EAAM,MAAA,GAGjB,CAAC6B,GAAeC,CAAgB,IAAI9B,EAAM;AAAA,MAC9Ca,KAASC,KAAgB;AAAA,IAAA;AAG3Bd,IAAAA,EAAM,UAAU,MAAM;AACpB,MAAI,CAACY,KAAYC,MAAU,UACzBiB,EAAiBjB,CAAK;AAAA,IAE1B,GAAG,CAACD,GAAUC,CAAK,CAAC;AAGpB,UAAMkB,IAA0B/B,EAAM;AAAA,MACpC,CAACgC,MAA6B;AAC5B,cAAMC,IAAMD,KAAY;AACxB,QAAInB,MAAU,UACZiB,EAAiBG,CAAG,GAEtBlB,IAAgBkB,CAAG,GACnBV,IAAWU,CAAG;AAAA,MAChB;AAAA,MACA,CAAClB,GAAeQ,GAAUV,CAAK;AAAA,IAAA,GAI3BqB,IAA0BlC,EAAM;AAAA,MACpC,CAACmC,MAAwB;AACvB,QAAAjB,IAAiBiB,CAAS,GAC1BZ,IAAWY,CAAS;AAAA,MACtB;AAAA,MACA,CAACjB,GAAgBK,CAAQ;AAAA,IAAA,GAIrBa,IAAmB;AAAA,MACvB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,GAIHC,IAAc/B,IAChBD,MAAS,QAAQA,MAAS,OACxBA,IACA,OACFA,GAGEiC,IAAiBtC,EAAM,QAAQ,MAAM;AACzC,YAAMuC,wBAAa,IAAA;AACnB,aAAA7B,EAAQ,QAAQ,CAAC8B,MAAW;AAC1B,cAAMC,IAAQD,EAAO;AACrB,QAAKD,EAAO,IAAIE,CAAK,KACnBF,EAAO,IAAIE,GAAO,EAAE,GAEtBF,EAAO,IAAIE,CAAK,EAAG,KAAKD,CAAM;AAAA,MAChC,CAAC,GACMD;AAAA,IACT,GAAG,CAAC7B,CAAO,CAAC;AAEZ,WACE,gBAAAgC,EAAC,SAAI,WAAAzC,GACH,UAAA,gBAAA0C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWiB,EAAG,8CAA8C;AAAA,UAC1D,iCAAiCtC;AAAA,QAAA,CAClC;AAAA,QAEA,UAAA;AAAA,UAAA,CAACA,KAAgBJ,KAChB,gBAAAyC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASf;AAAA,cACT,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAA,gBAAAe,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAzC;AAAA,kBACAwB,KAAY,gBAAAgB,EAAC,QAAA,EAAK,WAAU,2BAA0B,UAAA,IAAA,CAAC;AAAA,gBAAA,GAC1D;AAAA,gBACCnC,uBACEsC,GAAA,EAAQ,SAAStC,GAChB,UAAA,gBAAAmC,EAACI,GAAA,EAAK,WAAU,2BAAA,CAA2B,EAAA,CAC7C;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAKN,gBAAAJ,EAAC,OAAA,EAAI,WAAU,eACZ,UAAC9B;AAAA;AAAA,YAgDA,gBAAA+B;AAAA,cAACI;AAAAA,cAAA;AAAA,gBACC,QAAA/B;AAAA,gBACA,eACE,OAAOC,KAAkB,WACrB,CAACA,CAAa,IACdA;AAAA,gBAEN,gBAAgBiB;AAAA,gBAEhB,UAAA;AAAA,kBAAA,gBAAAQ;AAAA,oBAACM;AAAAA,oBAAA;AAAA,sBACC,IAAIpB;AAAA,sBACJ,UAAAN;AAAA,sBACA,WAAWsB;AAAA,wBACT;AAAA,wBACA;AAAA,0BACE,mBAAmBtC,KAAgBD,MAAS;AAAA,wBAAA;AAAA,wBAE9CJ;AAAA,sBAAA;AAAA,sBAEF,MAAMoC;AAAA,sBACN,OAAAjC;AAAA,sBACA,SAAAoB;AAAA,sBACA,QAAAC;AAAA,sBAEA,UAAA,gBAAAiB;AAAA,wBAACO;AAAAA,wBAAA;AAAA,0BACC,aAAAxC;AAAA,0BACA,eAAeW,KAAiBZ;AAAA,0BAChC,kBAAAa;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,kBAGDf,KACC,gBAAAoC;AAAA,oBAACQ;AAAA,oBAAA;AAAA,sBACC,SAAStB;AAAA,sBACT,MAAAvB;AAAA,sBACA,aAAAE;AAAA,sBACA,UAAAmB;AAAA,sBAEC,UAAAxB;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAIL,gBAAAwC,EAACS,GAAA,EAAuB,QAAAhC,GACrB,UAAA,CAAC,GAAGmB,EAAe,QAAA,CAAS,EAAE,IAAI,CAAC,CAACG,GAAOW,CAAK,MAC3CX,IAEA,gBAAAE,EAAC3C,EAAM,UAAN,EACC,UAAA;AAAA,oBAAA,gBAAA0C,EAACW,KAAqB,SAASZ,GAC5B,UAAAW,EAAM,IAAI,CAACZ,MACV,gBAAAE;AAAA,sBAACY;AAAAA,sBAAA;AAAA,wBAEC,OAAOd,EAAO;AAAA,wBACd,UAAUA,GAAQ;AAAA,wBAClB,MAAMA,GAAQ;AAAA,wBACd,WAAW,CAAC,CAAC7B;AAAA,wBAEZ,UAAAA,IAAYA,EAAU6B,CAAM,IAAIA,EAAO;AAAA,sBAAA;AAAA,sBANnCA,EAAO;AAAA,oBAAA,CAQf,GACH;AAAA,sCACCe,GAAA,CAAA,CAAyB;AAAA,kBAAA,EAAA,GAdPd,CAerB,IAGGW,EAAM,IAAI,CAACZ,MAChB,gBAAAE;AAAA,oBAACY;AAAAA,oBAAA;AAAA,sBAEC,OAAOd,EAAO;AAAA,sBACd,UAAUA,GAAQ;AAAA,sBAClB,MAAMA,GAAQ;AAAA,sBACd,WAAW,CAAC,CAAC7B;AAAA,sBAEZ,UAAAA,IAAYA,EAAU6B,CAAM,IAAIA,EAAO;AAAA,oBAAA;AAAA,oBANnCA,EAAO;AAAA,kBAAA,CAQf,CACF,EAAA,CACH;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA;AAAA;AAAA,YA1HF,gBAAAG,EAAAa,GAAA,EACE,UAAA;AAAA,cAAA,gBAAAd;AAAA,gBAACe;AAAA,gBAAA;AAAA,kBACC,OAAO5C,KAASgB;AAAA,kBAChB,SAAAnB;AAAA,kBACA,aAAaD;AAAA,kBACb,WACE,OAAOU,KAAW,WACdA,EAAO,eACP;AAAA,kBAEN,UAAUY;AAAA,kBACV,WAAAvB;AAAA,kBACA,UAAAc;AAAA,kBACA,IAAIM;AAAA,kBACJ,WAAWgB;AAAA,oBACT;AAAA,oBACA;AAAA,sBACE,mBAAmBtC,KAAgBD,MAAS;AAAA,oBAAA;AAAA;AAAA,kBAC9C;AAAA,kBAGF,MAAMgC;AAAA,kBACN,OAAAjC;AAAA,kBACA,mBAAmBwC,EAAG,iBAAiB;AAAA,oBACrC,yBAAyBtC,KAAgBD,MAAS;AAAA,kBAAA,CACnD;AAAA,kBACD,YAAY,CAAC,CAACc;AAAA,kBACd,WAAAR;AAAA,kBACA,SAAAa;AAAA,kBACA,QAAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEDnB,KACC,gBAAAoC;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,SAAStB;AAAA,kBACT,MAAAvB;AAAA,kBACA,aAAAE;AAAA,kBACA,UAAAmB;AAAA,kBACA,aAAa,CAAC,EAAEb,KAASgB;AAAA,kBACzB,WAAU;AAAA,kBAET,UAAA3B;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CAEJ;AAAA,aAkFJ;AAAA,UAECC,KACC,gBAAAuC,EAAC,KAAA,EAAE,WAAWE,EAAG,cAAcxC,IAAQgC,EAAiBhC,CAAK,IAAI,EAAE,GAChE,UAAAD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AAEAJ,GAAO,cAAc;"}

package/dist/esm/components/Sheet/Sheet.js

@@ -21,8 +21,8 @@ const j = (f, o) => {
     onOpenChange: p,
     title: a,
     description: r,
-    children: c,
-    trigger: i,
+    children: m,
+    trigger: c,
     footer: n,
     side: g = "right",
     closeOnEsc: F = !0,
@@ -30,7 +30,7 @@ const j = (f, o) => {
     showCloseButton: k = !0,
     autoDrawerOnMobile: E = !0,
     size: v = "md",
-    stickyHeader: d = !1,
+    stickyHeader: i = !1,
     stickyFooter: h = !1,
     autoHeight: _ = !0,
     animation: x,
@@ -43,17 +43,17 @@ const j = (f, o) => {
     overlayClassName: A
   } = f, b = w(() => x ? ee(x) : { className: "" }, [x]), B = s(
     // Remove default padding and gap to allow custom header/footer
-    "!p-0 !gap-0 flex flex-col",
+    "ds:!p-0 ds:!gap-0 ds:flex ds:flex-col",
     j(v, g),
     b.className,
     u
-  ), O = s("px-6 pt-6 text-left", D), M = s(
-    "px-6 pb-6 flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+  ), O = s("ds:px-6 ds:pt-6 ds:text-left", D), M = s(
+    "ds:px-6 ds:pb-6 ds:flex-col-reverse ds:sm:flex-row ds:sm:justify-end ds:sm:space-x-2",
     S
   ), z = w(() => a || r ? /* @__PURE__ */ l(
     K,
     {
-      className: s("py-4", { "border-b": d }, O),
+      className: s("ds:py-4", { "ds:border-b": i }, O),
       children: [
         a && /* @__PURE__ */ e(V, { className: N, children: a }),
         r && /* @__PURE__ */ e($, { className: C, children: r })
@@ -65,28 +65,28 @@ const j = (f, o) => {
     O,
     N,
     C,
-    d
+    i
   ]), H = w(() => n ? /* @__PURE__ */ e(
     q,
     {
-      className: s("py-4", { "border-t": h }, M),
+      className: s("ds:py-4", { "ds:border-t": h }, M),
       children: n
     }
   ) : null, [n, M, h]);
   if (se && E) {
-    const m = s(
-      "flex flex-col",
+    const d = s(
+      "ds:flex ds:flex-col",
       b.className,
       u
     );
     return /* @__PURE__ */ l(P, { open: t, onOpenChange: p, direction: "bottom", children: [
-      i && /* @__PURE__ */ e(Q, { asChild: !0, children: i }),
+      c && /* @__PURE__ */ e(Q, { asChild: !0, children: c }),
       /* @__PURE__ */ l(
         U,
         {
           ref: o,
           className: s(
-            m,
+            d,
             _ ? "" : j(v, "bottom")
           ),
           children: [
@@ -94,7 +94,7 @@ const j = (f, o) => {
               a && /* @__PURE__ */ e(X, { className: N, children: a }),
               r && /* @__PURE__ */ e(Y, { className: C, children: r })
             ] }),
-            /* @__PURE__ */ e(T, { className: s("flex flex-col overflow-hidden"), children: c && /* @__PURE__ */ e("div", { className: s("px-4 py-2", y), children: c }) }),
+            /* @__PURE__ */ e(T, { className: s("ds:flex ds:flex-col ds:overflow-hidden"), children: m && /* @__PURE__ */ e("div", { className: s("ds:px-4 ds:py-2", y), children: m }) }),
             n && /* @__PURE__ */ e(Z, { className: S, children: n })
           ]
         }
@@ -102,15 +102,15 @@ const j = (f, o) => {
     ] });
   }
   return /* @__PURE__ */ l(G, { open: t, onOpenChange: p, children: [
-    i && /* @__PURE__ */ e(J, { asChild: !0, children: i }),
+    c && /* @__PURE__ */ e(J, { asChild: !0, children: c }),
     /* @__PURE__ */ l(
       L,
       {
         ref: o,
         side: g,
         className: s(u, B),
-        onEscapeKeyDown: (m) => !F && m.preventDefault(),
-        onInteractOutside: (m) => !R && m.preventDefault(),
+        onEscapeKeyDown: (d) => !F && d.preventDefault(),
+        onInteractOutside: (d) => !R && d.preventDefault(),
         overlayClassName: s(A),
         children: [
           !k && /* @__PURE__ */ e("style", { children: `
@@ -118,10 +118,10 @@ const j = (f, o) => {
               display: none;
             }
           ` }),
-          d && z,
-          /* @__PURE__ */ l(T, { className: "flex max-h-full flex-col overflow-hidden", children: [
-            !d && z,
-            c && /* @__PURE__ */ e("div", { className: s("px-6 py-4", y), children: c }),
+          i && z,
+          /* @__PURE__ */ l(T, { className: "ds:flex ds:max-h-full ds:flex-col ds:overflow-hidden", children: [
+            !i && z,
+            m && /* @__PURE__ */ e("div", { className: s("ds:px-6 ds:py-4", y), children: m }),
             !h && H
           ] }),
           h && H

package/dist/esm/components/Sheet/Sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Sheet as SSheet,\n  SheetContent as SSheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n  SheetClose,\n} from \"@dsui/ui/components/sheet\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@dsui/ui/components/drawer\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { ScrollArea } from \"@dsui/ui/components/scroll-area\";\nimport type { BasicAnimation } from \"@/types/variables\";\nimport { animationClass } from \"@/utils/animations\";\nimport { isMobile } from \"react-device-detect\";\n\nexport type SheetSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type SheetSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface SheetProps {\n  // Core props\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n\n  // Content\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Behavior\n  side?: SheetSide;\n  closeOnEsc?: boolean;\n  closeOnOutside?: boolean;\n  showCloseButton?: boolean;\n  autoDrawerOnMobile?: boolean;\n\n  // Layout\n  size?: SheetSize;\n  stickyHeader?: boolean;\n  stickyFooter?: boolean;\n  autoHeight?: boolean;\n\n  // Animation\n  animation?: BasicAnimation;\n\n  // Styling\n  className?: string;\n  contentClassName?: string;\n  headerClassName?: string;\n  titleClassName?: string;\n  descriptionClassName?: string;\n  footerClassName?: string;\n  overlayClassName?: string;\n}\n\nconst getSizeClasses = (size: SheetSize, side: SheetSide): string => {\n  const isVertical = side === \"top\" || side === \"bottom\";\n  const sizeMap: Record<SheetSize, string> = {\n    sm: isVertical ? \"max-h-[20vh]!\" : \"sm:max-w-sm\",\n    md: isVertical ? \"max-h-[40vh]!\" : \"sm:max-w-md\",\n    lg: isVertical ? \"max-h-[60vh]!\" : \"sm:max-w-lg\",\n    xl: isVertical ? \"max-h-[80vh]!\" : \"sm:max-w-xl\",\n    full: isVertical ? \"max-h-full!\" : \"sm:max-w-full\",\n  };\n  return sizeMap[size];\n};\n\nconst Sheet = React.forwardRef<HTMLDivElement, SheetProps>((props, ref) => {\n  const {\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    trigger,\n    footer,\n    side = \"right\",\n    closeOnEsc = true,\n    closeOnOutside = true,\n    showCloseButton = true,\n    autoDrawerOnMobile = true,\n    size = \"md\",\n    stickyHeader = false,\n    stickyFooter = false,\n    autoHeight = true,\n    animation,\n    className,\n    contentClassName,\n    headerClassName,\n    titleClassName,\n    descriptionClassName,\n    footerClassName,\n    overlayClassName,\n  } = props;\n\n  const animationResult = useMemo(() => {\n    return animation ? animationClass(animation) : { className: \"\" };\n  }, [animation]);\n\n  const contentClasses = cn(\n    // Remove default padding and gap to allow custom header/footer\n    \"!p-0 !gap-0 flex flex-col\",\n    getSizeClasses(size, side),\n    animationResult.className,\n    className\n  );\n\n  const headerClasses = cn(\"px-6 pt-6 text-left\", headerClassName);\n\n  const footerClasses = cn(\n    \"px-6 pb-6 flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n    footerClassName\n  );\n\n  const headerComponents = useMemo(() => {\n    return title || description ? (\n      <SheetHeader\n        className={cn(\"py-4\", { \"border-b\": stickyHeader }, headerClasses)}\n      >\n        {title && <SheetTitle className={titleClassName}>{title}</SheetTitle>}\n        {description && (\n          <SheetDescription className={descriptionClassName}>\n            {description}\n          </SheetDescription>\n        )}\n      </SheetHeader>\n    ) : null;\n  }, [\n    title,\n    description,\n    headerClasses,\n    titleClassName,\n    descriptionClassName,\n    stickyHeader,\n  ]);\n\n  const footerComponents = useMemo(() => {\n    return footer ? (\n      <SheetFooter\n        className={cn(\"py-4\", { \"border-t\": stickyFooter }, footerClasses)}\n      >\n        {footer}\n      </SheetFooter>\n    ) : null;\n  }, [footer, footerClasses, stickyFooter]);\n\n  // Mobile: use drawer with bottom direction if enabled\n  if (isMobile && autoDrawerOnMobile) {\n    const drawerContentClasses = cn(\n      \"flex flex-col\",\n      animationResult.className,\n      className\n    );\n\n    return (\n      <Drawer open={open} onOpenChange={onOpenChange} direction=\"bottom\">\n        {trigger && <DrawerTrigger asChild>{trigger}</DrawerTrigger>}\n        <DrawerContent\n          ref={ref}\n          className={cn(\n            drawerContentClasses,\n            autoHeight ? \"\" : getSizeClasses(size, \"bottom\")\n          )}\n        >\n          {(title || description) && (\n            <DrawerHeader className={headerClassName}>\n              {title && (\n                <DrawerTitle className={titleClassName}>{title}</DrawerTitle>\n              )}\n              {description && (\n                <DrawerDescription className={descriptionClassName}>\n                  {description}\n                </DrawerDescription>\n              )}\n            </DrawerHeader>\n          )}\n\n          <ScrollArea className={cn(\"flex flex-col overflow-hidden\")}>\n            {children && (\n              <div className={cn(\"px-4 py-2\", contentClassName)}>\n                {children}\n              </div>\n            )}\n          </ScrollArea>\n\n          {footer && (\n            <DrawerFooter className={footerClassName}>{footer}</DrawerFooter>\n          )}\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  // Desktop: use sheet with original behavior\n  return (\n    <SSheet open={open} onOpenChange={onOpenChange}>\n      {trigger && <SheetTrigger asChild>{trigger}</SheetTrigger>}\n      <SSheetContent\n        ref={ref}\n        side={side}\n        className={cn(className, contentClasses)}\n        onEscapeKeyDown={(e) => !closeOnEsc && e.preventDefault()}\n        onInteractOutside={(e) => !closeOnOutside && e.preventDefault()}\n        overlayClassName={cn(overlayClassName)}\n      >\n        {/* Hide default close button if showCloseButton is false */}\n        {!showCloseButton && (\n          <style>{`\n            [data-slot=\"sheet-content\"] > [data-slot=\"sheet-close\"] {\n              display: none;\n            }\n          `}</style>\n        )}\n\n        {stickyHeader && headerComponents}\n\n        <ScrollArea className=\"flex max-h-full flex-col overflow-hidden\">\n          {!stickyHeader && headerComponents}\n          {children && (\n            <div className={cn(\"px-6 py-4\", contentClassName)}>{children}</div>\n          )}\n          {!stickyFooter && footerComponents}\n        </ScrollArea>\n\n        {stickyFooter && footerComponents}\n      </SSheetContent>\n    </SSheet>\n  );\n});\n\nSheet.displayName = \"Sheet\";\n\nexport { SheetClose, DrawerClose };\nexport default Sheet;\n"],"names":["getSizeClasses","size","side","isVertical","Sheet","React","props","ref","open","onOpenChange","title","description","children","trigger","footer","closeOnEsc","closeOnOutside","showCloseButton","autoDrawerOnMobile","stickyHeader","stickyFooter","autoHeight","animation","className","contentClassName","headerClassName","titleClassName","descriptionClassName","footerClassName","overlayClassName","animationResult","useMemo","animationClass","contentClasses","cn","headerClasses","footerClasses","headerComponents","jsxs","SheetHeader","jsx","SheetTitle","SheetDescription","footerComponents","SheetFooter","isMobile","drawerContentClasses","Drawer","DrawerTrigger","DrawerContent","DrawerHeader","DrawerTitle","DrawerDescription","ScrollArea","DrawerFooter","SSheet","SheetTrigger","SSheetContent","e"],"mappings":";;;;;;;;AAoEA,MAAMA,IAAiB,CAACC,GAAiBC,MAA4B;AACnE,QAAMC,IAAaD,MAAS,SAASA,MAAS;AAQ9C,SAP2C;AAAA,IACzC,IAAIC,IAAa,kBAAkB;AAAA,IACnC,IAAIA,IAAa,kBAAkB;AAAA,IACnC,IAAIA,IAAa,kBAAkB;AAAA,IACnC,IAAIA,IAAa,kBAAkB;AAAA,IACnC,MAAMA,IAAa,gBAAgB;AAAA,EAAA,EAEtBF,CAAI;AACrB,GAEMG,KAAQC,EAAM,WAAuC,CAACC,GAAOC,MAAQ;AACzE,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAZ,IAAO;AAAA,IACP,YAAAa,IAAa;AAAA,IACb,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC,IAAkB;AAAA,IAClB,oBAAAC,IAAqB;AAAA,IACrB,MAAAjB,IAAO;AAAA,IACP,cAAAkB,IAAe;AAAA,IACf,cAAAC,IAAe;AAAA,IACf,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEvB,GAEEwB,IAAkBC,EAAQ,MACvBT,IAAYU,GAAeV,CAAS,IAAI,EAAE,WAAW,GAAA,GAC3D,CAACA,CAAS,CAAC,GAERW,IAAiBC;AAAA;AAAA,IAErB;AAAA,IACAlC,EAAeC,GAAMC,CAAI;AAAA,IACzB4B,EAAgB;AAAA,IAChBP;AAAA,EAAA,GAGIY,IAAgBD,EAAG,uBAAuBT,CAAe,GAEzDW,IAAgBF;AAAA,IACpB;AAAA,IACAN;AAAA,EAAA,GAGIS,IAAmBN,EAAQ,MACxBrB,KAASC,IACd,gBAAA2B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWL,EAAG,QAAQ,EAAE,YAAYf,EAAA,GAAgBgB,CAAa;AAAA,MAEhE,UAAA;AAAA,QAAAzB,KAAS,gBAAA8B,EAACC,GAAA,EAAW,WAAWf,GAAiB,UAAAhB,GAAM;AAAA,QACvDC,KACC,gBAAA6B,EAACE,GAAA,EAAiB,WAAWf,GAC1B,UAAAhB,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAGF,MACH;AAAA,IACDD;AAAA,IACAC;AAAA,IACAwB;AAAA,IACAT;AAAA,IACAC;AAAA,IACAR;AAAA,EAAA,CACD,GAEKwB,IAAmBZ,EAAQ,MACxBjB,IACL,gBAAA0B;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAWV,EAAG,QAAQ,EAAE,YAAYd,EAAA,GAAgBgB,CAAa;AAAA,MAEhE,UAAAtB;AAAA,IAAA;AAAA,EAAA,IAED,MACH,CAACA,GAAQsB,GAAehB,CAAY,CAAC;AAGxC,MAAIyB,MAAY3B,GAAoB;AAClC,UAAM4B,IAAuBZ;AAAA,MAC3B;AAAA,MACAJ,EAAgB;AAAA,MAChBP;AAAA,IAAA;AAGF,WACE,gBAAAe,EAACS,GAAA,EAAO,MAAAvC,GAAY,cAAAC,GAA4B,WAAU,UACvD,UAAA;AAAA,MAAAI,KAAW,gBAAA2B,EAACQ,GAAA,EAAc,SAAO,IAAE,UAAAnC,GAAQ;AAAA,MAC5C,gBAAAyB;AAAA,QAACW;AAAA,QAAA;AAAA,UACC,KAAA1C;AAAA,UACA,WAAW2B;AAAA,YACTY;AAAA,YACAzB,IAAa,KAAKrB,EAAeC,GAAM,QAAQ;AAAA,UAAA;AAAA,UAG/C,UAAA;AAAA,aAAAS,KAASC,MACT,gBAAA2B,EAACY,GAAA,EAAa,WAAWzB,GACtB,UAAA;AAAA,cAAAf,KACC,gBAAA8B,EAACW,GAAA,EAAY,WAAWzB,GAAiB,UAAAhB,GAAM;AAAA,cAEhDC,KACC,gBAAA6B,EAACY,GAAA,EAAkB,WAAWzB,GAC3B,UAAAhB,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YAGF,gBAAA6B,EAACa,GAAA,EAAW,WAAWnB,EAAG,+BAA+B,GACtD,UAAAtB,KACC,gBAAA4B,EAAC,OAAA,EAAI,WAAWN,EAAG,aAAaV,CAAgB,GAC7C,UAAAZ,GACH,GAEJ;AAAA,YAECE,KACC,gBAAA0B,EAACc,GAAA,EAAa,WAAW1B,GAAkB,UAAAd,EAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEtD,GACF;AAAA,EAEJ;AAGA,SACE,gBAAAwB,EAACiB,GAAA,EAAO,MAAA/C,GAAY,cAAAC,GACjB,UAAA;AAAA,IAAAI,KAAW,gBAAA2B,EAACgB,GAAA,EAAa,SAAO,IAAE,UAAA3C,GAAQ;AAAA,IAC3C,gBAAAyB;AAAA,MAACmB;AAAAA,MAAA;AAAA,QACC,KAAAlD;AAAA,QACA,MAAAL;AAAA,QACA,WAAWgC,EAAGX,GAAWU,CAAc;AAAA,QACvC,iBAAiB,CAACyB,MAAM,CAAC3C,KAAc2C,EAAE,eAAA;AAAA,QACzC,mBAAmB,CAACA,MAAM,CAAC1C,KAAkB0C,EAAE,eAAA;AAAA,QAC/C,kBAAkBxB,EAAGL,CAAgB;AAAA,QAGpC,UAAA;AAAA,UAAA,CAACZ,uBACC,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA,aAIN;AAAA,UAGHE,KAAgBkB;AAAA,UAEjB,gBAAAC,EAACe,GAAA,EAAW,WAAU,4CACnB,UAAA;AAAA,YAAA,CAAClC,KAAgBkB;AAAA,YACjBzB,uBACE,OAAA,EAAI,WAAWsB,EAAG,aAAaV,CAAgB,GAAI,UAAAZ,GAAS;AAAA,YAE9D,CAACQ,KAAgBuB;AAAA,UAAA,GACpB;AAAA,UAECvB,KAAgBuB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ,CAAC;AAEDvC,GAAM,cAAc;"}
+{"version":3,"file":"Sheet.js","sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Sheet as SSheet,\n  SheetContent as SSheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n  SheetClose,\n} from \"@dsui/ui/components/sheet\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@dsui/ui/components/drawer\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { ScrollArea } from \"@dsui/ui/components/scroll-area\";\nimport type { BasicAnimation } from \"@/types/variables\";\nimport { animationClass } from \"@/utils/animations\";\nimport { isMobile } from \"react-device-detect\";\n\nexport type SheetSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type SheetSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface SheetProps {\n  // Core props\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n\n  // Content\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Behavior\n  side?: SheetSide;\n  closeOnEsc?: boolean;\n  closeOnOutside?: boolean;\n  showCloseButton?: boolean;\n  autoDrawerOnMobile?: boolean;\n\n  // Layout\n  size?: SheetSize;\n  stickyHeader?: boolean;\n  stickyFooter?: boolean;\n  autoHeight?: boolean;\n\n  // Animation\n  animation?: BasicAnimation;\n\n  // Styling\n  className?: string;\n  contentClassName?: string;\n  headerClassName?: string;\n  titleClassName?: string;\n  descriptionClassName?: string;\n  footerClassName?: string;\n  overlayClassName?: string;\n}\n\nconst getSizeClasses = (size: SheetSize, side: SheetSide): string => {\n  const isVertical = side === \"top\" || side === \"bottom\";\n  const sizeMap: Record<SheetSize, string> = {\n    sm: isVertical ? \"max-h-[20vh]!\" : \"sm:max-w-sm\",\n    md: isVertical ? \"max-h-[40vh]!\" : \"sm:max-w-md\",\n    lg: isVertical ? \"max-h-[60vh]!\" : \"sm:max-w-lg\",\n    xl: isVertical ? \"max-h-[80vh]!\" : \"sm:max-w-xl\",\n    full: isVertical ? \"max-h-full!\" : \"sm:max-w-full\",\n  };\n  return sizeMap[size];\n};\n\nconst Sheet = React.forwardRef<HTMLDivElement, SheetProps>((props, ref) => {\n  const {\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    trigger,\n    footer,\n    side = \"right\",\n    closeOnEsc = true,\n    closeOnOutside = true,\n    showCloseButton = true,\n    autoDrawerOnMobile = true,\n    size = \"md\",\n    stickyHeader = false,\n    stickyFooter = false,\n    autoHeight = true,\n    animation,\n    className,\n    contentClassName,\n    headerClassName,\n    titleClassName,\n    descriptionClassName,\n    footerClassName,\n    overlayClassName,\n  } = props;\n\n  const animationResult = useMemo(() => {\n    return animation ? animationClass(animation) : { className: \"\" };\n  }, [animation]);\n\n  const contentClasses = cn(\n    // Remove default padding and gap to allow custom header/footer\n    \"ds:!p-0 ds:!gap-0 ds:flex ds:flex-col\",\n    getSizeClasses(size, side),\n    animationResult.className,\n    className\n  );\n\n  const headerClasses = cn(\"ds:px-6 ds:pt-6 ds:text-left\", headerClassName);\n\n  const footerClasses = cn(\n    \"ds:px-6 ds:pb-6 ds:flex-col-reverse ds:sm:flex-row ds:sm:justify-end ds:sm:space-x-2\",\n    footerClassName\n  );\n\n  const headerComponents = useMemo(() => {\n    return title || description ? (\n      <SheetHeader\n        className={cn(\"ds:py-4\", { \"ds:border-b\": stickyHeader }, headerClasses)}\n      >\n        {title && <SheetTitle className={titleClassName}>{title}</SheetTitle>}\n        {description && (\n          <SheetDescription className={descriptionClassName}>\n            {description}\n          </SheetDescription>\n        )}\n      </SheetHeader>\n    ) : null;\n  }, [\n    title,\n    description,\n    headerClasses,\n    titleClassName,\n    descriptionClassName,\n    stickyHeader,\n  ]);\n\n  const footerComponents = useMemo(() => {\n    return footer ? (\n      <SheetFooter\n        className={cn(\"ds:py-4\", { \"ds:border-t\": stickyFooter }, footerClasses)}\n      >\n        {footer}\n      </SheetFooter>\n    ) : null;\n  }, [footer, footerClasses, stickyFooter]);\n\n  // Mobile: use drawer with bottom direction if enabled\n  if (isMobile && autoDrawerOnMobile) {\n    const drawerContentClasses = cn(\n      \"ds:flex ds:flex-col\",\n      animationResult.className,\n      className\n    );\n\n    return (\n      <Drawer open={open} onOpenChange={onOpenChange} direction=\"bottom\">\n        {trigger && <DrawerTrigger asChild>{trigger}</DrawerTrigger>}\n        <DrawerContent\n          ref={ref}\n          className={cn(\n            drawerContentClasses,\n            autoHeight ? \"\" : getSizeClasses(size, \"bottom\")\n          )}\n        >\n          {(title || description) && (\n            <DrawerHeader className={headerClassName}>\n              {title && (\n                <DrawerTitle className={titleClassName}>{title}</DrawerTitle>\n              )}\n              {description && (\n                <DrawerDescription className={descriptionClassName}>\n                  {description}\n                </DrawerDescription>\n              )}\n            </DrawerHeader>\n          )}\n\n          <ScrollArea className={cn(\"ds:flex ds:flex-col ds:overflow-hidden\")}>\n            {children && (\n              <div className={cn(\"ds:px-4 ds:py-2\", contentClassName)}>\n                {children}\n              </div>\n            )}\n          </ScrollArea>\n\n          {footer && (\n            <DrawerFooter className={footerClassName}>{footer}</DrawerFooter>\n          )}\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  // Desktop: use sheet with original behavior\n  return (\n    <SSheet open={open} onOpenChange={onOpenChange}>\n      {trigger && <SheetTrigger asChild>{trigger}</SheetTrigger>}\n      <SSheetContent\n        ref={ref}\n        side={side}\n        className={cn(className, contentClasses)}\n        onEscapeKeyDown={(e) => !closeOnEsc && e.preventDefault()}\n        onInteractOutside={(e) => !closeOnOutside && e.preventDefault()}\n        overlayClassName={cn(overlayClassName)}\n      >\n        {/* Hide default close button if showCloseButton is false */}\n        {!showCloseButton && (\n          <style>{`\n            [data-slot=\"sheet-content\"] > [data-slot=\"sheet-close\"] {\n              display: none;\n            }\n          `}</style>\n        )}\n\n        {stickyHeader && headerComponents}\n\n        <ScrollArea className=\"ds:flex ds:max-h-full ds:flex-col ds:overflow-hidden\">\n          {!stickyHeader && headerComponents}\n          {children && (\n            <div className={cn(\"ds:px-6 ds:py-4\", contentClassName)}>{children}</div>\n          )}\n          {!stickyFooter && footerComponents}\n        </ScrollArea>\n\n        {stickyFooter && footerComponents}\n      </SSheetContent>\n    </SSheet>\n  );\n});\n\nSheet.displayName = \"Sheet\";\n\nexport { SheetClose, DrawerClose };\nexport default Sheet;\n"],"names":["getSizeClasses","size","side","isVertical","Sheet","React","props","ref","open","onOpenChange","title","description","children","trigger","footer","closeOnEsc","closeOnOutside","showCloseButton","autoDrawerOnMobile","stickyHeader","stickyFooter","autoHeight","animation","className","contentClassName","headerClassName","titleClassName","descriptionClassName","footerClassName","overlayClassName","animationResult","useMemo","animationClass","contentClasses","cn","headerClasses","footerClasses","headerComponents","jsxs","SheetHeader","jsx","SheetTitle","SheetDescription","footerComponents","SheetFooter","isMobile","drawerContentClasses","Drawer","DrawerTrigger","DrawerContent","DrawerHeader","DrawerTitle","DrawerDescription","ScrollArea","DrawerFooter","SSheet","SheetTrigger","SSheetContent","e"],"mappings":"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"}