@ladder-ui/textarea 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,28 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
-var react = require('react');
-
-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);
-    // 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) => {
-            if (autoResize) {
-                const el = e.currentTarget;
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = requestAnimationFrame(() => {
-                    el.style.height = "auto";
-                    el.style.height = `${el.scrollHeight}px`;
-                });
-            }
-            onInput?.(e);
-        }, style: autoResize ? { overflow: "hidden", resize: "none", ...style } : style, ...props }));
-}
-Textarea.displayName = "Textarea";
-
-exports.Textarea = Textarea;
-exports.default = Textarea;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@ladder-ui/core"),a=require("react");const r=t.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:!0}});function i({ref:t,className:i,size:s,status:l,fullWidth:u,resize:n,autoResize:o,disabled:d,readOnly:x,onInput:c,style:f,...h}){const z=h["aria-invalid"]??("error"===l||void 0),m=a.useRef(0);return e.jsx("textarea",{ref:t,className:r({size:s,status:l,resize:o?"none":n,fullWidth:u,className:i}),disabled:d,readOnly:x,"aria-invalid":z,onInput:e=>{if(o){const t=e.currentTarget;cancelAnimationFrame(m.current),m.current=requestAnimationFrame(()=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`})}c?.(e)},style:o?{overflow:"hidden",resize:"none",...f}:f,...h})}i.displayName="Textarea",exports.Textarea=i,exports.default=i;

package/dist/index.mjs

@@ -1,23 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
-import { useRef } from 'react';
-
-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);
-    // 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) => {
-            if (autoResize) {
-                const el = e.currentTarget;
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = requestAnimationFrame(() => {
-                    el.style.height = "auto";
-                    el.style.height = `${el.scrollHeight}px`;
-                });
-            }
-            onInput?.(e);
-        }, style: autoResize ? { overflow: "hidden", resize: "none", ...style } : style, ...props }));
-}
-Textarea.displayName = "Textarea";
-
-export { Textarea, Textarea as default };
+import{jsx as e}from"react/jsx-runtime";import{cva as t}from"@ladder-ui/core";import{useRef as a}from"react";const r=t({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:!0}});function i({ref:t,className:i,size:l,status:s,fullWidth:u,resize:n,autoResize:o,disabled:d,readOnly:c,onInput:x,style:m,...f}){const h=f["aria-invalid"]??("error"===s||void 0),z=a(0);return e("textarea",{ref:t,className:r({size:l,status:s,resize:o?"none":n,fullWidth:u,className:i}),disabled:d,readOnly:c,"aria-invalid":h,onInput:e=>{if(o){const t=e.currentTarget;cancelAnimationFrame(z.current),z.current=requestAnimationFrame(()=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`})}x?.(e)},style:o?{overflow:"hidden",resize:"none",...m}:m,...f})}i.displayName="Textarea";export{i as Textarea,i as default};

package/dist/textarea.css

@@ -1,86 +1 @@
-@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%;
-  }
-}
+@layer components{.lui-textarea{background-color:var(--lui-textarea-bg);border:var(--lui-border-width) solid var(--lui-textarea-border);border-radius:var(--lui-textarea-radius);color:var(--lui-textarea-text);display:block;font-family:var(--lui-font-family);font-weight:var(--lui-font-weight);line-height:1.5;min-height:4rem;outline:none;resize:vertical;transition:var(--lui-transition);width:100%}.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{cursor:var(--lui-disabled-cursor);opacity:var(--lui-disabled-opacity);pointer-events:none}.lui-textarea[readonly]{background-color:var(--lui-bg-surface-raised);cursor:default}.lui-textarea--xs{font-size:var(--lui-font-size-xs);padding:.25rem .5rem}.lui-textarea--sm{font-size:var(--lui-font-size-sm);padding:.375rem .625rem}.lui-textarea--md{font-size:var(--lui-font-size-md);padding:.5rem .75rem}.lui-textarea--lg{font-size:var(--lui-font-size-lg);padding:.625rem .875rem}.lui-textarea--xl{font-size:var(--lui-font-size-xl);padding:.75rem 1rem}.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

@@ -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,14 +1 @@
-@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);
-  }
-}
+@layer textarea{:root{--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);--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);--lui-textarea-radius:var(--lui-radius-sm)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/textarea",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -30,7 +30,8 @@
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/textarea"
   },
   "bugs": {
     "url": "https://github.com/ivelaval/ladder-ui/issues"
@@ -47,7 +48,7 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.3.0"
+    "@ladder-ui/core": "0.5.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",