@tuuject/koi-react 0.0.0-stage → 0.1.0

package/dist/progress/Progress.d.ts

@@ -0,0 +1,7 @@
+import { type ProgressOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { ProgressSize } from '@tuuject/koi-core';
+export interface ProgressProps extends ProgressOwnProps, Omit<ComponentPropsWithRef<'div'>, keyof ProgressOwnProps | 'children'> {
+}
+/** A rounded progress bar. Base UI's root is the `role="progressbar"` element and carries the aria-value attributes. */
+export declare function Progress({ value, max, label, showValue, size, className, ...rest }: ProgressProps): import("react").JSX.Element;

package/dist/progress/Progress.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { progress } from '@tuuject/koi-react/styled-system/recipes';
+/** A rounded progress bar. Base UI's root is the `role="progressbar"` element and carries the aria-value attributes. */
+export function Progress({ value, max, label, showValue, size = 'md', className, ...rest }) {
+    const s = progress({ size });
+    const known = value != null && Number.isFinite(value);
+    // `max || 100` as legacy, so max={0} can't divide by zero.
+    const top = max || 100;
+    const pct = known ? Math.max(0, Math.min(100, (value / top) * 100)) : 0;
+    const shownValue = showValue && known;
+    return (_jsxs(BaseProgress.Root, { value: known ? value : null, max: top, "aria-label": label ? undefined : strings.progress, 
+        // Base UI's default text is English ("indeterminate progress"); the percentage stays as it formats it.
+        getAriaValueText: (formatted) => (known ? formatted : strings.inProgress), ...rest, className: cx(s.root, className), children: [label || shownValue ? (_jsxs("div", { className: s.head, children: [label ? _jsx(BaseProgress.Label, { className: s.label, children: label }) : null, shownValue ? _jsxs("span", { className: s.value, children: [Math.round(pct), "%"] }) : null] })) : null, _jsx(BaseProgress.Track, { className: s.track, children: _jsx(BaseProgress.Indicator, { className: s.indicator }) })] }));
+}

package/dist/prose/Prose.d.ts

@@ -0,0 +1,10 @@
+import type { ProseOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { ProseSize } from '@tuuject/koi-core';
+export interface ProseProps extends ProseOwnProps, Omit<ComponentPropsWithRef<'div'>, keyof ProseOwnProps> {
+}
+/**
+ * Styles rendered rich text (markdown output, CMS HTML) in Koi's long-form type. Everything inside is sized in em,
+ * so `size` (or the consumer's own font size) scales the whole block. Wrap embedded components in `koi-not-prose`.
+ */
+export declare function Prose({ size, className, ...rest }: ProseProps): import("react").JSX.Element;

package/dist/prose/Prose.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { prose } from '@tuuject/koi-react/styled-system/recipes';
+/**
+ * Styles rendered rich text (markdown output, CMS HTML) in Koi's long-form type. Everything inside is sized in em,
+ * so `size` (or the consumer's own font size) scales the whole block. Wrap embedded components in `koi-not-prose`.
+ */
+export function Prose({ size = 'md', className, ...rest }) {
+    return _jsx("div", { ...rest, className: cx(prose({ size }), className) });
+}

package/dist/radio-group/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import type { RadioGroupOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef } from 'react';
+export type { RadioOption } from '@tuuject/koi-core';
+export interface RadioGroupProps extends RadioGroupOwnProps<Event>, Omit<ComponentPropsWithRef<'div'>, keyof RadioGroupOwnProps | 'defaultValue' | 'children' | 'aria-label'> {
+    /** Submitted with the form as `name=value`. */
+    name?: string;
+    /** A choice must be made before the form submits. Taken from the Field when omitted. */
+    required?: boolean;
+}
+/**
+ * 2–5 mutually exclusive options, all visible. Arrow keys move the choice; Tab enters and leaves the group.
+ * Each radio is Base UI's `<span role="radio">` plus a hidden `<input type="radio">`; the whole row is the click
+ * target. Inside a Field it's named by the Field's label and picks up its error, help, `required` and `id`.
+ */
+export declare function RadioGroup({ options, value, defaultValue, onChange, label, name, orientation, disabled, required, id, className, ...rest }: RadioGroupProps): import("react").JSX.Element;

package/dist/radio-group/RadioGroup.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as BaseField } from '@base-ui/react/field';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { radioGroup } from '@tuuject/koi-react/styled-system/recipes';
+import { useContext, useId } from 'react';
+import { KoiFieldContext } from '../field/context.js';
+/**
+ * 2–5 mutually exclusive options, all visible. Arrow keys move the choice; Tab enters and leaves the group.
+ * Each radio is Base UI's `<span role="radio">` plus a hidden `<input type="radio">`; the whole row is the click
+ * target. Inside a Field it's named by the Field's label and picks up its error, help, `required` and `id`.
+ */
+export function RadioGroup({ options, value, defaultValue, onChange, label, name, orientation = 'vertical', disabled, required, id, className, ...rest }) {
+    const f = useContext(KoiFieldContext);
+    const s = radioGroup({ orientation });
+    const uid = useId();
+    // Inside a Field each row needs its own Field.Item: otherwise every radio takes the Field's label as its name
+    // and the Field's control id as its input id.
+    const Row = f ? BaseField.Item : 'label';
+    return (_jsx(BaseRadioGroup, { ...rest, id: id ?? f?.id, "aria-label": label, value: value, defaultValue: defaultValue, onValueChange: onChange, name: name, disabled: disabled, required: required ?? f?.required, className: cx(s.root, className), children: options.map((o, i) => {
+            const labelId = `${uid}-${i}-label`;
+            const descId = o.description ? `${uid}-${i}-desc` : undefined;
+            return (_jsxs(Row, { className: s.item, ...(f ? { render: _jsx("label", {}) } : null), children: [_jsx(Radio.Root, { value: o.value, disabled: o.disabled, "aria-labelledby": labelId, "aria-describedby": descId, className: s.control, children: _jsx(Radio.Indicator, { keepMounted: true, className: s.indicator }) }), _jsxs("span", { className: s.text, children: [_jsx("span", { id: labelId, className: s.label, children: o.label }), descId ? (_jsx("span", { id: descId, className: s.description, children: o.description })) : null] })] }, o.value));
+        }) }));
+}

package/dist/select/Select.d.ts

@@ -0,0 +1,11 @@
+import type { SelectOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef } from 'react';
+export type { SelectOption } from '@tuuject/koi-core';
+export interface SelectProps extends SelectOwnProps, Omit<ComponentPropsWithRef<'select'>, keyof SelectOwnProps> {
+}
+/**
+ * A native dropdown styled like Input. It opens the platform picker (the system sheet on phones) and is fully
+ * keyboard accessible. For grouped, searchable or custom-drawn options, use SelectPanel.
+ * Base UI has no native select part, so this is Field.Control rendering a <select>.
+ */
+export declare function Select({ options, placeholder, size, invalid, className, id, required, disabled, children, ...rest }: SelectProps): import("react").JSX.Element;

package/dist/select/Select.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as BaseField } from '@base-ui/react/field';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { select } from '@tuuject/koi-react/styled-system/recipes';
+import { useContext } from 'react';
+import { KoiFieldContext } from '../field/context.js';
+import { ChevronDownIcon } from '../icons.js';
+/**
+ * A native dropdown styled like Input. It opens the platform picker (the system sheet on phones) and is fully
+ * keyboard accessible. For grouped, searchable or custom-drawn options, use SelectPanel.
+ * Base UI has no native select part, so this is Field.Control rendering a <select>.
+ */
+export function Select({ options, placeholder, size = 'md', invalid, className, id, required, disabled, children, ...rest }) {
+    const f = useContext(KoiFieldContext);
+    const s = select({ size });
+    // Uncontrolled with a placeholder: start on it, as legacy did.
+    const defaultValue = placeholder && rest.value === undefined && rest.defaultValue === undefined ? '' : rest.defaultValue;
+    const content = (_jsxs(_Fragment, { children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, children ??
+                options?.map((o) => (_jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value)))] }));
+    return (_jsxs("span", { className: cx(s.root, className), children: [_jsx(BaseField.Control, { ...rest, defaultValue: defaultValue, render: (props) => _jsx("select", { ...props, children: content }), id: id ?? f?.id, required: required ?? f?.required, disabled: disabled, "aria-invalid": invalid && !disabled ? true : rest['aria-invalid'], className: s.el }), _jsx("span", { className: s.chevron, "aria-hidden": "true", children: _jsx(ChevronDownIcon, {}) })] }));
+}

package/dist/select/SelectPanel.d.ts

@@ -0,0 +1,24 @@
+import { type SelectEntry as Entry, type SelectGroupOwnProps, type SelectItemOwnProps, type SelectPanelOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef, type HTMLAttributes } from 'react';
+export type { SelectOptionGroup } from '@tuuject/koi-core';
+export interface SelectPanelProps<I extends Entry = Entry> extends SelectPanelOwnProps<I, Event>, Omit<ComponentPropsWithRef<'button'>, keyof SelectPanelOwnProps | 'required' | 'name' | 'type'> {
+    /** Submitted with the form. */
+    name?: string;
+    required?: boolean;
+}
+/**
+ * A dropdown whose panel you draw: grouped options, rich rows, a search box. Base UI provides the behavior: a
+ * listbox (Base UI Select), or with `searchable` a combobox with its input inside the panel (Base UI Combobox).
+ * Both open below the trigger, flip near the viewport edge and are fully keyboard accessible.
+ */
+export declare function SelectPanel<I extends Entry = Entry>({ items, value, defaultValue, onChange, placeholder, size, invalid, name, readOnly, required, disabled, searchable, searchPlaceholder, emptyText, renderValue, children, open, defaultOpen, onOpenChange, id, className, ...rest }: SelectPanelProps<I>): import("react").JSX.Element;
+export interface SelectItemProps extends SelectItemOwnProps, Omit<HTMLAttributes<HTMLDivElement>, keyof SelectItemOwnProps> {
+}
+/** One choosable row in a SelectPanel. A check mark shows on the chosen one. */
+export declare function SelectItem({ value, label, disabled, className, children, ...rest }: SelectItemProps): import("react").JSX.Element;
+export interface SelectGroupProps extends SelectGroupOwnProps, Omit<HTMLAttributes<HTMLDivElement>, keyof SelectGroupOwnProps> {
+}
+/** A titled group of SelectItems. */
+export declare function SelectGroup({ label, className, children, ...rest }: SelectGroupProps): import("react").JSX.Element;
+/** A line between items or groups. */
+export declare function SelectSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/select/SelectPanel.js

@@ -0,0 +1,105 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from '@base-ui/react/combobox';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { strings, } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { selectPanel } from '@tuuject/koi-react/styled-system/recipes';
+import { components } from '@tuuject/koi-tokens/dimensions';
+import { createContext, useContext, useMemo, } from 'react';
+import { KoiFieldContext } from '../field/context.js';
+import { CheckIcon, ChevronDownIcon, SearchIcon } from '../icons.js';
+const isGroup = (e) => Array.isArray(e.items);
+// SelectItem and friends render Base UI Select or Combobox parts, whichever the panel they're in uses.
+const PARTS = {
+    select: {
+        Item: BaseSelect.Item,
+        ItemIndicator: BaseSelect.ItemIndicator,
+        Group: BaseSelect.Group,
+        GroupLabel: BaseSelect.GroupLabel,
+        Separator: BaseSelect.Separator,
+    },
+    combobox: {
+        Item: Combobox.Item,
+        ItemIndicator: Combobox.ItemIndicator,
+        Group: Combobox.Group,
+        GroupLabel: Combobox.GroupLabel,
+        Separator: Combobox.Separator,
+    },
+};
+const ModeContext = createContext(null);
+function useParts(part) {
+    const mode = useContext(ModeContext);
+    if (!mode) {
+        throw new Error(`${part} must be rendered inside a SelectPanel.`);
+    }
+    // The two sets take the same props for everything used here; Select.Item's `label` is passed only to Select.
+    return { mode, P: PARTS[mode] };
+}
+function defaultRender(entries) {
+    const option = (o) => (_jsx(SelectItem, { value: o.value, label: o.label, disabled: o.disabled, children: o.label }, o.value));
+    return entries.map((e) => isGroup(e) ? (_jsx(SelectGroup, { label: e.label, children: e.items.map(option) }, e.label)) : (option(e)));
+}
+/**
+ * A dropdown whose panel you draw: grouped options, rich rows, a search box. Base UI provides the behavior: a
+ * listbox (Base UI Select), or with `searchable` a combobox with its input inside the panel (Base UI Combobox).
+ * Both open below the trigger, flip near the viewport edge and are fully keyboard accessible.
+ */
+export function SelectPanel({ items, value, defaultValue, onChange, placeholder = strings.selectPlaceholder, size = 'md', invalid, name, readOnly, required, disabled, searchable, searchPlaceholder = strings.search, emptyText = strings.noMatches, renderValue, children, open, defaultOpen, onOpenChange, id, className, ...rest }) {
+    const f = useContext(KoiFieldContext);
+    const s = selectPanel({ size });
+    const flat = useMemo(() => items.flatMap((e) => (isGroup(e) ? e.items : [e])), [items]);
+    const render = children ?? defaultRender;
+    const showValue = (v) => {
+        const item = v == null ? undefined : flat.find((o) => o.value === v);
+        return item ? (renderValue ? renderValue(item) : item.label) : placeholder;
+    };
+    const root = {
+        value,
+        defaultValue,
+        open,
+        defaultOpen,
+        name,
+        readOnly,
+        disabled,
+        required: required ?? f?.required,
+        id: id ?? f?.id,
+        onValueChange: onChange,
+        onOpenChange,
+    };
+    const trigger = (P) => (_jsxs(P.Trigger, { ...rest, "aria-invalid": invalid && !disabled ? true : rest['aria-invalid'], className: cx(s.trigger, className), children: [_jsx("span", { className: s.value, children: _jsx(P.Value, { children: showValue }) }), _jsx(P.Icon, { className: s.icon, children: _jsx(ChevronDownIcon, {}) })] }));
+    // Base UI's Combobox filters on the labels; values stay the option's `value` strings.
+    const collection = useMemo(
+    // Typed as flat; createItems reads groups at runtime.
+    () => Combobox.createItems(items, {
+        getValue: (o) => o.value,
+        getLabel: (o) => o.label,
+    }), [items]);
+    if (searchable) {
+        return (_jsxs(Combobox.Root, { ...root, items: collection, children: [trigger(Combobox), _jsx(Combobox.Portal, { children: _jsx(Combobox.Positioner, { align: "start", sideOffset: components.popup.offset, className: s.positioner, children: _jsxs(Combobox.Popup, { className: s.popup, children: [_jsxs("div", { className: s.search, children: [_jsx(SearchIcon, {}), _jsx(Combobox.Input, { placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: s.searchInput })] }), _jsx(Combobox.Empty, { className: s.empty, children: emptyText }), _jsx(Combobox.List, { className: s.list, children: _jsx(ModeContext.Provider, { value: "combobox", children: _jsx(Filtered, { render: render }) }) })] }) }) })] }));
+    }
+    return (_jsxs(BaseSelect.Root, { ...root, items: flat, children: [trigger(BaseSelect), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { alignItemWithTrigger: false, align: "start", sideOffset: components.popup.offset, className: s.positioner, children: _jsx(BaseSelect.Popup, { className: s.popup, children: _jsx(BaseSelect.List, { className: s.list, children: _jsx(ModeContext.Provider, { value: "select", children: render([...items]) }) }) }) }) })] }));
+}
+function Filtered({ render }) {
+    const filtered = Combobox.useFilteredItems();
+    return _jsx(_Fragment, { children: render(filtered.filter((e) => !isGroup(e) || e.items.length > 0)) });
+}
+/** One choosable row in a SelectPanel. A check mark shows on the chosen one. */
+export function SelectItem({ value, label, disabled, className, children, ...rest }) {
+    const { mode, P } = useParts('SelectItem');
+    const s = selectPanel();
+    return (_jsxs(P.Item, { ...rest, value: value, disabled: disabled, 
+        // A plain prop, not a conditional spread: Panda tries to evaluate useParts() for a spread and warns.
+        label: mode === 'select' ? label : undefined, className: cx(s.item, className), children: [_jsx("span", { className: s.itemText, children: children }), _jsx(P.ItemIndicator, { className: s.itemIndicator, children: _jsx(CheckIcon, {}) })] }));
+}
+/** A titled group of SelectItems. */
+export function SelectGroup({ label, className, children, ...rest }) {
+    const { P } = useParts('SelectGroup');
+    const s = selectPanel();
+    return (_jsxs(P.Group, { ...rest, className: cx(s.group, className), children: [_jsx(P.GroupLabel, { className: s.groupLabel, children: label }), children] }));
+}
+/** A line between items or groups. */
+export function SelectSeparator({ className, ...rest }) {
+    const { P } = useParts('SelectSeparator');
+    const s = selectPanel();
+    return _jsx(P.Separator, { ...rest, className: cx(s.separator, className) });
+}

package/dist/shape.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonShape } from '@tuuject/koi-core';
+import { type ReactNode } from 'react';
+export type { ButtonShape };
+/**
+ * The default button shape for a surface. Buttons are rounded (8px) unless a container says
+ * otherwise; wrap a page in `shape="pill"` for the blog's pill voice. Dialog's footer and table
+ * cells still provide "rounded" themselves, so they stay rounded inside a pill page: the dialog's
+ * 32px radius = 8px button radius + 24px padding (concentric corners), and row actions need the
+ * dense shape. An explicit `shape` prop on a Button always wins.
+ */
+export declare const ShapeContext: import("react").Context<ButtonShape | null>;
+export declare function ShapeProvider({ shape, children }: {
+    shape: ButtonShape;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useButtonShape(explicit?: ButtonShape): ButtonShape;

package/dist/shape.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * The default button shape for a surface. Buttons are rounded (8px) unless a container says
+ * otherwise; wrap a page in `shape="pill"` for the blog's pill voice. Dialog's footer and table
+ * cells still provide "rounded" themselves, so they stay rounded inside a pill page: the dialog's
+ * 32px radius = 8px button radius + 24px padding (concentric corners), and row actions need the
+ * dense shape. An explicit `shape` prop on a Button always wins.
+ */
+export const ShapeContext = createContext(null);
+export function ShapeProvider({ shape, children }) {
+    return _jsx(ShapeContext.Provider, { value: shape, children: children });
+}
+export function useButtonShape(explicit) {
+    const fromContext = useContext(ShapeContext);
+    return explicit ?? fromContext ?? 'rounded';
+}

package/dist/skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import type { SkeletonOwnProps } from '@tuuject/koi-core';
+import type { HTMLAttributes, JSX } from 'react';
+export interface SkeletonProps extends SkeletonOwnProps, Omit<HTMLAttributes<HTMLElement>, keyof SkeletonOwnProps> {
+    /** Element to render. Default 'div'; use 'span' inside text. */
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Only the fill and shimmer. Set width, height, border-radius and layout with your own className or style. Always aria-hidden. */
+export declare function Skeleton({ as: Tag, className, ...rest }: SkeletonProps): JSX.Element;

package/dist/skeleton/Skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { skeleton } from '@tuuject/koi-react/styled-system/recipes';
+/** Only the fill and shimmer. Set width, height, border-radius and layout with your own className or style. Always aria-hidden. */
+export function Skeleton({ as: Tag = 'div', className, ...rest }) {
+    const El = Tag;
+    return _jsx(El, { "aria-hidden": "true", ...rest, className: cx(skeleton(), className) });
+}

package/dist/spinner/Spinner.d.ts

@@ -0,0 +1,7 @@
+import { type SpinnerOwnProps } from '@tuuject/koi-core';
+export type { SpinnerSize } from '@tuuject/koi-core';
+export interface SpinnerProps extends SpinnerOwnProps {
+    className?: string;
+}
+/** A 25%-opacity ring with an arc that turns every 800ms. Takes the surrounding text color. */
+export declare function Spinner({ size, label, className }: SpinnerProps): import("react").JSX.Element;

package/dist/spinner/Spinner.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { spinner } from '@tuuject/koi-react/styled-system/recipes';
+import { components } from '@tuuject/koi-tokens/dimensions';
+const { spinner: dim } = components;
+const PX = { sm: dim.sizeSm, md: dim.sizeMd, lg: dim.sizeLg };
+/** A 25%-opacity ring with an arc that turns every 800ms. Takes the surrounding text color. */
+export function Spinner({ size = 'md', label = strings.loading, className }) {
+    const s = spinner();
+    const px = PX[size] ?? PX.md;
+    return (_jsx("span", { role: "status", "aria-label": label, className: cx(s.root, className), children: _jsxs("svg", { className: s.svg, width: px, height: px, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: 0.25, strokeWidth: dim.stroke }), _jsx("path", { d: "M21 12a9 9 0 00-9-9", stroke: "currentColor", strokeWidth: dim.stroke, strokeLinecap: "round" })] }) }));
+}

package/dist/switch/Switch.d.ts

@@ -0,0 +1,22 @@
+import type { SwitchOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef, type Ref } from 'react';
+export interface SwitchProps extends SwitchOwnProps<Event>, Omit<ComponentPropsWithRef<'button'>, keyof SwitchOwnProps | 'required' | 'name' | 'value' | 'form' | 'type' | 'children' | 'onChange' | 'defaultValue'> {
+    required?: boolean;
+    /** The hidden input's name, for form submission. */
+    name?: string;
+    /** Submitted when on. */
+    value?: string;
+    /** Submitted when off (by default nothing is). */
+    uncheckedValue?: string;
+    /** The id of the form the hidden input belongs to. */
+    form?: string;
+    /** Reaches the hidden `<input>`. */
+    inputRef?: Ref<HTMLInputElement>;
+}
+/**
+ * A 36 × 20px pill toggle for a setting that applies at once; the whole row is the click target.
+ * Renders a `<button role="switch">` (which gets `id`, `ref` and the other button attributes) plus a hidden
+ * `<input>` outside the row that carries `name`, `value`, `required` and `form` (`inputRef` reaches it).
+ * Inside a Field it picks up the error and help (aria-describedby), `required`, `disabled` and `id`.
+ */
+export declare function Switch({ label, className, style, id, required, onCheckedChange, 'aria-labelledby': labelledBy, ...rest }: SwitchProps): import("react").JSX.Element;

package/dist/switch/Switch.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { switchRecipe } from '@tuuject/koi-react/styled-system/recipes';
+import { useContext, useId } from 'react';
+import { KoiFieldContext } from '../field/context.js';
+/**
+ * A 36 × 20px pill toggle for a setting that applies at once; the whole row is the click target.
+ * Renders a `<button role="switch">` (which gets `id`, `ref` and the other button attributes) plus a hidden
+ * `<input>` outside the row that carries `name`, `value`, `required` and `form` (`inputRef` reaches it).
+ * Inside a Field it picks up the error and help (aria-describedby), `required`, `disabled` and `id`.
+ */
+export function Switch({ label, className, style, id, required, onCheckedChange, 'aria-labelledby': labelledBy, ...rest }) {
+    const f = useContext(KoiFieldContext);
+    const s = switchRecipe();
+    const uid = useId();
+    const hasLabel = label != null;
+    const labelId = hasLabel ? `${uid}-label` : undefined;
+    return (_jsx(BaseSwitch.Root, { ...rest, nativeButton: true, id: id ?? f?.id, required: required ?? f?.required, "aria-labelledby": labelledBy ?? labelId, onCheckedChange: onCheckedChange, className: hasLabel ? s.control : cx(s.control, className), style: hasLabel ? undefined : style, 
+        // The row <label> goes inside the render so Base UI's hidden input lands beside it, not in it
+        // (a label may hold only one labelable element). Without a label there's no row.
+        render: (props) => hasLabel ? (_jsxs("label", { className: cx(s.root, className), style: style, children: [_jsx("button", { ...props, type: "button" }), _jsx("span", { id: labelId, className: s.label, children: label })] })) : (_jsx("button", { ...props, type: "button" })), children: _jsx(BaseSwitch.Thumb, { className: s.thumb }) }));
+}

package/dist/table/DataTable.d.ts

@@ -0,0 +1,12 @@
+import type { DataTableOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { DataTableColumn } from '@tuuject/koi-core';
+export interface DataTableProps<T> extends DataTableOwnProps<T>, Omit<ComponentPropsWithRef<'table'>, keyof DataTableOwnProps<T> | 'children'> {
+    /** Class for the scrolling container around the table. */
+    containerClassName?: string;
+}
+/**
+ * A ready-made table from `columns` and `rows`, with skeleton loading and an empty state. Built from the Table
+ * parts; for sorting, selection or a table library such as TanStack Table, compose those parts directly.
+ */
+export declare function DataTable<T>({ columns, rows, getRowKey, loading, skeletonRows, empty, caption, ...rest }: DataTableProps<T>): import("react").JSX.Element;

package/dist/table/DataTable.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { table } from '@tuuject/koi-react/styled-system/recipes';
+import { Skeleton } from '../skeleton/Skeleton.js';
+import { Table, TableBody, TableCaption, TableCell, TableEmpty, TableHeader, TableHeaderCell, TableRow, } from './Table.js';
+/**
+ * A ready-made table from `columns` and `rows`, with skeleton loading and an empty state. Built from the Table
+ * parts; for sorting, selection or a table library such as TanStack Table, compose those parts directly.
+ */
+export function DataTable({ columns, rows, getRowKey, loading, skeletonRows = 5, empty, caption, ...rest }) {
+    const s = table();
+    return (_jsxs(Table, { ...rest, "aria-busy": loading || undefined, children: [caption != null ? _jsx(TableCaption, { children: caption }) : null, columns.some((col) => col.width != null) ? (_jsx("colgroup", { children: columns.map((col) => (_jsx("col", { style: col.width != null ? { width: col.width } : undefined }, col.key))) })) : null, _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((col) => (_jsx(TableHeaderCell, { align: col.align, children: col.header }, col.key))) }) }), _jsx(TableBody, { children: loading ? (Array.from({ length: skeletonRows }, (_, i) => (_jsx(TableRow, { children: columns.map((col) => (_jsx(TableCell, { align: col.align, children: _jsx(Skeleton, { as: "span", className: s.skeleton, children: col.skeleton ?? '──────' }) }, col.key))) }, i)))) : rows.length === 0 ? (_jsx(TableEmpty, { colSpan: columns.length, children: empty })) : (rows.map((row, i) => (_jsx(TableRow, { children: columns.map((col) => (_jsx(TableCell, { align: col.align, children: col.cell(row, i) }, col.key))) }, getRowKey(row, i))))) })] }));
+}

package/dist/table/Table.d.ts

@@ -0,0 +1,38 @@
+import { type TableBodyOwnProps, type TableCaptionOwnProps, type TableCellOwnProps, type TableEmptyOwnProps, type TableFooterOwnProps, type TableHeaderCellOwnProps, type TableHeaderOwnProps, type TableOwnProps, type TableRowOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef, MouseEvent } from 'react';
+export type { TableAlign, TableLayout, TableSortDirection } from '@tuuject/koi-core';
+export interface TableProps extends TableOwnProps, Omit<ComponentPropsWithRef<'table'>, keyof TableOwnProps> {
+    /** Class for the scrolling container around the table. */
+    containerClassName?: string;
+}
+/** A data table inside a container that scrolls sideways when the table is wider than it. */
+export declare function Table({ layout, containerClassName, className, ...rest }: TableProps): import("react").JSX.Element;
+export interface TableHeaderProps extends TableHeaderOwnProps, Omit<ComponentPropsWithRef<'thead'>, keyof TableHeaderOwnProps> {
+}
+export declare function TableHeader({ className, ...rest }: TableHeaderProps): import("react").JSX.Element;
+export interface TableBodyProps extends TableBodyOwnProps, Omit<ComponentPropsWithRef<'tbody'>, keyof TableBodyOwnProps> {
+}
+export declare function TableBody({ className, ...rest }: TableBodyProps): import("react").JSX.Element;
+export interface TableFooterProps extends TableFooterOwnProps, Omit<ComponentPropsWithRef<'tfoot'>, keyof TableFooterOwnProps> {
+}
+export declare function TableFooter({ className, ...rest }: TableFooterProps): import("react").JSX.Element;
+export interface TableRowProps extends TableRowOwnProps, Omit<ComponentPropsWithRef<'tr'>, keyof TableRowOwnProps> {
+}
+/** A row. Body rows are at least 48px tall and highlight on hover. */
+export declare function TableRow({ selected, className, ...rest }: TableRowProps): import("react").JSX.Element;
+export interface TableHeaderCellProps extends TableHeaderCellOwnProps<MouseEvent<HTMLButtonElement>>, Omit<ComponentPropsWithRef<'th'>, keyof TableHeaderCellOwnProps | 'align'> {
+}
+/** A column header (`<th scope="col">`). With `onSort` its label becomes a sort button. */
+export declare function TableHeaderCell({ align, paddingBlock, sort, onSort, className, children, ...rest }: TableHeaderCellProps): import("react").JSX.Element;
+export interface TableCellProps extends TableCellOwnProps, Omit<ComponentPropsWithRef<'td'>, keyof TableCellOwnProps | 'align'> {
+}
+/** A body or footer cell. Buttons inside default to shape="rounded", the dense shape, as in Dialog footers. */
+export declare function TableCell({ align, paddingBlock, className, children, ...rest }: TableCellProps): import("react").JSX.Element;
+export interface TableEmptyProps extends TableEmptyOwnProps, Omit<ComponentPropsWithRef<'td'>, keyof TableEmptyOwnProps> {
+}
+/** A full-width "no data" row for an empty TableBody. */
+export declare function TableEmpty({ colSpan, className, children, ...rest }: TableEmptyProps): import("react").JSX.Element;
+export interface TableCaptionProps extends TableCaptionOwnProps, Omit<ComponentPropsWithRef<'caption'>, keyof TableCaptionOwnProps> {
+}
+/** The table's accessible name, for screen readers only. Put it first inside Table. */
+export declare function TableCaption({ className, ...rest }: TableCaptionProps): import("react").JSX.Element;

package/dist/table/Table.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { strings, } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { table } from '@tuuject/koi-react/styled-system/recipes';
+import { SortDownIcon, SortIcon, SortUpIcon } from '../icons.js';
+import { ShapeProvider } from '../shape.js';
+/** A data table inside a container that scrolls sideways when the table is wider than it. */
+export function Table({ layout, containerClassName, className, ...rest }) {
+    const s = table({ layout });
+    return (_jsx("div", { className: cx(s.container, containerClassName), children: _jsx("table", { ...rest, className: cx(s.root, className) }) }));
+}
+export function TableHeader({ className, ...rest }) {
+    return _jsx("thead", { ...rest, className: cx(table().header, className) });
+}
+export function TableBody({ className, ...rest }) {
+    return _jsx("tbody", { ...rest, className: cx(table().body, className) });
+}
+export function TableFooter({ className, ...rest }) {
+    return _jsx("tfoot", { ...rest, className: cx(table().footer, className) });
+}
+/** A row. Body rows are at least 48px tall and highlight on hover. */
+export function TableRow({ selected, className, ...rest }) {
+    // A Koi attribute rather than aria-selected, which is only valid on rows of a grid, not of a plain table.
+    return _jsx("tr", { "data-koi-selected": selected ? '' : undefined, ...rest, className: cx(table().row, className) });
+}
+const ARIA_SORT = { asc: 'ascending', desc: 'descending' };
+/** A column header (`<th scope="col">`). With `onSort` its label becomes a sort button. */
+export function TableHeaderCell({ align, paddingBlock, sort = false, onSort, className, children, ...rest }) {
+    const s = table({ align, paddingBlock });
+    const sortable = onSort != null;
+    const Indicator = sort === 'asc' ? SortUpIcon : sort === 'desc' ? SortDownIcon : SortIcon;
+    return (_jsx("th", { scope: "col", "aria-sort": sortable && sort ? ARIA_SORT[sort] : undefined, ...rest, className: cx(s.headerCell, className), children: sortable ? (_jsxs("button", { type: "button", className: s.sortButton, onClick: onSort, children: [children, _jsx(Indicator, {})] })) : (children) }));
+}
+/** A body or footer cell. Buttons inside default to shape="rounded", the dense shape, as in Dialog footers. */
+export function TableCell({ align, paddingBlock, className, children, ...rest }) {
+    return (_jsx("td", { ...rest, className: cx(table({ align, paddingBlock }).cell, className), children: _jsx(ShapeProvider, { shape: "rounded", children: children }) }));
+}
+/** A full-width "no data" row for an empty TableBody. */
+export function TableEmpty({ colSpan, className, children, ...rest }) {
+    return (_jsx("tr", { children: _jsx("td", { ...rest, colSpan: colSpan, className: cx(table().empty, className), children: _jsx(ShapeProvider, { shape: "rounded", children: children ?? strings.noData }) }) }));
+}
+/** The table's accessible name, for screen readers only. Put it first inside Table. */
+export function TableCaption({ className, ...rest }) {
+    return _jsx("caption", { ...rest, className: cx(table().caption, className) });
+}

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,11 @@
+import type { TabsOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { TabItem } from '@tuuject/koi-core';
+export interface TabsProps extends TabsOwnProps<Event>, Omit<ComponentPropsWithRef<'div'>, keyof TabsOwnProps | 'defaultValue' | 'children' | 'aria-label'> {
+}
+/**
+ * A segmented pill track for 2–6 peer views. The active tab is a white pill (Base UI's Tabs.Indicator) that
+ * springs to the newly chosen tab. ←/→ move and choose (skipping disabled tabs, wrapping), Home/End jump.
+ * Only the active item's `content` is mounted, in a focusable tabpanel.
+ */
+export declare function Tabs({ items, value, defaultValue, onChange, label, fullWidth, className, ...rest }: TabsProps): import("react").JSX.Element;

package/dist/tabs/Tabs.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { tabs } from '@tuuject/koi-react/styled-system/recipes';
+/**
+ * A segmented pill track for 2–6 peer views. The active tab is a white pill (Base UI's Tabs.Indicator) that
+ * springs to the newly chosen tab. ←/→ move and choose (skipping disabled tabs, wrapping), Home/End jump.
+ * Only the active item's `content` is mounted, in a focusable tabpanel.
+ */
+export function Tabs({ items, value, defaultValue, onChange, label, fullWidth = false, className, ...rest }) {
+    const s = tabs({ fullWidth });
+    // Legacy picked the first item; pick the first enabled one so Base UI never has to fall back by itself.
+    const initial = defaultValue ?? (items.find((i) => !i.disabled) ?? items[0])?.value;
+    return (_jsxs(BaseTabs.Root, { ...rest, value: value, defaultValue: value === undefined ? initial : undefined, onValueChange: (v, details) => {
+            // Only user choices; Base UI's own fallbacks ('initial', 'disabled', 'missing') weren't events in legacy.
+            if (details.reason === 'none') {
+                onChange?.(v, details);
+            }
+        }, className: cx(s.root, className), children: [_jsxs(BaseTabs.List, { activateOnFocus: true, "aria-label": label, className: s.list, children: [items.map((i) => (_jsx(BaseTabs.Tab, { value: i.value, disabled: i.disabled, className: s.tab, children: i.label }, i.value))), _jsx(BaseTabs.Indicator, { className: s.indicator })] }), items.map((i) => i.content != null ? (_jsx(BaseTabs.Panel, { value: i.value, className: s.panel, children: i.content }, i.value)) : null)] }));
+}

package/dist/tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import { type TagOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef, type MouseEvent } from 'react';
+export interface TagProps extends TagOwnProps<MouseEvent<HTMLButtonElement>>, Omit<ComponentPropsWithRef<'span'>, keyof TagOwnProps | 'children'> {
+}
+/** An outlined pill chip for keywords, filters and removable selections. For pure status, use Badge. */
+export declare function Tag({ children, icon, selected, onSelectedChange, onRemove, className, ...rest }: TagProps): import("react").JSX.Element;

package/dist/tag/Tag.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { tag } from '@tuuject/koi-react/styled-system/recipes';
+import { useId } from 'react';
+import { CloseIcon } from '../icons.js';
+/** An outlined pill chip for keywords, filters and removable selections. For pure status, use Badge. */
+export function Tag({ children, icon, selected = false, onSelectedChange, onRemove, className, ...rest }) {
+    const s = tag({ selected });
+    const id = useId();
+    const labelId = `${id}-label`;
+    const removeId = `${id}-remove`;
+    const content = (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { className: s.icon, "aria-hidden": "true", children: icon })) : null, _jsx("span", { className: s.label, id: onRemove ? labelId : undefined, children: children })] }));
+    return (_jsxs("span", { ...rest, className: cx(s.root, className), children: [onSelectedChange ? (_jsx("button", { type: "button", className: s.toggle, "aria-pressed": selected, onClick: (e) => onSelectedChange(!selected, e), children: content })) : (content), onRemove ? (_jsx("button", { type: "button", id: removeId, className: s.remove, "aria-label": strings.remove, "aria-labelledby": `${removeId} ${labelId}`, onClick: onRemove, children: _jsx(CloseIcon, {}) })) : null] }));
+}

package/dist/textarea/Textarea.d.ts

@@ -0,0 +1,9 @@
+import type { TextareaOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef } from 'react';
+export interface TextareaProps extends TextareaOwnProps, Omit<ComponentPropsWithRef<'textarea'>, keyof TextareaOwnProps> {
+}
+/**
+ * A multi-line text field that matches Input. Resizes vertically, at least 80px tall.
+ * Base UI has no textarea part, so this is Field.Control rendering a <textarea>.
+ */
+export declare function Textarea({ invalid, className, id, required, disabled, rows, ...rest }: TextareaProps): import("react").JSX.Element;

package/dist/textarea/Textarea.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field as BaseField } from '@base-ui/react/field';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { textarea } from '@tuuject/koi-react/styled-system/recipes';
+import { useContext } from 'react';
+import { KoiFieldContext } from '../field/context.js';
+/**
+ * A multi-line text field that matches Input. Resizes vertically, at least 80px tall.
+ * Base UI has no textarea part, so this is Field.Control rendering a <textarea>.
+ */
+export function Textarea({ invalid, className, id, required, disabled, rows = 4, ...rest }) {
+    const f = useContext(KoiFieldContext);
+    return (_jsx(BaseField.Control, { ...rest, render: _jsx("textarea", { rows: rows }), id: id ?? f?.id, required: required ?? f?.required, disabled: disabled, "aria-invalid": invalid && !disabled ? true : rest['aria-invalid'], className: cx(textarea(), className) }));
+}