@deepnoid/ui 0.1.30 → 0.1.31

package/dist/index.js

@@ -5869,7 +5869,7 @@ var breadcrumbStyle = tv({
 });
 
 // src/components/input/input.tsx
-var import_react9 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
@@ -5878,19 +5878,22 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
   const slots = (0, import_react9.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
   const getContentProps = (0, import_react9.useCallback)(
     () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      className: clsx(
+        slots.content({ class: classNames == null ? void 0 : classNames.content }),
+        inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+      ),
       size: originalProps.size
     }),
     [slots, classNames, originalProps.size]
   );
   const renderStartContent = () => {
-    if (import_react9.default.isValidElement(startContent)) {
+    if ((0, import_react9.isValidElement)(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react9.default.cloneElement(startContent, mergedProps);
+      return (0, import_react9.cloneElement)(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...contentProps, children: startContent });
@@ -5909,13 +5912,13 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
     }
   );
   const renderContentWithIcon = () => {
-    if (import_react9.default.isValidElement(endContent)) {
+    if ((0, import_react9.isValidElement)(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react9.default.cloneElement(endContent, mergedProps);
+      return (0, import_react9.cloneElement)(endContent, mergedProps);
     } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
@@ -5950,20 +5953,17 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
             {
               className: clsx(
                 slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
-                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                inputProps.readOnly ? slots.readonlyWrapper({ class: classNames == null ? void 0 : classNames.readonlyWrapper }) : ""
               ),
               children: [
                 startContent && renderStartContent(),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "input",
                   {
-                    ...inputProps,
                     ref: ref || inputRef,
+                    ...inputProps,
                     readOnly: props.readOnly,
-                    className: clsx(
-                      slots.input({ class: classNames == null ? void 0 : classNames.input }),
-                      inputProps.readOnly ? "!text-body-foreground placeholder:!text-body-foreground" : ""
-                    ),
+                    className: clsx(slots.input({ class: classNames == null ? void 0 : classNames.input })),
                     size: 0
                   }
                 ),
@@ -5971,7 +5971,16 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
               ]
             }
           ),
-          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "p",
+            {
+              className: clsx(
+                slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: helperMessage
+            }
+          ),
           errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
         ] })
       ]
@@ -5983,12 +5992,12 @@ var input_default = Input;
 var inputStyle = tv(
   {
     slots: {
-      base: ["group/input", "flex select-none"],
+      base: ["group/input", "flex", "select-none"],
       vertical: ["flex-col"],
       horizon: ["flex-row", "gap-0"],
       label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
       innerWrapper: ["flex", "flex-col"],
-      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+      inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:!bg-danger-soft"],
       input: [
         "w-full",
         "h-full",
@@ -5997,8 +6006,8 @@ var inputStyle = tv(
         "placeholder:text-neutral-main",
         "outline-none",
         "focus:ring-0",
-        "group-has-[:hover]/input:text-neutral-dark",
-        "group-has-[:hover]/input:placeholder:text-neutral-dark",
+        "group-has-[:hover]/input:!text-neutral-dark",
+        "group-has-[:hover]/input:placeholder:!text-neutral-dark",
         "group-has-[:focus]/input:text-neutral-dark",
         "group-has-[:focus]/input:placeholder:text-neutral-dark",
         "group-has-[p.error]/input:text-danger-main",
@@ -6014,13 +6023,22 @@ var inputStyle = tv(
       ],
       helperMessage: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
       errorMessage: ["text-danger-main"],
-      readonly: ["pointer-events-none", "!text-body-foreground"]
+      readonlyWrapper: [
+        "pointer-events-none",
+        "!text-body-foreground",
+        "placeholder:!text-body-foreground",
+        "group-has-[p.error]/input:!text-danger-main",
+        "group-has-[p.error]/input:placeholder:!text-danger-main",
+        "[&>input]:!text-body-foreground",
+        "[&>input]:placeholder:!text-body-foreground"
+      ],
+      readonly: []
     },
     variants: {
       variant: {
         solid: {
           inputWrapper: ["border-transparent", "bg-trans-soft"],
-          readonly: ["!bg-trans-light"]
+          readonlyWrapper: ["!bg-trans-light"]
         },
         outline: {
           inputWrapper: [
@@ -6029,7 +6047,7 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         },
         underline: {
           inputWrapper: [
@@ -6039,30 +6057,31 @@ var inputStyle = tv(
             "group-has-[:focus]/input:bg-body-background",
             "group-has-[p.error]/input:border-danger-main"
           ],
-          readonly: ["!bg-trans-soft"]
+          readonlyWrapper: ["!bg-trans-soft"]
         }
       },
       color: {
         primary: {
           content: [
-            "group-has-[:focus]/input:text-primary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-primary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-primary-main",
-            "group-has-[:focus:hover]/input:text-primary-main",
-            "group-has-[:focus]/input:hover:text-primary-main"
-          ]
+            "group-has-[:focus]/input:!text-primary-main",
+            "group-has-[:focus:hover]/input:!text-primary-main",
+            "group-has-[:focus]/input:hover:!text-primary-main"
+          ],
+          readonly: ["!text-primary-main"]
         },
         secondary: {
           content: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[p.error]:not(input:focus):hover/input:!text-secondary-main"
           ],
           helperMessage: [
-            "group-has-[:focus]/input:text-secondary-main",
-            "group-has-[:focus:hover]/input:text-secondary-main",
-            "group-has-[:focus]/input:hover:text-secondary-main"
+            "group-has-[:focus]/input:!text-secondary-main",
+            "group-has-[:focus:hover]/input:!text-secondary-main",
+            "group-has-[:focus]/input:hover:!text-secondary-main"
           ]
         }
       },
@@ -6113,14 +6132,14 @@ var inputStyle = tv(
       },
       disabled: {
         true: {
-          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+          inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "group-has-[p.error]/input:!text-danger-light"],
           input: [
-            "text-neutral-light",
-            "placeholder:text-neutral-light",
-            "group-has-[p.error]/input:text-danger-light",
-            "group-has-[p.error]/input:placeholder:text-danger-light"
+            "!text-neutral-light",
+            "placeholder:!text-neutral-light",
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
           ],
-          content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+          content: ["!text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
@@ -6187,7 +6206,11 @@ var inputStyle = tv(
         disabled: true,
         variant: ["outline", "underline"],
         class: {
-          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+          inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:!border-danger-light"],
+          content: [
+            "group-has-[p.error]/input:!text-danger-light",
+            "group-has-[p.error]/input:placeholder:!text-danger-light"
+          ]
         }
       }
     ],
@@ -6418,200 +6441,277 @@ var import_react11 = require("react");
 var import_tailwind_variants11 = require("tailwind-variants");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Textarea = (0, import_react11.forwardRef)((originalProps, ref) => {
+  var _a, _b;
   const [props, variantProps] = mapPropsVariants(originalProps, textareaStyle.variantKeys);
-  const { classNames, label, errorMessage, ...textareaProps } = props;
-  const slots = (0, import_react11.useMemo)(() => textareaStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getTextareaWrapperProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.textareaWrapper({ class: classNames == null ? void 0 : classNames.textareaWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getTextareaProps = (0, import_react11.useCallback)(
-    () => ({
-      ...textareaProps,
-      ref,
-      className: slots.textarea({ class: classNames == null ? void 0 : classNames.textarea }),
-      disabled: originalProps.isDisabled,
-      required: originalProps.isRequired,
-      size: 0
-    }),
-    [textareaProps, ref, slots, classNames == null ? void 0 : classNames.textarea, originalProps.isDisabled, originalProps.isRequired]
+  const { classNames, label, helperMessage, errorMessage, ...textareaProps } = props;
+  const [length, setLength] = (0, import_react11.useState)(((_b = (_a = originalProps.value) == null ? void 0 : _a.toString()) != null ? _b : "").length);
+  const innerRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useImperativeHandle)(ref, () => innerRef.current);
+  const autoResize = (0, import_react11.useCallback)(() => {
+    const el = innerRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.height = el.scrollHeight + "px";
+    }
+  }, []);
+  const handleChange = (0, import_react11.useCallback)(
+    (e) => {
+      var _a2;
+      setLength(e.target.value.length);
+      (_a2 = originalProps.onChange) == null ? void 0 : _a2.call(originalProps, e);
+      autoResize();
+    },
+    [originalProps, autoResize]
   );
-  const getErrorMessageProps = (0, import_react11.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
+  (0, import_react11.useEffect)(() => {
+    autoResize();
+  }, [originalProps.value, autoResize]);
+  const slots = (0, import_react11.useMemo)(() => textareaStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+      ),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            className: clsx(
+              slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+              textareaProps.readOnly ? slots.readonlyWrapper({ class: classNames == null ? void 0 : classNames.readonlyWrapper }) : ""
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "textarea",
+                {
+                  ref: innerRef,
+                  ...textareaProps,
+                  readOnly: props.readOnly,
+                  onChange: handleChange,
+                  className: slots.textarea({ class: classNames == null ? void 0 : classNames.textarea })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-between", children: [
+                helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "p",
+                  {
+                    className: clsx(
+                      slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                      textareaProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                    ),
+                    children: helperMessage
+                  }
+                ),
+                errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage }),
+                textareaProps.maxLength !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  "p",
+                  {
+                    className: clsx(
+                      slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }),
+                      textareaProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                    ),
+                    children: [
+                      length,
+                      " / ",
+                      textareaProps.maxLength
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...getBaseProps(), children: [
-    props.label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { ...getLabelProps(), children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...getInnerWrapperProps(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ...getTextareaWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("textarea", { ...getTextareaProps() }) }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
-    ] })
-  ] });
 });
 Textarea.displayName = "Textarea";
 var textarea_default = Textarea;
 var textareaStyle = (0, import_tailwind_variants11.tv)({
   slots: {
-    base: ["group/textarea", "flex", "flex-col", "gap-[10px]", "select-none"],
-    label: ["flex", "items-center"],
-    innerWrapper: ["flex", "flex-col", "gap-[6px]"],
-    textareaWrapper: [
-      "flex",
-      "bg-transparent",
-      "border-neutral-main",
-      "group-has-[p]/textarea:border-danger-main",
-      "group-has-[p]/textarea:bg-danger-soft",
-      "transition duration-200"
-    ],
+    base: ["group/textarea", "flex", "select-none"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
     textarea: [
       "w-full",
+      "h-full",
       "bg-transparent",
-      "placeholder:text-neutral-main",
-      "focus-visible:outline-none",
-      "resize-none"
+      "text-neutral-main",
+      "placeholder:!text-neutral-main",
+      "outline-none",
+      "resize-none",
+      "focus:ring-0",
+      "group-has-[:hover]/textarea:!text-neutral-dark",
+      "group-has-[:hover]/textarea:placeholder:!text-neutral-dark",
+      "group-has-[:focus]/textarea:!text-neutral-dark",
+      "group-has-[:focus]/textarea:placeholder:!text-neutral-dark",
+      "group-has-[p.error]/textarea:bg-danger-soft",
+      "group-has-[p.error]/textarea:text-danger-main",
+      "group-has-[p.error]/textarea:placeholder:!text-danger-main"
     ],
-    errorMessage: ["text-danger-main"]
+    helperMessage: [
+      "text-neutral-main",
+      "group-has-[:hover]/textarea:text-neutral-dark",
+      "group-has-[p.error]/textarea:text-danger-main"
+    ],
+    errorMessage: ["text-danger-main"],
+    readonlyWrapper: [
+      "pointer-events-none",
+      "[&>textarea]:!text-body-foreground",
+      "[&>textarea]:placeholder:!text-body-foreground"
+    ],
+    readonly: []
   },
   variants: {
     variant: {
       solid: {
-        textareaWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+        textarea: ["border-transparent", "bg-trans-soft"],
+        readonlyWrapper: ["[&>textarea]:!bg-trans-light"]
       },
-      line: {
-        textareaWrapper: ["border", "hover:bg-trans-soft", "has-[:focus]:bg-trans-soft"]
+      outline: {
+        textarea: [
+          "border-neutral-light",
+          "group-has-[:hover]/textarea:bg-trans-soft",
+          "group-has-[:focus]/textarea:bg-body-background",
+          "group-has-[p.error]/textarea:border-danger-main"
+        ],
+        readonlyWrapper: ["[&>textarea]:!bg-trans-soft"]
       }
     },
     color: {
-      primary: {},
-      secondary: {}
+      primary: {
+        helperMessage: [
+          "group-has-[:focus]/textarea:!text-primary-main",
+          "group-has-[:focus]/textarea:!text-primary-main",
+          "group-has-[:focus]/textarea:hover:!text-primary-main",
+          "group-has-[:focus:hover]/textarea:!text-primary-main",
+          "group-has-[p.error]:not(textarea:focus):hover/textarea:!text-primary-main"
+        ],
+        readonly: ["!text-primary-main"]
+      },
+      secondary: {
+        helperMessage: [
+          "group-has-[:focus]/textarea:text-secondary-main",
+          "group-has-[:focus]/textarea:text-secondary-main",
+          "group-has-[:focus]/textarea:hover:text-secondary-main",
+          "group-has-[:focus:hover]/textarea:text-secondary-main",
+          "group-has-[p.error]:not(textarea:focus):hover/textarea:!text-secondary-main"
+        ],
+        readonly: ["!text-secondary-main"]
+      }
     },
     size: {
       sm: {
-        base: "gap-[6px]",
-        textareaWrapper: "w-[240px] rounded-sm p-[6px]",
-        textarea: "text-sm rounded-sm",
-        label: "text-sm",
-        errorMessage: "text-sm"
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        textarea: ["w-[240px]", "h-[24px]", "rounded-sm", "p-[8px]", "gap-[4px]"],
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
       },
       md: {
-        base: "gap-[8px]",
-        textareaWrapper: "w-[240px] rounded-md p-[8px]",
-        textarea: "text-md rounded-md",
-        label: "text-md",
-        errorMessage: "text-md"
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        textarea: ["w-[240px]", "h-[32px]", "rounded-md", "p-[8px]", "gap-[6px]"],
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
       },
       lg: {
-        base: "gap-[10px]",
-        textareaWrapper: "w-[240px] rounded-lg p-[10px]",
-        textarea: "text-lg rounded-lg",
-        label: "text-lg",
-        errorMessage: "text-lg"
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        textarea: ["w-[240px]", "h-[40px]", "rounded-lg", "p-[10px]", "gap-[8px]"],
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
       },
       xl: {
-        base: "gap-[10px]",
-        textareaWrapper: "w-[240px] rounded-xl p-[10px]",
-        textarea: "text-xl rounded-xl",
-        label: "text-xl",
-        errorMessage: "text-xl"
-      }
-    },
-    radius: {
-      default: {},
-      none: {
-        textareaWrapper: "rounded-none",
-        textarea: "rounded-none"
-      },
-      full: {
-        textareaWrapper: "rounded-full",
-        textarea: "rounded-full"
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        textarea: ["w-[240px]", "h-[50px]", "rounded-lg", "p-[10px]", "gap-[10px]"],
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
       }
     },
-    fullWidth: {
-      true: {
-        base: "w-full",
-        textareaWrapper: "w-full",
-        textarea: "w-full"
-      }
+    direction: {
+      vertical: "",
+      horizon: ""
     },
-    isDisabled: {
+    full: {
       true: {
-        base: ["opacity-disabled", "pointer-events-none"],
-        textareaWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
-        textarea: ["text-neutral-light placeholder:text-neutral-light", "border-neutral-light"],
-        label: ["text-neutral-light", "pointer-events-none"],
-        errorMessage: "text-danger-light"
+        base: ["w-full"],
+        wrapper: ["flex-1"],
+        textarea: ["w-full"]
       }
     },
-    isRequired: {
+    disabled: {
       true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+        textarea: [
+          "bg-neutral-soft",
+          "pointer-events-none",
+          "text-neutral-light",
+          "placeholder:!text-neutral-light",
+          "group-has-[p.error]/textarea:text-danger-light",
+          "group-has-[p.error]/textarea:border-danger-light",
+          "group-has-[p.error]/textarea:placeholder:!text-danger-light"
+        ],
+        helperMessage: ["!text-neutral-light", "group-has-[p.error]/textarea:!text-danger-light"],
+        errorMessage: ["!text-danger-light"]
       }
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
-    // variants & color
     {
-      variant: "line",
-      color: "primary",
+      variant: "outline",
+      size: "sm",
       class: {
-        textareaWrapper: "has-[:focus]:border-primary-main"
+        textarea: ["border-sm"]
       }
     },
     {
-      variant: "line",
-      color: "secondary",
+      variant: "outline",
+      size: "md",
       class: {
-        textareaWrapper: "has-[:focus]:border-secondary-main",
-        textarea: "focus:bg-secondary-main"
+        textarea: ["border-md"]
       }
     },
-    // Variants & isDisabled
     {
-      variant: "line",
-      isDisabled: true,
+      variant: "outline",
+      size: "lg",
       class: {
-        textareaWrapper: "bg-neutral-soft"
+        textarea: ["border-lg"]
       }
     },
-    // isRequired & isDisabled
     {
-      isRequired: true,
-      isDisabled: true,
+      variant: "outline",
+      size: "xl",
+      class: {
+        textarea: ["border-xl"]
+      }
+    },
+    {
+      disabled: true,
+      variant: ["outline"],
       class: {
-        label: "after:text-danger-light"
+        textarea: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    fullWidth: false,
+    disabled: false,
+    readonly: false
+  }
 });
 
 // src/components/table/table.tsx
@@ -6965,11 +7065,12 @@ var TableBody = ({
   classNames,
   className
 }) => {
-  const getCellStyle = (col) => ({
-    width: col.width ? `${col.width}px` : void 0,
-    minWidth: col.minWidth ? `${col.minWidth}px` : void 0,
-    maxWidth: col.maxWidth ? `${col.maxWidth}px` : void 0,
-    height: col.height ? `${col.height}px` : void 0
+  const getCellStyle = (column) => ({
+    width: column.width ? `${column.width}px` : void 0,
+    minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center"
   });
   const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   const renderCheckboxCell = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -6986,16 +7087,16 @@ var TableBody = ({
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
   const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), onClick: () => onRowClick == null ? void 0 : onRowClick(row), children: [
-    columns.map((col, colIdx) => {
+    columns.map((column, colIdx) => {
       var _a;
-      const value = row[col.field];
-      const formattedValue = ((_a = col.valueFormatter) == null ? void 0 : _a.call(col, { value, field: col.field })) || value;
-      const content = col.renderCell ? col.renderCell({ id: row.id, field: col.field, value, formattedValue, row }) : formattedValue;
+      const value = row[column.field];
+      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "td",
         {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), col.className),
-          style: getCellStyle(col),
+          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
+          style: getCellStyle(column),
           children: content
         },
         `${rowIndex}-${colIdx}`
@@ -7895,13 +7996,16 @@ var select = tv({
   variants: {
     color: {
       primary: {
-        selectWrapper: ["hover:text-primary-main"],
-        option: ["hover:bg-primary-soft", "hover:text-primary-main"]
+        selectWrapper: ["text-primary-main"],
+        select: ["text-primary-main"],
+        option: ["hover:bg-primary-soft", "hover:text-primary-main"],
+        helperMessage: ["text-primary-main"]
       },
       secondary: {
-        selectWrapper: ["hover:text-secondary-main"],
+        selectWrapper: ["text-secondary-main"],
         select: ["text-secondary-main"],
-        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"]
+        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"],
+        helperMessage: ["text-secondary-main"]
       }
     },
     size: {