@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/number-input/NumberInput.d.ts

@@ -0,0 +1,56 @@
+/**
+ * A number input with step buttons; arrow keys step too (Shift for 10).
+ *
+ *   <NumberInput label="Hourly rate" value={rate} onValueChange={setRate} min={0} step={5} prefix="£" />
+ *
+ * - `value`, `defaultValue`: a number, or null when empty
+ * - `onValueChange`: called with the new number (or null)
+ * - `min`, `max`, `step`
+ * - `prefix`, `suffix`: text before or after it ('£', 'kg'); `icon`: an Iconify name before it
+ * - `formatOptions`: Intl.NumberFormat options, e.g. { style: 'currency', currency: 'GBP' }, with `locale`
+ * - `allowMouseWheel`: scroll over the focused input to step
+ * - `steppers`: false to hide the buttons
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <NumberInput.Root defaultValue="3" min={0}>
+ *     <NumberInput.Label>Guests</NumberInput.Label>
+ *     <NumberInput.Control>
+ *       <NumberInput.DecrementTrigger>−</NumberInput.DecrementTrigger>
+ *       <NumberInput.Input />
+ *       <NumberInput.IncrementTrigger>+</NumberInput.IncrementTrigger>
+ *     </NumberInput.Control>
+ *   </NumberInput.Root>
+ */
+import { type ReactNode } from 'react';
+import { NumberInput as Ark, type NumberInputValueChangeDetails } from '@ark-ui/react/number-input';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './number-input.css';
+export type NumberInputProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'label' | 'prefix'> & {
+    label?: ReactNode;
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null, details: NumberInputValueChangeDetails) => void;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    icon?: string | null;
+    steppers?: boolean;
+    placeholder?: string;
+    classes?: Classes<'root' | 'label' | 'control' | 'icon' | 'prefix' | 'input' | 'suffix' | 'decrementTrigger' | 'incrementTrigger'>;
+};
+declare function NumberInputShortcut({ label, value, defaultValue, onValueChange, prefix, suffix, icon, steppers, placeholder, className, classes, ...rest }: NumberInputProps): import("react").JSX.Element;
+export declare const NumberInput: typeof NumberInputShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Ark.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    DecrementTrigger: import("react").ForwardRefExoticComponent<Ark.DecrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    IncrementTrigger: import("react").ForwardRefExoticComponent<Ark.IncrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Ark.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Scrubber: import("react").ForwardRefExoticComponent<Ark.ScrubberProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/number-input/NumberInput.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A number input with step buttons; arrow keys step too (Shift for 10).
+ *
+ *   <NumberInput label="Hourly rate" value={rate} onValueChange={setRate} min={0} step={5} prefix="£" />
+ *
+ * - `value`, `defaultValue`: a number, or null when empty
+ * - `onValueChange`: called with the new number (or null)
+ * - `min`, `max`, `step`
+ * - `prefix`, `suffix`: text before or after it ('£', 'kg'); `icon`: an Iconify name before it
+ * - `formatOptions`: Intl.NumberFormat options, e.g. { style: 'currency', currency: 'GBP' }, with `locale`
+ * - `allowMouseWheel`: scroll over the focused input to step
+ * - `steppers`: false to hide the buttons
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <NumberInput.Root defaultValue="3" min={0}>
+ *     <NumberInput.Label>Guests</NumberInput.Label>
+ *     <NumberInput.Control>
+ *       <NumberInput.DecrementTrigger>−</NumberInput.DecrementTrigger>
+ *       <NumberInput.Input />
+ *       <NumberInput.IncrementTrigger>+</NumberInput.IncrementTrigger>
+ *     </NumberInput.Control>
+ *   </NumberInput.Root>
+ */
+import { useState } from 'react';
+import { NumberInput as Ark } from '@ark-ui/react/number-input';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partsOf, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './number-input.css';
+const toText = (value) => (value == null ? '' : String(value));
+function NumberInputShortcut({ label = null, value, defaultValue, onValueChange, prefix = null, suffix = null, icon = null, steppers = true, placeholder = '', className, classes, ...rest }) {
+    const t = useMessages();
+    const field = useFieldContext();
+    const part = partsOf('number-input', classes);
+    // Zag works on the text ('1.', '' while typing); `value` is its number.
+    // The text follows a controlled value that changes from outside.
+    const [text, setText] = useState(() => toText(value !== undefined ? value : defaultValue));
+    const [seen, setSeen] = useState(value);
+    if (value !== seen) {
+        setSeen(value);
+        const number = text === '' ? null : Number(text);
+        if (value !== number)
+            setText(toText(value));
+    }
+    function change(details) {
+        setText(details.value);
+        onValueChange?.(Number.isNaN(details.valueAsNumber) ? null : details.valueAsNumber, details);
+    }
+    return (_jsxs(Ark.Root, { ...(t.zag.numberInput && { translations: t.zag.numberInput }), ...rest, ...part('root'), className: cx(className, classes?.root), value: text, onValueChange: change, children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsxs(Ark.Control, { ...part('control'), children: [icon ? _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" })
+                        : prefix != null && _jsx("span", { ...part('prefix'), children: prefix }), _jsx(Ark.Input, { ...part('input'), placeholder: placeholder }), suffix != null && _jsx("span", { ...part('suffix'), children: suffix }), steppers && _jsxs(_Fragment, { children: [_jsx(Ark.DecrementTrigger, { ...part('decrement-trigger'), children: _jsx("iconify-icon", { icon: "lucide:minus" }) }), _jsx(Ark.IncrementTrigger, { ...part('increment-trigger'), children: _jsx("iconify-icon", { icon: "lucide:plus" }) })] })] })] }));
+}
+export const NumberInput = withParts(NumberInputShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    Control: Ark.Control,
+    Input: Ark.Input,
+    DecrementTrigger: Ark.DecrementTrigger,
+    IncrementTrigger: Ark.IncrementTrigger,
+    ValueText: Ark.ValueText,
+    Scrubber: Ark.Scrubber,
+    Context: Ark.Context,
+});

package/dist/number-input/number-input.css

@@ -0,0 +1,21 @@
+@layer ui {
+  [data-scope=number-input][data-part=root] { display: inline-block; min-width: 10rem; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=number-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=number-input][data-part=control] { display: flex; align-items: center; gap: 0.5rem; height: var(--ui-control-height);
+    padding: 0 0.25rem 0 0.75rem; box-sizing: border-box; background: var(--ui-surface);
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px;
+    &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[data-disabled] { opacity: 0.5; }
+    &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); } }
+  [data-scope=number-input][data-part=input] { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; outline: none;
+    color: inherit; font: inherit;
+    &::placeholder { color: var(--ui-muted); } }
+  [data-scope=number-input]:is([data-part=prefix], [data-part=suffix]) { display: flex; align-items: center; flex-shrink: 0;
+    color: var(--ui-muted); white-space: nowrap; }
+  [data-scope=number-input][data-part=icon] { display: block; width: 1em; height: 1em; font-size: 16px; color: var(--ui-muted); flex-shrink: 0; }
+  [data-scope=number-input]:is([data-part=decrement-trigger], [data-part=increment-trigger]) { display: grid; place-items: center;
+    flex-shrink: 0; width: 1.5rem; height: 1.75rem; border: none; background: transparent; border-radius: 4px;
+    color: var(--ui-muted); cursor: pointer;
+    &:hover:not([data-disabled]) { background: var(--ui-hover); color: var(--ui-text); }
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; } }
+}

package/dist/page/Page.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A page: its header (heading, description, actions) and content, at a
+ * readable width.
+ *
+ *   <Page heading="Students" description="12 students" actions={<Button variant="primary">Add student</Button>}>
+ *     …content…
+ *   </Page>
+ *
+ * - `heading`, `description`
+ * - `width`: 'narrow', 'default', 'wide' or 'full'
+ * - `align`: 'center' or 'start'
+ * - `actions`, `breadcrumbs`: shown in the header
+ *
+ * What's inside a Page isn't the shell's: a Sidebar shown in the page (as an
+ * example, say) doesn't collapse or turn into a drawer with the app's.
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './page.css';
+export type PageProps = HTMLAttributes<HTMLDivElement> & {
+    heading?: ReactNode;
+    description?: ReactNode;
+    width?: 'narrow' | 'default' | 'wide' | 'full';
+    align?: 'center' | 'start';
+    actions?: ReactNode;
+    breadcrumbs?: ReactNode;
+    classes?: Classes<'root' | 'inner' | 'header' | 'breadcrumbs' | 'titles' | 'heading' | 'description' | 'actions' | 'content'>;
+};
+export declare function Page({ heading, description, width, align, actions, breadcrumbs, className, classes, children, ...rest }: PageProps): import("react").JSX.Element;

package/dist/page/Page.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, partsOf } from '../utils.js';
+import { ShellContext } from '../app-shell/shell.js';
+import '../theme.css';
+import './page.css';
+export function Page({ heading = null, description = null, width = 'default', align = 'center', actions = null, breadcrumbs = null, className, classes, children, ...rest }) {
+    const part = partsOf('page', classes);
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-width": width, "data-align": align, children: _jsxs("div", { ...part('inner'), children: [(heading || description || actions || breadcrumbs) && (_jsxs("header", { ...part('header'), children: [breadcrumbs && _jsx("div", { ...part('breadcrumbs'), children: breadcrumbs }), _jsxs("div", { ...part('titles'), children: [_jsxs("div", { children: [heading && _jsx("h1", { ...part('heading'), children: heading }), description && _jsx("p", { ...part('description'), children: description })] }), actions && _jsx("div", { ...part('actions'), children: actions })] })] })), _jsx("div", { ...part('content'), children: _jsx(ShellContext, { value: null, children: children }) })] }) }));
+}

package/dist/page/page.css

@@ -0,0 +1,17 @@
+/* A page holds other components, so its rules use > to stay off them. */
+@layer ui {
+  [data-scope=page][data-part=root] { display: block; min-width: 0; box-sizing: border-box; padding: 1rem;
+    color: var(--ui-text); font-family: var(--ui-font);
+    @media (min-width: 768px) { padding: 2rem; } }
+  [data-scope=page][data-part=inner] { margin: 0 auto; max-width: 56rem;
+    [data-align=start] > & { margin-left: 0; }
+    [data-width=narrow] > & { max-width: 40rem; }
+    [data-width=wide] > & { max-width: 80rem; }
+    [data-width=full] > & { max-width: none; } }
+  [data-scope=page][data-part=header] { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
+  [data-scope=page][data-part=breadcrumbs] { font-size: 14px; color: var(--ui-muted); }
+  [data-scope=page][data-part=titles] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+  [data-scope=page][data-part=heading] { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
+  [data-scope=page][data-part=description] { margin: 0.25rem 0 0; color: var(--ui-muted); font-size: 14px; }
+  [data-scope=page][data-part=actions] { display: flex; gap: 0.5rem; flex-shrink: 0; }
+}

package/dist/pagination/Pagination.d.ts

@@ -0,0 +1,31 @@
+import { Pagination as Ark } from '@ark-ui/react/pagination';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './pagination.css';
+export type PaginationProps = Omit<Ark.RootProviderProps, 'value' | 'children'> & {
+    count?: number;
+    pageSize?: number;
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    siblingCount?: number;
+    summary?: boolean;
+    noun?: string;
+    firstLast?: boolean;
+    label?: string;
+    classes?: Classes<'root' | 'summary' | 'pages' | 'item' | 'ellipsis' | 'firstTrigger' | 'prevTrigger' | 'nextTrigger' | 'lastTrigger'>;
+};
+declare function PaginationShortcut({ count, pageSize, page: pageProp, defaultPage, onPageChange, siblingCount, summary, noun: nounProp, firstLast, label: labelProp, className, classes, ...rest }: PaginationProps): import("react").JSX.Element;
+export declare const Pagination: typeof PaginationShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Ark.RootProviderProps & import("react").RefAttributes<HTMLElement>>;
+    Item: import("react").ForwardRefExoticComponent<Ark.ItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Ellipsis: import("react").ForwardRefExoticComponent<Ark.EllipsisProps & import("react").RefAttributes<HTMLDivElement>>;
+    PrevTrigger: import("react").ForwardRefExoticComponent<Ark.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    NextTrigger: import("react").ForwardRefExoticComponent<Ark.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    FirstTrigger: import("react").ForwardRefExoticComponent<Ark.FirstTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    LastTrigger: import("react").ForwardRefExoticComponent<Ark.LastTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Context: (props: Ark.ContextProps) => import("react").ReactNode;
+};
+export {};

package/dist/pagination/Pagination.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Previous and next buttons and page numbers, with ellipses for long runs.
+ *
+ *   <Pagination count={students.length} pageSize={10} page={page} onPageChange={setPage} />
+ *   {students.slice((page - 1) * 10, page * 10).map(…)}
+ *
+ * - `count`: the number of items; `pageSize` per page (10)
+ * - `page`, `defaultPage`: the current page, from 1; `onPageChange`: called
+ *   with the new one. Past the last page (after filtering), it goes to the
+ *   last one
+ * - `siblingCount`: pages shown either side of the current one (1)
+ * - `summary`: shows "Showing 11–20 of 95 items" alongside
+ * - `noun`: what the items are called in the summary ('items')
+ * - `firstLast`: buttons for the first and last page, shown when some pages
+ *   are hidden behind an ellipsis (false to never show them)
+ * - `label`: the nav's accessible name
+ *
+ * By hand, Ark's parts are here too: Pagination.Root, PrevTrigger, Item,
+ * Ellipsis, NextTrigger, FirstTrigger, LastTrigger, Context.
+ */
+import { useEffect } from 'react';
+import { Pagination as Ark, usePagination } from '@ark-ui/react/pagination';
+import 'iconify-icon';
+import { cx, partsOf, useControllable, withParts } from '../utils.js';
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { formatNumber } from '../format/format.js';
+import '../theme.css';
+import './pagination.css';
+function PaginationShortcut({ count = 0, pageSize = 10, page: pageProp, defaultPage = 1, onPageChange, siblingCount = 1, summary = false, noun: nounProp, firstLast = true, label: labelProp, className, classes, ...rest }) {
+    const t = useMessages();
+    const locale = useLocale();
+    const noun = nounProp ?? t.pagination.noun;
+    const label = labelProp ?? t.pagination.label;
+    const fmt = (n) => formatNumber(n, { locale });
+    const part = partsOf('pagination', classes);
+    const [current, setPage] = useControllable(pageProp, defaultPage, onPageChange);
+    const totalPages = Math.max(1, Math.ceil(count / pageSize));
+    const page = Math.min(Math.max(1, current), totalPages);
+    // Past the last page (the list shrank): move to it.
+    useEffect(() => { if (current > totalPages)
+        setPage(totalPages); }, [current, totalPages, setPage]);
+    const api = usePagination({
+        count, pageSize, siblingCount, page, type: 'button', onPageChange: (details) => setPage(details.page),
+        ...(t.zag.pagination && { translations: t.zag.pagination }),
+    });
+    const from = count ? (page - 1) * pageSize + 1 : 0;
+    const to = Math.min(page * pageSize, count);
+    // First and last only help when some page numbers are hidden.
+    const edges = firstLast && api.pages.some((item) => item.type === 'ellipsis');
+    return (_jsxs(Ark.RootProvider, { value: api, ...rest, ...part('root'), className: cx(className, classes?.root), "aria-label": label, children: [summary && _jsx("span", { ...part('summary'), children: t.pagination.showing(fmt(from), fmt(to), fmt(count), noun) }), _jsxs("div", { ...part('pages'), children: [edges && _jsx(Ark.FirstTrigger, { ...part('first-trigger'), children: _jsx("iconify-icon", { icon: "lucide:chevrons-left" }) }), _jsx(Ark.PrevTrigger, { ...part('prev-trigger'), children: _jsx("iconify-icon", { icon: "lucide:chevron-left" }) }), api.pages.map((item, i) => item.type === 'page'
+                        ? _jsx(Ark.Item, { ...item, ...part('item'), children: item.value }, i)
+                        : _jsx(Ark.Ellipsis, { index: i, ...part('ellipsis'), children: "\u2026" }, i)), _jsx(Ark.NextTrigger, { ...part('next-trigger'), children: _jsx("iconify-icon", { icon: "lucide:chevron-right" }) }), edges && _jsx(Ark.LastTrigger, { ...part('last-trigger'), children: _jsx("iconify-icon", { icon: "lucide:chevrons-right" }) })] })] }));
+}
+export const Pagination = withParts(PaginationShortcut, {
+    Root: Ark.Root, RootProvider: Ark.RootProvider, Item: Ark.Item, Ellipsis: Ark.Ellipsis, PrevTrigger: Ark.PrevTrigger,
+    NextTrigger: Ark.NextTrigger, FirstTrigger: Ark.FirstTrigger, LastTrigger: Ark.LastTrigger, Context: Ark.Context,
+});

package/dist/pagination/pagination.css

@@ -0,0 +1,15 @@
+@layer ui {
+  [data-scope=pagination][data-part=root] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
+    color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; }
+  [data-scope=pagination][data-part=summary] { color: var(--ui-muted); font-size: 12px; }
+  [data-scope=pagination][data-part=pages] { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
+  [data-scope=pagination]:is([data-part=item], [data-part=first-trigger], [data-part=prev-trigger], [data-part=next-trigger], [data-part=last-trigger]) {
+    display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; box-sizing: border-box;
+    border: 1px solid transparent; border-radius: var(--ui-radius); background: transparent; color: inherit; font: inherit; cursor: pointer;
+    &:hover { background: var(--ui-hover); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
+    &:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
+  }
+  [data-scope=pagination][data-part=item][data-selected] { border-color: var(--ui-border); background: var(--ui-surface); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
+  [data-scope=pagination][data-part=ellipsis] { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; color: var(--ui-muted); }
+}

package/dist/password-input/PasswordInput.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A password input with a button to show or hide it. Other attributes go on
+ * the <input>.
+ *
+ *   <PasswordInput label="Password" value={password} onValueChange={setPassword} autoComplete="new-password" />
+ *
+ * - `value`, `defaultValue`; `onValueChange`: called with the new text
+ * - `icon`: an Iconify name before it
+ * - `visible`, `defaultVisible`; `onVisibilityChange`: whether the password shows
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <PasswordInput.Root>
+ *     <PasswordInput.Label>Password</PasswordInput.Label>
+ *     <PasswordInput.Control>
+ *       <PasswordInput.Input />
+ *       <PasswordInput.VisibilityTrigger><PasswordInput.Indicator fallback="Show">Hide</PasswordInput.Indicator></PasswordInput.VisibilityTrigger>
+ *     </PasswordInput.Control>
+ *   </PasswordInput.Root>
+ */
+import type { ComponentProps, ReactNode } from 'react';
+import { PasswordInput as Ark, type PasswordInputVisibilityChangeDetails } from '@ark-ui/react/password-input';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './password-input.css';
+export type PasswordInputProps = Omit<ComponentProps<'input'>, 'type'> & {
+    label?: ReactNode;
+    onValueChange?: (value: string) => void;
+    icon?: string | null;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibilityChange?: (visible: boolean, details: PasswordInputVisibilityChangeDetails) => void;
+    classes?: Classes<'root' | 'label' | 'control' | 'icon' | 'input' | 'visibilityTrigger'>;
+};
+declare function PasswordInputShortcut({ label, icon, visible, defaultVisible, onVisibilityChange, onValueChange, onChange, disabled, className, classes, ...rest }: PasswordInputProps): import("react").JSX.Element;
+export declare const PasswordInput: typeof PasswordInputShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Ark.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Ark.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    VisibilityTrigger: import("react").ForwardRefExoticComponent<Ark.VisibilityTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Ark.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/password-input/PasswordInput.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PasswordInput as Ark, usePasswordInput } from '@ark-ui/react/password-input';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partsOf, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './password-input.css';
+function PasswordInputShortcut({ label = null, icon = null, visible, defaultVisible, onVisibilityChange, onValueChange, onChange, disabled, className, classes, ...rest }) {
+    const t = useMessages();
+    const field = useFieldContext();
+    const part = partsOf('password-input', classes);
+    const password = usePasswordInput({
+        ...(visible !== undefined && { visible }),
+        ...(defaultVisible !== undefined && { defaultVisible }),
+        ...(disabled !== undefined && { disabled }),
+        ...(t.zag.passwordInput && { translations: t.zag.passwordInput }),
+        ...(onVisibilityChange && { onVisibilityChange: (details) => onVisibilityChange(details.visible, details) }),
+    });
+    function change(e) {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+    }
+    return (_jsxs(Ark.RootProvider, { value: password, ...part('root'), className: cx(className, classes?.root), children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsxs(Ark.Control, { ...part('control'), children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx(Ark.Input, { ...rest, ...part('input'), onChange: change }), _jsx(Ark.VisibilityTrigger, { ...part('visibility-trigger'), children: _jsx("iconify-icon", { icon: password.visible ? 'lucide:eye-off' : 'lucide:eye', "aria-hidden": "true" }) })] })] }));
+}
+export const PasswordInput = withParts(PasswordInputShortcut, {
+    Root: Ark.Root,
+    RootProvider: Ark.RootProvider,
+    Label: Ark.Label,
+    Control: Ark.Control,
+    Input: Ark.Input,
+    VisibilityTrigger: Ark.VisibilityTrigger,
+    Indicator: Ark.Indicator,
+    Context: Ark.Context,
+});

package/dist/password-input/password-input.css

@@ -0,0 +1,18 @@
+@layer ui {
+  [data-scope=password-input][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=password-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=password-input][data-part=control] { display: flex; align-items: center; gap: 0.5rem; height: var(--ui-control-height);
+    padding: 0 0.25rem 0 0.75rem; box-sizing: border-box; background: var(--ui-surface);
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px;
+    &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); }
+    &[data-disabled] { opacity: 0.5; } }
+  [data-scope=password-input][data-part=input] { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; outline: none;
+    color: inherit; font: inherit;
+    &::placeholder { color: var(--ui-muted); } }
+  [data-scope=password-input][data-part=icon] { display: block; width: 1em; height: 1em; font-size: 16px; color: var(--ui-muted); flex-shrink: 0; }
+  [data-scope=password-input][data-part=visibility-trigger] { display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem;
+    border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+}

package/dist/pin-input/PinInput.d.ts

@@ -0,0 +1,45 @@
+/**
+ * A code input: one box per character, for verification codes and PINs.
+ *
+ *   <PinInput label="Code" count={6} value={code} onValueChange={setCode} onComplete={verify} />
+ *
+ * - `value`, `defaultValue`: a string; `onValueChange`: called with it
+ * - `count`: how many boxes (4)
+ * - `type`: 'numeric', 'alphabetic' or 'alphanumeric'
+ * - `mask`: hide the characters, like a password
+ * - `placeholder`: shown in each empty box (none)
+ * - `otp`: offer one-time codes from the keyboard (autocomplete="one-time-code")
+ * - `onComplete`: called with the value once every box is filled
+ * - `name`: for plain form posts
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <PinInput.Root count={4}>
+ *     <PinInput.Label>PIN</PinInput.Label>
+ *     <PinInput.Control>{[0, 1, 2, 3].map((index) => <PinInput.Input key={index} index={index} />)}</PinInput.Control>
+ *     <PinInput.HiddenInput />
+ *   </PinInput.Root>
+ */
+import type { ReactNode } from 'react';
+import { PinInput as Ark, type PinInputValueChangeDetails } from '@ark-ui/react/pin-input';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './pin-input.css';
+export type PinInputProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'onValueComplete' | 'label'> & {
+    label?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, details: PinInputValueChangeDetails) => void;
+    onComplete?: (value: string, details: PinInputValueChangeDetails) => void;
+    classes?: Classes<'root' | 'label' | 'control' | 'input'>;
+};
+declare function PinInputShortcut({ label, count, type, placeholder, value, defaultValue, onValueChange, onComplete, className, classes, ...rest }: PinInputProps): import("react").JSX.Element;
+export declare const PinInput: typeof PinInputShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Ark.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<Ark.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/pin-input/PinInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PinInput as Ark } from '@ark-ui/react/pin-input';
+import { useFieldContext } from '@ark-ui/react/field';
+import { cx, partsOf, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './pin-input.css';
+function PinInputShortcut({ label = null, count = 4, type = 'numeric', placeholder = '', value, defaultValue, onValueChange, onComplete, className, classes, ...rest }) {
+    const t = useMessages();
+    const field = useFieldContext();
+    const part = partsOf('pin-input', classes);
+    const boxes = (text) => text.split('').slice(0, count);
+    return (_jsxs(Ark.Root, { ...(t.zag.pinInput && { translations: t.zag.pinInput }), ...rest, ...part('root'), className: cx(className, classes?.root), count: count, type: type, placeholder: placeholder, ...(value !== undefined && { value: boxes(value) }), ...(defaultValue !== undefined && { defaultValue: boxes(defaultValue) }), ...(onValueChange && { onValueChange: (details) => onValueChange(details.valueAsString, details) }), ...(onComplete && { onValueComplete: (details) => onComplete(details.valueAsString, details) }), children: [label && !field && _jsx(Ark.Label, { ...part('label'), children: label }), _jsx(Ark.Control, { ...part('control'), children: Array.from({ length: count }, (_, index) => _jsx(Ark.Input, { index: index, ...part('input') }, index)) }), _jsx(Ark.HiddenInput, {})] }));
+}
+export const PinInput = withParts(PinInputShortcut, {
+    Root: Ark.Root,
+    Label: Ark.Label,
+    Control: Ark.Control,
+    Input: Ark.Input,
+    HiddenInput: Ark.HiddenInput,
+    Context: Ark.Context,
+});

package/dist/pin-input/pin-input.css

@@ -0,0 +1,13 @@
+@layer ui {
+  [data-scope=pin-input][data-part=root] { display: block; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=pin-input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=pin-input][data-part=control] { display: flex; gap: 0.5rem; }
+  [data-scope=pin-input][data-part=input] { width: var(--ui-control-height); height: var(--ui-control-height); padding: 0; box-sizing: border-box;
+    text-align: center; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    color: inherit; font-family: inherit; font-size: 16px; font-weight: 500; outline: none;
+    &::placeholder { color: var(--ui-muted); }
+    &:focus { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &:is([data-invalid], [aria-invalid=true]) { border-color: var(--ui-danger); }
+    &[data-complete] { border-color: var(--ui-accent); }
+    &:disabled { opacity: 0.5; } }
+}

package/dist/popover/Popover.d.ts

@@ -0,0 +1,65 @@
+/**
+ * A popover: a panel that opens from a trigger, for settings or details.
+ *
+ *   <Popover heading="Appearance" closable placement="bottom-end"
+ *     trigger={<Button icon="lucide:palette" aria-label="Appearance" />}>
+ *     …content…
+ *   </Popover>
+ *
+ * - `trigger`: the element that opens it (it gets the trigger's props, so a
+ *   component must pass them on, as Button does)
+ * - `heading`, `description`: a header for the panel
+ * - `closable`: a close button in the corner
+ * - `arrow`: points the panel at its trigger
+ * - `modal`: traps focus and blocks the page behind it
+ * - `open`, `defaultOpen`; `onOpenChange`
+ * - `placement`: where it opens ('bottom')
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Popover.Root>
+ *     <Popover.Trigger asChild><Button>Filters</Button></Popover.Trigger>
+ *     <Popover.Positioner>
+ *       <Popover.Content><Popover.Title>Filters</Popover.Title>…<Popover.CloseTrigger>×</Popover.CloseTrigger></Popover.Content>
+ *     </Popover.Positioner>
+ *   </Popover.Root>
+ */
+import type { ReactElement, ReactNode } from 'react';
+import { Popover as Ark, type PopoverOpenChangeDetails } from '@ark-ui/react/popover';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './popover.css';
+export type PopoverProps = Omit<Ark.ContentProps, 'children'> & {
+    trigger?: ReactElement | null;
+    heading?: ReactNode;
+    description?: ReactNode;
+    closable?: boolean;
+    arrow?: boolean;
+    modal?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
+    placement?: NonNullable<Ark.RootProps['positioning']>['placement'];
+    classes?: Classes<'positioner' | 'content' | 'arrow' | 'arrowTip' | 'header' | 'title' | 'description' | 'closeTrigger'>;
+    children?: ReactNode;
+};
+declare function PopoverShortcut({ trigger, heading, description, closable, arrow, modal, open, defaultOpen, onOpenChange, placement, className, classes, children, ...rest }: PopoverProps): import("react").JSX.Element;
+export declare const Popover: typeof PopoverShortcut & {
+    Root: (props: Ark.RootProps) => import("react").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Anchor: import("react").ForwardRefExoticComponent<Ark.AnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Ark.TitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Ark.DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+    CloseTrigger: import("react").ForwardRefExoticComponent<Ark.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Ark.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<Ark.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+    Header: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/popover/Popover.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as Ark } from '@ark-ui/react/popover';
+import 'iconify-icon';
+import { cx, on, partOf, partsOf, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './popover.css';
+function PopoverShortcut({ trigger = null, heading = null, description = null, closable = false, arrow = false, modal = false, open, defaultOpen, onOpenChange, placement = 'bottom', className, classes, children, ...rest }) {
+    const t = useMessages();
+    const part = partsOf('popover', classes);
+    return (_jsxs(Ark.Root, { modal: modal, positioning: { placement, strategy: 'fixed' }, ...(open !== undefined && { open }), ...(defaultOpen !== undefined && { defaultOpen }), ...on('onOpenChange', onOpenChange, (details) => details.open), children: [trigger && _jsx(Ark.Trigger, { asChild: true, children: trigger }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsxs(Ark.Content, { ...rest, ...part('content'), className: cx(className, classes?.content), children: [arrow && _jsx(Ark.Arrow, { ...part('arrow'), children: _jsx(Ark.ArrowTip, { ...part('arrow-tip') }) }), (heading || description) && (_jsxs("div", { ...part('header'), children: [heading && _jsx(Ark.Title, { ...part('title'), children: heading }), description && _jsx(Ark.Description, { ...part('description'), children: description })] })), children, closable && _jsx(Ark.CloseTrigger, { ...part('close-trigger'), "aria-label": t.common.close, children: _jsx("iconify-icon", { icon: "lucide:x" }) })] }) })] }));
+}
+export const Popover = withParts(PopoverShortcut, {
+    Root: Ark.Root,
+    Trigger: Ark.Trigger,
+    Anchor: Ark.Anchor,
+    Positioner: Ark.Positioner,
+    Content: Ark.Content,
+    Title: Ark.Title,
+    Description: Ark.Description,
+    CloseTrigger: Ark.CloseTrigger,
+    Arrow: Ark.Arrow,
+    ArrowTip: Ark.ArrowTip,
+    Context: Ark.Context,
+    Header: partOf('popover', 'header'),
+});

package/dist/popover/popover.css

@@ -0,0 +1,16 @@
+@layer ui {
+  /* Zag copies the content's z-index onto its positioner. */
+  [data-scope=popover][data-part=content] { z-index: 50; position: relative; width: 18rem; max-width: calc(100vw - 32px);
+    padding: 1rem; box-sizing: border-box; outline: none; font-weight: 400;
+    background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow);
+    --arrow-size: 12px; --arrow-background: var(--ui-surface); }
+  [data-scope=popover][data-part=arrow-tip] { border-top: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); }
+  [data-scope=popover][data-part=header] { padding-right: 1.5rem; margin-bottom: 0.75rem;
+    &:last-child { margin-bottom: 0; } }
+  [data-scope=popover][data-part=title] { font-weight: 600; }
+  [data-scope=popover][data-part=description] { margin: 0.25rem 0 0; color: var(--ui-muted); }
+  [data-scope=popover][data-part=close-trigger] { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center;
+    width: 1.75rem; height: 1.75rem; border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); } }
+}