@abuzareal/contour-ui 0.1.1 → 0.2.0

package/dist/components/hero/Sculpture.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Hero sculpture: three chrome/lime links that follow the pointer and drift while motion is on. */
 import { useRef } from "react";
@@ -5,10 +6,13 @@ import * as THREE from "three";
 import useThreeStage from "../../hooks/useThreeStage.js";
 import { createChrome, createLime, createLinkGeometry, } from "../../lib/threeMaterials.js";
 const restRotation = new THREE.Euler(-0.15, -0.1, -0.1);
-function setupSculpture({ scene }) {
+function setupSculpture({ scene, onDispose }) {
     const chrome = createChrome();
+    onDispose?.(() => chrome.dispose());
     const lime = createLime();
+    onDispose?.(() => lime.dispose());
     const geometry = createLinkGeometry();
+    onDispose?.(() => geometry.dispose());
     // Three interlocking links arranged as one assembly.
     const assembly = new THREE.Group();
     const firstLink = new THREE.Mesh(geometry, chrome);
@@ -36,9 +40,7 @@ function setupSculpture({ scene }) {
             assembly.position.y = 0;
         },
         dispose: () => {
-            geometry.dispose();
-            chrome.dispose();
-            lime.dispose();
+            scene.remove(assembly);
         },
     };
 }

package/dist/components/three/ObjectStudy.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Lays out a set of 3D objects in a responsive grid; each turns slowly and the set leans toward the pointer. */
 import { useRef } from "react";
@@ -22,8 +23,9 @@ export default function ObjectStudy({ label, motionEnabled, study, }) {
     useThreeStage(hostRef, {
         motionEnabled,
         cameraDistance,
-        setup: ({ scene, camera }) => {
+        setup: ({ scene, camera, onDispose }) => {
             const set = objectStudies[study]();
+            onDispose?.(set.dispose);
             const group = new THREE.Group();
             set.objects.forEach((object) => {
                 object.rotation.copy(restTilt);
@@ -42,7 +44,6 @@ export default function ObjectStudy({ label, motionEnabled, study, }) {
             arrange();
             return {
                 update: ({ delta, elapsed, pointer }) => {
-                    arrange();
                     set.objects.forEach((object, index) => {
                         object.rotation.y += delta * 0.45;
                         object.rotation.x =
@@ -57,7 +58,10 @@ export default function ObjectStudy({ label, motionEnabled, study, }) {
                     group.rotation.set(0, 0, 0);
                     set.objects.forEach((object) => object.rotation.copy(restTilt));
                 },
-                dispose: set.dispose,
+                resize: arrange,
+                dispose: () => {
+                    scene.remove(group);
+                },
             };
         },
     });

package/dist/components/ui/Alert.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Asterisk, CircleCheck, CircleX, Info, TriangleAlert, X, } from "lucide-react";
 import { cx } from "../../lib/classNames.js";

package/dist/components/ui/BrandMark.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { safeHref } from "../../lib/safeHref.js";
 export default function BrandMark({ label, href = "#hero", onClick, }) {

package/dist/components/ui/Checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Square checkbox with an acid check, optional description, error, and indeterminate state. */
 import { useEffect, useId, useRef } from "react";

package/dist/components/ui/CountUp.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Number that counts up the first time it scrolls into view; screen readers get the final value. */
 import { useEffect, useRef, useState } from "react";

package/dist/components/ui/DataTable.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Editorial data table with mono headers, optional column sorting, and horizontal scroll on small screens. */
 import { useMemo, useState } from "react";

package/dist/components/ui/Dialog.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Modal dialog on the native <dialog> element; also slides in from either edge as a drawer. */
 import { useEffect, useId, useRef } from "react";

package/dist/components/ui/DropdownMenu.d.ts

@@ -5,10 +5,16 @@ export type MenuItem = {
     onSelect: () => void;
     icon?: ReactNode;
     danger?: boolean;
+    disabled?: boolean;
+    /** Stable identity when labels are duplicated or translated. */
+    id?: string;
 };
 export type DropdownMenuProps = {
     label: string;
     items: MenuItem[];
     align?: "start" | "end";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
-export default function DropdownMenu({ label, items, align, }: DropdownMenuProps): import("react").JSX.Element;
+export default function DropdownMenu({ label, items, align, open: controlledOpen, defaultOpen, onOpenChange, }: DropdownMenuProps): import("react").JSX.Element;

package/dist/components/ui/DropdownMenu.js

@@ -1,38 +1,86 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Button-triggered action menu with roving focus, Escape/outside dismissal, and focus return. */
-import { useCallback, useEffect, useId, useRef, useState, } from "react";
+import { useCallback, useEffect, useId, useRef } from "react";
 import { ChevronDown } from "lucide-react";
+import useOpenState from "../../hooks/useOpenState.js";
 import useDismiss from "../../hooks/useDismiss.js";
 import { cx } from "../../lib/classNames.js";
 import { nextIndexForKey } from "../../lib/keyboard.js";
-export default function DropdownMenu({ label, items, align = "start", }) {
+export default function DropdownMenu({ label, items, align = "start", open: controlledOpen, defaultOpen = false, onOpenChange, }) {
     const menuId = useId();
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useOpenState(controlledOpen, defaultOpen, onOpenChange);
     const container = useRef(null);
     const trigger = useRef(null);
+    const initialFocus = useRef("first");
+    const search = useRef({ value: "", time: 0 });
     const itemRefs = useRef([]);
     const close = useCallback((returnFocus = true) => {
         setOpen(false);
         if (returnFocus)
             trigger.current?.focus();
-    }, []);
+    }, [setOpen]);
     useDismiss(container, open, useCallback((reason) => close(reason === "escape"), [close]));
     useEffect(() => {
-        if (open)
-            itemRefs.current[0]?.focus();
+        if (!open)
+            return;
+        search.current = { value: "", time: 0 };
+        const enabled = itemRefs.current.filter((item) => item && !item.disabled);
+        (initialFocus.current === "last" ? enabled.at(-1) : enabled[0])?.focus();
     }, [open]);
-    return (_jsxs("div", { ref: container, className: cx("menu", `menu-${align}`), children: [_jsxs("button", { ref: trigger, type: "button", className: "menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": menuId, onClick: () => setOpen((value) => !value), children: [label, _jsx(ChevronDown, { size: 15, "aria-hidden": "true", className: "menu-chevron" })] }), _jsx("div", { id: menuId, role: "menu", "aria-label": label, className: "menu-list", hidden: !open, children: items.map((item, index) => (_jsxs("button", { ref: (element) => {
+    return (_jsxs("div", { ref: container, className: cx("menu", `menu-${align}`), children: [_jsxs("button", { ref: trigger, type: "button", className: "menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": menuId, onClick: () => {
+                    initialFocus.current = "first";
+                    setOpen(!open);
+                }, onKeyDown: (event) => {
+                    if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+                        return;
+                    event.preventDefault();
+                    initialFocus.current = event.key === "ArrowUp" ? "last" : "first";
+                    if (open) {
+                        const enabled = itemRefs.current.filter((item) => item && !item.disabled);
+                        (initialFocus.current === "last"
+                            ? enabled.at(-1)
+                            : enabled[0])?.focus();
+                    }
+                    else
+                        setOpen(true);
+                }, children: [label, _jsx(ChevronDown, { size: 15, "aria-hidden": "true", className: "menu-chevron" })] }), _jsx("div", { id: menuId, role: "menu", "aria-label": label, className: "menu-list", hidden: !open, children: items.map((item, index) => (_jsxs("button", { ref: (element) => {
                         itemRefs.current[index] = element;
-                    }, type: "button", role: "menuitem", tabIndex: -1, className: cx("menu-item", item.danger && "menu-item-danger"), onClick: () => {
+                    }, type: "button", role: "menuitem", tabIndex: -1, disabled: item.disabled, className: cx("menu-item", item.danger && "menu-item-danger"), onClick: () => {
                         item.onSelect();
                         close();
                     }, onKeyDown: (event) => {
                         if (event.key === "Tab")
                             return close(false);
-                        const next = nextIndexForKey(event.key, index, items.length, "vertical");
-                        if (next === null)
-                            return;
-                        event.preventDefault();
-                        itemRefs.current[next]?.focus();
-                    }, children: [item.icon, item.label] }, item.label))) })] }));
+                        const enabled = items
+                            .map((entry, position) => (entry.disabled ? -1 : position))
+                            .filter((position) => position !== -1);
+                        const next = nextIndexForKey(event.key, enabled.indexOf(index), enabled.length, "vertical");
+                        if (next !== null) {
+                            event.preventDefault();
+                            itemRefs.current[enabled[next]]?.focus();
+                        }
+                        else if (event.key.length === 1 &&
+                            !event.ctrlKey &&
+                            !event.altKey &&
+                            !event.metaKey) {
+                            const now = performance.now();
+                            const previous = now - search.current.time < 500 ? search.current.value : "";
+                            const value = previous &&
+                                [...previous].every((letter) => letter === event.key.toLowerCase())
+                                ? event.key.toLowerCase()
+                                : previous + event.key.toLowerCase();
+                            search.current = { value, time: now };
+                            const start = enabled.indexOf(index) + 1;
+                            const ordered = [
+                                ...enabled.slice(start),
+                                ...enabled.slice(0, start),
+                            ];
+                            const match = ordered.find((position) => items[position].label.toLowerCase().startsWith(value));
+                            if (match !== undefined) {
+                                event.preventDefault();
+                                itemRefs.current[match]?.focus();
+                            }
+                        }
+                    }, children: [item.icon, item.label] }, item.id ?? item.label))) })] }));
 }

package/dist/components/ui/FlipCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Two-sided card that flips in 3D; a button toggles it so the back is reachable without hover. */
 import { useState, version } from "react";

package/dist/components/ui/Magnetic.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Pulls its child toward a fine pointer while hovered, then springs back (an awwwards staple). */
 import { useRef } from "react";

package/dist/components/ui/Pagination.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Page navigation with previous/next controls and a condensed list of two-digit page numbers. */
 import { ArrowLeft, ArrowRight } from "lucide-react";

package/dist/components/ui/Popover.d.ts

@@ -6,5 +6,8 @@ export type PopoverProps = {
     title: string;
     children: ReactNode;
     align?: "start" | "end";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
-export default function Popover({ trigger, title, children, align, }: PopoverProps): import("react").JSX.Element;
+export default function Popover({ trigger, title, children, align, open: controlledOpen, defaultOpen, onOpenChange, }: PopoverProps): import("react").JSX.Element;

package/dist/components/ui/Popover.js

@@ -1,18 +1,20 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Non-modal floating panel anchored to a trigger; closes on Escape or an outside press. */
-import { useCallback, useId, useRef, useState } from "react";
+import { useCallback, useId, useRef } from "react";
+import useOpenState from "../../hooks/useOpenState.js";
 import useDismiss from "../../hooks/useDismiss.js";
 import { cx } from "../../lib/classNames.js";
-export default function Popover({ trigger, title, children, align = "start", }) {
+export default function Popover({ trigger, title, children, align = "start", open: controlledOpen, defaultOpen = false, onOpenChange, }) {
     const panelId = useId();
     const titleId = useId();
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useOpenState(controlledOpen, defaultOpen, onOpenChange);
     const container = useRef(null);
     const button = useRef(null);
     useDismiss(container, open, useCallback((reason) => {
         setOpen(false);
         if (reason === "escape")
             button.current?.focus();
-    }, []));
-    return (_jsxs("div", { ref: container, className: cx("popover", `popover-${align}`), children: [_jsx("button", { ref: button, type: "button", className: "menu-trigger", "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((value) => !value), children: trigger }), _jsxs("div", { id: panelId, role: "dialog", "aria-labelledby": titleId, className: "popover-panel", hidden: !open, children: [_jsx("strong", { id: titleId, className: "popover-title", children: title }), children] })] }));
+    }, [setOpen]));
+    return (_jsxs("div", { ref: container, className: cx("popover", `popover-${align}`), children: [_jsx("button", { ref: button, type: "button", className: "menu-trigger", "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen(!open), children: trigger }), _jsxs("div", { id: panelId, role: "dialog", "aria-labelledby": titleId, className: "popover-panel", hidden: !open, children: [_jsx("strong", { id: titleId, className: "popover-title", children: title }), children] })] }));
 }

package/dist/components/ui/RadioGroup.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Fieldset of round radio options sharing one name, with a mono legend. */
 import { useId } from "react";

package/dist/components/ui/Reveal.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Fades and lifts its children into view the first time they enter the viewport. */
 import { useEffect, useRef } from "react";

package/dist/components/ui/ScrollProgress.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Thin acid bar fixed to the top of the viewport that tracks page scroll progress. */
 import { useEffect, useRef } from "react";

package/dist/components/ui/SegmentedControl.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Single-choice pill group (filter buttons) with arrow-key navigation. */
 import { useRef } from "react";

package/dist/components/ui/SelectField.d.ts

@@ -10,4 +10,14 @@ export type SelectFieldProps = SelectHTMLAttributes<HTMLSelectElement> & {
     error?: string;
     placeholder?: string;
 };
-export default function SelectField({ id: providedId, "aria-describedby": describedBy, label, options, hint, error, placeholder, ...rest }: SelectFieldProps): import("react").JSX.Element;
+declare const SelectField: import("react").ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+} & import("react").RefAttributes<HTMLSelectElement>>;
+export default SelectField;

package/dist/components/ui/SelectField.js

@@ -1,13 +1,15 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Native select styled as an underlined field with a chevron. */
-import { useId } from "react";
+import { forwardRef, useId } from "react";
 import { ChevronDown } from "lucide-react";
 import { fieldDescribedBy } from "../../lib/a11y.js";
 import Field from "./Field.js";
-export default function SelectField({ id: providedId, "aria-describedby": describedBy, label, options, hint, error, placeholder, ...rest }) {
+const SelectField = forwardRef(function SelectField({ id: providedId, "aria-describedby": describedBy, label, options, hint, error, placeholder, ...rest }, ref) {
     const generatedId = useId();
     const id = providedId ?? generatedId;
-    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, children: _jsxs("div", { className: "field-control field-select", children: [_jsxs("select", { ...rest, id: id, "aria-invalid": error ? true : undefined, "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, children: _jsxs("div", { className: "field-control field-select", children: [_jsxs("select", { ...rest, ref: ref, id: id, "aria-invalid": error ? true : rest["aria-invalid"], "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
                         .filter(Boolean)
                         .join(" ") || undefined, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(ChevronDown, { className: "field-chevron", size: 16, "aria-hidden": "true" })] }) }));
-}
+});
+export default SelectField;

package/dist/components/ui/Slider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Range slider with a filled acid track and a live value readout. */
 import { useId } from "react";

package/dist/components/ui/Switch.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** On/off switch (role="switch") with a pill track that fills acid when on. */
 import { useId } from "react";

package/dist/components/ui/Tabs.d.ts

@@ -9,5 +9,8 @@ export type TabsProps = {
     label: string;
     tabs: TabItem[];
     defaultTabId?: string;
+    /** Controlled selection. The caller must update this after onTabChange. */
+    activeTabId?: string;
+    onTabChange?: (id: string) => void;
 };
-export default function Tabs({ label, tabs, defaultTabId }: TabsProps): import("react").JSX.Element;
+export default function Tabs({ label, tabs, defaultTabId, activeTabId, onTabChange, }: TabsProps): import("react").JSX.Element;

package/dist/components/ui/Tabs.js

@@ -1,13 +1,14 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Tabs with a sliding underline indicator, arrow-key navigation, and linked panels. */
 import { useId, useLayoutEffect, useRef, useState, } from "react";
 import { nextIndexForKey } from "../../lib/keyboard.js";
-export default function Tabs({ label, tabs, defaultTabId }) {
+export default function Tabs({ label, tabs, defaultTabId, activeTabId, onTabChange, }) {
     const baseId = useId();
     const [activeId, setActiveId] = useState(defaultTabId ?? tabs[0]?.id ?? "");
     const [indicator, setIndicator] = useState({ left: 0, width: 0 });
     const tabRefs = useRef([]);
-    const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.id === activeId));
+    const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.id === (activeTabId ?? activeId)));
     const selectedId = tabs[activeIndex]?.id;
     useLayoutEffect(() => {
         const measure = () => {
@@ -18,9 +19,11 @@ export default function Tabs({ label, tabs, defaultTabId }) {
         measure();
         window.addEventListener("resize", measure);
         return () => window.removeEventListener("resize", measure);
-    }, [activeIndex]);
+    }, [activeIndex, tabs]);
     const select = (index) => {
-        setActiveId(tabs[index].id);
+        if (activeTabId === undefined)
+            setActiveId(tabs[index].id);
+        onTabChange?.(tabs[index].id);
         tabRefs.current[index]?.focus();
     };
     return (_jsxs("div", { className: "tabs", children: [_jsx("div", { className: "tabs-list", role: "tablist", "aria-label": label, style: {
@@ -30,7 +33,11 @@ export default function Tabs({ label, tabs, defaultTabId }) {
                     const selected = tab.id === selectedId;
                     return (_jsx("button", { ref: (element) => {
                             tabRefs.current[index] = element;
-                        }, id: `${baseId}-tab-${tab.id}`, type: "button", role: "tab", "aria-selected": selected, "aria-controls": `${baseId}-panel-${tab.id}`, tabIndex: selected ? 0 : -1, className: "tabs-tab", onClick: () => setActiveId(tab.id), onKeyDown: (event) => {
+                        }, id: `${baseId}-tab-${tab.id}`, type: "button", role: "tab", "aria-selected": selected, "aria-controls": `${baseId}-panel-${tab.id}`, tabIndex: selected ? 0 : -1, className: "tabs-tab", onClick: () => {
+                            if (activeTabId === undefined)
+                                setActiveId(tab.id);
+                            onTabChange?.(tab.id);
+                        }, onKeyDown: (event) => {
                             const next = nextIndexForKey(event.key, index, tabs.length);
                             if (next === null)
                                 return;

package/dist/components/ui/Tag.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Mono "+ tag" label (as in project notes); becomes a removable chip when given onRemove. */
 import { X } from "lucide-react";

package/dist/components/ui/TextArea.d.ts

@@ -7,4 +7,11 @@ export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** Grows with its content instead of scrolling. */
     autoResize?: boolean;
 };
-export default function TextArea({ id: providedId, "aria-describedby": describedBy, label, hint, error, autoResize, maxLength, onChange, rows, ...rest }: TextAreaProps): import("react").JSX.Element;
+declare const TextArea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    /** Grows with its content instead of scrolling. */
+    autoResize?: boolean;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/components/ui/TextArea.js

@@ -1,12 +1,15 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Multi-line text input with optional auto-resize and character counter. */
-import { useId, useLayoutEffect, useRef, useState, } from "react";
+import { forwardRef, useId, useLayoutEffect, useState, } from "react";
 import { fieldDescribedBy } from "../../lib/a11y.js";
 import Field from "./Field.js";
-export default function TextArea({ id: providedId, "aria-describedby": describedBy, label, hint, error, autoResize = false, maxLength, onChange, rows = 3, ...rest }) {
+import useControlRef from "../../hooks/useControlRef.js";
+import useFormReset from "../../hooks/useFormReset.js";
+const TextArea = forwardRef(function TextArea({ id: providedId, "aria-describedby": describedBy, label, hint, error, autoResize = false, maxLength, onChange, rows = 3, ...rest }, forwardedRef) {
     const generatedId = useId();
     const id = providedId ?? generatedId;
-    const ref = useRef(null);
+    const { ref, attach } = useControlRef(forwardedRef);
     const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? "").length);
     const fitContent = () => {
         const element = ref.current;
@@ -16,13 +19,24 @@ export default function TextArea({ id: providedId, "aria-describedby": described
         element.style.height = `${element.scrollHeight}px`;
     };
     useLayoutEffect(fitContent);
-    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, counter: maxLength
+    useFormReset(ref, () => {
+        setLength(ref.current?.value.length ?? 0);
+        fitContent();
+    });
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, counter: maxLength !== undefined
             ? `${rest.value !== undefined ? String(rest.value).length : length}/${maxLength}`
-            : undefined, children: _jsx("div", { className: "field-control", children: _jsx("textarea", { ...rest, ref: ref, id: id, rows: rows, maxLength: maxLength, "data-auto-resize": autoResize || undefined, "aria-invalid": error ? true : undefined, "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
+            : undefined, children: _jsx("div", { className: "field-control", children: _jsx("textarea", { ...rest, ref: attach, id: id, rows: rows, maxLength: maxLength, "data-auto-resize": autoResize || undefined, "aria-invalid": error ? true : rest["aria-invalid"], "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
                     .filter(Boolean)
-                    .join(" ") || undefined, onChange: (event) => {
+                    .join(" ") || undefined, 
+                // Native input also runs when React deduplicates a repeated value after form.reset().
+                onInput: (event) => {
+                    setLength(event.currentTarget.value.length);
+                    fitContent();
+                    rest.onInput?.(event);
+                }, onChange: (event) => {
                     setLength(event.target.value.length);
                     fitContent();
                     onChange?.(event);
                 } }) }) }));
-}
+});
+export default TextArea;

package/dist/components/ui/TextField.d.ts

@@ -9,4 +9,13 @@ export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     /** Content after the input, e.g. a unit or an icon button. */
     trailing?: ReactNode;
 };
-export default function TextField({ id: providedId, "aria-describedby": describedBy, label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }: TextFieldProps): import("react").JSX.Element;
+declare const TextField: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    hideLabel?: boolean;
+    leadingIcon?: ReactNode;
+    /** Content after the input, e.g. a unit or an icon button. */
+    trailing?: ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default TextField;

package/dist/components/ui/TextField.js

@@ -1,18 +1,29 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Single-line text input with underline styling, optional icon/adornment, and character counter. */
-import { useId, useState, } from "react";
+import { forwardRef, useId, useState, } from "react";
 import { fieldDescribedBy } from "../../lib/a11y.js";
 import Field from "./Field.js";
-export default function TextField({ id: providedId, "aria-describedby": describedBy, label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }) {
+import useControlRef from "../../hooks/useControlRef.js";
+import useFormReset from "../../hooks/useFormReset.js";
+const TextField = forwardRef(function TextField({ id: providedId, "aria-describedby": describedBy, label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }, forwardedRef) {
+    const { ref, attach } = useControlRef(forwardedRef);
     const generatedId = useId();
     const id = providedId ?? generatedId;
     const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? "").length);
-    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, hideLabel: hideLabel, disabled: rest.disabled, counter: maxLength
+    useFormReset(ref, () => setLength(ref.current?.value.length ?? 0));
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, hideLabel: hideLabel, disabled: rest.disabled, counter: maxLength !== undefined
             ? `${rest.value !== undefined ? String(rest.value).length : length}/${maxLength}`
-            : undefined, children: _jsxs("div", { className: "field-control", children: [leadingIcon && _jsx("span", { className: "field-icon", children: leadingIcon }), _jsx("input", { ...rest, id: id, maxLength: maxLength, "aria-invalid": error ? true : undefined, "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
+            : undefined, children: _jsxs("div", { className: "field-control", children: [leadingIcon && _jsx("span", { className: "field-icon", children: leadingIcon }), _jsx("input", { ...rest, ref: attach, id: id, maxLength: maxLength, "aria-invalid": error ? true : rest["aria-invalid"], "aria-describedby": [describedBy, fieldDescribedBy(id, hint, error)]
                         .filter(Boolean)
-                        .join(" ") || undefined, onChange: (event) => {
+                        .join(" ") || undefined, 
+                    // Native input also runs when React deduplicates a repeated value after form.reset().
+                    onInput: (event) => {
+                        setLength(event.currentTarget.value.length);
+                        rest.onInput?.(event);
+                    }, onChange: (event) => {
                         setLength(event.target.value.length);
                         onChange?.(event);
                     } }), trailing && _jsx("span", { className: "field-trailing", children: trailing })] }) }));
-}
+});
+export default TextField;

package/dist/components/ui/ThemeToggle.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Header button that switches between the light and dark themes. */
 import { Moon, Sun } from "lucide-react";

package/dist/components/ui/TiltCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Card that tilts in 3D toward a fine pointer with a moving glare highlight. */
 import { useRef } from "react";

package/dist/components/ui/ToastProvider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Renders queued toasts in a polite live region; each auto-dismisses unless hovered or focused. */
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";

package/dist/components/ui/Tooltip.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Ink tooltip shown on hover or focus, dismissible with Escape, described via aria-describedby. */
 import { cloneElement, useId, useState } from "react";