@deepnoid/ui 0.0.88 → 0.0.89

package/dist/chunk-OJ2OEI5B.mjs

@@ -0,0 +1,202 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/textarea/textarea.tsx
+import { forwardRef, useCallback, useMemo } from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Textarea = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, textareaStyle.variantKeys);
+  const { classNames, label, errorMessage, ...textareaProps } = props;
+  const slots = useMemo(() => textareaStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = useCallback(
+    () => ({
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [slots, classNames]
+  );
+  const getLabelProps = useCallback(
+    () => ({
+      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
+    }),
+    [slots, classNames]
+  );
+  const getInnerWrapperProps = useCallback(
+    () => ({
+      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getTextareaWrapperProps = useCallback(
+    () => ({
+      className: slots.textareaWrapper({ class: classNames == null ? void 0 : classNames.textareaWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getTextareaProps = 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 getErrorMessageProps = useCallback(
+    () => ({
+      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
+    }),
+    [slots, classNames]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
+    props.label && /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: props.label }),
+    /* @__PURE__ */ jsxs("div", { ...getInnerWrapperProps(), children: [
+      /* @__PURE__ */ jsx("div", { ...getTextareaWrapperProps(), children: /* @__PURE__ */ jsx("textarea", { ...getTextareaProps() }) }),
+      props.errorMessage && /* @__PURE__ */ jsx("p", { ...getErrorMessageProps(), children: props.errorMessage })
+    ] })
+  ] });
+});
+Textarea.displayName = "Textarea";
+var textarea_default = Textarea;
+var textareaStyle = 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"
+    ],
+    textarea: [
+      "w-full",
+      "bg-transparent",
+      "placeholder:text-neutral-main",
+      "focus-visible:outline-none",
+      "resize-none"
+    ],
+    errorMessage: ["text-danger-main"]
+  },
+  variants: {
+    variant: {
+      solid: {
+        textareaWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+      },
+      line: {
+        textareaWrapper: ["border", "hover:bg-trans-soft", "has-[:focus]:bg-trans-soft"]
+      }
+    },
+    color: {
+      primary: {},
+      secondary: {}
+    },
+    size: {
+      sm: {
+        base: "gap-[6px]",
+        textareaWrapper: "w-[240px] rounded-sm p-[6px]",
+        textarea: "text-sm rounded-sm",
+        label: "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"
+      },
+      lg: {
+        base: "gap-[10px]",
+        textareaWrapper: "w-[240px] rounded-lg p-[10px]",
+        textarea: "text-lg rounded-lg",
+        label: "text-lg",
+        errorMessage: "text-lg"
+      }
+    },
+    radius: {
+      default: {},
+      none: {
+        textareaWrapper: "rounded-none",
+        textarea: "rounded-none"
+      },
+      full: {
+        textareaWrapper: "rounded-full",
+        textarea: "rounded-full"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full",
+        textareaWrapper: "w-full",
+        textarea: "w-full"
+      }
+    },
+    isDisabled: {
+      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"
+      }
+    },
+    isRequired: {
+      true: {
+        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    fullWidth: false,
+    isDisabled: false,
+    isRequired: false
+  },
+  compoundVariants: [
+    // variants & color
+    {
+      variant: "line",
+      color: "primary",
+      class: {
+        textareaWrapper: "has-[:focus]:border-primary-main"
+      }
+    },
+    {
+      variant: "line",
+      color: "secondary",
+      class: {
+        textareaWrapper: "has-[:focus]:border-secondary-main",
+        textarea: "focus:bg-secondary-main"
+      }
+    },
+    // Variants & isDisabled
+    {
+      variant: "line",
+      isDisabled: true,
+      class: {
+        textareaWrapper: "bg-neutral-soft"
+      }
+    },
+    // isRequired & isDisabled
+    {
+      isRequired: true,
+      isDisabled: true,
+      class: {
+        label: "after:text-danger-light"
+      }
+    }
+  ]
+});
+
+export {
+  textarea_default
+};

package/dist/{chunk-QRHT7MSO.mjs → chunk-PXUBPWKU.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-PRUAIZTU.mjs";
+} from "./chunk-LCI6RPWE.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-PCIONGEJ.mjs → chunk-QWFOYO3D.mjs}

@@ -52,7 +52,16 @@ Radio.displayName = "Radio";
 var radio_default = Radio;
 var radio = tv({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent",
+    base: [
+      "group/radio",
+      "relative",
+      "max-w-fit",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "cursor-pointer",
+      "tap-highlight-transparent"
+    ],
     icon: [
       "relative",
       "inline-flex",
@@ -81,18 +90,18 @@ var radio = tv({
       "after:left-1/2",
       "after:-translate-x-1/2",
       "after:-translate-y-1/2",
-      "group-has-[:checked]:after:opacity-100",
-      "group-has-[:checked]:after:scale-100",
+      "group-has-[:checked]/radio:after:opacity-100",
+      "group-has-[:checked]/radio:after:scale-100",
       // hover
-      "group-hover:before:bg-neutral-soft",
+      "group-hover/radio:before:bg-neutral-soft",
       "before:transition duration-200",
       // focus ring
       "outline-none",
-      "group-focus:z-10",
-      "group-focus:ring-2",
-      "group-focus:ring-focus",
-      "group-focus:ring-offset-2",
-      "group-focus:ring-offset-background"
+      "group-focus/radio:z-10",
+      "group-focus/radio:ring-2",
+      "group-focus/radio:ring-focus",
+      "group-focus/radio:ring-offset-2",
+      "group-focus/radio:ring-offset-background"
     ],
     labelWrapper: "flex flex-col",
     label: "text-foreground select-none"
@@ -100,44 +109,53 @@ var radio = tv({
   variants: {
     color: {
       primary: {
-        icon: "group-has-[:checked]:before:border-primary-main after:bg-primary-main"
+        icon: ["group-has-[:checked]/radio:before:border-primary-main", "after:bg-primary-main"]
       },
       secondary: {
-        icon: "group-has-[:checked]:before:border-secondary-main after:bg-secondary-main"
+        icon: ["group-has-[:checked]/radio:before:border-secondary-main", "after:bg-secondary-main"]
       }
     },
     size: {
       sm: {
-        icon: ["w-[15px] h-[15px] mr-[8px] after:w-[10px] after:h-[10px]"],
+        icon: ["w-[15px]", "h-[15px]", "mr-[6px]", "after:w-[9px]", "after:h-[9px]"],
         label: "text-sm"
       },
       md: {
-        icon: ["w-[17px] h-[17px] mr-[9px] after:w-[11px] after:h-[11px]"],
+        icon: ["w-[17px]", "h-[17px]", "mr-[8px]", "after:w-[11px]", "after:h-[11px]"],
         label: "text-md"
       },
       lg: {
-        icon: ["w-[20px] h-[20px] mr-[10px] after:w-[12px] after:h-[12px]"],
+        icon: ["w-[20px]", "h-[20px]", "mr-[10px]", "after:w-[14px]", "after:h-[14px]"],
         label: "text-lg"
       }
     },
     isInvalid: {
       true: {
-        icon: "after:bg-danger-main before:border-danger-main",
+        icon: [
+          "after:bg-danger-main",
+          "before:border-danger-main",
+          "group-has-[:checked]/radio:before:border-danger-main"
+        ],
         label: "text-danger-main"
       }
     },
     isDisabled: {
       true: {
-        base: "opacity-disabled pointer-events-none",
-        icon: "before:border-neutral-light before:bg-neutral-soft after:bg-neutral-light",
+        base: ["opacity-disabled", "pointer-events-none"],
+        icon: [
+          "before:border-neutral-light",
+          "before:bg-neutral-soft",
+          "after:bg-neutral-light",
+          "group-has-[:checked]/radio:before:border-neutral-light"
+        ],
         label: "text-neutral-light"
       }
     },
     disableAnimation: {
       true: {},
       false: {
-        icon: ["group-active:scale-95", "transition-transform-colors", "motion-reduce:transition-none"],
-        label: "transition-colors motion-reduce:transition-none"
+        icon: ["group-active/radio:scale-95", "transition-transform-colors", "motion-reduce:transition-none"],
+        label: ["transition-colors", "motion-reduce:transition-none"]
       }
     }
   },

package/dist/{chunk-LY6LJRUX.mjs → chunk-RZZWHI6O.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-PRUAIZTU.mjs";
+} from "./chunk-LCI6RPWE.mjs";
 import {
   tv
 } from "./chunk-J725QONZ.mjs";