@entifix/react-controls 0.18.2 → 0.20.0

package/dist/ui/atoms/money/money-math.d.ts

@@ -0,0 +1,21 @@
+import type { MoneyFormat } from '@entifix/core';
+export type MoneyUnit = MoneyFormat['unit'];
+/**
+ * How many minor units a currency has, as `Intl` resolves it: 2 for GTQ and
+ * USD, 0 for JPY, 3 for KWD. Read from the platform rather than a table, so a
+ * currency nobody here thought of is still right.
+ */
+export declare function fractionDigits(currency: string): number;
+/** The amount in major units (64.99), whichever unit it is stored in. */
+export declare function toMajorUnits(amount: number, currency: string, unit: MoneyUnit): number;
+/** A major-unit amount back in the unit it is stored in, rounded to it. */
+export declare function fromMajorUnits(major: number, currency: string, unit: MoneyUnit): number;
+/**
+ * The amount as the reader's locale writes money: `Q64.99` in `en`, `64,99 GTQ`
+ * or similar in `es`. Never the bare stored number — a till once printed
+ * 6499 GTQ for 64,99.
+ */
+export declare function formatMoney(amount: number, currency: string, unit: MoneyUnit, locale: string): string;
+/** The currency a money member reads in: fixed, or the record's own member. */
+export declare function currencyOf(money: MoneyFormat, record: Readonly<Record<string, unknown>> | undefined): string | undefined;
+//# sourceMappingURL=money-math.d.ts.map

package/dist/ui/atoms/money/money-math.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-math.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/money/money-math.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CASvD;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,SAAS,GACd,MAAM,CAER;AAED,2EAA2E;AAC3E,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,SAAS,GACd,MAAM,CAKR;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,MAAM,GACb,MAAM,CAIR;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CACxB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,GACpD,MAAM,GAAG,SAAS,CAIpB"}

package/dist/ui/atoms/money/money-math.js

@@ -0,0 +1,36 @@
+/**
+ * How many minor units a currency has, as `Intl` resolves it: 2 for GTQ and
+ * USD, 0 for JPY, 3 for KWD. Read from the platform rather than a table, so a
+ * currency nobody here thought of is still right.
+ */ export function fractionDigits(currency) {
+    var _resolvedOptions_maximumFractionDigits;
+    // Always set for `style: 'currency'`; the fallback only satisfies the type.
+    /* v8 ignore next */ return (_resolvedOptions_maximumFractionDigits = new Intl.NumberFormat('en', {
+        style: 'currency',
+        currency
+    }).resolvedOptions().maximumFractionDigits) != null ? _resolvedOptions_maximumFractionDigits : 2;
+}
+/** The amount in major units (64.99), whichever unit it is stored in. */ export function toMajorUnits(amount, currency, unit) {
+    return unit === 'major' ? amount : amount / 10 ** fractionDigits(currency);
+}
+/** A major-unit amount back in the unit it is stored in, rounded to it. */ export function fromMajorUnits(major, currency, unit) {
+    const digits = fractionDigits(currency);
+    return unit === 'major' ? Number(major.toFixed(digits)) : Math.round(major * 10 ** digits);
+}
+/**
+ * The amount as the reader's locale writes money: `Q64.99` in `en`, `64,99 GTQ`
+ * or similar in `es`. Never the bare stored number — a till once printed
+ * 6499 GTQ for 64,99.
+ */ export function formatMoney(amount, currency, unit, locale) {
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency
+    }).format(toMajorUnits(amount, currency, unit));
+}
+/** The currency a money member reads in: fixed, or the record's own member. */ export function currencyOf(money, record) {
+    if (money.currency !== undefined) return money.currency;
+    const value = record == null ? void 0 : record[money.currencyMember];
+    return typeof value === 'string' && value !== '' ? value : undefined;
+}
+
+//# sourceMappingURL=money-math.js.map

package/dist/ui/atoms/money/money-math.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/atoms/money/money-math.ts"],"sourcesContent":["import type { MoneyFormat } from '@entifix/core';\n\nexport type MoneyUnit = MoneyFormat['unit'];\n\n/**\n * How many minor units a currency has, as `Intl` resolves it: 2 for GTQ and\n * USD, 0 for JPY, 3 for KWD. Read from the platform rather than a table, so a\n * currency nobody here thought of is still right.\n */\nexport function fractionDigits(currency: string): number {\n  // Always set for `style: 'currency'`; the fallback only satisfies the type.\n  /* v8 ignore next */\n  return (\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency,\n    }).resolvedOptions().maximumFractionDigits ?? 2\n  );\n}\n\n/** The amount in major units (64.99), whichever unit it is stored in. */\nexport function toMajorUnits(\n  amount: number,\n  currency: string,\n  unit: MoneyUnit,\n): number {\n  return unit === 'major' ? amount : amount / 10 ** fractionDigits(currency);\n}\n\n/** A major-unit amount back in the unit it is stored in, rounded to it. */\nexport function fromMajorUnits(\n  major: number,\n  currency: string,\n  unit: MoneyUnit,\n): number {\n  const digits = fractionDigits(currency);\n  return unit === 'major'\n    ? Number(major.toFixed(digits))\n    : Math.round(major * 10 ** digits);\n}\n\n/**\n * The amount as the reader's locale writes money: `Q64.99` in `en`, `64,99 GTQ`\n * or similar in `es`. Never the bare stored number — a till once printed\n * 6499 GTQ for 64,99.\n */\nexport function formatMoney(\n  amount: number,\n  currency: string,\n  unit: MoneyUnit,\n  locale: string,\n): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(\n    toMajorUnits(amount, currency, unit),\n  );\n}\n\n/** The currency a money member reads in: fixed, or the record's own member. */\nexport function currencyOf(\n  money: MoneyFormat,\n  record: Readonly<Record<string, unknown>> | undefined,\n): string | undefined {\n  if (money.currency !== undefined) return money.currency;\n  const value = record?.[money.currencyMember];\n  return typeof value === 'string' && value !== '' ? value : undefined;\n}\n"],"names":["fractionDigits","currency","Intl","NumberFormat","style","resolvedOptions","maximumFractionDigits","toMajorUnits","amount","unit","fromMajorUnits","major","digits","Number","toFixed","Math","round","formatMoney","locale","format","currencyOf","money","record","undefined","value","currencyMember"],"mappings":"AAIA;;;;CAIC,GACD,OAAO,SAASA,eAAeC,QAAgB;QAI3C;IAHF,4EAA4E;IAC5E,kBAAkB,GAClB,QACE,yCAAA,IAAIC,KAAKC,YAAY,CAAC,MAAM;QAC1BC,OAAO;QACPH;IACF,GAAGI,eAAe,GAAGC,qBAAqB,YAH1C,yCAG8C;AAElD;AAEA,uEAAuE,GACvE,OAAO,SAASC,aACdC,MAAc,EACdP,QAAgB,EAChBQ,IAAe;IAEf,OAAOA,SAAS,UAAUD,SAASA,SAAS,MAAMR,eAAeC;AACnE;AAEA,yEAAyE,GACzE,OAAO,SAASS,eACdC,KAAa,EACbV,QAAgB,EAChBQ,IAAe;IAEf,MAAMG,SAASZ,eAAeC;IAC9B,OAAOQ,SAAS,UACZI,OAAOF,MAAMG,OAAO,CAACF,WACrBG,KAAKC,KAAK,CAACL,QAAQ,MAAMC;AAC/B;AAEA;;;;CAIC,GACD,OAAO,SAASK,YACdT,MAAc,EACdP,QAAgB,EAChBQ,IAAe,EACfS,MAAc;IAEd,OAAO,IAAIhB,KAAKC,YAAY,CAACe,QAAQ;QAAEd,OAAO;QAAYH;IAAS,GAAGkB,MAAM,CAC1EZ,aAAaC,QAAQP,UAAUQ;AAEnC;AAEA,6EAA6E,GAC7E,OAAO,SAASW,WACdC,KAAkB,EAClBC,MAAqD;IAErD,IAAID,MAAMpB,QAAQ,KAAKsB,WAAW,OAAOF,MAAMpB,QAAQ;IACvD,MAAMuB,QAAQF,0BAAAA,MAAQ,CAACD,MAAMI,cAAc,CAAC;IAC5C,OAAO,OAAOD,UAAU,YAAYA,UAAU,KAAKA,QAAQD;AAC7D"}

package/dist/ui/atoms/money/money.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type MoneyUnit } from './money-math.js';
+export interface MoneyProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+    amount: number;
+    /** ISO 4217, e.g. `GTQ`. */
+    currency: string;
+    /** Whether `amount` counts minor units (cents) or major ones. */
+    unit: MoneyUnit;
+    /** The reader's locale; a client caller reads it with the `useLocale` hook. */
+    locale: string;
+}
+/**
+ * An amount of money, formatted in the reader's locale with its currency.
+ * `unit: 'minor'` divides by the currency's own minor-unit count, so JPY and
+ * KWD are right too. Tabular figures, so a column of prices aligns on the
+ * digit. Server-safe.
+ */
+export declare function Money({ amount, currency, unit, locale, className, ...props }: MoneyProps): import("react").JSX.Element;
+//# sourceMappingURL=money.d.ts.map

package/dist/ui/atoms/money/money.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/money/money.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,wBAAwB,CAAC,MAAM,CAAC,EAChC,UAAU,CACX;IACC,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,IAAI,EAAE,SAAS,CAAC;IAChB,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,+BASZ"}

package/dist/ui/atoms/money/money.js

@@ -0,0 +1,26 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { formatMoney } from './money-math.js';
+/**
+ * An amount of money, formatted in the reader's locale with its currency.
+ * `unit: 'minor'` divides by the currency's own minor-unit count, so JPY and
+ * KWD are right too. Tabular figures, so a column of prices aligns on the
+ * digit. Server-safe.
+ */ export function Money(_0) {
+    let { amount, currency, unit, locale, className } = _0, props = _object_without_properties_loose(_0, [
+        "amount",
+        "currency",
+        "unit",
+        "locale",
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx("span", _extends({
+        className: cn('whitespace-nowrap tabular-nums', className)
+    }, props, {
+        children: formatMoney(amount, currency, unit, locale)
+    }));
+}
+
+//# sourceMappingURL=money.js.map

package/dist/ui/atoms/money/money.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/atoms/money/money.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '../../utils/cn.js';\nimport { formatMoney, type MoneyUnit } from './money-math.js';\n\nexport interface MoneyProps extends Omit<\n  ComponentPropsWithoutRef<'span'>,\n  'children'\n> {\n  amount: number;\n  /** ISO 4217, e.g. `GTQ`. */\n  currency: string;\n  /** Whether `amount` counts minor units (cents) or major ones. */\n  unit: MoneyUnit;\n  /** The reader's locale; a client caller reads it with the `useLocale` hook. */\n  locale: string;\n}\n\n/**\n * An amount of money, formatted in the reader's locale with its currency.\n * `unit: 'minor'` divides by the currency's own minor-unit count, so JPY and\n * KWD are right too. Tabular figures, so a column of prices aligns on the\n * digit. Server-safe.\n */\nexport function Money({\n  amount,\n  currency,\n  unit,\n  locale,\n  className,\n  ...props\n}: MoneyProps) {\n  return (\n    <span\n      className={cn('whitespace-nowrap tabular-nums', className)}\n      {...props}\n    >\n      {formatMoney(amount, currency, unit, locale)}\n    </span>\n  );\n}\n"],"names":["cn","formatMoney","Money","amount","currency","unit","locale","className","props","span"],"mappings":";;;AAEA,SAASA,EAAE,QAAQ,oBAAoB;AACvC,SAASC,WAAW,QAAwB,kBAAkB;AAe9D;;;;;CAKC,GACD,OAAO,SAASC,MAAM,EAOT;QAPS,EACpBC,MAAM,EACNC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,SAAS,EAEE,OADRC;;;;;;;IAEH,qBACE,KAACC;QACCF,WAAWP,GAAG,kCAAkCO;OAC5CC;kBAEHP,YAAYE,QAAQC,UAAUC,MAAMC;;AAG3C"}

package/dist/ui/atoms/number-input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './number-input.js';
+export * from './quantity-input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/atoms/number-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/number-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

package/dist/ui/atoms/number-input/index.js

@@ -0,0 +1,4 @@
+export * from './number-input.js';
+export * from './quantity-input.js';
+
+//# sourceMappingURL=index.js.map

package/dist/ui/atoms/number-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/atoms/number-input/index.ts"],"sourcesContent":["export * from './number-input.js';\nexport * from './quantity-input.js';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,sBAAsB"}

package/dist/ui/atoms/number-input/number-input.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type NumberInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'>;
+/**
+ * A number typed as text: `inputmode` brings up the numeric keyboard, and the
+ * value stays exactly what was typed, in the reader's own decimal separator,
+ * rather than a native `type="number"` that rejects `64,99` in a Spanish
+ * locale and spins on a scroll wheel. Tabular figures. Server-safe.
+ */
+export declare function NumberInput({ className, inputMode, ...props }: NumberInputProps): import("react").JSX.Element;
+//# sourceMappingURL=number-input.d.ts.map

package/dist/ui/atoms/number-input/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/number-input/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAE/E;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,SAAqB,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,+BASlB"}

package/dist/ui/atoms/number-input/number-input.js

@@ -0,0 +1,23 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { TextInput } from '../field/field.js';
+/**
+ * A number typed as text: `inputmode` brings up the numeric keyboard, and the
+ * value stays exactly what was typed, in the reader's own decimal separator,
+ * rather than a native `type="number"` that rejects `64,99` in a Spanish
+ * locale and spins on a scroll wheel. Tabular figures. Server-safe.
+ */ export function NumberInput(_0) {
+    let { className, inputMode = 'decimal' } = _0, props = _object_without_properties_loose(_0, [
+        "className",
+        "inputMode"
+    ]);
+    return /*#__PURE__*/ _jsx(TextInput, _extends({
+        type: "text",
+        inputMode: inputMode,
+        className: cn('tabular-nums', className)
+    }, props));
+}
+
+//# sourceMappingURL=number-input.js.map

package/dist/ui/atoms/number-input/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/atoms/number-input/number-input.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '../../utils/cn.js';\nimport { TextInput } from '../field/field.js';\n\nexport type NumberInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'>;\n\n/**\n * A number typed as text: `inputmode` brings up the numeric keyboard, and the\n * value stays exactly what was typed, in the reader's own decimal separator,\n * rather than a native `type=\"number\"` that rejects `64,99` in a Spanish\n * locale and spins on a scroll wheel. Tabular figures. Server-safe.\n */\nexport function NumberInput({\n  className,\n  inputMode = 'decimal',\n  ...props\n}: NumberInputProps) {\n  return (\n    <TextInput\n      type=\"text\"\n      inputMode={inputMode}\n      className={cn('tabular-nums', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["cn","TextInput","NumberInput","className","inputMode","props","type"],"mappings":";;;AAEA,SAASA,EAAE,QAAQ,oBAAoB;AACvC,SAASC,SAAS,QAAQ,oBAAoB;AAI9C;;;;;CAKC,GACD,OAAO,SAASC,YAAY,EAIT;QAJS,EAC1BC,SAAS,EACTC,YAAY,SAAS,EAEJ,OADdC;;;;IAEH,qBACE,KAACJ;QACCK,MAAK;QACLF,WAAWA;QACXD,WAAWH,GAAG,gBAAgBG;OAC1BE;AAGV"}

package/dist/ui/atoms/number-input/quantity-input.d.ts

@@ -0,0 +1,29 @@
+export interface QuantityInputProps {
+    /** What is being counted; names the spinbutton and both of its buttons. */
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    id?: string;
+    /**
+     * Posts the count with the form it sits in, under this name — a server
+     * action's form works without JavaScript, where the field is the only part
+     * a reader can change, so the field itself carries it. The server clamps
+     * what it receives: a typed value is only clamped here once committed.
+     */
+    name?: string;
+    className?: string;
+}
+/**
+ * A count, on the WAI-ARIA spinbutton pattern: Up and Down step it, Home and
+ * End jump to its bounds, and what is typed is committed on Enter or on
+ * leaving the field, clamped to the bounds. The − and + beside it are named
+ * "Decrease {label}" and "Increase {label}" and sit at `--target-min`; they are
+ * out of the Tab order, as the pattern has them, because the arrow keys
+ * already do what they do.
+ */
+export declare function QuantityInput({ label, value, onChange, min, max, step, disabled, id, name, className, }: QuantityInputProps): import("react").JSX.Element;
+//# sourceMappingURL=quantity-input.d.ts.map

package/dist/ui/atoms/number-input/quantity-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-input.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/number-input/quantity-input.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAG,EACH,IAAQ,EACR,QAAgB,EAChB,EAAE,EACF,IAAI,EACJ,SAAS,GACV,EAAE,kBAAkB,+BA8EpB"}

package/dist/ui/atoms/number-input/quantity-input.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useT } from '../../../i18n/index.js';
+import { cn } from '../../utils/cn.js';
+const STEP_BUTTON = 'flex min-h-(--target-min) min-w-(--target-min) shrink-0 items-center justify-center rounded-md border border-border-control bg-surface-elevated text-content hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50';
+/**
+ * A count, on the WAI-ARIA spinbutton pattern: Up and Down step it, Home and
+ * End jump to its bounds, and what is typed is committed on Enter or on
+ * leaving the field, clamped to the bounds. The − and + beside it are named
+ * "Decrease {label}" and "Increase {label}" and sit at `--target-min`; they are
+ * out of the Tab order, as the pattern has them, because the arrow keys
+ * already do what they do.
+ */ export function QuantityInput({ label, value, onChange, min = 0, max, step = 1, disabled = false, id, name, className }) {
+    const t = useT();
+    const [text, setText] = useState(String(value));
+    useEffect(()=>{
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- the value moved from outside (a step, a reset)
+        setText(String(value));
+    }, [
+        value
+    ]);
+    const clamp = (next)=>Math.min(max != null ? max : Number.POSITIVE_INFINITY, Math.max(min, next));
+    const set = (next)=>{
+        const clamped = clamp(next);
+        setText(String(clamped));
+        if (clamped !== value) onChange(clamped);
+    };
+    const commit = ()=>{
+        const typed = Number.parseInt(text, 10);
+        set(Number.isNaN(typed) ? value : typed);
+    };
+    const onKeyDown = (event)=>{
+        const next = {
+            ArrowUp: value + step,
+            ArrowDown: value - step,
+            Home: min,
+            End: max
+        }[event.key];
+        if (event.key === 'Enter') {
+            commit();
+            return;
+        }
+        if (next === undefined) return;
+        event.preventDefault();
+        set(next);
+    };
+    return /*#__PURE__*/ _jsxs("span", {
+        className: cn('inline-flex items-center gap-3xs', className),
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                tabIndex: -1,
+                "aria-label": t('quantity.decrease', {
+                    label
+                }),
+                disabled: disabled || value <= min,
+                onClick: ()=>set(value - step),
+                className: STEP_BUTTON,
+                children: /*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    children: "−"
+                })
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                id: id,
+                name: name,
+                type: "text",
+                role: "spinbutton",
+                inputMode: "numeric",
+                "aria-label": label,
+                "aria-valuenow": value,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                disabled: disabled,
+                value: text,
+                onChange: (event)=>setText(event.currentTarget.value),
+                onBlur: commit,
+                onKeyDown: onKeyDown,
+                className: "w-16 min-h-(--target-min) rounded-lg border border-border-control bg-surface-elevated px-2xs py-3xs text-center text-step-sm text-content tabular-nums focus-ring disabled:cursor-not-allowed disabled:opacity-50"
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                tabIndex: -1,
+                "aria-label": t('quantity.increase', {
+                    label
+                }),
+                disabled: disabled || max !== undefined && value >= max,
+                onClick: ()=>set(value + step),
+                className: STEP_BUTTON,
+                children: /*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    children: "+"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=quantity-input.js.map

package/dist/ui/atoms/number-input/quantity-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/atoms/number-input/quantity-input.tsx"],"sourcesContent":["'use client';\n\nimport { type KeyboardEvent, useEffect, useState } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { cn } from '../../utils/cn.js';\n\nexport interface QuantityInputProps {\n  /** What is being counted; names the spinbutton and both of its buttons. */\n  label: string;\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  id?: string;\n  /**\n   * Posts the count with the form it sits in, under this name — a server\n   * action's form works without JavaScript, where the field is the only part\n   * a reader can change, so the field itself carries it. The server clamps\n   * what it receives: a typed value is only clamped here once committed.\n   */\n  name?: string;\n  className?: string;\n}\n\nconst STEP_BUTTON =\n  'flex min-h-(--target-min) min-w-(--target-min) shrink-0 items-center justify-center rounded-md border border-border-control bg-surface-elevated text-content hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50';\n\n/**\n * A count, on the WAI-ARIA spinbutton pattern: Up and Down step it, Home and\n * End jump to its bounds, and what is typed is committed on Enter or on\n * leaving the field, clamped to the bounds. The − and + beside it are named\n * \"Decrease {label}\" and \"Increase {label}\" and sit at `--target-min`; they are\n * out of the Tab order, as the pattern has them, because the arrow keys\n * already do what they do.\n */\nexport function QuantityInput({\n  label,\n  value,\n  onChange,\n  min = 0,\n  max,\n  step = 1,\n  disabled = false,\n  id,\n  name,\n  className,\n}: QuantityInputProps) {\n  const t = useT();\n  const [text, setText] = useState(String(value));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- the value moved from outside (a step, a reset)\n    setText(String(value));\n  }, [value]);\n\n  const clamp = (next: number) =>\n    Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min, next));\n  const set = (next: number) => {\n    const clamped = clamp(next);\n    setText(String(clamped));\n    if (clamped !== value) onChange(clamped);\n  };\n  const commit = () => {\n    const typed = Number.parseInt(text, 10);\n    set(Number.isNaN(typed) ? value : typed);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const next = {\n      ArrowUp: value + step,\n      ArrowDown: value - step,\n      Home: min,\n      End: max,\n    }[event.key];\n    if (event.key === 'Enter') {\n      commit();\n      return;\n    }\n    if (next === undefined) return;\n    event.preventDefault();\n    set(next);\n  };\n\n  return (\n    <span className={cn('inline-flex items-center gap-3xs', className)}>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-label={t('quantity.decrease', { label })}\n        disabled={disabled || value <= min}\n        onClick={() => set(value - step)}\n        className={STEP_BUTTON}\n      >\n        <span aria-hidden=\"true\">−</span>\n      </button>\n      <input\n        id={id}\n        name={name}\n        type=\"text\"\n        role=\"spinbutton\"\n        inputMode=\"numeric\"\n        aria-label={label}\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        disabled={disabled}\n        value={text}\n        onChange={event => setText(event.currentTarget.value)}\n        onBlur={commit}\n        onKeyDown={onKeyDown}\n        className=\"w-16 min-h-(--target-min) rounded-lg border border-border-control bg-surface-elevated px-2xs py-3xs text-center text-step-sm text-content tabular-nums focus-ring disabled:cursor-not-allowed disabled:opacity-50\"\n      />\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-label={t('quantity.increase', { label })}\n        disabled={disabled || (max !== undefined && value >= max)}\n        onClick={() => set(value + step)}\n        className={STEP_BUTTON}\n      >\n        <span aria-hidden=\"true\">+</span>\n      </button>\n    </span>\n  );\n}\n"],"names":["useEffect","useState","useT","cn","STEP_BUTTON","QuantityInput","label","value","onChange","min","max","step","disabled","id","name","className","t","text","setText","String","clamp","next","Math","Number","POSITIVE_INFINITY","set","clamped","commit","typed","parseInt","isNaN","onKeyDown","event","ArrowUp","ArrowDown","Home","End","key","undefined","preventDefault","span","button","type","tabIndex","aria-label","onClick","aria-hidden","input","role","inputMode","aria-valuenow","aria-valuemin","aria-valuemax","currentTarget","onBlur"],"mappings":"AAAA;;AAEA,SAA6BA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,EAAE,QAAQ,oBAAoB;AAsBvC,MAAMC,cACJ;AAEF;;;;;;;CAOC,GACD,OAAO,SAASC,cAAc,EAC5BC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,MAAM,CAAC,EACPC,GAAG,EACHC,OAAO,CAAC,EACRC,WAAW,KAAK,EAChBC,EAAE,EACFC,IAAI,EACJC,SAAS,EACU;IACnB,MAAMC,IAAId;IACV,MAAM,CAACe,MAAMC,QAAQ,GAAGjB,SAASkB,OAAOZ;IAExCP,UAAU;QACR,6GAA6G;QAC7GkB,QAAQC,OAAOZ;IACjB,GAAG;QAACA;KAAM;IAEV,MAAMa,QAAQ,CAACC,OACbC,KAAKb,GAAG,CAACC,cAAAA,MAAOa,OAAOC,iBAAiB,EAAEF,KAAKZ,GAAG,CAACD,KAAKY;IAC1D,MAAMI,MAAM,CAACJ;QACX,MAAMK,UAAUN,MAAMC;QACtBH,QAAQC,OAAOO;QACf,IAAIA,YAAYnB,OAAOC,SAASkB;IAClC;IACA,MAAMC,SAAS;QACb,MAAMC,QAAQL,OAAOM,QAAQ,CAACZ,MAAM;QACpCQ,IAAIF,OAAOO,KAAK,CAACF,SAASrB,QAAQqB;IACpC;IAEA,MAAMG,YAAY,CAACC;QACjB,MAAMX,OAAO;YACXY,SAAS1B,QAAQI;YACjBuB,WAAW3B,QAAQI;YACnBwB,MAAM1B;YACN2B,KAAK1B;QACP,CAAC,CAACsB,MAAMK,GAAG,CAAC;QACZ,IAAIL,MAAMK,GAAG,KAAK,SAAS;YACzBV;YACA;QACF;QACA,IAAIN,SAASiB,WAAW;QACxBN,MAAMO,cAAc;QACpBd,IAAIJ;IACN;IAEA,qBACE,MAACmB;QAAKzB,WAAWZ,GAAG,oCAAoCY;;0BACtD,KAAC0B;gBACCC,MAAK;gBACLC,UAAU,CAAC;gBACXC,cAAY5B,EAAE,qBAAqB;oBAAEV;gBAAM;gBAC3CM,UAAUA,YAAYL,SAASE;gBAC/BoC,SAAS,IAAMpB,IAAIlB,QAAQI;gBAC3BI,WAAWX;0BAEX,cAAA,KAACoC;oBAAKM,eAAY;8BAAO;;;0BAE3B,KAACC;gBACClC,IAAIA;gBACJC,MAAMA;gBACN4B,MAAK;gBACLM,MAAK;gBACLC,WAAU;gBACVL,cAAYtC;gBACZ4C,iBAAe3C;gBACf4C,iBAAe1C;gBACf2C,iBAAe1C;gBACfE,UAAUA;gBACVL,OAAOU;gBACPT,UAAUwB,CAAAA,QAASd,QAAQc,MAAMqB,aAAa,CAAC9C,KAAK;gBACpD+C,QAAQ3B;gBACRI,WAAWA;gBACXhB,WAAU;;0BAEZ,KAAC0B;gBACCC,MAAK;gBACLC,UAAU,CAAC;gBACXC,cAAY5B,EAAE,qBAAqB;oBAAEV;gBAAM;gBAC3CM,UAAUA,YAAaF,QAAQ4B,aAAa/B,SAASG;gBACrDmC,SAAS,IAAMpB,IAAIlB,QAAQI;gBAC3BI,WAAWX;0BAEX,cAAA,KAACoC;oBAAKM,eAAY;8BAAO;;;;;AAIjC"}

package/dist/ui/atoms/skeleton/skeleton.js

@@ -15,7 +15,7 @@ import { cn } from '../../utils/cn.js';
     return /*#__PURE__*/ _jsx("div", _extends({
         "aria-hidden": "true",
         "data-testid": "skeleton",
-        className: cn('animate-pulse bg-border/60 motion-reduce:animate-none', shape === 'line' && 'h-[1em] rounded-full', shape === 'block' && 'rounded-md', shape === 'circle' && 'aspect-square rounded-full', className)
+        className: cn('animate-pulse bg-border/60 motion-reduce:animate-none', shape === 'line' && 'h-(--glyph-block) rounded-full', shape === 'block' && 'rounded-md', shape === 'circle' && 'aspect-square rounded-full', className)
     }, props));
 }
 /** A stack of line skeletons standing in for a block of text. */ export function SkeletonText({ lines = 3, className }) {

package/dist/ui/atoms/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/atoms/skeleton/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport type SkeletonShape = 'line' | 'block' | 'circle';\n\nexport interface SkeletonProps extends ComponentPropsWithoutRef<'div'> {\n  /** `line` for text, `block` for panels, `circle` for avatars. */\n  shape?: SkeletonShape;\n}\n\n/**\n * A loading placeholder. Pulses to read as \"content is coming\", holds still for\n * `prefers-reduced-motion`, and is `aria-hidden` so assistive tech skips it. Its\n * dimensions come from the caller (`className` / `style`) so it matches the real\n * content's geometry and the swap causes no layout shift.\n */\nexport function Skeleton({\n  shape = 'block',\n  className,\n  ...props\n}: SkeletonProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid=\"skeleton\"\n      className={cn(\n        'animate-pulse bg-border/60 motion-reduce:animate-none',\n        shape === 'line' && 'h-[1em] rounded-full',\n        shape === 'block' && 'rounded-md',\n        shape === 'circle' && 'aspect-square rounded-full',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface SkeletonTextProps {\n  /** Number of shimmer lines; the last is shortened like a paragraph end. */\n  lines?: number;\n  className?: string;\n}\n\n/** A stack of line skeletons standing in for a block of text. */\nexport function SkeletonText({ lines = 3, className }: SkeletonTextProps) {\n  return (\n    <div className={cn('flex flex-col gap-2xs', className)}>\n      {Array.from({ length: lines }, (_, index) => (\n        <Skeleton\n          key={index}\n          shape=\"line\"\n          className={index === lines - 1 ? 'w-2/3' : 'w-full'}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["cn","Skeleton","shape","className","props","div","aria-hidden","data-testid","SkeletonText","lines","Array","from","length","_","index"],"mappings":";;;AAEA,SAASA,EAAE,QAAQ,oBAAoB;AASvC;;;;;CAKC,GACD,OAAO,SAASC,SAAS,EAIT;QAJS,EACvBC,QAAQ,OAAO,EACfC,SAAS,EAEK,OADXC;;;;IAEH,qBACE,KAACC;QACCC,eAAY;QACZC,eAAY;QACZJ,WAAWH,GACT,yDACAE,UAAU,UAAU,wBACpBA,UAAU,WAAW,cACrBA,UAAU,YAAY,8BACtBC;OAEEC;AAGV;AAQA,+DAA+D,GAC/D,OAAO,SAASI,aAAa,EAAEC,QAAQ,CAAC,EAAEN,SAAS,EAAqB;IACtE,qBACE,KAACE;QAAIF,WAAWH,GAAG,yBAAyBG;kBACzCO,MAAMC,IAAI,CAAC;YAAEC,QAAQH;QAAM,GAAG,CAACI,GAAGC,sBACjC,KAACb;gBAECC,OAAM;gBACNC,WAAWW,UAAUL,QAAQ,IAAI,UAAU;eAFtCK;;AAOf"}
+{"version":3,"sources":["../../../../src/ui/atoms/skeleton/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '../../utils/cn.js';\n\nexport type SkeletonShape = 'line' | 'block' | 'circle';\n\nexport interface SkeletonProps extends ComponentPropsWithoutRef<'div'> {\n  /** `line` for text, `block` for panels, `circle` for avatars. */\n  shape?: SkeletonShape;\n}\n\n/**\n * A loading placeholder. Pulses to read as \"content is coming\", holds still for\n * `prefers-reduced-motion`, and is `aria-hidden` so assistive tech skips it. Its\n * dimensions come from the caller (`className` / `style`) so it matches the real\n * content's geometry and the swap causes no layout shift.\n */\nexport function Skeleton({\n  shape = 'block',\n  className,\n  ...props\n}: SkeletonProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid=\"skeleton\"\n      className={cn(\n        'animate-pulse bg-border/60 motion-reduce:animate-none',\n        shape === 'line' && 'h-(--glyph-block) rounded-full',\n        shape === 'block' && 'rounded-md',\n        shape === 'circle' && 'aspect-square rounded-full',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface SkeletonTextProps {\n  /** Number of shimmer lines; the last is shortened like a paragraph end. */\n  lines?: number;\n  className?: string;\n}\n\n/** A stack of line skeletons standing in for a block of text. */\nexport function SkeletonText({ lines = 3, className }: SkeletonTextProps) {\n  return (\n    <div className={cn('flex flex-col gap-2xs', className)}>\n      {Array.from({ length: lines }, (_, index) => (\n        <Skeleton\n          key={index}\n          shape=\"line\"\n          className={index === lines - 1 ? 'w-2/3' : 'w-full'}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["cn","Skeleton","shape","className","props","div","aria-hidden","data-testid","SkeletonText","lines","Array","from","length","_","index"],"mappings":";;;AAEA,SAASA,EAAE,QAAQ,oBAAoB;AASvC;;;;;CAKC,GACD,OAAO,SAASC,SAAS,EAIT;QAJS,EACvBC,QAAQ,OAAO,EACfC,SAAS,EAEK,OADXC;;;;IAEH,qBACE,KAACC;QACCC,eAAY;QACZC,eAAY;QACZJ,WAAWH,GACT,yDACAE,UAAU,UAAU,kCACpBA,UAAU,WAAW,cACrBA,UAAU,YAAY,8BACtBC;OAEEC;AAGV;AAQA,+DAA+D,GAC/D,OAAO,SAASI,aAAa,EAAEC,QAAQ,CAAC,EAAEN,SAAS,EAAqB;IACtE,qBACE,KAACE;QAAIF,WAAWH,GAAG,yBAAyBG;kBACzCO,MAAMC,IAAI,CAAC;YAAEC,QAAQH;QAAM,GAAG,CAACI,GAAGC,sBACjC,KAACb;gBAECC,OAAM;gBACNC,WAAWW,UAAUL,QAAQ,IAAI,UAAU;eAFtCK;;AAOf"}

package/dist/ui/atoms/status-tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './status-tag.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/atoms/status-tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/status-tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/ui/atoms/status-tag/index.js

@@ -0,0 +1,3 @@
+export * from './status-tag.js';
+
+//# sourceMappingURL=index.js.map

package/dist/ui/atoms/status-tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/atoms/status-tag/index.ts"],"sourcesContent":["export * from './status-tag.js';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB"}

package/dist/ui/atoms/status-tag/status-tag.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type Tone } from '../alert/tone.js';
+export type StatusTagTone = Tone | 'neutral';
+export interface StatusTagProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+    tone: StatusTagTone;
+    /** The status in words. Required and non-empty: colour is never the only carrier (WCAG 1.4.1). */
+    children: string;
+    /** A glyph before the words; decorative, so hidden from assistive technology. */
+    icon?: ReactNode;
+}
+/**
+ * A record's status as a small tag: a tone and the words for it. The words are
+ * mandatory, and an empty string throws rather than rendering a coloured dot
+ * that means something only to people who can see the colour. Server-safe.
+ */
+export declare function StatusTag({ tone, icon, className, children, ...props }: StatusTagProps): import("react").JSX.Element;
+//# sourceMappingURL=status-tag.d.ts.map

package/dist/ui/atoms/status-tag/status-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-tag.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/status-tag/status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,KAAK,IAAI,EAAgB,MAAM,kBAAkB,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;AAO7C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,wBAAwB,CAAC,MAAM,CAAC,EAChC,UAAU,CACX;IACC,IAAI,EAAE,aAAa,CAAC;IACpB,kGAAkG;IAClG,QAAQ,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,+BAoBhB"}

package/dist/ui/atoms/status-tag/status-tag.js

@@ -0,0 +1,37 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { TONE_SURFACE } from '../alert/tone.js';
+const TONE_CLASS = _extends({}, TONE_SURFACE, {
+    neutral: 'border-border bg-surface text-content-muted'
+});
+/**
+ * A record's status as a small tag: a tone and the words for it. The words are
+ * mandatory, and an empty string throws rather than rendering a coloured dot
+ * that means something only to people who can see the colour. Server-safe.
+ */ export function StatusTag(_0) {
+    let { tone, icon, className, children } = _0, props = _object_without_properties_loose(_0, [
+        "tone",
+        "icon",
+        "className",
+        "children"
+    ]);
+    if (children.trim() === '') {
+        throw new Error('StatusTag needs its status in words: colour alone carries nothing for someone who cannot see it.');
+    }
+    return /*#__PURE__*/ _jsxs("span", _extends({
+        "data-tone": tone,
+        className: cn('inline-flex items-center gap-3xs rounded-full border px-2xs text-step-xs font-medium whitespace-nowrap', TONE_CLASS[tone], className)
+    }, props, {
+        children: [
+            icon !== undefined && /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": "true",
+                children: icon
+            }),
+            children
+        ]
+    }));
+}
+
+//# sourceMappingURL=status-tag.js.map

package/dist/ui/atoms/status-tag/status-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/atoms/status-tag/status-tag.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn.js';\nimport { type Tone, TONE_SURFACE } from '../alert/tone.js';\n\nexport type StatusTagTone = Tone | 'neutral';\n\nconst TONE_CLASS: Record<StatusTagTone, string> = {\n  ...TONE_SURFACE,\n  neutral: 'border-border bg-surface text-content-muted',\n};\n\nexport interface StatusTagProps extends Omit<\n  ComponentPropsWithoutRef<'span'>,\n  'children'\n> {\n  tone: StatusTagTone;\n  /** The status in words. Required and non-empty: colour is never the only carrier (WCAG 1.4.1). */\n  children: string;\n  /** A glyph before the words; decorative, so hidden from assistive technology. */\n  icon?: ReactNode;\n}\n\n/**\n * A record's status as a small tag: a tone and the words for it. The words are\n * mandatory, and an empty string throws rather than rendering a coloured dot\n * that means something only to people who can see the colour. Server-safe.\n */\nexport function StatusTag({\n  tone,\n  icon,\n  className,\n  children,\n  ...props\n}: StatusTagProps) {\n  if (children.trim() === '') {\n    throw new Error(\n      'StatusTag needs its status in words: colour alone carries nothing for someone who cannot see it.',\n    );\n  }\n  return (\n    <span\n      data-tone={tone}\n      className={cn(\n        'inline-flex items-center gap-3xs rounded-full border px-2xs text-step-xs font-medium whitespace-nowrap',\n        TONE_CLASS[tone],\n        className,\n      )}\n      {...props}\n    >\n      {icon !== undefined && <span aria-hidden=\"true\">{icon}</span>}\n      {children}\n    </span>\n  );\n}\n"],"names":["cn","TONE_SURFACE","TONE_CLASS","neutral","StatusTag","tone","icon","className","children","props","trim","Error","span","data-tone","undefined","aria-hidden"],"mappings":";;;AAEA,SAASA,EAAE,QAAQ,oBAAoB;AACvC,SAAoBC,YAAY,QAAQ,mBAAmB;AAI3D,MAAMC,aAA4C,aAC7CD;IACHE,SAAS;;AAcX;;;;CAIC,GACD,OAAO,SAASC,UAAU,EAMT;QANS,EACxBC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,QAAQ,EAEO,OADZC;;;;;;IAEH,IAAID,SAASE,IAAI,OAAO,IAAI;QAC1B,MAAM,IAAIC,MACR;IAEJ;IACA,qBACE,MAACC;QACCC,aAAWR;QACXE,WAAWP,GACT,0GACAE,UAAU,CAACG,KAAK,EAChBE;OAEEE;;YAEHH,SAASQ,2BAAa,KAACF;gBAAKG,eAAY;0BAAQT;;YAChDE;;;AAGP"}

package/dist/ui/atoms/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAejE;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IACzE,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAgBA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBjE;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IACzE,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAgBA"}

package/dist/ui/atoms/switch/switch.js

@@ -1,12 +1,15 @@
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** The label: the switch, then its text, on one line. */ const LABEL = 'inline-flex cursor-pointer items-center gap-3xs';
+/** The label: the switch, then its text, on one line. */ const LABEL = 'inline-flex min-h-(--target-min) cursor-pointer items-center gap-3xs';
 /**
  * Off: an outlined track, its thumb muted at the start. On: filled with the
  * primary colour, its thumb the surface's, at the end.
- */ const TRACK = 'relative inline-flex h-[1.125rem] w-8 shrink-0 items-center rounded-full border border-content-muted bg-transparent transition-colors motion-reduce:transition-none peer-checked:border-primary peer-checked:bg-primary peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-checked:[&>span]:translate-x-[0.875rem] peer-checked:[&>span]:bg-surface';
-const THUMB = 'ml-[0.125rem] size-3 rounded-full bg-content-muted transition-[translate,background-color] motion-reduce:transition-none';
+ */ const TRACK = 'relative inline-flex h-4.5 w-8 shrink-0 items-center rounded-full border border-border-control bg-transparent transition-colors motion-reduce:transition-none peer-checked:border-primary peer-checked:bg-primary peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-checked:[&>span]:translate-x-3.5 peer-checked:[&>span]:bg-surface';
+// Forced colours paint every background as Canvas, which would erase the
+// thumb — the only thing that shows the switch's state there — so it takes
+// the system's text colour instead.
+const THUMB = 'ml-0.5 size-3 rounded-full bg-content-muted transition-[translate,background-color] motion-reduce:transition-none forced-colors:bg-[CanvasText]';
 /**
  * An on/off choice: a native checkbox announced as a switch, drawn as a track
  * and a thumb. The checkbox keeps the keyboard, the form and `onChange`; the

package/dist/ui/atoms/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/atoms/switch/switch.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\n/** The label: the switch, then its text, on one line. */\nconst LABEL = 'inline-flex cursor-pointer items-center gap-3xs';\n\n/**\n * Off: an outlined track, its thumb muted at the start. On: filled with the\n * primary colour, its thumb the surface's, at the end.\n */\nconst TRACK =\n  'relative inline-flex h-[1.125rem] w-8 shrink-0 items-center rounded-full border border-content-muted bg-transparent transition-colors motion-reduce:transition-none peer-checked:border-primary peer-checked:bg-primary peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-checked:[&>span]:translate-x-[0.875rem] peer-checked:[&>span]:bg-surface';\n\nconst THUMB =\n  'ml-[0.125rem] size-3 rounded-full bg-content-muted transition-[translate,background-color] motion-reduce:transition-none';\n\n/**\n * An on/off choice: a native checkbox announced as a switch, drawn as a track\n * and a thumb. The checkbox keeps the keyboard, the form and `onChange`; the\n * track only shows its state.\n */\nexport function Switch({\n  children,\n  className,\n  ...input\n}: Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'role' | 'children'> & {\n  children: ReactNode;\n}) {\n  return (\n    <label data-slot=\"switch\" className={className ?? LABEL}>\n      <input\n        {...input}\n        type=\"checkbox\"\n        role=\"switch\"\n        data-slot=\"switch-input\"\n        className=\"peer sr-only\"\n      />\n      <span data-slot=\"switch-track\" aria-hidden=\"true\" className={TRACK}>\n        <span data-slot=\"switch-thumb\" className={THUMB} />\n      </span>\n      {children}\n    </label>\n  );\n}\n"],"names":["LABEL","TRACK","THUMB","Switch","children","className","input","label","data-slot","type","role","span","aria-hidden"],"mappings":";;;AAEA,uDAAuD,GACvD,MAAMA,QAAQ;AAEd;;;CAGC,GACD,MAAMC,QACJ;AAEF,MAAMC,QACJ;AAEF;;;;CAIC,GACD,OAAO,SAASC,OAAO,EAMtB;QANsB,EACrBC,QAAQ,EACRC,SAAS,EAIV,OAHIC;;;;IAIH,qBACE,MAACC;QAAMC,aAAU;QAASH,SAAS,EAAEA,oBAAAA,YAAaL;;0BAChD,KAACM,sBACKA;gBACJG,MAAK;gBACLC,MAAK;gBACLF,aAAU;gBACVH,WAAU;;0BAEZ,KAACM;gBAAKH,aAAU;gBAAeI,eAAY;gBAAOP,WAAWJ;0BAC3D,cAAA,KAACU;oBAAKH,aAAU;oBAAeH,WAAWH;;;YAE3CE;;;AAGP"}
+{"version":3,"sources":["../../../../src/ui/atoms/switch/switch.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\n/** The label: the switch, then its text, on one line. */\nconst LABEL =\n  'inline-flex min-h-(--target-min) cursor-pointer items-center gap-3xs';\n\n/**\n * Off: an outlined track, its thumb muted at the start. On: filled with the\n * primary colour, its thumb the surface's, at the end.\n */\nconst TRACK =\n  'relative inline-flex h-4.5 w-8 shrink-0 items-center rounded-full border border-border-control bg-transparent transition-colors motion-reduce:transition-none peer-checked:border-primary peer-checked:bg-primary peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-checked:[&>span]:translate-x-3.5 peer-checked:[&>span]:bg-surface';\n\n// Forced colours paint every background as Canvas, which would erase the\n// thumb — the only thing that shows the switch's state there — so it takes\n// the system's text colour instead.\nconst THUMB =\n  'ml-0.5 size-3 rounded-full bg-content-muted transition-[translate,background-color] motion-reduce:transition-none forced-colors:bg-[CanvasText]';\n\n/**\n * An on/off choice: a native checkbox announced as a switch, drawn as a track\n * and a thumb. The checkbox keeps the keyboard, the form and `onChange`; the\n * track only shows its state.\n */\nexport function Switch({\n  children,\n  className,\n  ...input\n}: Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'role' | 'children'> & {\n  children: ReactNode;\n}) {\n  return (\n    <label data-slot=\"switch\" className={className ?? LABEL}>\n      <input\n        {...input}\n        type=\"checkbox\"\n        role=\"switch\"\n        data-slot=\"switch-input\"\n        className=\"peer sr-only\"\n      />\n      <span data-slot=\"switch-track\" aria-hidden=\"true\" className={TRACK}>\n        <span data-slot=\"switch-thumb\" className={THUMB} />\n      </span>\n      {children}\n    </label>\n  );\n}\n"],"names":["LABEL","TRACK","THUMB","Switch","children","className","input","label","data-slot","type","role","span","aria-hidden"],"mappings":";;;AAEA,uDAAuD,GACvD,MAAMA,QACJ;AAEF;;;CAGC,GACD,MAAMC,QACJ;AAEF,yEAAyE;AACzE,2EAA2E;AAC3E,oCAAoC;AACpC,MAAMC,QACJ;AAEF;;;;CAIC,GACD,OAAO,SAASC,OAAO,EAMtB;QANsB,EACrBC,QAAQ,EACRC,SAAS,EAIV,OAHIC;;;;IAIH,qBACE,MAACC;QAAMC,aAAU;QAASH,SAAS,EAAEA,oBAAAA,YAAaL;;0BAChD,KAACM,sBACKA;gBACJG,MAAK;gBACLC,MAAK;gBACLF,aAAU;gBACVH,WAAU;;0BAEZ,KAACM;gBAAKH,aAAU;gBAAeI,eAAY;gBAAOP,WAAWJ;0BAC3D,cAAA,KAACU;oBAAKH,aAAU;oBAAeH,WAAWH;;;YAE3CE;;;AAGP"}

package/dist/ui/atoms/table/table.d.ts

@@ -1,16 +1,25 @@
-import type { ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export interface TableProps extends ComponentPropsWithoutRef<'table'> {
     /** Class names for the scroll container wrapping the `<table>`. */
     containerClassName?: string;
+    /**
+     * What the table holds — "Clientes, 12 resultados". It names the table and,
+     * once the table overflows its container, the scroll region too.
+     */
+    caption?: ReactNode;
+    /** Class names for the caption; screen-reader only unless overridden. */
+    captionClassName?: string;
 }
 /**
  * Styled table primitive — no entity knowledge, no data fetching. `EntityTable`
  * composes these; anything rendering non-entity tabular data can use them too.
  *
  * Wide tables scroll inside their own container rather than pushing the page
- * sideways.
+ * sideways. A container that scrolls is a **focusable region** named by the
+ * caption, so a keyboard can scroll it — and one that fits is neither, so it
+ * adds no tab stop that does nothing.
  */
-export declare function Table({ className, containerClassName, ...props }: TableProps): import("react").JSX.Element;
+export declare function Table({ className, containerClassName, caption, captionClassName, children, ...props }: TableProps): import("react").JSX.Element;
 export declare function TableHead({ className, ...props }: ComponentPropsWithoutRef<'thead'>): import("react").JSX.Element;
 export declare function TableBody({ className, ...props }: ComponentPropsWithoutRef<'tbody'>): import("react").JSX.Element;
 export declare function TableRow({ className, ...props }: ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;

package/dist/ui/atoms/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,WAAW,UAAW,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IACnE,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAiB5E;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,CAAC,+BAOnC;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,CAAC,+BAInC;AAED,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,IAAI,CAAC,+BAUhC;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAUxD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,wBAAwB,CAAC,IAAI,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAYtB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,wBAAwB,CAAC,IAAI,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,+BAOhB;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,+BAatD"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/table/table.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,UAAW,SAAQ,wBAAwB,CAAC,OAAO,CAAC;IACnE,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAyBD;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,gBAA4B,EAC5B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,+BAoCZ;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,CAAC,+BAanC;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,CAAC,+BAInC;AAED,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,IAAI,CAAC,+BAUhC;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAUxD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,wBAAwB,CAAC,IAAI,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAYtB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,wBAAwB,CAAC,IAAI,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,+BAOhB;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,+BAatD"}