@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/progress/Progress.d.ts

@@ -0,0 +1,56 @@
+/**
+ * A progress indicator, as a bar or a circle.
+ *
+ *   <Progress label="Course" value={64} showValue />
+ *   <Progress variant="circle" value={80} showValue />
+ *
+ * - `value`: from `min` to `max` (0 to 100); null means indeterminate, for
+ *   work of unknown length
+ * - `label`, `showValue`: a label and the formatted value (a percentage by
+ *   default; see `formatOptions`, `locale`)
+ * - `translations.value`: writes the value text, ({ value, max, percent }) => '3 of 4'
+ * - `variant`: 'linear' (default) or 'circle'; `size` and `thickness` set the
+ *   circle's diameter and stroke in px
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Progress.Root value={40}>
+ *     <Progress.Label>Upload</Progress.Label> <Progress.ValueText />
+ *     <Progress.Track><Progress.Range /></Progress.Track>
+ *   </Progress.Root>
+ */
+import type { ReactNode } from 'react';
+import { Progress as Ark } from '@ark-ui/react/progress';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './progress.css';
+export type ProgressProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'label'> & {
+    value?: number | null;
+    label?: ReactNode;
+    showValue?: boolean;
+    variant?: 'linear' | 'circle';
+    size?: number;
+    thickness?: number;
+    classes?: Classes<'root' | 'header' | 'label' | 'valueText' | 'track' | 'range' | 'circleWrap' | 'circle' | 'circleTrack' | 'circleRange'>;
+};
+declare function ProgressShortcut({ value, min, max, label, showValue, variant, size, thickness, locale: localeProp, className, classes, ...rest }: ProgressProps): import("react").JSX.Element;
+export declare const Progress: typeof ProgressShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Ark.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Track: import("react").ForwardRefExoticComponent<Ark.TrackProps & import("react").RefAttributes<HTMLDivElement>>;
+    Range: import("react").ForwardRefExoticComponent<Ark.RangeProps & import("react").RefAttributes<HTMLDivElement>>;
+    Circle: import("react").ForwardRefExoticComponent<Ark.CircleProps & import("react").RefAttributes<SVGSVGElement>>;
+    CircleTrack: import("react").ForwardRefExoticComponent<Ark.CircleTrackProps & import("react").RefAttributes<SVGCircleElement>>;
+    CircleRange: import("react").ForwardRefExoticComponent<Ark.CircleRangeProps & import("react").RefAttributes<SVGCircleElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+    Header: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    CircleWrap: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/progress/Progress.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as Ark } from '@ark-ui/react/progress';
+import { useLocale } from '../format/LocaleProvider.js';
+import { cx, partOf, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './progress.css';
+// The value as Zag writes it (formatOptions, translations.value); Ark's
+// ValueText would show the percentage whatever they say.
+const ValueText = (props) => _jsx(Ark.Context, { children: (api) => _jsx(Ark.ValueText, { ...props, children: api.valueAsString }) });
+function ProgressShortcut({ value = null, min = 0, max = 100, label = null, showValue = false, variant = 'linear', size = 48, thickness = 5, locale: localeProp, className, classes, ...rest }) {
+    const app = useLocale();
+    const locale = localeProp ?? app ?? 'en-GB';
+    const part = partsOf('progress', classes);
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, value: value, min: min, max: max, locale: locale, children: [(label || (showValue && variant === 'linear')) && (_jsxs("div", { ...part('header'), children: [label && _jsx(Ark.Label, { ...part('label'), children: label }), showValue && variant === 'linear' && _jsx(ValueText, { ...part('value-text') })] })), variant === 'circle' ? (_jsxs("div", { ...part('circle-wrap'), style: { '--size': `${size}px`, '--thickness': `${thickness}px` }, children: [_jsxs(Ark.Circle, { ...part('circle'), children: [_jsx(Ark.CircleTrack, { ...part('circle-track') }), _jsx(Ark.CircleRange, { ...part('circle-range') })] }), showValue && _jsx(ValueText, { ...part('value-text') })] })) : (_jsx(Ark.Track, { ...part('track'), children: _jsx(Ark.Range, { ...part('range') }) }))] }));
+}
+export const Progress = withParts(ProgressShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    ValueText: Ark.ValueText,
+    Track: Ark.Track,
+    Range: Ark.Range,
+    Circle: Ark.Circle,
+    CircleTrack: Ark.CircleTrack,
+    CircleRange: Ark.CircleRange,
+    Context: Ark.Context,
+    Header: partOf('progress', 'header'),
+    CircleWrap: partOf('progress', 'circle-wrap'),
+});

package/dist/progress/progress.css

@@ -0,0 +1,24 @@
+@layer ui {
+  [data-scope=progress][data-part=root] {
+    display: block; width: 100%; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    &[data-variant=circle] { display: inline-block; width: auto; }
+  }
+  [data-scope=progress][data-part=header] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.375rem; }
+  [data-scope=progress][data-part=label] { font-weight: 500; }
+  /* Zag calls both value texts value-text; their places tell them apart. */
+  [data-scope=progress][data-part=header] > [data-part=value-text] { margin-left: auto; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
+  [data-scope=progress][data-part=track] { position: relative; height: 0.5rem; overflow: hidden; background: var(--ui-hover); border-radius: 9999px; }
+  [data-scope=progress][data-part=range] { height: 100%; width: var(--percent, 0); background: var(--ui-accent); border-radius: 9999px; transition: width 300ms ease;
+    [data-state=indeterminate] & { width: 40%; animation: ui-progress-slide 1.2s ease-in-out infinite; } }
+  [data-scope=progress][data-part=circle-wrap] { position: relative; display: inline-grid; place-items: center; }
+  /* Zag rotates the range to start at the top and sets its dash offset inline. */
+  [data-scope=progress][data-part=circle] { display: block;
+    [data-state=indeterminate] & { animation: ui-spin 1s linear infinite; } }
+  [data-scope=progress][data-part=circle-track] { stroke: var(--ui-hover); fill: none; }
+  [data-scope=progress][data-part=circle-range] { stroke: var(--ui-accent); fill: none; stroke-linecap: round;
+    stroke-dasharray: var(--circumference); stroke-dashoffset: var(--offset); transition: stroke-dashoffset 300ms ease;
+    /* Indeterminate: a 30% dash with a full gap leaves an arc to spin. */
+    [data-state=indeterminate] & { stroke-dasharray: calc(var(--circumference) * 0.3) var(--circumference); } }
+  [data-scope=progress][data-part=circle-wrap] > [data-part=value-text] { position: absolute; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
+  @keyframes ui-progress-slide { from { translate: -100%; } to { translate: 250%; } }
+}

package/dist/prose/Prose.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Styles rich text: headings, lists, quotes, links, code, images and tables,
+ * e.g. the HTML an Editor saved, shown on a page.
+ *
+ *   <Prose html={lesson.notes} />
+ *   <Prose size="sm"><h2>Homework</h2><p>Worksheet 4…</p></Prose>
+ *
+ * Its look matches the Editor's, so what was written reads the same.
+ *
+ * - `html`: an HTML string to show (only from a source you trust, such as
+ *   your own Editor's output saved by your app); or give it children
+ * - `size`: 'sm' (13px), 'md' (14px, default) or 'lg' (16px)
+ */
+import type { HTMLAttributes } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './prose.css';
+export type ProseProps = HTMLAttributes<HTMLDivElement> & {
+    html?: string | null;
+    size?: 'sm' | 'md' | 'lg';
+    classes?: Classes<'root'>;
+};
+export declare function Prose({ html, size, className, classes, children, ...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, partsOf } from '../utils.js';
+import '../theme.css';
+import './prose.css';
+export function Prose({ html = null, size = 'md', className, classes, children, ...rest }) {
+    const part = partsOf('prose', classes);
+    return html != null
+        ? _jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, dangerouslySetInnerHTML: { __html: html } })
+        : _jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, children: children });
+}

package/dist/prose/prose.css

@@ -0,0 +1,29 @@
+/* The Editor's content look, for showing what it saved. */
+@layer ui {
+  [data-scope=prose][data-part=root] { color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere;
+    &[data-size=sm] { font-size: 13px; }
+    &[data-size=lg] { font-size: 16px; }
+    & > :first-child { margin-top: 0; }
+    & > :last-child { margin-bottom: 0; }
+    & :is(p, ul, ol, blockquote, pre, table, figure) { margin: 0 0 0.75em; }
+    & h1 { margin: 1em 0 0.5em; font-size: 1.6em; font-weight: 700; line-height: 1.25; }
+    & h2 { margin: 1em 0 0.5em; font-size: 1.3em; font-weight: 600; line-height: 1.3; }
+    & h3 { margin: 0.9em 0 0.4em; font-size: 1.1em; font-weight: 600; line-height: 1.3; }
+    & h4 { margin: 0.9em 0 0.4em; font-size: 1em; font-weight: 600; }
+    & :is(ul, ol) { padding-left: 1.25em; }
+    & ul { list-style: disc; }
+    & ol { list-style: decimal; }
+    & li > p { margin: 0; }
+    & li + li { margin-top: 0.25em; }
+    & blockquote { padding-left: 0.75em; border-left: 3px solid var(--ui-border); color: var(--ui-muted); }
+    & code { padding: 0.125em 0.3em; border-radius: 4px; background: var(--ui-hover); font-family: ui-monospace, monospace; font-size: 0.9em; }
+    & pre { padding: 0.75em 1em; border-radius: var(--ui-radius); background: var(--ui-hover); overflow-x: auto; font-size: 0.9em;
+      & code { padding: 0; background: none; } }
+    & a { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 2px; }
+    & img { display: block; max-width: 100%; height: auto; margin: 0.75em 0; border-radius: var(--ui-radius); }
+    & hr { margin: 1.5em 0; border: none; border-top: 1px solid var(--ui-border); }
+    & strong { font-weight: 600; }
+    & table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
+    & :is(th, td) { padding: 0.4em 0.6em; border-bottom: 1px solid var(--ui-border); text-align: left; }
+    & th { font-weight: 600; } }
+}

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

@@ -0,0 +1,59 @@
+/**
+ * A group of radio buttons: pick one.
+ *
+ *   <RadioGroup label="Lesson length" items={['30 min', '45 min', '60 min']} value={length} onValueChange={setLength} />
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`; `description`)
+ * - `value`, `defaultValue`: the item's own value; `onValueChange`: called with it
+ * - `label`: a label above it (skipped inside a Field)
+ * - `orientation`: 'vertical' or 'horizontal'
+ * - `variant`: 'list' (default), or 'cards': each option a bordered card
+ *   (with its `description`, and an `icon` from the item), chosen one outlined
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <RadioGroup.Root defaultValue="45">
+ *     <RadioGroup.Label>Length</RadioGroup.Label>
+ *     {['30', '45'].map((value) => (
+ *       <RadioGroup.Item key={value} value={value}>
+ *         <RadioGroup.ItemControl /><RadioGroup.ItemText>{value} min</RadioGroup.ItemText><RadioGroup.ItemHiddenInput />
+ *       </RadioGroup.Item>
+ *     ))}
+ *   </RadioGroup.Root>
+ */
+import type { ReactNode } from 'react';
+import { RadioGroup as Ark, type RadioGroupValueChangeDetails } from '@ark-ui/react/radio-group';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './radio-group.css';
+type Value<T, K extends string> = T extends string | number ? T : K extends keyof T ? T[K] : unknown;
+export type RadioGroupProps<T, K extends string = 'value'> = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'label'> & {
+    items: readonly T[];
+    value?: NoInfer<Value<T, K>> | null;
+    defaultValue?: NoInfer<Value<T, K>> | null;
+    onValueChange?: (value: NoInfer<Value<T, K>> | null, details: RadioGroupValueChangeDetails) => void;
+    label?: ReactNode;
+    labelKey?: string;
+    valueKey?: K;
+    disabledKey?: string;
+    variant?: 'list' | 'cards';
+    classes?: Classes<'root' | 'label' | 'items' | 'item' | 'itemControl' | 'icon' | 'text' | 'itemText' | 'description'>;
+};
+declare function RadioGroupShortcut<T, K extends string = 'value'>({ items, value, defaultValue, onValueChange, label, orientation, variant, labelKey, valueKey, disabledKey, className, classes, ...rest }: RadioGroupProps<T, K>): import("react").JSX.Element;
+export declare const RadioGroup: typeof RadioGroupShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Item: import("react").ForwardRefExoticComponent<Ark.ItemProps & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemControl: import("react").ForwardRefExoticComponent<Ark.ItemControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Ark.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemHiddenInput: import("react").ForwardRefExoticComponent<Ark.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Ark.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: import("@ark-ui/react/radio-group").RadioGroupContextProps) => ReactNode;
+    Items: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/radio-group/RadioGroup.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup as Ark } from '@ark-ui/react/radio-group';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
+import '../theme.css';
+import './radio-group.css';
+function RadioGroupShortcut({ items, value, defaultValue, onValueChange, label = null, orientation = 'vertical', variant = 'list', labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', className, classes, ...rest }) {
+    const field = useFieldContext();
+    const part = partsOf('radio-group', classes);
+    const [current, setCurrent] = useControllable(value, defaultValue ?? null, undefined);
+    const key = (item, k) => item[k];
+    const isObject = (item) => typeof item === 'object' && item !== null;
+    const labelOf = (item) => String(isObject(item) ? key(item, labelKey) : item);
+    const valueOf = (item) => (isObject(item) ? key(item, valueKey) : item);
+    const descriptionOf = (item) => (isObject(item) ? key(item, 'description') : null);
+    const iconOf = (item) => (isObject(item) ? key(item, 'icon') : undefined);
+    // Zag's values are strings; map them back to the items' own.
+    function change(details) {
+        const item = items.find((item) => String(valueOf(item)) === details.value);
+        const next = item === undefined ? null : valueOf(item);
+        setCurrent(next);
+        onValueChange?.(next, details);
+    }
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), orientation: orientation, "data-variant": variant, value: current == null ? null : String(current), onValueChange: change, "aria-describedby": field?.ariaDescribedby, ...(field && { ids: { label: field.ids.label }, invalid: field.invalid, disabled: field.disabled }), children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsx("div", { ...part('items'), children: items.map((item) => (_jsxs(Ark.Item, { value: String(valueOf(item)), disabled: isObject(item) && !!key(item, disabledKey), ...part('item'), children: [_jsx(Ark.ItemControl, { ...part('item-control') }), iconOf(item) && _jsx("iconify-icon", { ...part('icon'), icon: iconOf(item), "aria-hidden": "true" }), _jsxs("span", { ...part('text'), children: [_jsx(Ark.ItemText, { ...part('item-text'), children: labelOf(item) }), descriptionOf(item) && _jsx("span", { ...part('description'), children: descriptionOf(item) })] }), _jsx(Ark.ItemHiddenInput, {})] }, String(valueOf(item))))) })] }));
+}
+export const RadioGroup = withParts(RadioGroupShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    Item: Ark.Item,
+    ItemControl: Ark.ItemControl,
+    ItemText: Ark.ItemText,
+    ItemHiddenInput: Ark.ItemHiddenInput,
+    Indicator: Ark.Indicator,
+    Context: Ark.Context,
+    Items: partOf('radio-group', 'items'),
+});

package/dist/radio-group/radio-group.css

@@ -0,0 +1,30 @@
+/* Ark's root (the radiogroup) holds the label and the items; built by hand,
+   the items can sit straight in it. */
+@layer ui {
+  [data-scope=radio-group][data-part=root] { display: block; color: var(--ui-text); font-family: var(--ui-font);
+    > [data-part=item] + [data-part=item] { margin-top: 0.5rem; } }
+  [data-scope=radio-group][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=radio-group][data-part=items] { display: flex; flex-direction: column; gap: 0.5rem;
+    [data-orientation=horizontal] > & { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; } }
+  [data-scope=radio-group][data-part=item] { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 14px; cursor: pointer;
+    &[data-disabled] { opacity: 0.5; cursor: not-allowed; } }
+  [data-scope=radio-group][data-part=item-control] { display: grid; place-items: center; flex-shrink: 0; width: 1rem; height: 1rem;
+    margin-top: 0.125rem; box-sizing: border-box; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 9999px;
+    &[data-state=checked] { border-color: var(--ui-accent); border-width: 5px; }
+    &[data-focus-visible] { outline: 2px solid var(--ui-ring-soft); border-color: var(--ui-ring); }
+    &[data-invalid] { border-color: var(--ui-danger); } }
+  [data-scope=radio-group][data-part=text] { display: flex; flex-direction: column; gap: 0.125rem; }
+  [data-scope=radio-group][data-part=description] { color: var(--ui-muted); font-size: 12px; }
+  /* Cards: each option a bordered card, the chosen one outlined in the accent. */
+  [data-scope=radio-group][data-part=icon] { flex-shrink: 0; margin-top: 0.0625rem; color: var(--ui-muted); font-size: 18px; }
+  [data-scope=radio-group][data-variant=cards] {
+    & > [data-part=items] { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; }
+    & [data-part=item] { gap: 0.625rem; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px);
+      background: var(--ui-surface); transition: border-color 120ms, background 120ms;
+      &:hover { border-color: var(--ui-muted); }
+      &[data-state=checked] { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-soft) 45%, var(--ui-surface));
+        box-shadow: 0 0 0 1px var(--ui-accent); }
+      &[data-focus-visible] { outline: 2px solid var(--ui-ring-soft); }
+      &[data-state=checked] [data-part=icon] { color: var(--ui-accent); } }
+    & [data-part=item-text] { font-weight: 500; } }
+}

package/dist/rolling-number/RollingNumber.d.ts

@@ -0,0 +1,27 @@
+/**
+ * A number whose digits roll to their new value when it changes, e.g. a live
+ * count on a dashboard. Formatted like FormatNumber; still while the system
+ * asks for reduced motion.
+ *
+ *   <RollingNumber value={appointments.length} />
+ *   <RollingNumber value={revenue} format={{ style: 'currency', currency: 'GBP', maximumFractionDigits: 0 }} />
+ *
+ * - `value`: the number
+ * - `format`: Intl.NumberFormat's options (grouping by default)
+ * - `duration`: how long a roll takes, in ms (600)
+ * - `locale`: the LocaleProvider's (or the browser's) by default
+ *
+ * Assistive tech reads the whole number, not the digits.
+ */
+import type { HTMLAttributes } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './rolling-number.css';
+export type RollingNumberProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    value: number;
+    format?: Intl.NumberFormatOptions;
+    duration?: number;
+    locale?: string;
+    classes?: Classes<'root' | 'digit' | 'strip' | 'char'>;
+};
+export declare function RollingNumber({ value, format, duration, locale, className, classes, style, ...rest }: RollingNumberProps): import("react").JSX.Element;

package/dist/rolling-number/RollingNumber.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatNumber } from '../format/format.js';
+import { useLocale } from '../format/LocaleProvider.js';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './rolling-number.css';
+const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+export function RollingNumber({ value, format = {}, duration = 600, locale, className, classes, style, ...rest }) {
+    const app = useLocale();
+    const part = partsOf('rolling-number', classes);
+    const text = formatNumber(value, { ...format, locale: locale ?? app });
+    // Keyed from the right, so the ones stay the ones as the number grows.
+    const chars = [...text].map((char, i, all) => ({ char, key: all.length - i }));
+    return (_jsx("span", { ...rest, ...part('root'), className: cx(className, classes?.root), role: "img", "aria-label": text, style: { ...style, '--duration': `${duration}ms` }, children: chars.map(({ char, key }) => /\d/.test(char)
+            // A column of 0–9, moved so the digit shows.
+            ? _jsxs("span", { ...part('digit'), "aria-hidden": "true", children: [_jsx("span", { ...part('strip'), style: { '--digit': Number(char) }, children: digits.map((d) => _jsx("span", { children: d }, d)) }), _jsx("span", { ...part('sizer'), children: "0" })] }, key)
+            : _jsx("span", { ...part('char'), "aria-hidden": "true", children: char }, key)) }));
+}

package/dist/rolling-number/rolling-number.css

@@ -0,0 +1,10 @@
+@layer ui {
+  [data-scope=rolling-number][data-part=root] { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  /* One digit: a window a line tall over a column of 0–9. */
+  [data-scope=rolling-number][data-part=digit] { position: relative; display: inline-block; height: 1lh; overflow: hidden; }
+  [data-scope=rolling-number][data-part=sizer] { visibility: hidden; }
+  [data-scope=rolling-number][data-part=strip] { position: absolute; left: 0; top: 0; display: flex; flex-direction: column;
+    translate: 0 calc(var(--digit) * -1lh); transition: translate var(--duration) cubic-bezier(0.2, 0.7, 0.2, 1);
+    & > span { height: 1lh; }
+    @media (prefers-reduced-motion: reduce) { transition: none; } }
+}

package/dist/segment-group/Segmented.d.ts

@@ -0,0 +1,68 @@
+/**
+ * A segmented control: a row of options, one picked, with a sliding indicator.
+ *
+ *   <Segmented items={['Day', 'Week', 'Month']} value={view} onValueChange={setView} />
+ *   <Segmented items={[{ value: 'grid', label: 'Grid', icon: 'lucide:grid-2x2' }]} iconOnly />
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`; `icon`, `tooltip`)
+ * - `value`, `defaultValue`: the item's own value; `onValueChange`: called with it
+ * - `label`: a label above it (skipped inside a Field)
+ * - `iconOnly`: just the icons (each keeps its label for assistive tech)
+ * - `tooltips`: each item's label (or its own `tooltip`) in a tooltip on
+ *   hover and keyboard focus; on by default with `iconOnly`
+ * - `size`: 'sm', 'md' or 'lg'
+ * - `renderItem`: an option's content, (item, { selected }) => node (a count
+ *   beside the label, say); the icon still comes first
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's SegmentGroup parts (and Group, the track):
+ *
+ *   <Segmented.Root defaultValue="week" orientation="horizontal">
+ *     <Segmented.Group>
+ *       <Segmented.Indicator />
+ *       {['day', 'week'].map((value) => (
+ *         <Segmented.Item key={value} value={value}><Segmented.ItemText>{value}</Segmented.ItemText><Segmented.ItemHiddenInput /></Segmented.Item>
+ *       ))}
+ *     </Segmented.Group>
+ *   </Segmented.Root>
+ */
+import { type ReactNode } from 'react';
+import { SegmentGroup as Ark, type SegmentGroupValueChangeDetails } from '@ark-ui/react/segment-group';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './segment-group.css';
+type Value<T, K extends string> = T extends string | number ? T : K extends keyof T ? T[K] : unknown;
+export type SegmentedProps<T, K extends string = 'value'> = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'label'> & {
+    items: readonly T[];
+    value?: NoInfer<Value<T, K>> | null;
+    defaultValue?: NoInfer<Value<T, K>> | null;
+    onValueChange?: (value: NoInfer<Value<T, K>> | null, details: SegmentGroupValueChangeDetails) => void;
+    label?: ReactNode;
+    labelKey?: string;
+    valueKey?: K;
+    disabledKey?: string;
+    iconOnly?: boolean;
+    tooltips?: boolean | null;
+    size?: 'sm' | 'md' | 'lg';
+    renderItem?: (item: T, state: {
+        selected: boolean;
+    }) => ReactNode;
+    classes?: Classes<'root' | 'label' | 'group' | 'indicator' | 'item' | 'itemText' | 'itemIcon' | 'tooltipTarget'>;
+};
+declare function SegmentedShortcut<T, K extends string = 'value'>({ items, value, defaultValue, onValueChange, label, labelKey, valueKey, disabledKey, iconOnly, tooltips, size, renderItem, className, classes, ...rest }: SegmentedProps<T, K>): import("react").JSX.Element;
+export declare const Segmented: typeof SegmentedShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Ark.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Ark.ItemProps & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Ark.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemControl: import("react").ForwardRefExoticComponent<Ark.ItemControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemHiddenInput: import("react").ForwardRefExoticComponent<Ark.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+    Group: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/segment-group/Segmented.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A segmented control: a row of options, one picked, with a sliding indicator.
+ *
+ *   <Segmented items={['Day', 'Week', 'Month']} value={view} onValueChange={setView} />
+ *   <Segmented items={[{ value: 'grid', label: 'Grid', icon: 'lucide:grid-2x2' }]} iconOnly />
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`; `icon`, `tooltip`)
+ * - `value`, `defaultValue`: the item's own value; `onValueChange`: called with it
+ * - `label`: a label above it (skipped inside a Field)
+ * - `iconOnly`: just the icons (each keeps its label for assistive tech)
+ * - `tooltips`: each item's label (or its own `tooltip`) in a tooltip on
+ *   hover and keyboard focus; on by default with `iconOnly`
+ * - `size`: 'sm', 'md' or 'lg'
+ * - `renderItem`: an option's content, (item, { selected }) => node (a count
+ *   beside the label, say); the icon still comes first
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's SegmentGroup parts (and Group, the track):
+ *
+ *   <Segmented.Root defaultValue="week" orientation="horizontal">
+ *     <Segmented.Group>
+ *       <Segmented.Indicator />
+ *       {['day', 'week'].map((value) => (
+ *         <Segmented.Item key={value} value={value}><Segmented.ItemText>{value}</Segmented.ItemText><Segmented.ItemHiddenInput /></Segmented.Item>
+ *       ))}
+ *     </Segmented.Group>
+ *   </Segmented.Root>
+ */
+import { useState } from 'react';
+import { SegmentGroup as Ark } from '@ark-ui/react/segment-group';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
+import '../theme.css';
+import './segment-group.css';
+function SegmentedShortcut({ items, value, defaultValue, onValueChange, label = null, labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', iconOnly = false, tooltips = null, size = 'md', renderItem, className, classes, ...rest }) {
+    const field = useFieldContext();
+    const part = partsOf('segment-group', classes);
+    const [current, setCurrent] = useControllable(value, defaultValue ?? null, undefined);
+    const key = (item, k) => item[k];
+    const isObject = (item) => typeof item === 'object' && item !== null;
+    const labelOf = (item) => String(isObject(item) ? key(item, labelKey) : item);
+    const valueOf = (item) => (isObject(item) ? key(item, valueKey) : item);
+    const iconOf = (item) => (isObject(item) ? key(item, 'icon') : undefined);
+    const tipFor = (item) => (isObject(item) && key(item, 'tooltip')) || labelOf(item);
+    // Zag's values are strings; map them back to the items' own.
+    function change(details) {
+        const item = items.find((item) => String(valueOf(item)) === details.value);
+        const next = item === undefined ? null : valueOf(item);
+        setCurrent(next);
+        onValueChange?.(next, details);
+    }
+    const withTooltips = tooltips ?? iconOnly;
+    // The focusable element is the hidden radio, so keyboard focus opens its
+    // tooltip by hand (pointer focus doesn't).
+    const [tipOpen, setTipOpen] = useState(null);
+    const focus = (key) => (e) => {
+        if (withTooltips && e.target.matches(':focus-visible'))
+            setTipOpen(key);
+    };
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, orientation: "horizontal", value: current == null ? null : String(current), onValueChange: change, "aria-describedby": field?.ariaDescribedby, ...(field && { ids: { label: field.ids.label }, invalid: field.invalid, disabled: field.disabled }), children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsxs("div", { ...part('group'), children: [_jsx(Ark.Indicator, { ...part('indicator') }), items.map((item) => {
+                        const itemKey = String(valueOf(item));
+                        return (_jsxs(Ark.Item, { value: itemKey, disabled: isObject(item) && !!key(item, disabledKey), ...part('item'), "data-icon-only": iconOnly || undefined, children: [_jsxs(Ark.ItemText, { ...part('item-text'), children: [iconOf(item) && _jsx("iconify-icon", { ...part('item-icon'), icon: iconOf(item), "aria-hidden": "true" }), iconOnly ? _jsx("span", { ...part('sr-only'), children: labelOf(item) })
+                                            : renderItem ? renderItem(item, { selected: String(current) === itemKey }) : labelOf(item)] }), withTooltips && (_jsx(Tooltip, { content: tipFor(item), open: tipOpen === itemKey, onOpenChange: (open) => setTipOpen((tip) => (open ? itemKey : tip === itemKey ? null : tip)), children: _jsx("span", { ...part('tooltip-target') }) })), _jsx(Ark.ItemHiddenInput, { onFocus: focus(itemKey), onBlur: () => setTipOpen(null) })] }, itemKey));
+                    })] })] }));
+}
+export const Segmented = withParts(SegmentedShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    Indicator: Ark.Indicator,
+    Item: Ark.Item,
+    ItemText: Ark.ItemText,
+    ItemControl: Ark.ItemControl,
+    ItemHiddenInput: Ark.ItemHiddenInput,
+    Context: Ark.Context,
+    Group: partOf('segment-group', 'group'),
+});

package/dist/segment-group/segment-group.css

@@ -0,0 +1,25 @@
+@layer ui {
+  [data-scope=segment-group][data-part=root] { display: inline-block; max-width: 100%; color: var(--ui-text); font-family: var(--ui-font);
+    --seg-h: var(--ui-control-height); --seg-px: 0.75rem; --seg-px-icon: 0.5rem; --seg-icon: 15px; --seg-fs: 14px;
+    &[data-size=sm] { --seg-h: var(--ui-control-height-sm); --seg-px: 0.625rem; --seg-px-icon: 0.375rem; --seg-icon: 14px; --seg-fs: 12px; }
+    &[data-size=lg] { --seg-h: var(--ui-control-height-lg); --seg-px: 1rem; --seg-px-icon: 0.625rem; --seg-icon: 17px; --seg-fs: 16px; } }
+  [data-scope=segment-group][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=segment-group][data-part=group] { position: relative; display: inline-flex; max-width: 100%; gap: 0.25rem; padding: 0.25rem;
+    box-sizing: border-box; background: var(--ui-hover); border-radius: var(--ui-radius);
+    &[data-disabled] { opacity: 0.5; }
+    &[data-invalid], &[aria-invalid=true] { outline: 1px solid var(--ui-danger); } }
+  [data-scope=segment-group][data-part=indicator] { position: absolute; left: var(--left); top: var(--top); width: var(--width); height: var(--height);
+    background: var(--ui-surface); border-radius: calc(var(--ui-radius) - 2px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    transition-property: var(--transition-property); transition-duration: 150ms; }
+  [data-scope=segment-group][data-part=item] { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
+    flex: 1 1 auto; padding: 0 var(--seg-px); height: calc(var(--seg-h) - 8px); border-radius: calc(var(--ui-radius) - 2px);
+    font-size: var(--seg-fs); font-weight: 500; color: var(--ui-muted); white-space: nowrap; cursor: pointer;
+    &[data-state=checked] { color: var(--ui-text); }
+    &[data-focus-visible] { outline: 2px solid var(--ui-ring-soft); }
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; }
+    &[data-icon-only] { padding: 0 var(--seg-px-icon); } }
+  [data-scope=segment-group][data-part=tooltip-target] { position: absolute; inset: 0; }
+  [data-scope=segment-group][data-part=item-text] { display: inline-flex; align-items: center; gap: 0.375rem; }
+  [data-scope=segment-group][data-part=item-icon] { display: block; font-size: var(--seg-icon); }
+  [data-scope=segment-group][data-part=sr-only] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+}

package/dist/select/ListSelect.d.ts

@@ -0,0 +1,5 @@
+import 'iconify-icon';
+import type { InnerProps } from './Select.js';
+import '../theme.css';
+import './select.css';
+export declare function ListSelect<T>({ label, items, placeholder: placeholderProp, labelKey, valueKey, disabledKey, multiple, tags, variant, hideSelected, deselectable, closeOnSelect, clearable, emptyText: emptyTextProp, empty, name, size, placement, disabled, value, defaultValue, onValueChange, renderItem, renderValue, start, searchable: _searchable, load: _load, debounce: _debounce, loadingText: _loadingText, onCreate: _onCreate, renderCreate: _renderCreate, className, classes, ...rest }: InnerProps<T>): import("react").JSX.Element;