@sth87/shadcn-design-system 0.0.34 → 0.0.36

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

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

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};\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    },\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              {label}\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                    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                  >\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","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: \"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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"}

package/dist/esm/components/Textarea/Textarea.js

@@ -1,68 +1,72 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import c from "react";
-import { Textarea as E } from "../../packages/ui/src/components/textarea.js";
+import { Textarea as S } from "../../packages/ui/src/components/textarea.js";
 import { cn as d } from "../../packages/ui/src/lib/utils.js";
-import { Info as S, X as T } from "lucide-react";
-import { Tooltip as V } from "../Tooltip/Tooltip.js";
-import { FloatingLabel as _ } from "../FloatLabel.js";
-import { Label as k } from "../../packages/ui/src/components/label.js";
-const H = c.forwardRef(
+import { Info as T, X as V } from "lucide-react";
+import { Tooltip as _ } from "../Tooltip/Tooltip.js";
+import { FloatingLabel as k } from "../FloatLabel.js";
+import { Label as H } from "../../packages/ui/src/components/label.js";
+const X = c.forwardRef(
   ({
-    className: b,
+    className: y,
     label: u,
-    helperText: i,
-    state: m,
+    helperText: m,
+    state: i,
     size: e = "normal",
     isFloatLabel: r,
     maxLength: s,
-    showCharCount: g,
+    showCharCount: h,
     infoTooltip: f,
-    clearable: h,
-    onClear: v,
-    placeholder: y = " ",
-    onChange: w,
+    clearable: v,
+    onClear: N,
+    placeholder: w = " ",
+    onChange: I,
+    required: p,
     ...n
-  }, I) => {
-    const [p, N] = c.useState(() => typeof n.value == "string" ? n.value.length : typeof n.defaultValue == "string" ? n.defaultValue.length : 0), R = (o) => {
-      N(o.target.value.length), w?.(o);
-    }, x = c.useId(), a = c.useRef(null);
-    c.useImperativeHandle(I, () => a.current);
-    const j = () => {
-      if (a.current) {
-        a.current.value = "", N(0);
+  }, R) => {
+    const [x, b] = c.useState(() => typeof n.value == "string" ? n.value.length : typeof n.defaultValue == "string" ? n.defaultValue.length : 0), j = (o) => {
+      b(o.target.value.length), I?.(o);
+    }, g = c.useId(), l = c.useRef(null);
+    c.useImperativeHandle(R, () => l.current);
+    const C = () => {
+      if (l.current) {
+        l.current.value = "", b(0);
         const o = new Event("input", { bubbles: !0 });
-        a.current.dispatchEvent(o), v && v();
+        l.current.dispatchEvent(o), N && N();
       }
-    }, C = {
+    }, E = {
       default: "text-muted-foreground",
       success: "text-success",
       warning: "text-warning",
       error: "text-error"
     };
-    return /* @__PURE__ */ t("div", { className: b, children: /* @__PURE__ */ l(
+    return /* @__PURE__ */ t("div", { className: y, children: /* @__PURE__ */ a(
       "div",
       {
         className: d("flex flex-col gap-1.5 relative", {
           "floating-label": r
         }),
         children: [
-          !r && u && /* @__PURE__ */ l(
-            k,
+          !r && u && /* @__PURE__ */ a(
+            H,
             {
-              htmlFor: x,
+              htmlFor: g,
               className: "flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
               children: [
-                u,
-                f && /* @__PURE__ */ t(V, { content: f, children: /* @__PURE__ */ t(S, { className: "size-3.5 min-w-3.5" }) })
+                /* @__PURE__ */ a("span", { children: [
+                  u,
+                  p && /* @__PURE__ */ t("span", { className: "text-error ml-0.5", children: "*" })
+                ] }),
+                f && /* @__PURE__ */ t(_, { content: f, children: /* @__PURE__ */ t(T, { className: "size-3.5 min-w-3.5" }) })
               ]
             }
           ),
-          /* @__PURE__ */ l("div", { className: "relative", children: [
+          /* @__PURE__ */ a("div", { className: "relative", children: [
             /* @__PURE__ */ t(
-              E,
+              S,
               {
-                ref: a,
-                id: x,
+                ref: l,
+                id: g,
                 className: d(
                   "peer resize-y",
                   {
@@ -70,28 +74,30 @@ const H = c.forwardRef(
                     "pt-6 pb-1": r && e !== "lg" && e !== "xl",
                     "text-lg": (e === "xl" || e === "lg") && !r
                   },
-                  h && p > 0 && "pr-10"
+                  v && x > 0 && "pr-10"
                   // className
                 ),
-                placeholder: y,
+                placeholder: w,
                 maxLength: s,
-                onChange: R,
-                state: m,
+                onChange: j,
+                state: i,
                 size: r ? e === "xl" || e === "lg" ? e : "xl" : e,
+                required: p,
                 ...n
               }
             ),
             r && /* @__PURE__ */ t(
-              _,
+              k,
               {
-                htmlFor: x,
+                htmlFor: g,
                 size: e,
                 infoTooltip: f,
+                required: p,
                 className: "peer-placeholder-shown:items-start",
                 children: u
               }
             ),
-            h && p > 0 && /* @__PURE__ */ t(
+            v && x > 0 && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
@@ -99,25 +105,25 @@ const H = c.forwardRef(
                 className: d(
                   "absolute top-2 right-2 p-1 rounded hover:bg-accent transition-colors"
                 ),
-                onClick: j,
+                onClick: C,
                 disabled: n.disabled,
-                children: /* @__PURE__ */ t(T, { className: "size-4" })
+                children: /* @__PURE__ */ t(V, { className: "size-4" })
               }
             )
           ] }),
-          (i || g && typeof s == "number") && /* @__PURE__ */ l("div", { className: "flex items-center justify-between text-xs gap-2", children: [
-            i && /* @__PURE__ */ t(
+          (m || h && typeof s == "number") && /* @__PURE__ */ a("div", { className: "flex items-center justify-between text-xs gap-2", children: [
+            m && /* @__PURE__ */ t(
               "p",
               {
                 className: d(
                   "text-xs",
-                  m ? C?.[m] : ""
+                  i ? E?.[i] : ""
                 ),
-                children: i
+                children: m
               }
             ),
-            g && typeof s == "number" && /* @__PURE__ */ l("span", { className: "ml-auto text-muted-foreground", children: [
-              p,
+            h && typeof s == "number" && /* @__PURE__ */ a("span", { className: "ml-auto text-muted-foreground", children: [
+              x,
               " / ",
               s
             ] })
@@ -127,8 +133,8 @@ const H = c.forwardRef(
     ) });
   }
 );
-H.displayName = "Textarea";
+X.displayName = "Textarea";
 export {
-  H as default
+  X as default
 };
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Textarea as STextarea,\n  type TextareaProps as STextareaProps,\n} from \"@dsui/ui/components/textarea\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Info, X } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Label } from \"../Label\";\n\nexport type TextareaProps = Omit<\n  STextareaProps,\n  \"onChange\" | \"size\" | \"state\"\n> & {\n  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  state?: \"default\" | \"success\" | \"warning\" | \"error\";\n  label?: string;\n  helperText?: React.ReactNode;\n  isFloatLabel?: boolean;\n  maxLength?: number;\n  showCharCount?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n};\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state,\n      size = \"normal\",\n      isFloatLabel,\n      maxLength,\n      showCharCount,\n      infoTooltip,\n      clearable,\n      onClear,\n      placeholder = \" \",\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Character count state\n    const [charCount, setCharCount] = React.useState(() => {\n      if (typeof props.value === \"string\") return props.value.length;\n      if (typeof props.defaultValue === \"string\")\n        return props.defaultValue.length;\n      return 0;\n    });\n\n    const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setCharCount(e.target.value.length);\n      onChange?.(e);\n    };\n\n    const textareaId = React.useId();\n    const innerRef = React.useRef<HTMLTextAreaElement>(null);\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => innerRef.current!);\n\n    const handleClear = () => {\n      if (innerRef.current) {\n        innerRef.current.value = \"\";\n        setCharCount(0);\n        const event = new Event(\"input\", { bubbles: true });\n        innerRef.current.dispatchEvent(event);\n        if (onClear) onClear();\n      }\n    };\n\n    // State\n    const helperTextStyles = {\n      default: \"text-muted-foreground\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      error: \"text-error\",\n    };\n\n    return (\n      <div className={className}>\n        <div\n          className={cn(\"flex flex-col gap-1.5 relative\", {\n            \"floating-label\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <Label\n              htmlFor={textareaId}\n              className=\"flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n              {label}\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            <STextarea\n              ref={innerRef}\n              id={textareaId}\n              className={cn(\n                \"peer resize-y\",\n                {\n                  \"pt-6 pb-2\": isFloatLabel && (size === \"lg\" || size === \"xl\"),\n                  \"pt-6 pb-1\": isFloatLabel && size !== \"lg\" && size !== \"xl\",\n                  \"text-lg\": (size === \"xl\" || size === \"lg\") && !isFloatLabel,\n                },\n                clearable && charCount > 0 && \"pr-10\"\n                // className\n              )}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              onChange={handleInput}\n              state={state}\n              size={\n                isFloatLabel\n                  ? size === \"xl\" || size === \"lg\"\n                    ? size\n                    : \"xl\"\n                  : size\n              }\n              {...props}\n            />\n            {isFloatLabel && (\n              <FloatingLabel\n                htmlFor={textareaId}\n                size={size}\n                infoTooltip={infoTooltip}\n                className=\"peer-placeholder-shown:items-start\"\n              >\n                {label}\n              </FloatingLabel>\n            )}\n\n            {/* Clear Button */}\n            {clearable && charCount > 0 && (\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                className={cn(\n                  \"absolute top-2 right-2 p-1 rounded hover:bg-accent transition-colors\"\n                )}\n                onClick={handleClear}\n                disabled={props.disabled}\n              >\n                <X className=\"size-4\" />\n              </button>\n            )}\n          </div>\n\n          {(helperText || (showCharCount && typeof maxLength === \"number\")) && (\n            <div className=\"flex items-center justify-between text-xs gap-2\">\n              {helperText && (\n                <p\n                  className={cn(\n                    \"text-xs\",\n                    state ? helperTextStyles?.[state] : \"\"\n                  )}\n                >\n                  {helperText}\n                </p>\n              )}\n              {showCharCount && typeof maxLength === \"number\" && (\n                <span className=\"ml-auto text-muted-foreground\">\n                  {charCount} / {maxLength}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\nexport default Textarea;\n"],"names":["Textarea","React","className","label","helperText","state","size","isFloatLabel","maxLength","showCharCount","infoTooltip","clearable","onClear","placeholder","onChange","props","ref","charCount","setCharCount","handleInput","e","textareaId","innerRef","handleClear","event","helperTextStyles","jsx","jsxs","cn","Label","Tooltip","Info","STextarea","FloatingLabel","X"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Textarea as STextarea,\n  type TextareaProps as STextareaProps,\n} from \"@dsui/ui/components/textarea\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Info, X } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Label } from \"../Label\";\n\nexport type TextareaProps = Omit<\n  STextareaProps,\n  \"onChange\" | \"size\" | \"state\"\n> & {\n  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  state?: \"default\" | \"success\" | \"warning\" | \"error\";\n  label?: string;\n  helperText?: React.ReactNode;\n  isFloatLabel?: boolean;\n  maxLength?: number;\n  showCharCount?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n  required?: boolean;\n};\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state,\n      size = \"normal\",\n      isFloatLabel,\n      maxLength,\n      showCharCount,\n      infoTooltip,\n      clearable,\n      onClear,\n      placeholder = \" \",\n      onChange,\n      required,\n      ...props\n    },\n    ref\n  ) => {\n    // Character count state\n    const [charCount, setCharCount] = React.useState(() => {\n      if (typeof props.value === \"string\") return props.value.length;\n      if (typeof props.defaultValue === \"string\")\n        return props.defaultValue.length;\n      return 0;\n    });\n\n    const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setCharCount(e.target.value.length);\n      onChange?.(e);\n    };\n\n    const textareaId = React.useId();\n    const innerRef = React.useRef<HTMLTextAreaElement>(null);\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => innerRef.current!);\n\n    const handleClear = () => {\n      if (innerRef.current) {\n        innerRef.current.value = \"\";\n        setCharCount(0);\n        const event = new Event(\"input\", { bubbles: true });\n        innerRef.current.dispatchEvent(event);\n        if (onClear) onClear();\n      }\n    };\n\n    // State\n    const helperTextStyles = {\n      default: \"text-muted-foreground\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      error: \"text-error\",\n    };\n\n    return (\n      <div className={className}>\n        <div\n          className={cn(\"flex flex-col gap-1.5 relative\", {\n            \"floating-label\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <Label\n              htmlFor={textareaId}\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            <STextarea\n              ref={innerRef}\n              id={textareaId}\n              className={cn(\n                \"peer resize-y\",\n                {\n                  \"pt-6 pb-2\": isFloatLabel && (size === \"lg\" || size === \"xl\"),\n                  \"pt-6 pb-1\": isFloatLabel && size !== \"lg\" && size !== \"xl\",\n                  \"text-lg\": (size === \"xl\" || size === \"lg\") && !isFloatLabel,\n                },\n                clearable && charCount > 0 && \"pr-10\"\n                // className\n              )}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              onChange={handleInput}\n              state={state}\n              size={\n                isFloatLabel\n                  ? size === \"xl\" || size === \"lg\"\n                    ? size\n                    : \"xl\"\n                  : size\n              }\n              required={required}\n              {...props}\n            />\n            {isFloatLabel && (\n              <FloatingLabel\n                htmlFor={textareaId}\n                size={size}\n                infoTooltip={infoTooltip}\n                required={required}\n                className=\"peer-placeholder-shown:items-start\"\n              >\n                {label}\n              </FloatingLabel>\n            )}\n\n            {/* Clear Button */}\n            {clearable && charCount > 0 && (\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                className={cn(\n                  \"absolute top-2 right-2 p-1 rounded hover:bg-accent transition-colors\"\n                )}\n                onClick={handleClear}\n                disabled={props.disabled}\n              >\n                <X className=\"size-4\" />\n              </button>\n            )}\n          </div>\n\n          {(helperText || (showCharCount && typeof maxLength === \"number\")) && (\n            <div className=\"flex items-center justify-between text-xs gap-2\">\n              {helperText && (\n                <p\n                  className={cn(\n                    \"text-xs\",\n                    state ? helperTextStyles?.[state] : \"\"\n                  )}\n                >\n                  {helperText}\n                </p>\n              )}\n              {showCharCount && typeof maxLength === \"number\" && (\n                <span className=\"ml-auto text-muted-foreground\">\n                  {charCount} / {maxLength}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\nexport default Textarea;\n"],"names":["Textarea","React","className","label","helperText","state","size","isFloatLabel","maxLength","showCharCount","infoTooltip","clearable","onClear","placeholder","onChange","required","props","ref","charCount","setCharCount","handleInput","e","textareaId","innerRef","handleClear","event","helperTextStyles","jsx","jsxs","cn","Label","Tooltip","Info","STextarea","FloatingLabel","X"],"mappings":"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"}