plass-ui 0.0.1 → 1.0.0

package/dist/types.d.ts

@@ -2,7 +2,7 @@
  * Shared prop vocabulary for every Plass component.
  *
  * These names and values are deliberately generic: a `size` of `md` or a
- * `color` of `primary` has to mean the same thing on a Button, a TextField, a
+ * `color` of `primary` has to mean the same thing on a PlButton, a PlTextField, a
  * Card or a Dialog. Components pick the subset they need from here and never
  * invent a parallel spelling of the same idea.
  */
@@ -36,15 +36,87 @@ export type PlassSide = 'top' | 'right' | 'bottom' | 'left';
  * is the whole reason the library never says `left`.
  */
 export type PlassAlign = 'start' | 'center' | 'end';
+/**
+ * A day of the week, as `Date.getDay()` counts them: Sunday is `0`.
+ *
+ * `Date`'s own numbering rather than CLDR's, which starts the week on Monday at
+ * `1`. Every comparison a calendar makes is against `getDay()`, and a second
+ * numbering in the same file is a numbering somebody will subtract from the
+ * wrong one.
+ */
+export type PlassWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * A width the layout answers to.
+ *
+ * The same five names as `PlassSize`, and deliberately so: a reader who has
+ * learned the ladder once should not have to learn a second set of words for
+ * where a page changes shape. They are not the same ladder — a `size` is how
+ * tall a control is and a breakpoint is how wide the window is — but they run
+ * in the same direction and they are used in the same sentence often enough
+ * that two vocabularies would only ever get mixed up.
+ *
+ * The widths are Tailwind's own — `sm` 40rem, `md` 48rem, `lg` 64rem, `xl`
+ * 80rem, with `xs` meaning "from zero up" — so a Plass layout and an `sm:`
+ * utility change at the same moment.
+ */
+export type PlassBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * A value that may change with the width of the window.
+ *
+ * A bare value applies everywhere: `span={6}` is six columns at every width.
+ * A map applies each entry **from its own breakpoint up**, so
+ * `span={{ xs: 12, md: 6 }}` is a full width on a phone and a half from 48rem —
+ * two entries usually describe a whole layout.
+ *
+ * There is no `xs` fallback to write out: an entry cascades to the widths above
+ * it, which is what keeps a responsive prop to the breakpoints it actually
+ * names.
+ */
+export type PlassResponsive<T> = T | Partial<Record<PlassBreakpoint, T>>;
+/**
+ * How a row distributes the space its content did not use, along the axis the
+ * content runs on.
+ *
+ * The three positional values are the library's own `start`/`center`/`end`
+ * rather than `left`/`right`, for the reason `PlassAlign` gives: they flip
+ * under RTL. The four distributions keep CSS's own hyphenated names, because
+ * `space-between` is a word every reader already knows and `spread` would be a
+ * word they had to look up.
+ */
+export type PlassJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+/** How content sits across the axis it does not run on. */
+export type PlassAlignItems = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** The same, for one member overriding the set it is in. */
+export type PlassAlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/**
+ * How a component sits in the page's scroll, spelled the way CSS spells it.
+ *
+ * These are `position`'s own values rather than a nicer set of words, for the
+ * reason `PlAspectRatio` keeps `object-fit`'s: inventing `pinned` would only
+ * make a reader look up which CSS it maps to. `absolute` and `relative` are
+ * deliberately absent — a component that offers those is a component being used
+ * as a `<div>`.
+ */
+export type PlassPosition = 'static' | 'sticky' | 'fixed';
+/**
+ * Which corner of a box something is pinned to. `PlBadge` reads this.
+ *
+ * Deliberately one word built out of the two the library already has —
+ * `top`/`bottom` from `PlassSide`, `start`/`end` from `PlassAlign` — rather than
+ * a pair of props. A corner is one decision, and splitting it into two would let
+ * a caller spell `{ vertical: 'left' }`.
+ */
+export type PlassCorner = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
 /**
  * What a surface is made of. This is the library's own name, and the two
  * materials in it are the whole design language.
  *
- * - `solid` — **plastic.** A moulded key: a gradient fill, a specular highlight
- *   along its top edge, and a drop shadow tinted with its own colour. One per
- *   view, for the action the screen is about.
- * - `glass` — **glass.** A translucent sheet over a blurred backdrop with a
- *   white hairline around it. Secondary actions, and the default for anything
+ * - `solid` — **tinted glass.** A gradient that sweeps between two ends of the
+ *   colour family at one lightness, and a drop shadow tinted with that family.
+ *   No highlight over the top of it: the sweep is the form. One per view, for
+ *   the action the screen is about.
+ * - `glass` — **clear glass.** A translucent sheet over a blurred backdrop with
+ *   a white hairline around it. Secondary actions, and the default for anything
  *   that *holds* content rather than being pressed.
  * - `ghost` — neither. No surface at all until the pointer is on it.
  *   Tertiary and inline actions.
@@ -53,9 +125,10 @@ export type PlassVariant = 'solid' | 'glass' | 'ghost';
 /**
  * How far a surface sits off the page, as a drop shadow.
  *
- * A plastic key rests **on** the sheet rather than flush with it, so a Button
+ * A control rests **on** the sheet rather than flush with it, so a PlButton
  * defaults to `1` and not to `0`. Hovering adds a level and pressing removes
- * one, which is what puts the key down against the glass under the finger.
+ * one, which is what puts it down against the sheet under the finger. The
+ * ladder is neutral and faint; a control's shadow is mostly the tint below it.
  *
  * `0` is flat, and it is the right default for anything a reader looks *into*
  * rather than presses — a field, a well, a panel behind other content.
@@ -72,3 +145,72 @@ export interface PlassStyleProps {
     /** @default 'default' */
     density?: PlassDensity;
 }
+/**
+ * The six effects the `PlAnimate*` components are built out of.
+ *
+ * Named after what a reader sees rather than after the CSS property
+ * underneath: `zoom` and `grow` are both a change of scale, and they are two
+ * words because they are two *gestures* — one arrives from the middle of where
+ * it will end up, the other unfolds from an edge.
+ *
+ * Everything past these six is a component rather than a value. A typewriter, a
+ * marquee and a headline reel have to know what their children *are*, and a
+ * name that only picks a keyframe cannot.
+ */
+export type PlassAnimation = 'fade' | 'grow' | 'slide' | 'zoom' | 'rotate' | 'blink';
+/**
+ * What makes an animation run.
+ *
+ * - `mount` — as soon as it is on the page. The default, and the only one that
+ *   needs nothing from the caller.
+ * - `visible` — when it is scrolled into view. Once, unless `once` is off.
+ * - `hover` — while the pointer is on it, starting again on each entry.
+ *   Keyboard focus counts, or the effect would be unreachable without a mouse.
+ * - `manual` — never on its own. `play` is what runs it.
+ */
+export type PlassAnimateTrigger = 'mount' | 'visible' | 'hover' | 'manual';
+/** Whether an effect brings its content in or takes it away. */
+export type PlassAnimateMode = 'in' | 'out';
+/**
+ * How many times an animation runs. `'infinite'` rather than `Infinity`,
+ * because it is written into CSS as that word and a caller who typed the number
+ * would be surprised by which one worked.
+ */
+export type PlassAnimateRepeat = number | 'infinite';
+/**
+ * The settings every `PlAnimate*` component takes.
+ *
+ * Durations and delays are milliseconds — numbers, not CSS strings. A prop
+ * typed `string` invites `'0.4s'`, and then two components on one screen are
+ * written in two units.
+ */
+export interface PlassAnimateProps {
+    /** How long one run takes, in milliseconds. */
+    duration?: number;
+    /** How long before it starts, in milliseconds. @default 0 */
+    delay?: number;
+    /** The easing curve, as CSS writes it. @default the house curve */
+    easing?: string;
+    /** How many times it runs. @default 1 */
+    repeat?: PlassAnimateRepeat;
+    /** Runs every other pass backwards, so a repeat returns instead of jumping. */
+    alternate?: boolean;
+    /** Holds the animation where it is. @default false */
+    paused?: boolean;
+    /** What starts it. @default 'mount' */
+    trigger?: PlassAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. Each `false` → `true` starts it over. */
+    play?: boolean;
+    /**
+     * With `trigger="visible"`, whether it runs only the first time. Off, it runs
+     * again every time the element comes back into view.
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * With `trigger="visible"`, how much of the element has to be on screen
+     * before it counts as visible, from `0` to `1`.
+     * @default 0.2
+     */
+    threshold?: number;
+}

package/dist/types.js

@@ -2,7 +2,7 @@
  * Shared prop vocabulary for every Plass component.
  *
  * These names and values are deliberately generic: a `size` of `md` or a
- * `color` of `primary` has to mean the same thing on a Button, a TextField, a
+ * `color` of `primary` has to mean the same thing on a PlButton, a PlTextField, a
  * Card or a Dialog. Components pick the subset they need from here and never
  * invent a parallel spelling of the same idea.
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plass-ui",
-  "version": "0.0.1",
-  "description": "A React UI component library with a plastic-and-glass design language — moulded gradient controls resting on translucent, blurred sheets. Accessible and themeable, ESM only, types included, dark mode built in.",
+  "version": "1.0.0",
+  "description": "A React UI component library made of glass and gradients — smooth tinted surfaces, shadows in their own colour, and light that follows the pointer. Accessible and themeable, ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",
   "sideEffects": [
@@ -9,7 +9,7 @@
   ],
   "author": "CDGet <jooy2.contact@gmail.com>",
   "license": "MIT",
-  "homepage": "https://plass-ui.cdget.com",
+  "homepage": "https://plass.cdget.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/jooy2/plass-ui"
@@ -18,20 +18,16 @@
     "url": "https://github.com/jooy2/plass-ui/issues"
   },
   "scripts": {
-    "build": "npm run format:fix && tsc --project tsconfig.prod.json && npm run minify && node scripts/build-styles.mjs",
+    "build": "npm run format:fix && tsc --project tsconfig.prod.json && node scripts/build-styles.mjs",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --report-unused-disable-directives --fix",
-    "minify": "terser-glob 'dist/**/*.js' --config-file terser.config.json",
     "prepare": "npm run build",
+    "size": "node scripts/size.mjs",
     "format": "prettier .",
     "format:fix": "prettier . --write",
-    "docs:changelog": "node scripts/copy-changelog.mjs",
-    "docs:dev": "npm run docs:changelog && vitepress dev docs",
-    "docs:build": "npm run docs:changelog && vitepress build docs",
-    "docs:serve": "npm run docs:build && vitepress serve docs",
     "test": "vitest run",
     "test:watch": "vitest",
-    "typecheck": "tsc --project tsconfig.prod.json --noEmit && tsc --project test/tsconfig.json && tsc --project docs/tsconfig.json"
+    "typecheck": "tsc --project tsconfig.prod.json --noEmit && tsc --project test/tsconfig.json"
   },
   "engines": {
     "node": ">=20.19.0"
@@ -49,12 +45,23 @@
       "default": "./dist/types.js"
     },
     "./styles.css": "./dist/styles.css",
-    "./tailwind.css": "./dist/tailwind.css"
+    "./tailwind.css": "./dist/tailwind.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./css/*.css": "./dist/css/*.css",
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./dist/components/*/index.d.ts",
+      "module": "./dist/components/*/index.js",
+      "default": "./dist/components/*/index.js"
+    }
   },
   "typesVersions": {
     "*": {
-      "index.d.ts": [
-        "dist/index.d.ts"
+      "types": [
+        "dist/types.d.ts"
+      ],
+      "*": [
+        "dist/components/*/index.d.ts"
       ]
     }
   },
@@ -95,18 +102,19 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.3.0",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@typescript-eslint/parser": "^8.67.0",
-    "@vitejs/plugin-react": "^6.0.5",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@types/react-dom": "^19.2.5",
+    "@typescript-eslint/parser": "^8.68.0",
+    "@vitejs/plugin-react": "^6.1.0",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "esbuild": "^0.28.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-n": "^18.3.0",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.10.0",
+    "globals": "^17.11.0",
     "jiti": "^2.7.0",
     "playwright": "^1.62.1",
     "postcss": "^8.5.26",
@@ -115,14 +123,10 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "^4.3.3",
-    "terser-glob": "^1.2.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.67.0",
-    "vite": "^8.2.1",
-    "vitepress": "^1.6.4",
-    "vitepress-i18n": "^1.3.5",
-    "vitepress-sidebar": "^1.38.0",
-    "vitest": "^4.1.10",
+    "typescript-eslint": "^8.68.0",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11",
     "vitest-browser-react": "^2.2.0"
   },
   "dependencies": {

package/README.md

@@ -1,111 +0,0 @@
-# Plass UI
-
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/plass-ui/blob/main/LICENSE) [![npm latest package](https://img.shields.io/npm/v/plass-ui/latest.svg)](https://www.npmjs.com/package/plass-ui) [![npm downloads](https://img.shields.io/npm/dm/plass-ui.svg)](https://www.npmjs.com/package/plass-ui)
-
-### 📘 [**plass-ui.cdget.com**](https://plass-ui.cdget.com)
-
-Live previews and full props for every component. This README is just the quick start.
-
----
-
-**Plass UI is a React component library with a material rather than a theme.** Every surface answers one question — is this pressed, or does it hold something? — and the answer decides everything else.
-
-A thing that is pressed is **plastic**: a gradient fill at 135°, a specular highlight along its top edge, and a drop shadow tinted with its own colour. A thing that holds something is **glass**: translucent, heavily blurred, a white hairline round it, and never dyed. There is no third answer.
-
-- **Two materials, one language** — `solid`, `glass`, `ghost`. Not `filled`, `outlined`, `text`.
-- **One shared vocabulary** — `size`, `color`, `variant`, `density`, `elevation`. An `md` is 40px on every control; `primary` is the same family everywhere.
-- **Accessible by construction** — real roles, labels, focus management and keyboard support, not `div`s with click handlers.
-- **Contrast that was checked** — every gradient stop clears 4.5:1 against its own label, the lightest corner included.
-- **Dark mode with no work** — follows the system, and can be forced either way per subtree.
-- **ESM only**, TypeScript declarations included, tree-shakeable.
-- **One runtime dependency.** React 18 or 19, Node.js 20.19 or later.
-
-> **0.0.1 is a preview.** Two components are released — `Button` and `TextField`. The prop vocabulary, the tokens and the build are the shape everything after this will be poured into; the component list is not yet worth building a product on.
-
-## Documentation
-
-| Page | What you will find |
-| --- | --- |
-| [**Getting started**](https://plass-ui.cdget.com/guide/getting-started) | Install and setup, end to end. |
-| [**All components**](https://plass-ui.cdget.com/components/) | Every component, one page each: live previews and the full props table. |
-| [**Design language**](https://plass-ui.cdget.com/design/design-language) | Why a Plass surface looks and behaves the way it does. |
-| [**Prop conventions**](https://plass-ui.cdget.com/design/prop-conventions) | The shared vocabulary every component draws from. |
-| [**Colour**](https://plass-ui.cdget.com/design/color) | The token families, the measured contrast, and how to theme them. |
-| [**Changelog**](https://plass-ui.cdget.com/changelog) | What changed in each release. |
-
-## Installation
-
-```bash
-npm install plass-ui
-```
-
-`react` and `react-dom` are peer dependencies — React 18 or 19.
-
-### Setup
-
-Add one line to your app's CSS entry point:
-
-```css
-@import 'plass-ui/styles.css';
-```
-
-`plass-ui/styles.css` is finished CSS — the design tokens, the compiled rules for every utility class the components use, and a small reset whose every rule is specificity 0 so your own styles always win. [Tailwind CSS](https://tailwindcss.com) v4 builds this package; it does not have to be installed in yours.
-
-If your project already runs Tailwind v4, import the token sheet instead:
-
-```css
-@import 'tailwindcss';
-@import 'plass-ui/tailwind.css';
-```
-
-### One more line, and it matters here
-
-Plass does not paint your `<body>`, but a sheet of glass over a flat white page has nothing to be in front of. Two tokens exist for exactly this:
-
-```css
-body {
-  background: linear-gradient(160deg, var(--plass-bg-from) 0%, var(--plass-bg-to) 100%);
-  background-attachment: fixed;
-  color: var(--plass-fg);
-}
-```
-
-## Usage
-
-```tsx
-import { Button, TextField } from 'plass-ui';
-
-export default function SignIn() {
-  return (
-    <form onSubmit={submit}>
-      <TextField label="Email" type="email" fullWidth />
-      <Button type="submit">Sign in</Button>
-      <Button variant="glass" color="secondary">
-        Cancel
-      </Button>
-    </form>
-  );
-}
-```
-
-## Components
-
-### Inputs
-
-`Button` · `TextField`
-
-## Development
-
-```bash
-npm test              # Vitest, single run (headless Chromium)
-npm run typecheck     # tsc --noEmit over all three TS projects
-npm run docs:dev      # VitePress docs site — the develop-and-eyeball loop
-npm run build         # tsc + terser + build-styles → dist/
-npm run lint          # ESLint
-```
-
-The docs render the real components from `src/` through a Vite alias, so `npm run docs:dev` is the develop-and-eyeball loop; there is no separate demo app.
-
-## License
-
-MIT © [CDGet](https://cdget.com)

package/dist/components/button/Button.js

@@ -1 +0,0 @@
-import{jsx as s,Fragment as o,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Button as e}from"@base-ui/react/button";import{useRender as l}from"@base-ui/react/use-render";import{Spinner as t}from"../../internal/icons";import{controlHeightClasses as i,controlSlots as n,controlSquareClasses as d,controlTextClasses as p,disabledClasses as g,focusRingClasses as v,gapClasses as c,glassClasses as m,hasContent as x,iconClasses as b,paddingXClasses as h,radiusClasses as f,readOnlyFilterClasses as $,transitionClasses as u}from"../../internal/styles";const w={xs:`${i.xs} ${c.xs} ${f.xs} ${p.xs}`,sm:`${i.sm} ${c.sm} ${f.sm} ${p.sm}`,md:`${i.md} ${c.md} ${f.md} ${p.md}`,lg:`${i.lg} ${c.lg} ${f.lg} ${p.lg}`,xl:`${i.xl} ${c.xl} ${f.xl} ${p.xl}`},j={xs:`${d.xs} px-0`,sm:`${d.sm} px-0`,md:`${d.md} px-0`,lg:`${d.lg} px-0`,xl:`${d.xl} px-0`},y=["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",u,v,b].join(" "),k={solid:["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift),var(--plass-gloss-solid)]"].join(" "),glass:[m,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},B={solid:["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),var(--plass-gloss-solid)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press),var(--plass-gloss-solid)]"].join(" "),glass:["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},C={solid:["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`[box-shadow:var(--plass-gloss-solid)] ${$}`].join(" "),glass:[m,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${$}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${$}`};export const Button=r.forwardRef(function({variant:r="solid",size:i="md",color:d="primary",density:p="default",elevation:v=1,startIcon:c,endIcon:m,loading:b=!1,readOnly:f=!1,fullWidth:$=!1,disabled:u=!1,render:I,className:N,style:z,children:D,onClick:F,...O},P){const R=!x(D),W=b||f,q=!u&&!W,A=[y,w[i],R?j[i]:h[p][i],u?g[r]:f?C[r]:k[r],q?`${B[r]} cursor-pointer`:"",q&&"solid"===r?"plass-gloss":"",b?"cursor-progress":"",$?"w-full":"",N??""].filter(Boolean).join(" ");return l({render:I??s(e,{disabled:u}),ref:P,props:{className:A,style:{...n(d,v),...z},"aria-disabled":W||void 0,"aria-busy":b||void 0,"data-loading":b||void 0,"data-readonly":f||void 0,onClick:s=>{if(W)return s.preventDefault(),void s.stopPropagation();F?.(s)},...O,children:a(o,{children:[b?s(t,{}):c,D,m]})}})});

package/dist/components/text-field/TextField.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Field as n}from"@base-ui/react/field";import{Input as r}from"@base-ui/react/input";import{Spinner as s}from"../../internal/icons";import{controlHeightClasses as i,controlTextLeadingClasses as a,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as m,focusWithinRingClasses as d,gapClasses as p,hasContent as u,iconClasses as f,metaTextClasses as x,paddingXClasses as h,radiusClasses as g,stackGapClasses as $,surfaceSlots as y,transitionClasses as b}from"../../internal/styles";const j={xs:`${p.xs} ${g.xs} ${a.xs}`,sm:`${p.sm} ${g.sm} ${a.sm}`,md:`${p.md} ${g.md} ${a.md}`,lg:`${p.lg} ${g.lg} ${a.lg}`,xl:`${p.xl} ${g.xl} ${a.xl}`},v={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},w={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},N=["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",b,d,f].join(" "),z=m,k=c;export const TextField=l.forwardRef(function({variant:a="glass",size:c="md",color:m="primary",density:d="default",elevation:p=0,multiline:f=!1,rows:g=3,resize:b="vertical",label:D,description:R,error:B,invalid:I,startIcon:O,endIcon:T,loading:C=!1,fullWidth:E=!1,readOnly:F=!1,disabled:L=!1,type:P="text",className:W,style:q,...A},G){const H=u(B),J=I??H,K=J?"danger":m,M=l.useRef(null),Q=l.useCallback(e=>{M.current=e,"function"==typeof G?G(e):G&&(G.current=e)},[G]),S=[N,j[c],f?`${v[c]} items-start`:`${i[c]} items-center`,h[d][c],L?o[a]:F?k[a]:z[a]].filter(Boolean).join(" "),U=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",f?`block ${w[b]}`:"self-stretch"].join(" "),V="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)";return t(n.Root,{disabled:L,invalid:J,className:["flex-col align-top",$[c],E?"flex w-full":"inline-flex",W??""].filter(Boolean).join(" "),style:{...y(K,p),...q},children:[D?e(n.Label,{className:[x[c],"font-semibold",L?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:D}):null,t("span",{className:S,onPointerDown:e=>{e.target!==e.currentTarget||L||(e.preventDefault(),M.current?.focus())},children:[O?e("span",{className:V,children:O}):null,e(r,{ref:Q,className:U,disabled:L,readOnly:F,"aria-busy":C||void 0,"data-loading":C||void 0,...f?{render:e("textarea",{rows:g})}:{type:P},...A}),C?e("span",{className:V,children:e(s,{})}):T?e("span",{className:V,children:T}):null]}),R?e(n.Description,{className:[x[c],"text-(--plass-muted-fg)"].join(" "),children:R}):null,H?e(n.Error,{match:!0,className:[x[c],"text-(--p-accent)"].join(" "),children:B}):null]})});