@ladder-ui/textarea 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea, type TextareaProps } from "./textarea";
+export { Textarea as default } from "./textarea";

package/dist/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var concatClassNames = require('@ladder-ui/core/concatClassNames');
+
+function Textarea({ ref, className, size = "md", status = "default", fullWidth = true, resize = "vertical", autoResize = false, disabled, readOnly, onInput, style, ...props }) {
+    const ariaInvalid = props["aria-invalid"] ?? (status === "error" ? true : undefined);
+    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) => {
+            if (autoResize) {
+                e.currentTarget.style.height = "auto";
+                e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
+            }
+            onInput?.(e);
+        }, style: autoResize ? { overflow: "hidden", resize: "none", ...style } : style, ...props }));
+}
+Textarea.displayName = "Textarea";
+
+exports.Textarea = Textarea;
+exports.default = Textarea;

package/dist/index.mjs

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import concatClassNames from '@ladder-ui/core/concatClassNames';
+
+function Textarea({ ref, className, size = "md", status = "default", fullWidth = true, resize = "vertical", autoResize = false, disabled, readOnly, onInput, style, ...props }) {
+    const ariaInvalid = props["aria-invalid"] ?? (status === "error" ? true : undefined);
+    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) => {
+            if (autoResize) {
+                e.currentTarget.style.height = "auto";
+                e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
+            }
+            onInput?.(e);
+        }, style: autoResize ? { overflow: "hidden", resize: "none", ...style } : style, ...props }));
+}
+Textarea.displayName = "Textarea";
+
+export { Textarea, Textarea as default };

package/dist/textarea.css

@@ -0,0 +1,86 @@
+@layer components {
+  .lui-textarea {
+    display: block;
+    width: 100%;
+    min-height: 4rem;
+    background-color: var(--lui-textarea-bg);
+    color: var(--lui-textarea-text);
+    border: var(--lui-border-width) solid var(--lui-textarea-border);
+    border-radius: var(--lui-textarea-radius);
+    font-family: var(--lui-font-family);
+    font-weight: var(--lui-font-weight);
+    line-height: 1.5;
+    resize: vertical;
+    outline: none;
+    transition: var(--lui-transition);
+  }
+  .lui-textarea::placeholder {
+    color: var(--lui-textarea-placeholder);
+  }
+  .lui-textarea:focus-visible {
+    border-color: var(--lui-textarea-focus-border);
+    box-shadow: 0 0 0 2px var(--lui-textarea-focus-ring-color);
+  }
+  .lui-textarea:disabled {
+    opacity: var(--lui-disabled-opacity);
+    cursor: var(--lui-disabled-cursor);
+    pointer-events: none;
+  }
+  .lui-textarea[readonly] {
+    cursor: default;
+    background-color: var(--lui-surface-raised);
+  }
+  .lui-textarea--xs {
+    padding: 0.25rem 0.5rem;
+    font-size: var(--lui-font-size-xs);
+  }
+  .lui-textarea--sm {
+    padding: 0.375rem 0.625rem;
+    font-size: var(--lui-font-size-sm);
+  }
+  .lui-textarea--md {
+    padding: 0.5rem 0.75rem;
+    font-size: var(--lui-font-size-md);
+  }
+  .lui-textarea--lg {
+    padding: 0.625rem 0.875rem;
+    font-size: var(--lui-font-size-lg);
+  }
+  .lui-textarea--xl {
+    padding: 0.75rem 1rem;
+    font-size: var(--lui-font-size-xl);
+  }
+  .lui-textarea--error {
+    border-color: var(--lui-error);
+  }
+  .lui-textarea--error:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-error) 40%, transparent);
+  }
+  .lui-textarea--success {
+    border-color: var(--lui-success);
+  }
+  .lui-textarea--success:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-success) 40%, transparent);
+  }
+  .lui-textarea--warning {
+    border-color: var(--lui-warning);
+  }
+  .lui-textarea--warning:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-warning) 40%, transparent);
+  }
+  .lui-textarea--resize-none {
+    resize: none;
+  }
+  .lui-textarea--resize-both {
+    resize: both;
+  }
+  .lui-textarea--resize-horizontal {
+    resize: horizontal;
+  }
+  .lui-textarea--resize-vertical {
+    resize: vertical;
+  }
+  .lui-textarea--full-width {
+    width: 100%;
+  }
+}

package/dist/textarea.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** React 19 ref — points to the native `<textarea>` element */
+    ref?: Ref<HTMLTextAreaElement>;
+    /** Size variant — controls padding and font size. @default "md" */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Visual status — controls border color.
+     * `"error"` also sets `aria-invalid="true"` automatically.
+     * @default "default"
+     */
+    status?: "default" | "error" | "success" | "warning";
+    /** Stretch to fill its container's full width. @default true */
+    fullWidth?: boolean;
+    /** CSS resize behavior. @default "vertical" */
+    resize?: "none" | "both" | "horizontal" | "vertical";
+    /**
+     * When true the textarea grows automatically with its content.
+     * `resize` is ignored and `overflow: hidden` is applied inline.
+     * @default false
+     */
+    autoResize?: boolean;
+}
+export declare function Textarea({ ref, className, size, status, fullWidth, resize, autoResize, disabled, readOnly, onInput, style, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Textarea {
+    var displayName: string;
+}

package/dist/textarea.vars.css

@@ -0,0 +1,14 @@
+@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);
+    /* 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);
+    /* Shape */
+    --lui-textarea-radius: var(--lui-radius-sm);
+  }
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ladder-ui/textarea",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*.css": "./dist/*.css",
+    "./styles/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nodejs",
+    "react",
+    "ui",
+    "components",
+    "library",
+    "textarea",
+    "form"
+  ],
+  "author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ivelaval/ladder-ui/issues"
+  },
+  "homepage": "https://github.com/ivelaval/ladder-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "rollup": "^4.59.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.90.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "@ladder-ui/core": "0.2.0"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.0",
+    "react": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}