@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/sidebar/SidebarUser.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The signed-in user, for the sidebar's footer: avatar, name and a line under
+ * it, opening a menu of account actions upwards (to the right in the rail,
+ * where only the avatar shows).
+ *
+ *   <SidebarUser name="Ada Lovelace" description="ada@example.com" items={account} onSelect={run} />
+ *
+ * It's a Menu with the user as its trigger: give it `items`, Menu's child
+ * components, or both, and `onSelect` (the rest of Menu's props apply too).
+ *
+ * - `name`: who's signed in; `description`: a line under it (their email);
+ *   `src`: their photo
+ * - `placement`: where the menu opens ('top-start', or 'right-end' in the rail)
+ * - `letters`, `color`: passed to the Avatar
+ */
+import type { ReactNode } from 'react';
+import 'iconify-icon';
+import { type MenuProps } from '../menu/Menu.js';
+import { type AvatarColor } from '../avatar/Avatar.js';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './sidebar.css';
+export type SidebarUserProps = Omit<MenuProps, 'trigger' | 'classes' | 'color'> & {
+    name?: string;
+    description?: ReactNode;
+    src?: string | null;
+    letters?: 1 | 2;
+    color?: AvatarColor | 'auto';
+    classes?: Classes<'root' | 'trigger' | 'text' | 'name' | 'description' | 'indicator'> & MenuProps['classes'];
+};
+export declare function SidebarUser({ name, description, src, letters, color, placement, className, classes, ...rest }: SidebarUserProps): import("react").JSX.Element;

package/dist/sidebar/SidebarUser.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { Menu } from '../menu/Menu.js';
+import { Avatar } from '../avatar/Avatar.js';
+import { useShell } from '../app-shell/shell.js';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './sidebar.css';
+export function SidebarUser({ name = '', description = null, src = null, letters = 2, color = 'accent', placement, className, classes, ...rest }) {
+    const shell = useShell();
+    const part = partsOf('sidebar-user', classes);
+    const rail = !!shell?.rail;
+    return (_jsx("div", { ...part('root'), className: cx(className, classes?.root), "data-rail": rail || undefined, children: _jsx(Menu, { ...rest, classes: classes, placement: placement ?? (rail ? 'right-end' : 'top-start'), trigger: _jsxs("button", { ...part('trigger'), type: "button", "aria-label": rail ? name : undefined, children: [_jsx(Avatar, { name: name, src: src, size: "sm", letters: letters, color: color }), _jsxs("span", { ...part('text'), children: [_jsx("span", { ...part('name'), children: name }), description && _jsx("span", { ...part('description'), children: description })] }), _jsx("iconify-icon", { ...part('indicator'), icon: "lucide:chevrons-up-down", "aria-hidden": "true" })] }) }) }));
+}

package/dist/sidebar/context.d.ts

@@ -0,0 +1,13 @@
+export type SidebarState = {
+    accordion: boolean;
+    openGroup: string | null;
+    setOpenGroup: (id: string | null) => void;
+};
+export declare const SidebarContext: import("react").Context<SidebarState | null>;
+export declare const useSidebar: () => SidebarState | null;
+export type SectionState = {
+    register: (id: string, setOpen: (open: boolean) => void) => () => void;
+    report: (id: string, open: boolean) => void;
+};
+export declare const SectionContext: import("react").Context<SectionState | null>;
+export declare const FlyoutContext: import("react").Context<boolean>;

package/dist/sidebar/context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const SidebarContext = createContext(null);
+export const useSidebar = () => useContext(SidebarContext);
+export const SectionContext = createContext(null);
+// Inside a rail group's flyout, items keep their labels (no rail tooltips).
+export const FlyoutContext = createContext(false);

package/dist/sidebar/sidebar.css

@@ -0,0 +1,109 @@
+@layer ui {
+  [data-scope=sidebar][data-part=root] { display: flex; flex-direction: column; width: var(--ui-sidebar-width); height: 100dvh;
+    position: sticky; top: 0; z-index: 35; flex-shrink: 0; box-sizing: border-box; overflow: hidden;
+    background: var(--ui-sidebar-surface); border-right: 1px solid var(--ui-border); font-size: 14px; }
+  [data-scope=sidebar][data-part=root] {
+    transition: width 200ms ease;
+    /* The rail: icons only. */
+    &[data-rail] { width: var(--ui-sidebar-rail-width); }
+    /* The drawer, on phones. */
+    &[data-mobile] { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: min(18rem, 85vw); display: none;
+      box-shadow: var(--ui-shadow); background: var(--ui-surface); }
+    &[data-mobile][data-open] { display: flex; animation: ui-drawer-in 200ms ease-out; } }
+  @keyframes ui-drawer-in { from { translate: -100% 0; } }
+  [data-scope=sidebar][data-part=header] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+    height: 3.5rem; padding: 0 0.5rem 0 1rem; flex-shrink: 0; box-sizing: border-box; font-weight: 700; white-space: nowrap;
+    [data-rail] > & { justify-content: center; padding: 0; } }
+  [data-scope=sidebar][data-part=logo] { display: flex; align-items: center; min-width: 0; overflow: hidden; }
+  [data-scope=sidebar][data-part=toggle] { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; padding: 0;
+    border: none; background: transparent; border-radius: var(--ui-radius); color: var(--ui-sidebar-icon); font-size: 16px; cursor: pointer;
+    &:hover { background: var(--ui-sidebar-hover); color: var(--ui-sidebar-hover-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
+    [data-part=footer] > & { margin: 0 auto; } }
+  [data-scope=sidebar][data-part=nav] { display: flex; flex-direction: column; gap: 1rem; flex-grow: 1; overflow-y: auto; padding: 0.5rem; }
+  [data-scope=sidebar][data-part=footer] { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.5rem; flex-shrink: 0; }
+
+  [data-scope=nav-section][data-part=root] { display: flex; flex-direction: column; gap: 0.125rem; }
+  [data-scope=nav-section][data-part=heading-row] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 1.5rem; padding-right: 0.25rem; }
+  [data-scope=nav-section][data-part=heading] { display: flex; align-items: center; flex-grow: 1; padding: 0 0.75rem;
+    font-size: 12px; font-weight: 600; color: var(--ui-sidebar-heading); white-space: nowrap; overflow: hidden; }
+  [data-scope=nav-section][data-part=collapse-all] { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
+    border: none; border-radius: calc(var(--ui-radius) - 2px); background: transparent; color: var(--ui-sidebar-icon); font-size: 14px; cursor: pointer; opacity: 0.7;
+    &:hover { opacity: 1; color: var(--ui-sidebar-hover-text); background: var(--ui-sidebar-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+
+  /* The edge strip sits over the border, inside the sidebar; a line shows on
+     hover, and the cursor points the way it goes. */
+  [data-scope=sidebar][data-part=edge] { position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; width: 0.375rem; padding: 0;
+    border: none; background: transparent; outline: none; cursor: w-resize;
+    [data-rail] > & { cursor: e-resize; }
+    &::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: transparent; transition: background 150ms; }
+    &:hover::after { background: var(--ui-accent); } }
+
+  [data-scope=nav-item][data-part=link] { border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; width: 100%; box-sizing: border-box;
+    height: var(--ui-sidebar-item-height); padding: var(--ui-sidebar-item-padding);
+    border-radius: var(--ui-sidebar-item-radius); color: var(--ui-sidebar-item-text);
+    font-size: 13px; text-decoration: none; white-space: nowrap;
+    &:hover { background: var(--ui-sidebar-hover); color: var(--ui-sidebar-hover-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: -2px; }
+    [data-active] > & { background: var(--ui-sidebar-active); color: var(--ui-sidebar-active-text);
+      font-weight: var(--ui-sidebar-active-weight); box-shadow: var(--ui-sidebar-active-shadow); } }
+  [data-scope=nav-item][data-part=icon] { font-size: 16px; width: 1rem; height: 1rem; flex-shrink: 0; }
+  [data-scope=nav-item][data-part=text] { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; }
+  [data-scope=nav-item][data-part=badge] { flex-shrink: 0; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; box-sizing: border-box;
+    display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px;
+    background: var(--ui-accent-soft); color: var(--ui-accent-soft-text); font-size: 12px; font-weight: 500; }
+
+  /* In the rail: icons centred, labels kept for assistive tech only, headings and group contents hidden. */
+  [data-scope=sidebar][data-rail] {
+    :is([data-scope=nav-item][data-part=link], [data-scope=nav-group][data-part=trigger]) { justify-content: center; padding: 0; }
+    :is([data-scope=nav-item], [data-scope=nav-group]):is([data-part=text]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+    :is([data-scope=nav-item][data-part=badge], [data-scope=nav-group][data-part=indicator], [data-scope=nav-section][data-part=heading]) { display: none; } }
+
+  /* A group: its trigger looks like an item; its items are indented under it. */
+  [data-scope=nav-group][data-part=trigger] { display: flex; align-items: center; gap: 0.75rem; width: 100%; box-sizing: border-box;
+    height: var(--ui-sidebar-item-height); padding: var(--ui-sidebar-item-padding); border: none; background: transparent;
+    border-radius: var(--ui-sidebar-item-radius); color: var(--ui-sidebar-item-text);
+    font-family: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer;
+    &:hover { background: var(--ui-sidebar-hover); color: var(--ui-sidebar-hover-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: -2px; }
+    [data-flyout] > & { background: var(--ui-sidebar-active); color: var(--ui-sidebar-active-text); box-shadow: var(--ui-sidebar-active-shadow); } }
+  [data-scope=nav-group][data-part=icon] { font-size: 16px; width: 1rem; height: 1rem; flex-shrink: 0; }
+  [data-scope=nav-group][data-part=text] { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; }
+  [data-scope=nav-group][data-part=indicator] { color: var(--ui-muted); font-size: 14px; transition: rotate 200ms;
+    [data-open] > [data-part=trigger] > & { rotate: 180deg; } }
+  [data-scope=nav-group][data-part=panel] { display: flex; flex-direction: column; gap: 0.125rem;
+    margin: 0.125rem 0 0 1.25rem; padding-left: 0.5rem; border-left: 1px solid var(--ui-border); }
+
+  /* In the rail: a panel beside the toggle. The wrapper's left padding
+     bridges the gap, so the pointer can cross to it without closing it. */
+  [data-scope=nav-group][data-part=children] {
+    [data-rail] > & { position: fixed; top: var(--flyout-top); left: var(--flyout-left); z-index: 50; padding-left: 0.5rem; } }
+  [data-scope=nav-group][data-part=panel] {
+    [data-rail] > [data-part=children] > & { margin: 0; padding: 0.375rem; min-width: 11rem; border: 1px solid var(--ui-border);
+      border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface); box-shadow: var(--ui-shadow); animation: ui-flyout-in 120ms ease-out;
+      /* On the white flyout, the plain (not inset) colours again. */
+      --ui-sidebar-hover: var(--ui-hover); --ui-sidebar-active: var(--ui-hover); --ui-sidebar-active-shadow: none; } }
+  [data-scope=nav-group][data-part=flyout-heading] { padding: 0.25rem 0.75rem 0.375rem; font-size: 12px; font-weight: 600; color: var(--ui-muted); }
+  /* Inside the flyout, items show their labels again. */
+  [data-scope=sidebar][data-rail] [data-part=panel] :is([data-scope=nav-item][data-part=link]) { justify-content: flex-start; padding: var(--ui-sidebar-item-padding); }
+  [data-scope=sidebar][data-rail] [data-part=panel] [data-scope=nav-item]:is([data-part=text]) { position: static; width: auto; height: auto; overflow: hidden; clip: auto; }
+  @keyframes ui-flyout-in { from { opacity: 0; transform: translateX(-4px); } }
+
+  [data-scope=sidebar-user][data-part=root] { display: block; width: 100%; }
+  [data-scope=sidebar-user][data-part=trigger] { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.375rem; box-sizing: border-box;
+    border: none; border-radius: var(--ui-radius); background: transparent; color: var(--ui-text); font-family: inherit; font-size: 13px;
+    text-align: left; white-space: nowrap; cursor: pointer;
+    &:hover { background: var(--ui-sidebar-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: -2px; }
+    &[aria-expanded=true] { background: var(--ui-sidebar-active); box-shadow: var(--ui-sidebar-active-shadow); }
+    [data-rail] > & { justify-content: center; } }
+  [data-scope=sidebar-user][data-part=text] { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; line-height: 1.3;
+    [data-rail] > [data-part=trigger] > & { display: none; } }
+  [data-scope=sidebar-user][data-part=name] { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
+  [data-scope=sidebar-user][data-part=description] { font-size: 12px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; }
+  [data-scope=sidebar-user][data-part=indicator] { flex-shrink: 0; color: var(--ui-muted); font-size: 14px;
+    [data-rail] > [data-part=trigger] > & { display: none; } }
+  /* As wide as the trigger when it opens upwards, and never narrower than 13rem. */
+  [data-scope=sidebar-user] [data-scope=menu][data-part=content] { min-width: max(13rem, var(--reference-width)); }
+}

package/dist/skeleton/Skeleton.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A placeholder shape while content loads.
+ *
+ *   <Skeleton circle width="2.5rem" height="2.5rem" />
+ *   <Skeleton lines={3} />
+ *
+ * - `lines`: that many text-like lines (the last one shorter)
+ * - `circle`: a circle, e.g. for an avatar
+ * - `width`, `height`: any CSS length (defaults fit a line of text)
+ *
+ * It is hidden from assistive tech; announce loading elsewhere (aria-busy on
+ * the region, or a Spinner's label).
+ */
+import type { ComponentProps } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './skeleton.css';
+export type SkeletonProps = ComponentProps<'div'> & {
+    lines?: number;
+    circle?: boolean;
+    width?: string | null;
+    height?: string | null;
+    classes?: Classes<'root' | 'line'>;
+};
+export declare function Skeleton({ lines, circle, width, height, className, classes, style, ...rest }: SkeletonProps): import("react").JSX.Element;

package/dist/skeleton/Skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './skeleton.css';
+export function Skeleton({ lines = 0, circle = false, width = null, height = null, className, classes, style, ...rest }) {
+    const part = partsOf('skeleton', classes);
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "aria-hidden": "true", "data-circle": circle || undefined, "data-text": lines > 0 || undefined, style: { ...(width && { width }), ...(height && { height }), ...style }, children: Array.from({ length: lines }, (_, i) => _jsx("span", { ...part('line'), "data-last": (i === lines - 1 && lines > 1) || undefined }, i)) }));
+}

package/dist/skeleton/skeleton.css

@@ -0,0 +1,13 @@
+@layer ui {
+  [data-scope=skeleton][data-part=root] {
+    display: block; min-height: 1rem; border-radius: var(--ui-radius); background: var(--ui-skeleton);
+    animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+    &[data-circle] { border-radius: 9999px; min-height: 0; }
+    &[data-text] { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; background: transparent; animation: none; }
+  }
+  [data-scope=skeleton][data-part=line] {
+    display: block; height: 0.75rem; border-radius: 4px; background: var(--ui-skeleton);
+    animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+    &[data-last] { width: 60%; }
+  }
+}

package/dist/slider/Slider.d.ts

@@ -0,0 +1,70 @@
+/**
+ * A slider: pick a number, or a range with two thumbs.
+ *
+ *   <Slider label="Volume" value={volume} onValueChange={setVolume} />
+ *   <Slider label="Price" value={range} onValueChange={setRange} min={0} max={100} step={5} />  (range = [20, 80])
+ *
+ * - `value`, `defaultValue`: a number, or an array of two for a range
+ * - `onValueChange`: called with the new value (the same shape)
+ * - `min`, `max`, `step`
+ * - `showValue`: the value beside the label, formatted with `formatOptions` and `locale`
+ *   (e.g. { style: 'currency', currency: 'GBP', maximumFractionDigits: 0 })
+ * - `marks`: values (or { value, label }) shown as ticks under the track
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Slider.Root defaultValue={[40]}>
+ *     <Slider.Label>Volume</Slider.Label> <Slider.ValueText />
+ *     <Slider.Control>
+ *       <Slider.Track><Slider.Range /></Slider.Track>
+ *       <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
+ *     </Slider.Control>
+ *   </Slider.Root>
+ */
+import { type ReactNode } from 'react';
+import { Slider as Ark, type SliderValueChangeDetails } from '@ark-ui/react/slider';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './slider.css';
+type Mark = number | {
+    value: number;
+    label: ReactNode;
+};
+type One = {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number, details: SliderValueChangeDetails) => void;
+};
+type Range = {
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[], details: SliderValueChangeDetails) => void;
+};
+export type SliderProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'label'> & {
+    label?: ReactNode;
+    showValue?: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
+    locale?: string;
+    marks?: Mark[] | null;
+    classes?: Classes<'root' | 'header' | 'label' | 'valueText' | 'control' | 'track' | 'range' | 'thumb' | 'markerGroup' | 'marker'>;
+} & (One | Range);
+declare function SliderShortcut(props: SliderProps): import("react").JSX.Element;
+export declare const Slider: typeof SliderShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Ark.ValueTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Track: import("react").ForwardRefExoticComponent<Ark.TrackProps & import("react").RefAttributes<HTMLDivElement>>;
+    Range: import("react").ForwardRefExoticComponent<Ark.RangeProps & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Ark.ThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<Ark.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    MarkerGroup: import("react").ForwardRefExoticComponent<Ark.MarkerGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Marker: import("react").ForwardRefExoticComponent<Ark.MarkerProps & import("react").RefAttributes<HTMLSpanElement>>;
+    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;
+    };
+};
+export {};

package/dist/slider/Slider.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A slider: pick a number, or a range with two thumbs.
+ *
+ *   <Slider label="Volume" value={volume} onValueChange={setVolume} />
+ *   <Slider label="Price" value={range} onValueChange={setRange} min={0} max={100} step={5} />  (range = [20, 80])
+ *
+ * - `value`, `defaultValue`: a number, or an array of two for a range
+ * - `onValueChange`: called with the new value (the same shape)
+ * - `min`, `max`, `step`
+ * - `showValue`: the value beside the label, formatted with `formatOptions` and `locale`
+ *   (e.g. { style: 'currency', currency: 'GBP', maximumFractionDigits: 0 })
+ * - `marks`: values (or { value, label }) shown as ticks under the track
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Slider.Root defaultValue={[40]}>
+ *     <Slider.Label>Volume</Slider.Label> <Slider.ValueText />
+ *     <Slider.Control>
+ *       <Slider.Track><Slider.Range /></Slider.Track>
+ *       <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
+ *     </Slider.Control>
+ *   </Slider.Root>
+ */
+import { useMemo } from 'react';
+import { Slider as Ark } from '@ark-ui/react/slider';
+import { useFieldContext } from '@ark-ui/react/field';
+import { useLocale } from '../format/LocaleProvider.js';
+import { cx, partOf, partsOf, useControllable, withParts } from '../utils.js';
+import '../theme.css';
+import './slider.css';
+function SliderShortcut(props) {
+    const { label = null, value, defaultValue, onValueChange, min = 0, max = 100, step = 1, showValue = true, formatOptions, locale: localeProp, marks = null, className, classes, ...rest } = props;
+    const field = useFieldContext();
+    const part = partsOf('slider', classes);
+    const [own, setOwn] = useControllable(value, defaultValue ?? min, undefined);
+    const range = Array.isArray(own);
+    const app = useLocale();
+    const locale = localeProp ?? app;
+    const formatter = useMemo(() => new Intl.NumberFormat(locale, formatOptions), [locale, formatOptions]);
+    const format = (n) => formatter.format(n);
+    const markOf = (mark) => (typeof mark === 'object' ? mark : { value: mark, label: format(mark) });
+    function change(details) {
+        const next = range ? details.value : details.value[0];
+        setOwn(next);
+        onValueChange?.(next, details);
+    }
+    const values = Array.isArray(own) ? own : [own];
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), min: min, max: max, step: step, thumbAlignment: "center", value: values, onValueChange: change, ...(field && { ids: { label: field.ids.label }, invalid: field.invalid, disabled: field.disabled }), children: [((label && !field) || showValue) && (_jsxs("div", { ...part('header'), children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), showValue && _jsx(Ark.ValueText, { ...part('value-text'), children: values.map(format).join(' – ') })] })), _jsxs(Ark.Control, { ...part('control'), children: [_jsx(Ark.Track, { ...part('track'), children: _jsx(Ark.Range, { ...part('range') }) }), values.map((_, index) => _jsx(Ark.Thumb, { index: index, ...part('thumb'), "aria-describedby": field?.ariaDescribedby, children: _jsx(Ark.HiddenInput, {}) }, index))] }), marks && (_jsx(Ark.MarkerGroup, { ...part('marker-group'), children: marks.map(markOf).map((mark) => _jsx(Ark.Marker, { value: mark.value, ...part('marker'), children: mark.label }, mark.value)) }))] }));
+}
+export const Slider = withParts(SliderShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    ValueText: Ark.ValueText,
+    Control: Ark.Control,
+    Track: Ark.Track,
+    Range: Ark.Range,
+    Thumb: Ark.Thumb,
+    HiddenInput: Ark.HiddenInput,
+    MarkerGroup: Ark.MarkerGroup,
+    Marker: Ark.Marker,
+    Context: Ark.Context,
+    Header: partOf('slider', 'header'),
+});

package/dist/slider/slider.css

@@ -0,0 +1,17 @@
+@layer ui {
+  [data-scope=slider][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=slider][data-part=header] { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
+  [data-scope=slider][data-part=label] { font-size: 14px; font-weight: 500; }
+  [data-scope=slider][data-part=value-text] { margin-left: auto; font-size: 14px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
+  [data-scope=slider][data-part=control] { position: relative; display: flex; align-items: center; height: 1.25rem;
+    &[data-disabled] { opacity: 0.5; } }
+  [data-scope=slider][data-part=track] { position: relative; flex: 1; height: 0.375rem; background: var(--ui-border); border-radius: 9999px; }
+  [data-scope=slider][data-part=range] { position: absolute; top: 0; bottom: 0; background: var(--ui-accent); border-radius: 9999px; }
+  [data-scope=slider][data-part=thumb] { width: 1.125rem; height: 1.125rem; box-sizing: border-box; background: white;
+    border: 2px solid var(--ui-accent); border-radius: 9999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: grab; outline: none;
+    &:focus-visible { outline: 3px solid var(--ui-ring-soft); }
+    &[data-dragging] { cursor: grabbing; }
+    &[data-invalid] { border-color: var(--ui-danger); } }
+  [data-scope=slider][data-part=marker-group] { position: relative; height: 1.25rem; margin-top: 0.25rem; }
+  [data-scope=slider][data-part=marker] { font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
+}

package/dist/sortable-list/SortableList.d.ts

@@ -0,0 +1,46 @@
+/**
+ * A list people put in order by dragging (or with the keyboard), on dnd-kit.
+ *
+ *   <SortableList items={topics} onItemsChange={setTopics} renderItem={(topic) => topic.title} />
+ *
+ * Drag a row by its grip; or focus the grip, press Space to pick it up, the
+ * arrow keys to move it, Space to drop it (Escape puts it back). Screen
+ * readers hear each step.
+ *
+ * - `items`, `defaultItems`; `onItemsChange`: called with the reordered list
+ * - `itemKey`: the property that identifies an item ('id'), or a function;
+ *   strings and numbers are their own key
+ * - `renderItem(item, { index, dragging })`: a row's content
+ * - `handle`: drag by the grip only (default), or false for the whole row
+ *   (keyboard users still use the row, focused)
+ * - `variant`: 'card' (default; rows in a bordered box) or 'plain' (separate,
+ *   spaced rows)
+ * - `itemLabel(item)`: what screen readers call an item as it moves
+ *   ("Picked up Worksheet 4. … moved to position 3 of 5"); by default a
+ *   string item itself, or its `label`, `title` or `name`
+ * - `disabled`: no reordering; `label`: the list's accessible name
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './sortable-list.css';
+type Key = string | number;
+export type SortableListProps<T> = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    items?: T[];
+    defaultItems?: T[];
+    onItemsChange?: (items: T[]) => void;
+    itemKey?: string | ((item: T) => Key);
+    renderItem?: (item: T, state: {
+        index: number;
+        dragging: boolean;
+    }) => ReactNode;
+    itemLabel?: (item: T) => string;
+    handle?: boolean;
+    variant?: 'card' | 'plain';
+    disabled?: boolean;
+    label?: string;
+    classes?: Classes<'root' | 'item' | 'handle' | 'content'>;
+};
+export declare function SortableList<T>({ items: itemsProp, defaultItems, onItemsChange, itemKey, renderItem, itemLabel, handle, variant, disabled, label, className, classes, ...rest }: SortableListProps<T>): import("react").JSX.Element;
+export {};

package/dist/sortable-list/SortableList.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A list people put in order by dragging (or with the keyboard), on dnd-kit.
+ *
+ *   <SortableList items={topics} onItemsChange={setTopics} renderItem={(topic) => topic.title} />
+ *
+ * Drag a row by its grip; or focus the grip, press Space to pick it up, the
+ * arrow keys to move it, Space to drop it (Escape puts it back). Screen
+ * readers hear each step.
+ *
+ * - `items`, `defaultItems`; `onItemsChange`: called with the reordered list
+ * - `itemKey`: the property that identifies an item ('id'), or a function;
+ *   strings and numbers are their own key
+ * - `renderItem(item, { index, dragging })`: a row's content
+ * - `handle`: drag by the grip only (default), or false for the whole row
+ *   (keyboard users still use the row, focused)
+ * - `variant`: 'card' (default; rows in a bordered box) or 'plain' (separate,
+ *   spaced rows)
+ * - `itemLabel(item)`: what screen readers call an item as it moves
+ *   ("Picked up Worksheet 4. … moved to position 3 of 5"); by default a
+ *   string item itself, or its `label`, `title` or `name`
+ * - `disabled`: no reordering; `label`: the list's accessible name
+ */
+import { useRef } from 'react';
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import 'iconify-icon';
+import { cx, partsOf, useControllable } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './sortable-list.css';
+// Rows only move up and down.
+const vertical = ({ transform }) => ({ ...transform, x: 0 });
+export function SortableList({ items: itemsProp, defaultItems = [], onItemsChange, itemKey = 'id', renderItem, itemLabel, handle = true, variant = 'card', disabled = false, label, className, classes, ...rest }) {
+    const t = useMessages();
+    const part = partsOf('sortable-list', classes);
+    const [items, setItems] = useControllable(itemsProp, defaultItems, onItemsChange);
+    const keyOf = (item) => typeof itemKey === 'function' ? itemKey(item)
+        : typeof item === 'string' || typeof item === 'number' ? item : item[itemKey];
+    const keys = items.map(keyOf);
+    // Spoken as an item moves: its name and place, not dnd-kit's ids.
+    const nameOf = (id) => {
+        const item = items[keys.indexOf(id)];
+        if (itemLabel)
+            return itemLabel(item);
+        if (typeof item === 'string' || typeof item === 'number')
+            return String(item);
+        const fields = item;
+        return String(fields.label ?? fields.title ?? fields.name ?? id);
+    };
+    const moved = useRef(false);
+    const place = (id) => t.sortableList.position(keys.indexOf(id) + 1, keys.length);
+    const announcements = {
+        onDragStart: ({ active }) => {
+            moved.current = false;
+            return t.sortableList.pickedUp(nameOf(active.id), place(active.id));
+        },
+        // dnd-kit reports the item over its own place as it's picked up: not a move yet.
+        onDragOver: ({ active, over }) => {
+            if (!over || (over.id === active.id && !moved.current))
+                return undefined;
+            moved.current = true;
+            return t.sortableList.movedTo(nameOf(active.id), place(over.id));
+        },
+        onDragEnd: ({ active, over }) => t.sortableList.dropped(nameOf(active.id), over ? place(over.id) : null),
+        onDragCancel: ({ active }) => t.sortableList.cancelled(nameOf(active.id), place(active.id)),
+    };
+    const screenReaderInstructions = { draggable: t.sortableList.instructions };
+    // A small move before a drag starts, so clicks on the row still work.
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    function dragEnd({ active, over }) {
+        if (!over || active.id === over.id)
+            return;
+        setItems(arrayMove(items, keys.indexOf(active.id), keys.indexOf(over.id)));
+    }
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: [vertical], onDragEnd: dragEnd, accessibility: { announcements, screenReaderInstructions }, children: _jsx(SortableContext, { items: keys, strategy: verticalListSortingStrategy, disabled: disabled, children: _jsx("ul", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, "aria-label": label, children: items.map((item, index) => (_jsx(Row, { id: keys[index], part: part, handle: handle, disabled: disabled, children: (dragging) => renderItem ? renderItem(item, { index, dragging }) : String(item) }, keys[index]))) }) }) }));
+}
+function Row({ id, part, handle, disabled, children }) {
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
+    const style = { transform: CSS.Translate.toString(transform), transition };
+    const drag = { ...attributes, ...listeners };
+    const t = useMessages();
+    return (_jsxs("li", { ref: setNodeRef, ...part('item'), style: style, "data-dragging": isDragging || undefined, "data-disabled": disabled || undefined, ...(!handle && drag), children: [handle && !disabled && (_jsx("button", { ref: setActivatorNodeRef, ...part('handle'), type: "button", "aria-label": t.sortableList.handle, ...drag, children: _jsx("iconify-icon", { icon: "lucide:grip-vertical", "aria-hidden": "true" }) })), _jsx("div", { ...part('content'), children: children(isDragging) })] }));
+}

package/dist/sortable-list/sortable-list.css

@@ -0,0 +1,25 @@
+@layer ui {
+  [data-scope=sortable-list][data-part=root] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
+    color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    &[data-variant=card] { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px);
+      box-shadow: var(--ui-card-shadow); }
+    &[data-variant=plain] { gap: 0.5rem; } }
+  [data-scope=sortable-list][data-part=item] { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem;
+    background: var(--ui-surface); box-sizing: border-box; outline: none;
+    [data-variant=card] > & { border-bottom: 1px solid var(--ui-border);
+      &:first-child { border-radius: calc(var(--ui-radius) + 2px) calc(var(--ui-radius) + 2px) 0 0; }
+      &:last-child { border-bottom: none; border-radius: 0 0 calc(var(--ui-radius) + 2px) calc(var(--ui-radius) + 2px); } }
+    [data-variant=plain] > & { border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); }
+    /* The whole row is the handle (handle={false}): it shows it can be grabbed. */
+    &[role=button] { cursor: grab;
+      &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: -2px; } }
+    /* Lifted while it's dragged, above the others. */
+    &[data-dragging] { z-index: 1; border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow); cursor: grabbing; } }
+  [data-scope=sortable-list][data-part=handle] { display: grid; place-items: center; flex-shrink: 0; width: 1.5rem; height: 1.75rem; margin-left: -0.25rem;
+    padding: 0; border: none; border-radius: calc(var(--ui-radius) - 2px); background: transparent; color: var(--ui-muted);
+    font-size: 16px; cursor: grab; touch-action: none;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
+    [data-dragging] & { cursor: grabbing; } }
+  [data-scope=sortable-list][data-part=content] { flex-grow: 1; min-width: 0; }
+}

package/dist/spinner/Spinner.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A spinner, for short waits.
+ *
+ *   <Spinner size="sm" />
+ *
+ * - `label`: announced to assistive tech ('Loading')
+ * - `size`: 'sm', 'md' (default) or 'lg'
+ */
+import type { ComponentProps } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './spinner.css';
+export type SpinnerProps = ComponentProps<'span'> & {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    classes?: Classes<'root'>;
+};
+export declare function Spinner({ label: labelProp, size, className, classes, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/spinner/Spinner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './spinner.css';
+export function Spinner({ label: labelProp, size = 'md', className, classes, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.common.loading;
+    const part = partsOf('spinner', classes);
+    return _jsx("span", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, role: "status", "aria-label": label });
+}

package/dist/spinner/spinner.css

@@ -0,0 +1,9 @@
+@layer ui {
+  [data-scope=spinner][data-part=root] {
+    display: inline-block; flex-shrink: 0; width: 1.25rem; height: 1.25rem; box-sizing: border-box; vertical-align: middle;
+    border: 2px solid var(--ui-border); border-top-color: var(--ui-accent); border-radius: 9999px;
+    animation: ui-spin 0.7s linear infinite;
+    &[data-size=sm] { width: 1rem; height: 1rem; }
+    &[data-size=lg] { width: 2rem; height: 2rem; border-width: 3px; }
+  }
+}

package/dist/stat/Stat.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A headline number with its label, e.g. on a dashboard.
+ *
+ *   <Stat label="Lessons this month" value={52} change={12.5} changeLabel="vs September" />
+ *
+ * - `value` and an optional `unit`: text is shown as given; a number is
+ *   formatted (grouped digits, the app's locale), with `format` (Intl's
+ *   options: `{ style: 'currency', currency: 'GBP' }`)
+ * - `animate`: a number's digits roll to a new value when it changes (RollingNumber)
+ * - `change`: a number, shown as "+12.5%" with an arrow, green when up and red
+ *   when down; `invert` swaps the colours (for things like cancellations);
+ *   `changeUnit` replaces the '%'
+ * - `changeLabel`, `help`: muted text after the change, and under it all
+ * - `icon`: an Iconify name in a tinted square, beside the label
+ * - `variant`: 'plain' (default) or 'card'
+ * - `size`: 'sm', 'md' (default) or 'lg'
+ * - the content goes under it all (a sparkline)
+ *
+ * Group stats in Stats for a responsive grid.
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './stat.css';
+export type StatProps = HTMLAttributes<HTMLDivElement> & {
+    label?: ReactNode;
+    value?: ReactNode;
+    format?: Intl.NumberFormatOptions;
+    animate?: boolean;
+    unit?: ReactNode;
+    change?: number | null;
+    changeUnit?: string;
+    changeLabel?: ReactNode;
+    invert?: boolean;
+    help?: ReactNode;
+    icon?: string | null;
+    variant?: 'plain' | 'card';
+    size?: 'sm' | 'md' | 'lg';
+    classes?: Classes<'root' | 'header' | 'label' | 'icon' | 'value' | 'unit' | 'footer' | 'change' | 'changeLabel' | 'help'>;
+};
+export declare function Stat({ label, value, format, animate, unit, change, changeUnit, changeLabel, invert, help, icon, variant, size, className, classes, children, ...rest }: StatProps): import("react").JSX.Element;