@nexub/react 1.0.0 → 1.2.0

package/dist/chunk-W4IEXUD4.js

@@ -0,0 +1,127 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Textarea/Textarea.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var textareaVariants = cva(
+  [
+    "w-full rounded-md border bg-[var(--color-bg-default)] text-[var(--color-text-primary)]",
+    "placeholder:text-[var(--color-text-placeholder)]",
+    "border-[var(--color-border-input)] transition-colors",
+    // Border shifts to ring color on focus; ring is a semi-transparent halo.
+    // One hard 1 px border + one soft 2 px glow = single clean focus indicator.
+    "focus-visible:outline-none focus-visible:border-[var(--color-ring-default)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
+    "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-1.5 text-sm min-h-[64px]",
+        md: "px-3 py-2 text-sm min-h-[80px]",
+        lg: "px-4 py-2.5 text-base min-h-[96px]"
+      },
+      invalid: {
+        true: "border-[var(--color-danger-500)] focus-visible:border-[var(--color-danger-500)] focus-visible:ring-[color-mix(in_srgb,var(--color-danger-500)_25%,transparent)]"
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      resize: "vertical"
+    }
+  }
+);
+var Textarea = React.forwardRef(
+  ({
+    className,
+    size,
+    invalid,
+    resize = "vertical",
+    autoGrow = false,
+    value,
+    defaultValue,
+    onChange,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue ?? ""
+    );
+    const controlled = value !== void 0;
+    const resolvedValue = controlled ? String(value) : internalValue;
+    const handleChange = (e) => {
+      if (!controlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    const sharedClass = cn(
+      textareaVariants({ size, invalid, resize: autoGrow ? "none" : resize }),
+      className
+    );
+    if (autoGrow) {
+      return (
+        /*
+         * CSS grid trick: the grid area is shared between the mirror span
+         * and the textarea, so the container grows to fit the larger of the two.
+         * The textarea is stretched to fill the container height automatically.
+         */
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid w-full",
+            style: { gridTemplateAreas: '"grow"' },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(sharedClass, "invisible whitespace-pre-wrap break-words pointer-events-none"),
+                  style: { gridArea: "grow" },
+                  children: resolvedValue + "\u200B"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ref,
+                  value,
+                  defaultValue: !controlled ? defaultValue : void 0,
+                  onChange: handleChange,
+                  className: cn(sharedClass, "overflow-hidden"),
+                  "aria-invalid": invalid ?? void 0,
+                  style: { gridArea: "grow" },
+                  ...props
+                }
+              )
+            ]
+          }
+        )
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        value,
+        defaultValue: !controlled ? defaultValue : void 0,
+        onChange: handleChange,
+        className: sharedClass,
+        "aria-invalid": invalid ?? void 0,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export {
+  textareaVariants,
+  Textarea
+};