@deepnoid/ui 0.0.88 → 0.0.90

package/dist/components/textarea/textarea.d.ts

@@ -1,17 +1,518 @@
-import * as react from 'react';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
+import * as React from 'react';
 import { ComponentProps } from 'react';
+import { SlotsToClasses } from '../../utils/types.js';
 
-interface TextareaProps extends Omit<ComponentProps<"textarea">, "size"> {
-    color?: "primary" | "secondary";
-    size?: "sm" | "md" | "lg";
-    variant?: "solid" | "line";
-    radius?: "default" | "full" | "none";
+interface Props extends Omit<ComponentProps<"textarea">, "size"> {
     label?: string;
     errorMessage?: string;
-    fullWidth?: boolean;
-    isDisabled?: boolean;
-    isRequired?: boolean;
+    classNames?: SlotsToClasses<TextareaSlots>;
 }
-declare const Textarea: react.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
+type TextareaProps = Props & TextareaVariantProps;
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 
-export { type TextareaProps, Textarea as default };
+declare const textareaStyle: tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {
+            textareaWrapper: string[];
+        };
+        line: {
+            textareaWrapper: string[];
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        md: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        lg: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+    };
+    radius: {
+        default: {};
+        none: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+        full: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string[];
+            textareaWrapper: string[];
+            textarea: string[];
+            label: string[];
+            errorMessage: string;
+        };
+    };
+    isRequired: {
+        true: {
+            label: string[];
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    innerWrapper: string[];
+    textareaWrapper: string[];
+    textarea: string[];
+    errorMessage: string[];
+}, undefined, tailwind_variants_dist_config.TVConfig<{
+    variant: {
+        solid: {
+            textareaWrapper: string[];
+        };
+        line: {
+            textareaWrapper: string[];
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        md: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        lg: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+    };
+    radius: {
+        default: {};
+        none: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+        full: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string[];
+            textareaWrapper: string[];
+            textarea: string[];
+            label: string[];
+            errorMessage: string;
+        };
+    };
+    isRequired: {
+        true: {
+            label: string[];
+        };
+    };
+}, {
+    variant: {
+        solid: {
+            textareaWrapper: string[];
+        };
+        line: {
+            textareaWrapper: string[];
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        md: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        lg: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+    };
+    radius: {
+        default: {};
+        none: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+        full: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string[];
+            textareaWrapper: string[];
+            textarea: string[];
+            label: string[];
+            errorMessage: string;
+        };
+    };
+    isRequired: {
+        true: {
+            label: string[];
+        };
+    };
+}>, {
+    variant: {
+        solid: {
+            textareaWrapper: string[];
+        };
+        line: {
+            textareaWrapper: string[];
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        md: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        lg: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+    };
+    radius: {
+        default: {};
+        none: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+        full: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string[];
+            textareaWrapper: string[];
+            textarea: string[];
+            label: string[];
+            errorMessage: string;
+        };
+    };
+    isRequired: {
+        true: {
+            label: string[];
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    innerWrapper: string[];
+    textareaWrapper: string[];
+    textarea: string[];
+    errorMessage: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {
+            textareaWrapper: string[];
+        };
+        line: {
+            textareaWrapper: string[];
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        md: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        lg: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+    };
+    radius: {
+        default: {};
+        none: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+        full: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string[];
+            textareaWrapper: string[];
+            textarea: string[];
+            label: string[];
+            errorMessage: string;
+        };
+    };
+    isRequired: {
+        true: {
+            label: string[];
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    innerWrapper: string[];
+    textareaWrapper: string[];
+    textarea: string[];
+    errorMessage: string[];
+}, undefined, tailwind_variants_dist_config.TVConfig<{
+    variant: {
+        solid: {
+            textareaWrapper: string[];
+        };
+        line: {
+            textareaWrapper: string[];
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        md: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        lg: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+    };
+    radius: {
+        default: {};
+        none: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+        full: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string[];
+            textareaWrapper: string[];
+            textarea: string[];
+            label: string[];
+            errorMessage: string;
+        };
+    };
+    isRequired: {
+        true: {
+            label: string[];
+        };
+    };
+}, {
+    variant: {
+        solid: {
+            textareaWrapper: string[];
+        };
+        line: {
+            textareaWrapper: string[];
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        md: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+        lg: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+            label: string;
+            errorMessage: string;
+        };
+    };
+    radius: {
+        default: {};
+        none: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+        full: {
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            textareaWrapper: string;
+            textarea: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string[];
+            textareaWrapper: string[];
+            textarea: string[];
+            label: string[];
+            errorMessage: string;
+        };
+    };
+    isRequired: {
+        true: {
+            label: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type TextareaVariantProps = VariantProps<typeof textareaStyle>;
+type TextareaSlots = keyof ReturnType<typeof textareaStyle>;
+type TextareaReturnType = ReturnType<typeof textareaStyle>;
+
+export { type Props, type TextareaProps, type TextareaReturnType, type TextareaSlots, type TextareaVariantProps, Textarea as default };

package/dist/components/textarea/textarea.js

@@ -26,24 +26,79 @@ __export(textarea_exports, {
 module.exports = __toCommonJS(textarea_exports);
 var import_react = require("react");
 var import_tailwind_variants = require("tailwind-variants");
+
+// src/utils/props.ts
+var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
+  if (!variantKeys) {
+    return [props, {}];
+  }
+  const picked = variantKeys.reduce((acc, key) => {
+    if (key in props) {
+      return { ...acc, [key]: props[key] };
+    } else {
+      return acc;
+    }
+  }, {});
+  if (removeVariantProps) {
+    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
+    return [omitted, picked];
+  } else {
+    return [props, picked];
+  }
+};
+
+// src/components/textarea/textarea.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Textarea = (0, import_react.forwardRef)((props, ref) => {
-  const { base, label, textareaWrapper, textarea, innerWrapper, errorMessageText } = textareaStyle(props);
-  const { errorMessage, isRequired, isDisabled, ...textareaProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: base(), children: [
-    props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: label(), children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: innerWrapper(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: textareaWrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "textarea",
-        {
-          ref,
-          className: textarea(),
-          disabled: props.isDisabled,
-          required: props.isRequired,
-          ...textareaProps
-        }
-      ) }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: errorMessageText(), children: props.errorMessage })
+var Textarea = (0, import_react.forwardRef)((originalProps, ref) => {
+  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 getErrorMessageProps = (0, import_react.useCallback)(
+    () => ({
+      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
+    }),
+    [slots, classNames]
+  );
+  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 })
     ] })
   ] });
 });
@@ -51,15 +106,15 @@ Textarea.displayName = "Textarea";
 var textarea_default = Textarea;
 var textareaStyle = (0, import_tailwind_variants.tv)({
   slots: {
-    base: ["group", "flex", "flex-col", "gap-[10px]"],
+    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",
-      "p-[10px]",
-      "group-has-[p]:border-danger-main",
+      "group-has-[p]/textarea:border-danger-main",
+      "group-has-[p]/textarea:bg-danger-soft",
       "transition duration-200"
     ],
     textarea: [
@@ -69,7 +124,7 @@ var textareaStyle = (0, import_tailwind_variants.tv)({
       "focus-visible:outline-none",
       "resize-none"
     ],
-    errorMessageText: ["text-s", "text-danger-main"]
+    errorMessage: ["text-danger-main"]
   },
   variants: {
     variant: {
@@ -87,21 +142,24 @@ var textareaStyle = (0, import_tailwind_variants.tv)({
     size: {
       sm: {
         base: "gap-[6px]",
-        textareaWrapper: "w-[240px] rounded-sm",
+        textareaWrapper: "w-[240px] rounded-sm p-[6px]",
         textarea: "text-sm rounded-sm",
-        label: "text-sm"
+        label: "text-sm",
+        errorMessage: "text-sm"
       },
       md: {
         base: "gap-[8px]",
-        textareaWrapper: "w-[240px] rounded-md",
+        textareaWrapper: "w-[240px] rounded-md p-[8px]",
         textarea: "text-md rounded-md",
-        label: "text-md"
+        label: "text-md",
+        errorMessage: "text-md"
       },
       lg: {
         base: "gap-[10px]",
-        textareaWrapper: "w-[240px] rounded-lg",
+        textareaWrapper: "w-[240px] rounded-lg p-[10px]",
         textarea: "text-lg rounded-lg",
-        label: "text-lg"
+        label: "text-lg",
+        errorMessage: "text-lg"
       }
     },
     radius: {
@@ -125,9 +183,10 @@ var textareaStyle = (0, import_tailwind_variants.tv)({
     isDisabled: {
       true: {
         base: ["opacity-disabled", "pointer-events-none"],
-        textareaWrapper: ["border-neutral-light", "pointer-events-none"],
-        textarea: ["bg-neutral-soft", "text-neutral-light placeholder:text-neutral-light", "border-neutral-light"],
-        label: ["text-neutral-light", "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: {

package/dist/components/textarea/textarea.mjs

@@ -1,7 +1,8 @@
 "use client";
 import {
   textarea_default
-} from "../../chunk-WOX3SLJB.mjs";
+} from "../../chunk-OJ2OEI5B.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-IZ6II3QA.mjs";
 export {
   textarea_default as default