@imfusion/web-ui 0.11.1-dev.27.g921aea14 → 0.11.1-dev.30.g5f35727d

package/CHANGELOG.md

@@ -4,6 +4,9 @@
 
 ### Added
 
+- `Textarea` is a new multi-line input adapted from Base UI, with the `Input` variants and sizes, a drag-to-resize corner, and
+  validation state from `Field`. [Textarea](src/components/textarea/textarea.mdx)
+  ([WEBSDK-244](https://imfusion.atlassian.net/browse/WEBSDK-244)) — Nikolaus Brunner <brunner@imfusion.com>
 - `Table.RowButton` is a button that stands for its whole row, like `Table.RowLink`, for rows that open a drawer or run an
   action instead of navigating. [Table](src/components/table/table.stories.tsx#RowButton) — Nikolaus Brunner
   <brunner@imfusion.com>
@@ -22,6 +25,8 @@
 
 ### Changed
 
+- `Input`, `Field.Control`, `NumberField`, `Select`, `Combobox`, and `Autocomplete` show focus by turning their 1px border
+  primary, with no outline. [Input](src/components/input/input.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Drawer` draws no border by default; `borderColor` adds one, such as `borderColor="primary"` for the previous look.
   [Drawer](src/components/drawer/drawer.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Typo.UnorderedList` draws its dash in the text colour by default; `markerVariant="primary"` gives the brand dash.
@@ -41,6 +46,8 @@
   - `web-ui-dev-new-component` and `web-ui-dev-update-component` wait for the user to approve the design on the canvas
     before writing the plan.
   - Agents verify visual work on their own Storybook, started with `npm run dev`, against the approved canvas design.
+  - `web-ui-dev-teardown-worktree` lands local base-branch commits together with the worktree branch, and Bitbucket pull
+    requests merge with rebase and fast-forward.
   - The `imf-web-ui-conventions` `styling` topic shows a container setting a custom property that its child reads with
     its own default as the fallback.
   - `web-ui-dev-release` syncs the Claude Design system once npm serves the stable version.
@@ -49,7 +56,7 @@
     keeps its block under an "Implemented" note that names its story.
   - `docs/conventions.md` shows how a component declares its default as a custom-property fallback that a container
     overrides.
-  - `design/DESIGN.md` draws a field's focus ring on its border: one line, never a second one outside it.
+  - `design/DESIGN.md` says focus turns a field's hairline border primary: one line, same width, nothing outside it.
 - Storybook — Nikolaus Brunner <brunner@imfusion.com>
   - The Controls table lists a component's own props first, then the props it inherits from Base UI or React.
   - `withFrame` draws its border only with `bordered: true`. Layout stories such as Stack and Row use it to show their bounds.

package/dist/components/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './textarea';
+export { textareaMeta } from './textarea.meta';

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,32 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { VariantProps } from 'class-variance-authority';
+declare const textarea: (props?: ({
+    variant?: "outline" | "ghost" | "filled" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type UpstreamInput = React.ComponentProps<typeof InputPrimitive>;
+interface Props extends Omit<React.ComponentProps<"textarea">, "className" | "style" | "value" | "defaultValue">, Pick<UpstreamInput, "value" | "defaultValue" | "onValueChange" | "render">, VariantProps<typeof textarea> {
+    /** Number of visible text lines. */
+    rows?: number;
+    /**
+     * Which directions the user can drag to resize. `horizontal` and `both` size the textarea from `cols` and shrink-wrap
+     * the root, so the width follows the drag; `none` hides the resize corner.
+     */
+    resize?: "vertical" | "horizontal" | "both" | "none";
+    /** Class of the root wrapper that lays the field out. */
+    className?: string;
+    /** Style of the root wrapper that lays the field out. */
+    style?: React.CSSProperties;
+}
+/**
+ * Multi-line text input. Also called a text area; use Input for a single line.
+ * Wraps Base UI Input rendered as a textarea for controlled/uncontrolled state, form integration,
+ * and Field context awareness (valid/invalid/dirty/touched/filled/focused). `className` and `style`
+ * go to the root wrapper; every other prop goes to the textarea.
+ *
+ * @see https://base-ui.com/react/components/input
+ * @llm https://base-ui.com/react/components/input.md
+ */
+export declare function Textarea({ variant, size, rows, resize, render, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/textarea/textarea.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const textareaMeta: ComponentMeta;

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { NumberField, numberFieldMeta } from './components/number-field';
 export { Select, selectMeta } from './components/select';
 export { Slider, sliderMeta } from './components/slider';
 export { Switch, switchMeta } from './components/switch';
+export { Textarea, textareaMeta } from './components/textarea';
 export { Toggle, toggleMeta } from './components/toggle';
 export { ToggleGroup, toggleGroupMeta } from './components/toggle-group';
 export { AppShell, appShellMeta } from './components/app-shell';