@ladder-ui/textarea 0.3.0 → 0.4.0

package/dist/index.js

@@ -3,14 +3,55 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
+var core = require('@ladder-ui/core');
 var react = require('react');
 
-function Textarea({ ref, className, size = "md", status = "default", fullWidth = true, resize = "vertical", autoResize = false, disabled, readOnly, onInput, style, ...props }) {
+// ── Variants ──────────────────────────────────────────────────────────────────
+const textareaVariants = core.cva({
+    base: "lui-textarea",
+    variants: {
+        size: {
+            xs: "lui-textarea--xs",
+            sm: "lui-textarea--sm",
+            md: "lui-textarea--md",
+            lg: "lui-textarea--lg",
+            xl: "lui-textarea--xl",
+        },
+        status: {
+            default: "",
+            error: "lui-textarea--error",
+            success: "lui-textarea--success",
+            warning: "lui-textarea--warning",
+        },
+        resize: {
+            vertical: "",
+            none: "lui-textarea--resize-none",
+            both: "lui-textarea--resize-both",
+            horizontal: "lui-textarea--resize-horizontal",
+        },
+        fullWidth: {
+            true: "lui-textarea--full-width",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        status: "default",
+        resize: "vertical",
+        fullWidth: true,
+    },
+});
+function Textarea({ ref, className, size, status, fullWidth, resize, autoResize, disabled, readOnly, onInput, style, ...props }) {
     const ariaInvalid = props["aria-invalid"] ?? (status === "error" ? true : undefined);
     // Track pending animation frame so rapid typing only triggers one resize per frame
     const rafRef = react.useRef(0);
-    return (jsxRuntime.jsx("textarea", { ref: ref, className: concatClassNames("lui-textarea", `lui-textarea--${size}`, status !== "default" && `lui-textarea--${status}`, !autoResize && resize !== "vertical" && `lui-textarea--resize-${resize}`, fullWidth && "lui-textarea--full-width", className), disabled: disabled, readOnly: readOnly, "aria-invalid": ariaInvalid, onInput: (e) => {
+    return (jsxRuntime.jsx("textarea", { ref: ref, className: textareaVariants({
+            size,
+            status,
+            resize: autoResize ? "none" : resize,
+            fullWidth,
+            className,
+        }), disabled: disabled, readOnly: readOnly, "aria-invalid": ariaInvalid, onInput: (e) => {
             if (autoResize) {
                 const el = e.currentTarget;
                 cancelAnimationFrame(rafRef.current);

package/dist/index.mjs

@@ -1,12 +1,53 @@
 import { jsx } from 'react/jsx-runtime';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
+import { cva } from '@ladder-ui/core';
 import { useRef } from 'react';
 
-function Textarea({ ref, className, size = "md", status = "default", fullWidth = true, resize = "vertical", autoResize = false, disabled, readOnly, onInput, style, ...props }) {
+// ── Variants ──────────────────────────────────────────────────────────────────
+const textareaVariants = cva({
+    base: "lui-textarea",
+    variants: {
+        size: {
+            xs: "lui-textarea--xs",
+            sm: "lui-textarea--sm",
+            md: "lui-textarea--md",
+            lg: "lui-textarea--lg",
+            xl: "lui-textarea--xl",
+        },
+        status: {
+            default: "",
+            error: "lui-textarea--error",
+            success: "lui-textarea--success",
+            warning: "lui-textarea--warning",
+        },
+        resize: {
+            vertical: "",
+            none: "lui-textarea--resize-none",
+            both: "lui-textarea--resize-both",
+            horizontal: "lui-textarea--resize-horizontal",
+        },
+        fullWidth: {
+            true: "lui-textarea--full-width",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        status: "default",
+        resize: "vertical",
+        fullWidth: true,
+    },
+});
+function Textarea({ ref, className, size, status, fullWidth, resize, autoResize, disabled, readOnly, onInput, style, ...props }) {
     const ariaInvalid = props["aria-invalid"] ?? (status === "error" ? true : undefined);
     // Track pending animation frame so rapid typing only triggers one resize per frame
     const rafRef = useRef(0);
-    return (jsx("textarea", { ref: ref, className: concatClassNames("lui-textarea", `lui-textarea--${size}`, status !== "default" && `lui-textarea--${status}`, !autoResize && resize !== "vertical" && `lui-textarea--resize-${resize}`, fullWidth && "lui-textarea--full-width", className), disabled: disabled, readOnly: readOnly, "aria-invalid": ariaInvalid, onInput: (e) => {
+    return (jsx("textarea", { ref: ref, className: textareaVariants({
+            size,
+            status,
+            resize: autoResize ? "none" : resize,
+            fullWidth,
+            className,
+        }), disabled: disabled, readOnly: readOnly, "aria-invalid": ariaInvalid, onInput: (e) => {
             if (autoResize) {
                 const el = e.currentTarget;
                 cancelAnimationFrame(rafRef.current);

package/dist/textarea.css

@@ -28,7 +28,7 @@
   }
   .lui-textarea[readonly] {
     cursor: default;
-    background-color: var(--lui-surface-raised);
+    background-color: var(--lui-bg-surface-raised);
   }
   .lui-textarea--xs {
     padding: 0.25rem 0.5rem;

package/dist/textarea.d.ts

@@ -1,5 +1,33 @@
+import { type VariantProps } from "@ladder-ui/core";
 import type { Ref } from "react";
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+declare const textareaVariants: (props?: (import("packages/core/dist/cva").ConfigVariants<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    status: {
+        default: string;
+        error: string;
+        success: string;
+        warning: string;
+    };
+    resize: {
+        vertical: string;
+        none: string;
+        both: string;
+        horizontal: string;
+    };
+    fullWidth: {
+        true: string;
+        false: string;
+    };
+}> & {
+    className?: string;
+}) | undefined) => string;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
     /** React 19 ref — points to the native `<textarea>` element */
     ref?: Ref<HTMLTextAreaElement>;
     /** Size variant — controls padding and font size. @default "md" */
@@ -25,3 +53,4 @@ export declare function Textarea({ ref, className, size, status, fullWidth, resi
 export declare namespace Textarea {
     var displayName: string;
 }
+export {};

package/dist/textarea.vars.css

@@ -1,13 +1,13 @@
 @layer textarea {
   :root {
     /* Background & text */
-    --lui-textarea-bg: var(--lui-surface);
-    --lui-textarea-text: var(--lui-surface-text);
-    --lui-textarea-placeholder: color-mix(in srgb, var(--lui-surface-text) 40%, transparent);
+    --lui-textarea-bg: var(--lui-bg-surface);
+    --lui-textarea-text: var(--lui-text-primary);
+    --lui-textarea-placeholder: color-mix(in srgb, var(--lui-text-primary) 40%, transparent);
     /* Border */
-    --lui-textarea-border: color-mix(in srgb, var(--lui-surface-border) 93%, var(--lui-surface-text));
-    --lui-textarea-focus-border: var(--lui-primary);
-    --lui-textarea-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
+    --lui-textarea-border: color-mix(in srgb, var(--lui-border-default) 93%, var(--lui-text-primary));
+    --lui-textarea-focus-border: var(--lui-bg-interactive);
+    --lui-textarea-focus-ring-color: color-mix(in srgb, var(--lui-bg-interactive) 40%, transparent);
     /* Shape */
     --lui-textarea-radius: var(--lui-radius-sm);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/textarea",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -47,7 +47,7 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.3.0"
+    "@ladder-ui/core": "0.4.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",