@deepnoid/ui 0.1.30 → 0.1.31

package/dist/components/textarea/textarea.js

@@ -47,201 +47,318 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
 // src/components/textarea/textarea.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Textarea = (0, import_react.forwardRef)((originalProps, ref) => {
+  var _a, _b;
   const [props, variantProps] = mapPropsVariants(originalProps, textareaStyle.variantKeys);
-  const { classNames, label, errorMessage, ...textareaProps } = props;
-  const slots = (0, import_react.useMemo)(() => textareaStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getTextareaWrapperProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.textareaWrapper({ class: classNames == null ? void 0 : classNames.textareaWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getTextareaProps = (0, import_react.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_react.useState)(((_b = (_a = originalProps.value) == null ? void 0 : _a.toString()) != null ? _b : "").length);
+  const innerRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => innerRef.current);
+  const autoResize = (0, import_react.useCallback)(() => {
+    const el = innerRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.height = el.scrollHeight + "px";
+    }
+  }, []);
+  const handleChange = (0, import_react.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_react.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
+  (0, import_react.useEffect)(() => {
+    autoResize();
+  }, [originalProps.value, autoResize]);
+  const slots = (0, import_react.useMemo)(() => textareaStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(
+                "textarea",
+                {
+                  ref: innerRef,
+                  ...textareaProps,
+                  readOnly: props.readOnly,
+                  onChange: handleChange,
+                  className: slots.textarea({ class: classNames == null ? void 0 : classNames.textarea })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between", children: [
+                helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage }),
+                textareaProps.maxLength !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("div", { ...getBaseProps(), children: [
-    props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...getLabelProps(), children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getInnerWrapperProps(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getTextareaWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ...getTextareaProps() }) }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
-    ] })
-  ] });
 });
 Textarea.displayName = "Textarea";
 var textarea_default = Textarea;
 var textareaStyle = (0, import_tailwind_variants.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"
+    ],
+    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"
     ],
-    errorMessage: ["text-danger-main"]
+    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: {
+        textarea: ["border-sm"]
+      }
+    },
+    {
+      variant: "outline",
+      size: "md",
       class: {
-        textareaWrapper: "has-[:focus]:border-primary-main"
+        textarea: ["border-md"]
       }
     },
     {
-      variant: "line",
-      color: "secondary",
+      variant: "outline",
+      size: "lg",
       class: {
-        textareaWrapper: "has-[:focus]:border-secondary-main",
-        textarea: "focus:bg-secondary-main"
+        textarea: ["border-lg"]
       }
     },
-    // Variants & isDisabled
     {
-      variant: "line",
-      isDisabled: true,
+      variant: "outline",
+      size: "xl",
       class: {
-        textareaWrapper: "bg-neutral-soft"
+        textarea: ["border-xl"]
       }
     },
-    // isRequired & isDisabled
     {
-      isRequired: true,
-      isDisabled: true,
+      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
+  }
 });

package/dist/components/textarea/textarea.mjs

@@ -1,7 +1,8 @@
 "use client";
 import {
   textarea_default
-} from "../../chunk-BKE6QF6W.mjs";
+} from "../../chunk-62X5AX5B.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {