@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/proportion-list.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Meter } from './meter.js';
+import { Status } from './status.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The bar's fill, from the state the caller put beside it.
+ *
+ * `StatusTone` is the wider of the two closed sets, because it is the one the
+ * caller is already using for a state wherever else they show one, and a list with
+ * its own narrower set would make the caller translate between two vocabularies for
+ * the same judgement. `MeterTone` is narrower and has no `info`, so `info` takes the
+ * neutral fill, and that cost is named on `status` and on this Component rather than
+ * hidden here.
+ *
+ * The mapping is a fact about two closed sets rather than a judgement about
+ * urgency. Nothing in this file decides whether a category is alarming: the caller
+ * named the tone, and a Component that graded a bar by how its own number compared
+ * to a ceiling would be making a claim about a budget this file cannot see.
+ */
+const BAR_FILL = {
+    neutral: 'neutral',
+    info: 'neutral',
+    success: 'success',
+    warning: 'warning',
+    destructive: 'destructive',
+};
+/**
+ * Each labelled category's share of one whole, as a proportional bar and a number.
+ *
+ * **The unit is a share, and that is what the whole Component is built around.** A
+ * part-to-whole with two or three parts is a `Chart` `donut`, and a series of
+ * unrelated values against a shared baseline is a `Chart` `bar`; neither is this,
+ * because a list of shares is neither of those things. Its bars cannot be modelled
+ * as independent series, since they are constrained to sum to the whole and a
+ * reader comparing two of them is comparing two slices of one pie rather than two
+ * measurements against a scale. So there is no `series` prop, no `mark`, and no
+ * axis: the bar is drawn from `value` against `total`, and the number printed
+ * beside it is that same division, so the two cannot disagree with each other or
+ * with the data.
+ *
+ * **The bar is decorative and the number is the reading, said plainly.** `Meter`
+ * draws the track and the fill, and the row wraps it in an `aria-hidden` box on
+ * purpose: a meter announces its name and its value, and the row already prints
+ * both, so an announced bar beside a printed one is the same sentence twice for
+ * every row on the page. `Meter` requires a name and the only name in the row is
+ * the category's own, so `label` is forwarded to it rather than invented, and the
+ * forwarding is invisible because the wrapper is hidden. A reader who cannot rank
+ * the fills still has every number, which is the whole reason the number is printed
+ * rather than left to the bar.
+ *
+ * **A share is drawn on one scale, so the bars are comparable down the page.** Every
+ * row's fill is `value / total` of the same track, and the tracks are the same
+ * width, which is what makes two categories comparable at a glance. That is the
+ * reason this is a list of bars rather than a stacked bar: a stack puts the shares
+ * in one figure, where the reader has to find the boundary between two categories
+ * to compare them, and a list puts each one on its own common baseline.
+ *
+ * **`Meter` is used rather than a second bar drawn here, and the honest cost is a
+ * palette of three state tones against five.** Composing it means the bar, its
+ * tone vocabulary and its accessibility are one Component's rather than two, and it
+ * means a share list looks like every other measurement in the product, which is
+ * what a reader wants from a bar. The cost is that `StatusTone` and `MeterTone` are
+ * different widths: there is no informational fill, so a category whose state is
+ * `info` draws a neutral bar and its colour meaning is carried by the dot beside the
+ * label. The alternative was a second set of fills authored here, and that is a
+ * second source of truth for a scale the tokens already own.
+ *
+ * **Two inputs throw, because a share that cannot be drawn is not a quiet share.**
+ * A negative quantity and a whole that is zero or less are both impossible rather
+ * than unusual, and both have exactly one honest rendering, which is to stop: a
+ * negative share drawn as an empty bar claims the category is zero when it is
+ * below zero, and a list drawn against a total of zero divides by nothing. The
+ * alternative was to clamp, which is what `Chart` does for a value past the end of
+ * its axis, and the reason it does not apply here is that there is no axis to be
+ * past: the whole is the denominator and it is either there or it is not.
+ *
+ * **The rows are a list, so a reader is told how many categories there are.**
+ * `<ul>` and `<li>` rather than a table of divs, because a reader moving by list
+ * item is told the count and each row is one stop, and because nothing in a
+ * category list is tabular data: there is one measure and it is beside its name.
+ * The rows are also not interactive, and no motion is attached to them for the same
+ * reason: a hover state on a row that cannot be pressed is an affordance for
+ * something the page does not do.
+ *
+ * **An empty list renders the caller's sentence rather than nothing.** A heading
+ * with no rows says the whole is nothing, and hiding the figure leaves a reader
+ * wondering whether it had been missed, which is the argument `Retention01` makes
+ * for leaving a withdrawn schedule on the page.
+ *
+ * **It is a server Component.** There is no state, no effect and no handler, the
+ * whole figure is arithmetic over props, and a dashboard of proportions costs no
+ * client code at all. `Status` and `Meter` are server Components too, so composing
+ * them costs nothing at this boundary either.
+ */
+function ProportionList({ className, items, total, precision = 1, label, caption, empty, ...props }) {
+    const whole = total ?? items.reduce((sum, item) => sum + item.value, 0);
+    // A nonsense `precision` is floored at zero rather than reaching `toFixed`, which
+    // throws on a negative count, for the reason `CohortGrid` gives its own: a
+    // rounding instruction is a reading instruction and a typo in one should not take
+    // a page down.
+    const places = Math.min(20, Math.max(0, Math.floor(precision)));
+    /*
+     * The refusals are inside the `items.length > 0` test because an empty list is a
+     * state a caller reaches rather than a bug: with no categories there is no
+     * category to be negative and no whole to divide by, so there is nothing to
+     * refuse and the caller's own sentence renders below.
+     */
+    if (items.length > 0) {
+        for (const item of items) {
+            if (!Number.isFinite(item.value) || item.value < 0) {
+                throw new Error(`ProportionList: the category '${item.label}' has the value ${String(item.value)}, which is not a ` +
+                    'quantity a share can be taken of. A negative category is a subtraction somewhere upstream, and ' +
+                    'a category whose value went missing is a query that did not come back; neither is something a ' +
+                    'bar can draw honestly, so this stops rather than showing it as nothing.');
+            }
+        }
+        if (!Number.isFinite(whole) || whole <= 0) {
+            throw new Error(`ProportionList: the whole is ${String(whole)}, so there is nothing for a share to be a share of. ` +
+                'Either no category carries a value or the total you passed is not positive. Pass a total that ' +
+                'names what the categories are shares of, and a category whose value is genuinely nothing is a 0.');
+        }
+    }
+    return (_jsxs("figure", { "data-slot": "proportion-list", "data-count": items.length, "aria-label": label, className: cn('flex w-full flex-col gap-3', className), ...props, children: [items.length === 0 ? (_jsx("p", { "data-slot": "proportion-list-empty", className: "text-muted-foreground text-sm", children: empty ?? null })) : (_jsx("ul", { "data-slot": "proportion-list-rows", className: "flex flex-col gap-2", children: items.map((item, index) => {
+                    const share = (item.value / whole) * 100;
+                    // The bar is filled from the printed figure rather than from the exact
+                    // quotient, so the length a reader measures and the number a reader reads
+                    // are the same number to the last decimal. A bar at 64.2087 percent beside
+                    // a printed 64.2 is one fact drawn twice, and a difference of one part in a
+                    // thousand is not worth the two versions of it.
+                    const printed = share.toFixed(places);
+                    return (_jsxs("li", { "data-slot": "proportion-list-row", className: "flex items-center gap-3", children: [item.status === undefined ? null : (_jsx(Status, { tone: item.status.tone, label: item.status.label, size: "sm", className: "shrink-0" })), _jsx("span", { "data-slot": "proportion-list-label", className: "min-w-0 flex-1 truncate text-sm font-medium", children: item.label }), _jsx("div", { "data-slot": "proportion-list-bar", "aria-hidden": "true", className: "w-32 shrink-0", children: _jsx(Meter, { value: Number(printed), label: item.label, tone: item.status === undefined ? undefined : BAR_FILL[item.status.tone] }) }), _jsx("span", { "data-slot": "proportion-list-value", className: "shrink-0 text-right text-sm tabular-nums", children: item.text ?? `${printed}%` })] }, `${item.label}-${index}`));
+                }) })), caption === undefined ? null : (_jsx("p", { "data-slot": "proportion-list-caption", className: "text-muted-foreground text-sm", children: caption }))] }));
+}
+export { ProportionList };

package/dist/components/ui/prose.d.ts

@@ -81,6 +81,29 @@ export type ProseProps = ComponentProps<'div'> & {
  * type rule gives body copy `text-pretty` and putting it here means a caller's
  * own `<p>` inherits it rather than needing a class of its own.
  *
+ * **A table in the run scrolls, and it is the only treatment here that has to
+ * change the element's box type to get there.** A `display: table` box cannot be
+ * a scroll container: `overflow` applies to block containers, and CSS Tables 3
+ * says the overflow property on a table-root or table-wrapper box "when its value
+ * is not either visible, clip or hidden, is ignored and treated as if its value
+ * was visible". So `overflow-x: auto` written straight onto the table computes
+ * away, the table keeps its min-content floor, and a four-column table widens the
+ * page instead of scrolling it. `display: block` is what makes the element a block
+ * container, and the declaration the code fence above already has then works on
+ * it. The row groups are wrapped in an anonymous table box by the fixup rules, and
+ * that box still inherits `border-collapse`, so a collapsed table stays collapsed.
+ *
+ * The consequence worth naming is that the grid inside now sizes to its content up
+ * to the measure rather than stretching to fill it, which is what the same
+ * technique does everywhere it is used. A table wider than the measure scrolls.
+ *
+ * The treatment is a CHILD selector, and that is load-bearing rather than
+ * incidental. A descendant selector would reach a table the caller has already put
+ * in a scroll container of their own, `Table` above all, and `display: block`
+ * there would move `caption-side` onto a block box and stop the grid filling the
+ * wrapper it arrived in. A direct child is what this component says its content
+ * is: the caller's own flow content.
+ *
  * It is a server Component: no hook, no context and no client code.
  */
 declare function Prose({ children, size, fullWidth, className, ...props }: ProseProps): import("react").JSX.Element;

package/dist/components/ui/prose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/components/ui/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW;;;CAGP,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAA;AAEhD;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAa,EAAE,SAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAkC7F;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/components/ui/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW;;;CAGP,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAA;AAEhD;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAa,EAAE,SAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAwC7F;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/prose.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The size a run of prose is set at.
  *
@@ -41,6 +41,29 @@ const PROSE_SIZES = {
  * type rule gives body copy `text-pretty` and putting it here means a caller's
  * own `<p>` inherits it rather than needing a class of its own.
  *
+ * **A table in the run scrolls, and it is the only treatment here that has to
+ * change the element's box type to get there.** A `display: table` box cannot be
+ * a scroll container: `overflow` applies to block containers, and CSS Tables 3
+ * says the overflow property on a table-root or table-wrapper box "when its value
+ * is not either visible, clip or hidden, is ignored and treated as if its value
+ * was visible". So `overflow-x: auto` written straight onto the table computes
+ * away, the table keeps its min-content floor, and a four-column table widens the
+ * page instead of scrolling it. `display: block` is what makes the element a block
+ * container, and the declaration the code fence above already has then works on
+ * it. The row groups are wrapped in an anonymous table box by the fixup rules, and
+ * that box still inherits `border-collapse`, so a collapsed table stays collapsed.
+ *
+ * The consequence worth naming is that the grid inside now sizes to its content up
+ * to the measure rather than stretching to fill it, which is what the same
+ * technique does everywhere it is used. A table wider than the measure scrolls.
+ *
+ * The treatment is a CHILD selector, and that is load-bearing rather than
+ * incidental. A descendant selector would reach a table the caller has already put
+ * in a scroll container of their own, `Table` above all, and `display: block`
+ * there would move `caption-side` onto a block box and stop the grid filling the
+ * wrapper it arrived in. A direct child is what this component says its content
+ * is: the caller's own flow content.
+ *
  * It is a server Component: no hook, no context and no client code.
  */
 function Prose({ children, size = 'base', fullWidth = false, className, ...props }) {
@@ -48,6 +71,12 @@ function Prose({ children, size = 'base', fullWidth = false, className, ...props
         // The block treatments. Every child is styled by its own tag so a
         // consumer's plain elements read as the system, and the gaps the flex
         // column owns are the rhythm between blocks.
-        '[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:underline', '[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:italic', '[&_code]:bg-muted [&_code]:text-muted-foreground [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs', '[&_h1]:text-balance [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:tracking-tight', '[&_h2]:text-balance [&_h2]:mt-2 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:tracking-tight', '[&_h3]:text-balance [&_h3]:mt-2 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:tracking-tight', '[&_h4]:text-balance [&_h4]:text-lg [&_h4]:font-semibold', '[&_hr]:bg-border [&_hr]:h-px [&_hr]:my-2', '[&_img]:rounded-lg', '[&_li]:leading-relaxed [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6', '[&_p]:leading-relaxed', '[&_pre]:bg-muted [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-xs', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', '[&_strong]:font-semibold', '[&_table]:w-full [&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_th]:px-3 [&_th]:py-2 [&_th]:text-left', className), ...props, children: children }));
+        '[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:underline', '[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:italic', '[&_code]:bg-muted [&_code]:text-muted-foreground [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs', '[&_h1]:text-balance [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:tracking-tight', '[&_h2]:text-balance [&_h2]:mt-2 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:tracking-tight', '[&_h3]:text-balance [&_h3]:mt-2 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:tracking-tight', '[&_h4]:text-balance [&_h4]:text-lg [&_h4]:font-semibold', '[&_hr]:bg-border [&_hr]:h-px [&_hr]:my-2', '[&_img]:rounded-lg', '[&_li]:leading-relaxed [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6', '[&_p]:leading-relaxed', '[&_pre]:bg-muted [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-xs', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', '[&_strong]:font-semibold', 
+        // The one treatment that changes a box type rather than decorating one.
+        // The reasoning, and the two spec rules it rests on, are in this
+        // component's JSDoc: a `display: table` box cannot be a scroll container,
+        // and a child selector is what keeps the rule off a table a caller has
+        // already wrapped in a scroll container of their own.
+        '[&>table]:block [&>table]:w-full [&>table]:overflow-x-auto', '[&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_th]:px-3 [&_th]:py-2 [&_th]:text-left', className), ...props, children: children }));
 }
 export { Prose };

package/dist/components/ui/pulse-graph.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The canvas the graph draws into, in its own user units.
  *

package/dist/components/ui/pulse-series.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The canvas the series draws into, in its own user units.
  *

package/dist/components/ui/radio-group.d.ts

@@ -60,6 +60,13 @@ declare function RadioGroup({ className, ...props }: RadioGroupProps): import("r
  * submits with the form. Space selects the focused item when arrow-key
  * navigation has not already selected it. Put the item beside its
  * `FieldLabel`, and keep the group's name on the RadioGroup itself.
+ *
+ * **A coarse pointer gets a 44px item and the desktop 16px item is untouched.** The
+ * step is the one `checkbox.tsx` takes and for the same reason, and the reason it is a
+ * step rather than a band is the same one as well: a band's fourteen pixels reach the
+ * next item in a stacked group, where growing the item moves the group instead. The
+ * price is a 44px circle and a taller column, which is the price the whole package has
+ * already agreed to pay rather than a reason this control is exempt from it.
  */
 declare function RadioGroupItem({ className, value, ...props }: RadioGroupItemProps): import("react").JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/components/ui/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACnF,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAQ3D;AAED;;;;;;;GAOG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAwB1E;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACnF,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAQ3D;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAyB1E;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/radio-group.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import { CircleIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * A set of radio items where exactly one may be chosen.
  *
@@ -23,8 +23,15 @@ function RadioGroup({ className, ...props }) {
  * submits with the form. Space selects the focused item when arrow-key
  * navigation has not already selected it. Put the item beside its
  * `FieldLabel`, and keep the group's name on the RadioGroup itself.
+ *
+ * **A coarse pointer gets a 44px item and the desktop 16px item is untouched.** The
+ * step is the one `checkbox.tsx` takes and for the same reason, and the reason it is a
+ * step rather than a band is the same one as well: a band's fourteen pixels reach the
+ * next item in a stacked group, where growing the item moves the group instead. The
+ * price is a 44px circle and a taller column, which is the price the whole package has
+ * already agreed to pay rather than a reason this control is exempt from it.
  */
 function RadioGroupItem({ className, value, ...props }) {
-    return (_jsx(RadioPrimitive.Root, { value: value, "data-slot": "radio-group-item", className: cn('border-input text-primary shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none', 'transition-[color,box-shadow,border-color] duration-fast ease-out', 'data-[checked]:border-primary', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
+    return (_jsx(RadioPrimitive.Root, { value: value, "data-slot": "radio-group-item", className: cn('border-input text-primary shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none', 'pointer-coarse:size-11', 'transition-[color,box-shadow,border-color] duration-fast ease-out', 'data-[checked]:border-primary', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/components/ui/range-field.d.ts

@@ -0,0 +1,158 @@
+/** The two bounds of an interval, lowest first. */
+export type RangeValue = readonly [number, number];
+/** Which end of an interval a value is. */
+export type RangeBound = 'start' | 'end';
+/** The props the Range field accepts. */
+export interface RangeFieldProps {
+    /**
+     * The one line that names the field, drawn above it and used as its accessible
+     * name.
+     *
+     * A `string` rather than a `ReactNode` for one reason: the root is a group
+     * labelled by the very element this text is drawn in, so the name a screen
+     * reader hears and the name a sighted reader reads are the same string by
+     * construction and cannot drift apart.
+     */
+    label: string;
+    /**
+     * The interval, when the field is controlled.
+     *
+     * A tuple rather than an array because the two numbers are not interchangeable:
+     * the first is the lower bound and the second is the upper one, and an array
+     * would let a caller pass them the wrong way round and get a field that reads
+     * backwards.
+     */
+    value?: RangeValue;
+    /** The interval the field starts at, for an uncontrolled field. */
+    defaultValue?: RangeValue;
+    /**
+     * Called with the whole interval as it changes.
+     *
+     * The pair rather than the one bound that moved, because the span is a fact about
+     * the two of them together. A caller who wanted only the bound that moved would
+     * have to diff the pair on every keystroke, which is the arithmetic this
+     * Component exists to have already done.
+     */
+    onValueChange?: (value: RangeValue) => void;
+    /**
+     * The accessible name of one thumb, given which end of the interval it is and the
+     * formatted number under it.
+     *
+     * Required, and a function for the reason `FileUpload`'s `removeLabel` is: the
+     * words are the caller's, and a bound has a number in its name that Prism cannot
+     * interpolate into a sentence it does not own. The formatted number arrives as an
+     * argument rather than being left to the caller to reproduce, because the number on
+     * screen and the number announced must be the same string.
+     */
+    boundLabel: (bound: RangeBound, formatted: string) => string;
+    /**
+     * The sentence announced for the span between the bounds, given the width and the
+     * formatted width.
+     *
+     * Required, and rendered into a visually hidden element the field points at. Neither
+     * thumb can announce it: each reports its own value and neither knows about the
+     * interval the pair describes, so without this a screen reader user learns two
+     * numbers and never the distance between them, which for a price band or a
+     * retention window is the number they came for.
+     */
+    spanLabel: (span: number, formatted: string) => string;
+    /** The minimum allowed value. @defaultValue 0 */
+    min?: number;
+    /** The maximum allowed value. @defaultValue 100 */
+    max?: number;
+    /** The granularity the bounds step by. @defaultValue 1 */
+    step?: number;
+    /**
+     * The smallest gap the two bounds may hold, in steps.
+     *
+     * The guard that stops the thumbs crossing and leaving an interval with a negative
+     * span, which is a value no consumer can submit to a backend that validates it.
+     */
+    minGap?: number;
+    /** Options passed to `Intl.NumberFormat` when a bound is rendered. */
+    format?: Intl.NumberFormatOptions;
+    /** The locale used when formatting the bounds and the span. */
+    locale?: Intl.LocalesArgument;
+    /** Whether the field ignores user interaction. */
+    disabled?: boolean;
+    /** The axis the bounds move along. @defaultValue horizontal */
+    orientation?: 'horizontal' | 'vertical';
+    /** The form field name each bound is submitted under. */
+    name?: string;
+    /** Identifies the form that owns the hidden inputs. */
+    form?: string;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * Two thumbs on one track, editing the lower and the upper bound of an interval.
+ *
+ * **The value is a tuple, so the single-value plumbing does not apply, and that is
+ * the argument for the Component rather than a prop on one that already exists.** It
+ * is structural rather than cosmetic. `Slider` takes `value?: number` and
+ * `onValueChange?: (value: number) => void`: one number in, one number out.
+ * `NumberField` is the same shape for a scalar the reader types rather than drags.
+ * An interval is two numbers whose relationship to each other is the answer, and no
+ * arrangement of two `Slider`s produces it, because each would own a value, an
+ * accessible name and a tab stop, and two independently focusable controls that know
+ * nothing about each other are a pair that can cross. A consumer who wants a band
+ * today writes that plumbing twice and writes the guard that stops the crossing
+ * themselves, and the guard's absence is invisible until a form submits a negative
+ * span.
+ *
+ * **Base UI's Slider is already a range primitive, and it is used rather than
+ * reimplemented.** The check was made before the code and the answer was yes, so
+ * there was no question of hand-rolling a two-thumb keyboard model. The root is
+ * declared over `number | readonly number[]`, each thumb takes an `index` into that
+ * array, and the root carries `minStepsBetweenValues` for the crossing guard, which
+ * is what `minGap` forwards to. Composing two Prism `Slider`s was rejected on its
+ * merits rather than on principle: it would carry the same internal dependency twice
+ * for one control and leave the collision behaviour to whichever of the two answered
+ * last. Hand-rolling would have had to earn the two focusable handles, the Home and
+ * End keys and the form integration, none of which is this Component's own
+ * contribution. **Those three are therefore inherited, not written here**, and the
+ * reason to own the surface at all is the announcement below.
+ *
+ * **The band between the bounds is a transform, and the transform is its whole
+ * geometry.** It is the same decision `Progress` states for the same reason, and
+ * on a range it matters more rather than less, because a range is the one control
+ * here whose value changes on every pointer move rather than on every commit: a
+ * band that animated `left` and `width` settled layout on every frame of a drag,
+ * on the page the consumer composed it into, for as long as their finger was down.
+ * The indicator is as wide as the track at every value and is scaled about the
+ * inline start, so advancing a bound is a compositor animation. **A consumer who
+ * styled the indicator's width has to move with it**, exactly as with `Progress`:
+ * the honest replacement is a rule on its `transform`.
+ *
+ * **The announcement is the contribution.** Two range inputs side by side announce
+ * two numbers. What a reader wants from a band is a sentence with a direction: which
+ * end is the floor, which is the ceiling, and how wide the interval is. So each thumb
+ * is named by the caller's `boundLabel`, which is handed which end it is, and the span
+ * is announced once, from a visually hidden sentence the caller's `spanLabel` writes,
+ * which the group points at. `spanLabel` is required rather than optional because an
+ * unsaid span is not a neutral omission: it is the one figure in the control a reader
+ * cannot derive, and deriving it means holding two announced values and subtracting
+ * them while driving.
+ *
+ * **One formatter serves the visible bounds, the two thumb names and the hidden
+ * sentence, and the caller's `format` changes the presentation and nothing else.**
+ * `Intl` is asked for the number and, when a caller passes a currency or a unit
+ * style, for that too. A caller who formatted the visible figure and the announced
+ * figure by different rules would ship a field whose drawn number and spoken number
+ * disagree, which is a defect no other gate in this repository can see because
+ * neither of the two strings is wrong on its own.
+ *
+ * **The bounds are printed as bare figures and named by the caller's label.** Prism
+ * draws the numbers because a number is a machine value, and it draws no word beside
+ * them because the words next to a bound are the caller's. A caller who wants a unit
+ * passes a `format` that carries one, which is the same route `Price` takes for its
+ * currency rather than a second prop for a suffix.
+ *
+ * **A form receives two values, not one.** Each thumb renders its own range input, so
+ * a form with a `name` on this field submits both bounds under it. That is the shape
+ * the DOM already has, and it is why the value is a tuple on the wire as well as in
+ * the props.
+ */
+declare function RangeField({ label, value, defaultValue, onValueChange, boundLabel, spanLabel, min, max, step, minGap, format, locale, disabled, orientation, name, form, className, }: RangeFieldProps): import("react").JSX.Element;
+export { RangeField };
+//# sourceMappingURL=range-field.d.ts.map

package/dist/components/ui/range-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/range-field.tsx"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAElD,2CAA2C;AAC3C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAA;AAExC,yCAAyC;AACzC,MAAM,WAAW,eAAe;IAC9B;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,mEAAmE;IACnE,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC3C;;;;;;;;;OASG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5D;;;;;;;;;OASG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IACtD,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IACjC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA+DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,GAAO,EACP,GAAS,EACT,IAAQ,EACR,MAAM,EACN,MAAM,EACN,MAAM,EACN,QAAgB,EAChB,WAA0B,EAC1B,IAAI,EACJ,IAAI,EACJ,SAAS,GACV,EAAE,eAAe,+BAiKjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}