panelui-web 0.3.0 → 0.5.0

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

@@ -0,0 +1,134 @@
+/**
+ * Select — a button that opens a list of options, one of which is chosen.
+ *
+ * ```tsx
+ * <Select items={plans} defaultValue="team">
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Pick a plan" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     {plans.map((plan) => (
+ *       <Select.Item key={plan.value} value={plan.value} description={plan.price}>
+ *         {plan.label}
+ *       </Select.Item>
+ *     ))}
+ *   </Select.Content>
+ * </Select>
+ * ```
+ *
+ * ## The list opens over the trigger
+ *
+ * Opened with a pointer, the list is placed so the chosen option sits exactly
+ * over the trigger, and the eye does not have to go looking for it. Where
+ * there is no room for that, or `alignItemWithTrigger` is false, it opens
+ * below. Opened from the keyboard, the arrow keys move through the options,
+ * typing jumps to one by its first letters, and Enter chooses.
+ *
+ * ## Labels
+ *
+ * Pass `items` to the root, as `{ value, label }` pairs, and `Select.Value`
+ * shows the chosen option's label rather than its value. Without `items`,
+ * give `Select.Value` a function that turns a value into what to show.
+ *
+ * ## Three triggers
+ *
+ * `default` is a field, for a form. `ghost` has no box until it is hovered,
+ * for a choice set into a toolbar or a line of text. `pill` is a rounded chip
+ * with an edge, for a choice that sits among other chips, such as the model
+ * in a prompt.
+ */
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type { ComponentProps, ReactNode } from 'react';
+export type SelectProps<Value = string, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple>;
+/** Holds the chosen value. Takes `value`/`onValueChange`, `defaultValue`, `items`, `name`, `disabled` and `multiple`. */
+declare function SelectRoot<Value = string, Multiple extends boolean | undefined = false>(props: SelectProps<Value, Multiple>): import("react").JSX.Element;
+declare namespace SelectRoot {
+    var displayName: string;
+}
+export interface SelectTriggerProps extends BaseSelect.Trigger.Props {
+    /** `default` is a field, `ghost` has no box until hovered, `pill` is a rounded chip. Default `default`. */
+    variant?: 'default' | 'ghost' | 'pill';
+    /** Its height and text size. Default `md`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Replaces the chevron at the end. Pass `null` for none. */
+    icon?: ReactNode;
+    className?: string;
+}
+/** The button that opens the list. Put a `Select.Value` in it. */
+declare function SelectTrigger({ variant, size, icon, className, children, ...props }: SelectTriggerProps): import("react").JSX.Element;
+declare namespace SelectTrigger {
+    var displayName: string;
+}
+export interface SelectValueProps extends BaseSelect.Value.Props {
+    className?: string;
+}
+/** The chosen option's label, or `placeholder` while there is none. */
+declare function SelectValue({ className, ...props }: SelectValueProps): import("react").JSX.Element;
+declare namespace SelectValue {
+    var displayName: string;
+}
+export interface SelectContentProps extends BaseSelect.Popup.Props {
+    /** Which side of the trigger it opens on, when it is not placed over it. Default `bottom`. */
+    side?: BaseSelect.Positioner.Props['side'];
+    /** How it lines up with the trigger along that side. Default `start`. */
+    align?: BaseSelect.Positioner.Props['align'];
+    /** The gap between the trigger and the list, in pixels. Default `6`. */
+    sideOffset?: number;
+    /** Whether a pointer opens it with the chosen option over the trigger. Default `true`. */
+    alignItemWithTrigger?: boolean;
+    /** Where in the document the list is put. Default `document.body`. */
+    container?: BaseSelect.Portal.Props['container'];
+    className?: string;
+}
+/** The list of options, opened in a layer over the page. */
+declare function SelectContent({ side, align, sideOffset, alignItemWithTrigger, container, className, children, ...props }: SelectContentProps): import("react").JSX.Element;
+declare namespace SelectContent {
+    var displayName: string;
+}
+export interface SelectItemProps extends Omit<BaseSelect.Item.Props, 'children'> {
+    /** The option's label: what the trigger shows once it is chosen. */
+    children?: ReactNode;
+    /** A second, quieter line under the label. */
+    description?: ReactNode;
+    /** An icon before the label. */
+    icon?: ReactNode;
+    className?: string;
+}
+/** One option. A check marks the chosen one. */
+declare function SelectItem({ description, icon, className, children, ...props }: SelectItemProps): import("react").JSX.Element;
+declare namespace SelectItem {
+    var displayName: string;
+}
+export interface SelectGroupProps extends BaseSelect.Group.Props {
+    className?: string;
+}
+/** Options that belong together, under a `Select.GroupLabel`. */
+declare function SelectGroup({ className, ...props }: SelectGroupProps): import("react").JSX.Element;
+declare namespace SelectGroup {
+    var displayName: string;
+}
+export interface SelectGroupLabelProps extends BaseSelect.GroupLabel.Props {
+    className?: string;
+}
+/** The heading of a group. Screen readers announce the group by it. */
+declare function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps): import("react").JSX.Element;
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+export interface SelectSeparatorProps extends ComponentProps<'div'> {
+}
+/** A rule between groups of options. */
+declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
+declare namespace SelectSeparator {
+    var displayName: string;
+}
+export declare const Select: typeof SelectRoot & {
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Group: typeof SelectGroup;
+    GroupLabel: typeof SelectGroupLabel;
+    Separator: typeof SelectSeparator;
+};
+export { SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator };

package/dist/components/select/index.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Select — a button that opens a list of options, one of which is chosen.
+ *
+ * ```tsx
+ * <Select items={plans} defaultValue="team">
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Pick a plan" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     {plans.map((plan) => (
+ *       <Select.Item key={plan.value} value={plan.value} description={plan.price}>
+ *         {plan.label}
+ *       </Select.Item>
+ *     ))}
+ *   </Select.Content>
+ * </Select>
+ * ```
+ *
+ * ## The list opens over the trigger
+ *
+ * Opened with a pointer, the list is placed so the chosen option sits exactly
+ * over the trigger, and the eye does not have to go looking for it. Where
+ * there is no room for that, or `alignItemWithTrigger` is false, it opens
+ * below. Opened from the keyboard, the arrow keys move through the options,
+ * typing jumps to one by its first letters, and Enter chooses.
+ *
+ * ## Labels
+ *
+ * Pass `items` to the root, as `{ value, label }` pairs, and `Select.Value`
+ * shows the chosen option's label rather than its value. Without `items`,
+ * give `Select.Value` a function that turns a value into what to show.
+ *
+ * ## Three triggers
+ *
+ * `default` is a field, for a form. `ghost` has no box until it is hovered,
+ * for a choice set into a toolbar or a line of text. `pill` is a rounded chip
+ * with an edge, for a choice that sits among other chips, such as the model
+ * in a prompt.
+ */
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { tv } from 'tailwind-variants';
+const selectVariants = tv({
+    slots: {
+        trigger: [
+            'group/select-trigger inline-flex min-w-0 cursor-pointer select-none items-center justify-between gap-2 whitespace-nowrap text-foreground outline-none',
+            'transition-[background-color,border-color,box-shadow,color] duration-150',
+            'focus-visible:ring-[3px] focus-visible:ring-ring/30',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+        ],
+        icon: 'flex text-muted-foreground transition-transform duration-200 group-data-popup-open/select-trigger:rotate-180 motion-reduce:transition-none',
+        value: 'flex min-w-0 flex-1 items-center gap-2 truncate text-start data-placeholder:text-muted-foreground/80',
+        positioner: 'z-50 outline-none',
+        popup: [
+            'min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-lg outline-none',
+            'transition-[opacity,scale] duration-150 ease-out',
+            'data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',
+            // Placed over the trigger, it only fades: growing from a point inside
+            // the list would look like it came from nowhere.
+            'data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-ending-style:scale-100',
+            'motion-reduce:transition-none',
+        ],
+        list: 'max-h-(--available-height) scroll-py-1 overflow-y-auto p-1 [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]',
+        item: [
+            'flex cursor-default items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm outline-none select-none',
+            'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+            'in-data-[side=none]:min-w-[calc(var(--anchor-width)+0.5rem)]',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+        ],
+        itemIcon: 'flex size-4 shrink-0 items-center justify-center text-muted-foreground',
+        itemBody: 'flex min-w-0 flex-1 flex-col',
+        itemText: 'truncate',
+        itemDescription: 'truncate text-xs text-muted-foreground',
+        // The box is always there, so an option does not change width as it is chosen.
+        indicator: 'flex size-4 shrink-0 items-center justify-center text-foreground',
+        group: 'flex flex-col',
+        groupLabel: 'px-2 pb-1 pt-2 text-xs font-medium text-muted-foreground',
+        separator: 'mx-2 my-1 h-px bg-border',
+    },
+    variants: {
+        variant: {
+            default: {
+                trigger: 'rounded-lg border border-input bg-background shadow-xs hover:bg-accent/40 data-popup-open:border-ring dark:bg-input/30',
+            },
+            ghost: {
+                trigger: 'rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground data-popup-open:bg-accent data-popup-open:text-foreground',
+            },
+            pill: {
+                trigger: 'rounded-full border bg-background shadow-xs hover:bg-accent data-popup-open:bg-accent dark:bg-input/30',
+            },
+        },
+        size: {
+            sm: { trigger: 'h-8 px-2.5 text-[0.8125rem]' },
+            md: { trigger: 'h-9 px-3 text-sm' },
+            lg: { trigger: 'h-11 px-3.5 text-[0.9375rem]' },
+        },
+    },
+    compoundVariants: [
+        // A field is as wide as its column; a ghost or a pill is as wide as its label.
+        { variant: 'default', className: { trigger: 'w-full' } },
+        { variant: 'ghost', size: 'sm', className: { trigger: 'px-2' } },
+    ],
+    defaultVariants: { variant: 'default', size: 'md' },
+});
+/** Holds the chosen value. Takes `value`/`onValueChange`, `defaultValue`, `items`, `name`, `disabled` and `multiple`. */
+function SelectRoot(props) {
+    return _jsx(BaseSelect.Root, { ...props });
+}
+SelectRoot.displayName = 'Select';
+function Chevron({ variant }) {
+    // A field shows both directions, since its list can open either way over it.
+    // A chip shows one, and turns over while its list is open.
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: variant === 'default' || variant === undefined ? _jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }) : _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+}
+/** The button that opens the list. Put a `Select.Value` in it. */
+function SelectTrigger({ variant, size, icon, className, children, ...props }) {
+    const slots = selectVariants({ variant, size });
+    return (_jsxs(BaseSelect.Trigger, { "data-slot": "select-trigger", className: slots.trigger({ className }), ...props, children: [children, icon === null ? null : (_jsx(BaseSelect.Icon, { "data-slot": "select-icon", className: slots.icon({ className: variant === 'default' || variant === undefined ? 'rotate-0!' : undefined }), children: icon ?? _jsx(Chevron, { variant: variant }) }))] }));
+}
+SelectTrigger.displayName = 'Select.Trigger';
+/** The chosen option's label, or `placeholder` while there is none. */
+function SelectValue({ className, ...props }) {
+    return _jsx(BaseSelect.Value, { "data-slot": "select-value", className: selectVariants().value({ className }), ...props });
+}
+SelectValue.displayName = 'Select.Value';
+/** The list of options, opened in a layer over the page. */
+function SelectContent({ side = 'bottom', align = 'start', sideOffset = 6, alignItemWithTrigger = true, container, className, children, ...props }) {
+    const slots = selectVariants();
+    return (_jsx(BaseSelect.Portal, { container: container, children: _jsx(BaseSelect.Positioner, { side: side, align: align, sideOffset: sideOffset, alignItemWithTrigger: alignItemWithTrigger, className: slots.positioner(), children: _jsx(BaseSelect.Popup, { "data-slot": "select-content", className: slots.popup({ className }), ...props, children: _jsx(BaseSelect.List, { className: slots.list(), children: children }) }) }) }));
+}
+SelectContent.displayName = 'Select.Content';
+/** One option. A check marks the chosen one. */
+function SelectItem({ description, icon, className, children, ...props }) {
+    const slots = selectVariants();
+    return (_jsxs(BaseSelect.Item, { "data-slot": "select-item", className: slots.item({ className }), ...props, children: [icon ? (_jsx("span", { "data-slot": "select-item-icon", "aria-hidden": "true", className: slots.itemIcon(), children: icon })) : null, _jsxs("span", { className: slots.itemBody(), children: [_jsx(BaseSelect.ItemText, { className: slots.itemText(), children: children }), description ? _jsx("span", { className: slots.itemDescription(), children: description }) : null] }), _jsx("span", { className: slots.indicator(), children: _jsx(BaseSelect.ItemIndicator, { className: "flex", children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) })] }));
+}
+SelectItem.displayName = 'Select.Item';
+/** Options that belong together, under a `Select.GroupLabel`. */
+function SelectGroup({ className, ...props }) {
+    return _jsx(BaseSelect.Group, { "data-slot": "select-group", className: selectVariants().group({ className }), ...props });
+}
+SelectGroup.displayName = 'Select.Group';
+/** The heading of a group. Screen readers announce the group by it. */
+function SelectGroupLabel({ className, ...props }) {
+    return (_jsx(BaseSelect.GroupLabel, { "data-slot": "select-group-label", className: selectVariants().groupLabel({ className }), ...props }));
+}
+SelectGroupLabel.displayName = 'Select.GroupLabel';
+/** A rule between groups of options. */
+function SelectSeparator({ className, ...props }) {
+    return _jsx("div", { role: "separator", "data-slot": "select-separator", className: selectVariants().separator({ className }), ...props });
+}
+SelectSeparator.displayName = 'Select.Separator';
+export const Select = Object.assign(SelectRoot, {
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Content: SelectContent,
+    Item: SelectItem,
+    Group: SelectGroup,
+    GroupLabel: SelectGroupLabel,
+    Separator: SelectSeparator,
+});
+export { SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator };

package/dist/components/sheet/index.js

@@ -41,7 +41,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { Drawer } from '@base-ui/react/drawer';
 import { ScrollArea } from '@base-ui/react/scroll-area';
-import { createContext, useContext, useMemo, } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 /*
  * One curve for every movement: the sheet arriving, the one behind it stepping
@@ -216,8 +216,44 @@ function useSheet(part) {
 function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = 'bottom', dismissible = true, }) {
     // A sheet inside another sheet's content finds that sheet's context.
     const parent = useContext(SheetContext);
-    const context = useMemo(() => ({ side, nested: parent !== null && !parent.inline, inline: false, showClose: true }), [side, parent]);
-    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: open, defaultOpen: defaultOpen, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+    const nested = parent !== null && !parent.inline;
+    // Held here as well as by the primitive, so a sheet opened from this one
+    // can close it.
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isOpen = open ?? internalOpen;
+    const setOpen = useCallback((next) => {
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [open, onOpenChange]);
+    // The sheets opened from this one, so a press on the page behind them all
+    // can close the whole stack. The primitive gives that press to no one
+    // while a second sheet is open.
+    const opened = useRef(new Set());
+    const live = useRef({ isOpen, setOpen });
+    live.current = { isOpen, setOpen };
+    const handle = useMemo(() => ({
+        isOpen: () => live.current.isOpen,
+        closeTree: () => {
+            opened.current.forEach((child) => child.closeTree());
+            if (live.current.isOpen)
+                live.current.setOpen(false);
+        },
+    }), []);
+    useEffect(() => (nested && parent ? parent.register(handle) : undefined), [nested, parent, handle]);
+    const context = useMemo(() => ({
+        side,
+        nested,
+        inline: false,
+        showClose: true,
+        register: (child) => {
+            opened.current.add(child);
+            return () => opened.current.delete(child);
+        },
+        closeTree: handle.closeTree,
+        hasOpenChild: () => [...opened.current].some((child) => child.isOpen()),
+    }), [side, nested, handle]);
+    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: isOpen, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
                 // The primitive has a switch for a press outside and none for
                 // Escape or a swipe, so those are refused here.
                 if (!next &&
@@ -226,7 +262,7 @@ function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = '
                     details.reason !== 'imperative-action') {
                     return;
                 }
-                onOpenChange?.(next);
+                setOpen(next);
             }, children: children }) }));
 }
 SheetRoot.displayName = 'Sheet';
@@ -250,7 +286,12 @@ function SheetContent({ children, detached = true, size = 'auto', showGrabber, s
     if (inline) {
         return (_jsx(SheetContext.Provider, { value: context, children: _jsx("div", { className: slots.popup({ className: ['[transform:none]', className] }), ...props, children: inside }) }));
     }
-    return (_jsxs(Drawer.Portal, { children: [sheet.nested ? null : _jsx(Drawer.Backdrop, { className: slots.backdrop() }), _jsx(Drawer.Viewport, { className: slots.viewport(), children: _jsx(Drawer.Popup, { className: slots.popup({ className }), ...props, children: _jsx(SheetContext.Provider, { value: context, children: inside }) }) })] }));
+    return (_jsxs(Drawer.Portal, { children: [sheet.nested ? null : (_jsx(Drawer.Backdrop, { className: slots.backdrop(), 
+                // With a second sheet open, a press here is outside both, and closes both.
+                onClick: () => {
+                    if (sheet.hasOpenChild())
+                        sheet.closeTree();
+                } })), _jsx(Drawer.Viewport, { className: slots.viewport(), children: _jsx(Drawer.Popup, { className: slots.popup({ className }), ...props, children: _jsx(SheetContext.Provider, { value: context, children: inside }) }) })] }));
 }
 SheetContent.displayName = 'Sheet.Content';
 /**

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

@@ -0,0 +1,43 @@
+/**
+ * Textarea — a field for more than one line, that grows as it is written in.
+ *
+ * ```tsx
+ * <Textarea placeholder="What happened?" />
+ * <Textarea minRows={1} maxRows={6} variant="ghost" />
+ * ```
+ *
+ * ## Growing
+ *
+ * It starts `minRows` lines tall and grows a line at a time as text is
+ * written, up to `maxRows`. Past that it scrolls, with a thin scrollbar of its
+ * own rather than the browser's. Pass `autoResize={false}` for a field that
+ * keeps the size `rows` gives it and can be resized by hand.
+ *
+ * The height is measured from the text, so it is right on the first render
+ * for a value that was already there, and for a value set from outside.
+ *
+ * ## Ghost
+ *
+ * `variant="ghost"` drops the border, background and ring, for a field set
+ * inside something that already draws them, such as a card or a composer.
+ */
+import { type ComponentProps } from 'react';
+export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'> {
+    /** `ghost` draws no box, for a field inside something that draws one. Default `default`. */
+    variant?: 'default' | 'ghost';
+    /** Its text size and line height. Default `md`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether it grows with what is written in it. Default `true`. */
+    autoResize?: boolean;
+    /** How many lines tall it starts, while growing. Default `2`. */
+    minRows?: number;
+    /** How many lines tall it can grow before it scrolls. Default `8`. */
+    maxRows?: number;
+}
+/** A multi-line field. Every attribute of `<textarea>` passes through. */
+declare function TextareaRoot({ variant, size, autoResize, minRows, maxRows, rows, value, onInput, className, style, ref, ...props }: TextareaProps): import("react").JSX.Element;
+declare namespace TextareaRoot {
+    var displayName: string;
+}
+export declare const Textarea: typeof TextareaRoot;
+export {};

package/dist/components/textarea/index.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Textarea — a field for more than one line, that grows as it is written in.
+ *
+ * ```tsx
+ * <Textarea placeholder="What happened?" />
+ * <Textarea minRows={1} maxRows={6} variant="ghost" />
+ * ```
+ *
+ * ## Growing
+ *
+ * It starts `minRows` lines tall and grows a line at a time as text is
+ * written, up to `maxRows`. Past that it scrolls, with a thin scrollbar of its
+ * own rather than the browser's. Pass `autoResize={false}` for a field that
+ * keeps the size `rows` gives it and can be resized by hand.
+ *
+ * The height is measured from the text, so it is right on the first render
+ * for a value that was already there, and for a value set from outside.
+ *
+ * ## Ghost
+ *
+ * `variant="ghost"` drops the border, background and ring, for a field set
+ * inside something that already draws them, such as a card or a composer.
+ */
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import { tv } from 'tailwind-variants';
+const textareaVariants = tv({
+    base: [
+        'block w-full min-w-0 bg-transparent text-foreground outline-none',
+        'placeholder:text-muted-foreground/80 selection:bg-primary selection:text-primary-foreground',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        // A thin bar in the theme's border colour, never the platform's wide one.
+        '[scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]',
+    ],
+    variants: {
+        variant: {
+            default: [
+                'rounded-lg border border-input bg-background shadow-xs transition-[border-color,box-shadow] dark:bg-input/30',
+                'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30',
+                'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+            ],
+            ghost: 'rounded-none border-0 p-0 shadow-none',
+        },
+        size: {
+            sm: 'text-[0.8125rem] leading-5',
+            md: 'text-sm leading-6',
+            lg: 'text-base leading-7',
+        },
+        autoResize: {
+            true: 'resize-none',
+            false: 'resize-y',
+        },
+    },
+    compoundVariants: [
+        { variant: 'default', size: 'sm', className: 'px-2.5 py-1.5' },
+        { variant: 'default', size: 'md', className: 'px-3 py-2' },
+        { variant: 'default', size: 'lg', className: 'px-3.5 py-2.5' },
+    ],
+    defaultVariants: { variant: 'default', size: 'md', autoResize: true },
+});
+function setRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+/** A multi-line field. Every attribute of `<textarea>` passes through. */
+function TextareaRoot({ variant, size, autoResize = true, minRows = 2, maxRows = 8, rows, value, onInput, className, style, ref, ...props }) {
+    const field = useRef(null);
+    // Set to one row, read how tall the text wants to be, and clamp that to the
+    // rows allowed. The padding and border are part of both ends of the clamp.
+    const fit = useCallback(() => {
+        const node = field.current;
+        if (!node || !autoResize)
+            return;
+        const computed = getComputedStyle(node);
+        const line = parseFloat(computed.lineHeight) || 20;
+        const frame = parseFloat(computed.paddingTop) +
+            parseFloat(computed.paddingBottom) +
+            parseFloat(computed.borderTopWidth) +
+            parseFloat(computed.borderBottomWidth);
+        node.style.height = 'auto';
+        const wanted = node.scrollHeight + parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth);
+        const min = line * minRows + frame;
+        const max = line * Math.max(maxRows, minRows) + frame;
+        node.style.height = `${Math.min(Math.max(wanted, min), max)}px`;
+        node.style.overflowY = wanted > max ? 'auto' : 'hidden';
+    }, [autoResize, minRows, maxRows]);
+    // Before paint, so a value that was already there never shows at the wrong height.
+    useLayoutEffect(fit, [fit, value]);
+    return (_jsx("textarea", { ref: (node) => {
+            field.current = node;
+            setRef(ref, node);
+        }, "data-slot": "textarea", rows: autoResize ? minRows : rows, value: value, onInput: (event) => {
+            onInput?.(event);
+            fit();
+        }, className: textareaVariants({ variant, size, autoResize, className }), style: style, ...props }));
+}
+TextareaRoot.displayName = 'Textarea';
+export const Textarea = TextareaRoot;

package/dist/index.d.ts

@@ -14,3 +14,10 @@ export { Flow, FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowGr
 export { TiltCard, TiltCardLayer, TiltCardTitle, TiltCardDescription, type TiltCardProps, type TiltCardLayerProps, type TiltCardTitleProps, type TiltCardDescriptionProps, type TiltCardColor, } from './components/tilt-card/index.js';
 export { Stat, StatContent, StatLabel, StatDescription, StatValue, StatUnit, StatBadge, type StatProps, type StatContentProps, type StatLabelProps, type StatDescriptionProps, type StatValueProps, type StatUnitProps, type StatBadgeProps, } from './components/stat/index.js';
 export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, type CommandDockProps, type CommandDockTriggerProps, type CommandDockPanelProps, type CommandDockInputProps, type CommandDockResultsProps, type CommandDockRowProps, type CommandDockRowTitleProps, type CommandDockRowMetaProps, type CommandDockStatusProps, } from './components/command-dock/index.js';
+export { NotFound, NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundActions, type NotFoundProps, type NotFoundCodeProps, type NotFoundTitleProps, type NotFoundDescriptionProps, type NotFoundActionsProps, type NotFoundEffect, type NotFoundColor, } from './components/not-found/index.js';
+export { Button, buttonVariants, type ButtonProps, type ButtonVariant, type ButtonSize } from './components/button/index.js';
+export { Input, InputGroup, InputAddon, type InputProps, type InputGroupProps, type InputAddonProps, type InputSize } from './components/input/index.js';
+export { Textarea, type TextareaProps } from './components/textarea/index.js';
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator, type SelectProps, type SelectTriggerProps, type SelectValueProps, type SelectContentProps, type SelectItemProps, type SelectGroupProps, type SelectGroupLabelProps, type SelectSeparatorProps, } from './components/select/index.js';
+export { Prompt, PromptBanner, PromptBannerAction, PromptField, PromptAttachments, PromptTextarea, PromptFooter, PromptTools, PromptTool, PromptAttach, PromptMenu, PromptAttachItem, PromptModel, PromptSubmit, PromptStatus, PromptTasks, PromptTask, PromptCommands, PromptRecorder, PromptContext, PromptContextItem, PromptHint, type PromptProps, type PromptState, type PromptMessage, type PromptAttachment, type PromptRejectReason, type PromptBannerProps, type PromptBannerActionProps, type PromptFieldProps, type PromptAttachmentsProps, type PromptTextareaProps, type PromptFooterProps, type PromptToolsProps, type PromptToolProps, type PromptAttachProps, type PromptMenuProps, type PromptAttachItemProps, type PromptModelProps, type PromptModelItem, type PromptSubmitProps, type PromptStatusProps, type PromptTasksProps, type PromptTaskProps, type PromptTaskStatus, type PromptCommandsProps, type PromptCommandItem, type PromptRecorderProps, type PromptContextProps, type PromptContextItemProps, type PromptHintProps, } from './components/prompt/index.js';
+export { Menu, MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, type MenuProps, type MenuTriggerProps, type MenuContentProps, type MenuItemProps, type MenuCheckboxItemProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSubProps, type MenuSubTriggerProps, type MenuSubContentProps, type MenuGroupProps, type MenuGroupLabelProps, type MenuSeparatorProps, type MenuDescriptionProps, type MenuShortcutProps, type MenuBadgeProps, } from './components/menu/index.js';

package/dist/index.js

@@ -14,3 +14,10 @@ export { Flow, FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowGr
 export { TiltCard, TiltCardLayer, TiltCardTitle, TiltCardDescription, } from './components/tilt-card/index.js';
 export { Stat, StatContent, StatLabel, StatDescription, StatValue, StatUnit, StatBadge, } from './components/stat/index.js';
 export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, } from './components/command-dock/index.js';
+export { NotFound, NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundActions, } from './components/not-found/index.js';
+export { Button, buttonVariants } from './components/button/index.js';
+export { Input, InputGroup, InputAddon } from './components/input/index.js';
+export { Textarea } from './components/textarea/index.js';
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator, } from './components/select/index.js';
+export { Prompt, PromptBanner, PromptBannerAction, PromptField, PromptAttachments, PromptTextarea, PromptFooter, PromptTools, PromptTool, PromptAttach, PromptMenu, PromptAttachItem, PromptModel, PromptSubmit, PromptStatus, PromptTasks, PromptTask, PromptCommands, PromptRecorder, PromptContext, PromptContextItem, PromptHint, } from './components/prompt/index.js';
+export { Menu, MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, } from './components/menu/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-web",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "PanelUI for the web: animated, data-rich React components styled with Tailwind CSS on shadcn tokens.",
   "type": "module",
   "sideEffects": false,