@nanisoft/prism-ui 0.10.1 → 0.13.0

package/dist/components/ui/one-time-code.d.ts

@@ -0,0 +1,127 @@
+/** How the code is drawn in groups, for a code the reader sees written in groups. */
+export interface OneTimeCodeGrouping {
+    /** The zero-based indices of the segments a separator is drawn after. */
+    readonly after: readonly number[];
+    /** What the separator is. The caller's, because it is read by a person. */
+    readonly separator: React.ReactNode;
+}
+/** The props the One time code accepts. */
+export interface OneTimeCodeProps {
+    /**
+     * The accessible name of the code.
+     *
+     * Required. A row of six single-character fields with no name is six anonymous
+     * fields, and a reader cannot say out loud which one they are in.
+     */
+    label: string;
+    /** How many characters the code has. */
+    length: number;
+    /**
+     * The characters the code may contain.
+     *
+     * The caller's decision because it is theirs: a numeric code, an alphabet-only
+     * recovery code and an alphanumeric one-time token are three different things
+     * and a verification service decides which. A character outside the set is
+     * refused as it is typed or pasted rather than accepted and refused later, so
+     * the field never holds a value the server will reject.
+     */
+    characters?: 'numeric' | 'alpha' | 'alphanumeric' | 'none';
+    /**
+     * A normaliser, run after the character set has been applied.
+     *
+     * For the rules the closed set cannot express: folding a pasted code to lower
+     * case, stripping a leading country code. It must be idempotent, because the
+     * field normalises again on every edit and again on the way out of one.
+     */
+    normalize?: (value: string) => string;
+    /**
+     * The accessible name of one segment, receiving its zero-based index.
+     *
+     * Without it every segment is named by the field's own label, which is enough to
+     * satisfy the form but not to tell a reader which of the six they are in. This
+     * Component does not know the reader's words for a position, so it asks.
+     */
+    segmentLabel?: (index: number) => string;
+    /** How the code is drawn in groups, when it is read in groups. */
+    grouping?: OneTimeCodeGrouping;
+    /** The code, when the field is controlled. */
+    value?: string;
+    /** The code the field starts with, for an uncontrolled field. */
+    defaultValue?: string;
+    /** Called with the code as it changes. */
+    onValueChange?: (value: string) => void;
+    /** Called once every segment is filled, including by a paste that fills them all. */
+    onComplete?: (value: string) => void;
+    /**
+     * Called with the text the reader attempted when part of it was refused.
+     *
+     * The attempted text, not a verdict. Whether a refused character deserves a word
+     * to the reader is the caller's decision, and this Component ships no sentence
+     * into a consumer's product.
+     */
+    onInvalid?: (attempted: string) => void;
+    /** Whether the field submits its form as soon as the code is complete. */
+    autoSubmit?: boolean;
+    /** Whether the characters are hidden as they are typed. */
+    mask?: boolean;
+    /** Whether the field ignores interaction. */
+    disabled?: boolean;
+    /** Whether a code must be entered before the form submits. */
+    required?: boolean;
+    /** Whether the reader may see the code but not change it. */
+    readOnly?: boolean;
+    /** The form field name. The code is submitted under it. */
+    name?: string;
+    /** Identifies the form that owns the hidden input. */
+    form?: string;
+    /** The first segment's id. The rest derive from it. */
+    id?: string;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A verification code entered one segment at a time.
+ *
+ * **A paste of the whole code lands in every segment.** A reader who has the code
+ * on their clipboard has already done the hard part, and a field that accepted one
+ * character per paste would make them retype it one box at a time, which is what
+ * they are on their phone to avoid. So a paste into the first segment is
+ * distributed across the ones after it and `onComplete` fires once, from the paste,
+ * rather than after six keystrokes.
+ *
+ * **A refused character is refused, not stored.** Whitespace is dropped and
+ * anything outside `characters` is refused, whether it was typed or pasted, so
+ * "123 456" pastes as `123456` and `12345a6` pastes as `123456`. The alternative,
+ * accepting the text and rejecting it at the server, gives the reader a field
+ * that looks right and a form that does not submit.
+ *
+ * **The code is one value, not six.** The segments are six views of one string of
+ * `length` characters, so Backspace removes a character from the string and the
+ * characters after it close up: on `123456`, Backspace in the third segment leaves
+ * `12456`. Six boxes that each had to be emptied by hand would need a rule for
+ * what Backspace on an empty box means, and every version of that rule is wrong
+ * for somebody. The rule that does nothing traps a reader who is correcting a
+ * digit; the rule that clears the box before deletes a character they did not ask
+ * to delete.
+ *
+ * **The character set, the normaliser and the words are all the caller's.** Which
+ * characters a code may contain is decided by the service that issued it, folding
+ * case is a rule only the caller knows, and every segment's accessible name is a
+ * phrase. Nothing here is a table of words or a regular expression.
+ *
+ * **The first segment is named by a real `<label>`, and it is hidden.** Base UI
+ * strips `aria-label` from that one segment on purpose: it is the segment the
+ * platform autofills, and the label element is what names the autofill prompt as
+ * well as the field. This Component renders that label visually hidden, because a
+ * label above a row of six boxes is the caller's to place. Pass `id` and put your
+ * own `Label` on the first segment, and this one steps aside.
+ *
+ * **One Tab stop for the whole code.** A reader reaches the first segment and the
+ * rest follow as they type, so the code is one stop in a form rather than six, and
+ * the segments are a named group rather than six fields in a row. It is built on
+ * Base UI's OTP field, which owns the segmentation, the clamping to `length` and
+ * the autofill hint the platform needs for a one-time code.
+ */
+declare function OneTimeCode({ label, length, characters, normalize, segmentLabel, grouping, value, defaultValue, onValueChange, onComplete, onInvalid, autoSubmit, mask, disabled, required, readOnly, name, form, id, className, }: OneTimeCodeProps): import("react").JSX.Element;
+export { OneTimeCode };
+//# sourceMappingURL=one-time-code.d.ts.map

package/dist/components/ui/one-time-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code.d.ts","sourceRoot":"","sources":["../../../src/components/ui/one-time-code.tsx"],"names":[],"mappings":"AAOA,qFAAqF;AACrF,MAAM,WAAW,mBAAmB;IAClC,yEAAyE;IACzE,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACjC,2EAA2E;IAC3E,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC;AAED,2CAA2C;AAC3C,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAA;IACd;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,CAAA;IAC1D;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,MAAM,EACN,UAAsB,EACtB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,UAAkB,EAClB,IAAY,EACZ,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,GACV,EAAE,gBAAgB,+BA0ElB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/one-time-code.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OTPField as OTPFieldPrimitive } from '@base-ui/react/otp-field';
+import { Fragment, useId } from 'react';
+import { cn } from '../../lib/utils.js';
+/**
+ * A verification code entered one segment at a time.
+ *
+ * **A paste of the whole code lands in every segment.** A reader who has the code
+ * on their clipboard has already done the hard part, and a field that accepted one
+ * character per paste would make them retype it one box at a time, which is what
+ * they are on their phone to avoid. So a paste into the first segment is
+ * distributed across the ones after it and `onComplete` fires once, from the paste,
+ * rather than after six keystrokes.
+ *
+ * **A refused character is refused, not stored.** Whitespace is dropped and
+ * anything outside `characters` is refused, whether it was typed or pasted, so
+ * "123 456" pastes as `123456` and `12345a6` pastes as `123456`. The alternative,
+ * accepting the text and rejecting it at the server, gives the reader a field
+ * that looks right and a form that does not submit.
+ *
+ * **The code is one value, not six.** The segments are six views of one string of
+ * `length` characters, so Backspace removes a character from the string and the
+ * characters after it close up: on `123456`, Backspace in the third segment leaves
+ * `12456`. Six boxes that each had to be emptied by hand would need a rule for
+ * what Backspace on an empty box means, and every version of that rule is wrong
+ * for somebody. The rule that does nothing traps a reader who is correcting a
+ * digit; the rule that clears the box before deletes a character they did not ask
+ * to delete.
+ *
+ * **The character set, the normaliser and the words are all the caller's.** Which
+ * characters a code may contain is decided by the service that issued it, folding
+ * case is a rule only the caller knows, and every segment's accessible name is a
+ * phrase. Nothing here is a table of words or a regular expression.
+ *
+ * **The first segment is named by a real `<label>`, and it is hidden.** Base UI
+ * strips `aria-label` from that one segment on purpose: it is the segment the
+ * platform autofills, and the label element is what names the autofill prompt as
+ * well as the field. This Component renders that label visually hidden, because a
+ * label above a row of six boxes is the caller's to place. Pass `id` and put your
+ * own `Label` on the first segment, and this one steps aside.
+ *
+ * **One Tab stop for the whole code.** A reader reaches the first segment and the
+ * rest follow as they type, so the code is one stop in a form rather than six, and
+ * the segments are a named group rather than six fields in a row. It is built on
+ * Base UI's OTP field, which owns the segmentation, the clamping to `length` and
+ * the autofill hint the platform needs for a one-time code.
+ */
+function OneTimeCode({ label, length, characters = 'numeric', normalize, segmentLabel, grouping, value, defaultValue, onValueChange, onComplete, onInvalid, autoSubmit = false, mask = false, disabled = false, required = false, readOnly = false, name, form, id, className, }) {
+    const generated = useId();
+    const firstId = id ?? generated;
+    const boundary = (index) => grouping?.after.includes(index) === true;
+    return (_jsxs(OTPFieldPrimitive.Root, { "data-slot": "one-time-code", className: cn('flex items-center justify-center gap-2', className), length: length, validationType: characters, ...(normalize === undefined ? null : { normalizeValue: normalize }), ...(value === undefined ? {} : { value }), ...(defaultValue === undefined ? {} : { defaultValue }), onValueChange: (next) => onValueChange?.(next), onValueComplete: (next) => onComplete?.(next), onValueInvalid: (attempted) => onInvalid?.(attempted), autoSubmit: autoSubmit, mask: mask, disabled: disabled, required: required, readOnly: readOnly, name: name, ...(form === undefined ? null : { form }), id: firstId, "aria-label": label, children: [id === undefined ? (_jsx("label", { htmlFor: firstId, className: "sr-only", children: label })) : null, Array.from({ length }, (_, index) => (_jsxs(Fragment, { children: [_jsx(OTPFieldPrimitive.Input, { "data-slot": "one-time-code-input", ...(index === 0
+                            ? null
+                            : { 'aria-label': segmentLabel === undefined ? label : segmentLabel(index) }), className: cn('border-input bg-background text-foreground h-11 w-9 rounded-md border text-center text-base tabular-nums outline-none', 'transition-[color,box-shadow] duration-fast ease-out', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'pointer-coarse:size-11') }), boundary(index) ? (_jsx("span", { "data-slot": "one-time-code-separator", "aria-hidden": "true", className: "text-muted-foreground shrink-0 text-base", children: grouping?.separator })) : null] }, index)))] }));
+}
+export { OneTimeCode };

package/dist/components/ui/pagination.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The control that moves between pages of a paged collection.
  *

package/dist/components/ui/popover.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * A floating surface opened by a trigger.
  *

package/dist/components/ui/product-mark.d.ts

@@ -1,4 +1,4 @@
-import type { PackId } from '../../theming';
+import type { PackId } from '../../theming/index.js';
 /**
  * The three sizes a product mark is drawn at: the mark's diameter and the name
  * beside it, taken together so the two parts of the mark stay in proportion.

package/dist/components/ui/product-mark.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 full spectrum, as the five series tokens and nothing else.
  *

package/dist/components/ui/product-switcher.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { type ProductMarkProps, type ProductMarkSize } from './product-mark';
+import { type ProductMarkProps, type ProductMarkSize } from './product-mark.js';
 /**
  * One product in the set a switcher moves between.
  *

package/dist/components/ui/product-switcher.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ProductMark } from './product-mark';
-import { cn } from '../../lib/utils';
+import { ProductMark } from './product-mark.js';
+import { cn } from '../../lib/utils.js';
 /**
  * A switch between the members of a set of products.
  *

package/dist/components/ui/progress.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * A bar that reports how far a task has progressed.
  *

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.
  *

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.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.
  *

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

@@ -0,0 +1,129 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/**
+ * The divider's position, as a percentage along the group's main axis.
+ *
+ * A percentage rather than a pixel count because the group is a proportion of
+ * whatever the page gives it, and a divider measured in pixels is wrong the
+ * moment the window is resized or the group is put in a narrower column. A
+ * percentage is wrong for one case and that case is a pane whose content must
+ * not reflow, and a caller who needs one is measuring their content rather than
+ * asking for a split.
+ */
+type Position = number;
+/** How the panes are laid out, and therefore which pair of arrows moves a divider. */
+type ResizableOrientation = 'horizontal' | 'vertical';
+/** The props the Resizable group accepts. */
+export interface ResizableProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * The accessible name of the group.
+     *
+     * Required rather than defaulted, because a resizable is announced as two
+     * panes with a divider between them, and two unnamed panes side by side are a
+     * page where a reader is told "region" twice and cannot tell which is which.
+     */
+    label: string;
+    /** Whether the panes sit side by side or stacked. @defaultValue horizontal */
+    orientation?: ResizableOrientation;
+    /**
+     * The divider's starting position, as a percentage along the main axis.
+     * @defaultValue 50
+     */
+    defaultPosition?: Position;
+    /**
+     * The controlled divider position, as a percentage along the main axis.
+     *
+     * The position is a prop and a callback rather than something the group keeps
+     * to itself, and that is the decision this Component makes: **a split is
+     * worth remembering, and this Component will not remember it for you.** A
+     * reader who drags a sidebar to where their work fits and comes back to a
+     * reset split has been told the preference did not count, and the honest fix is
+     * the caller reading this and persisting it, because a design system cannot
+     * know a reader's storage, cannot know which of a reader's panes this one is,
+     * and cannot know whether a second reader of the same account wants the same
+     * number. Pass the stored value back as `position` and this is a controlled
+     * group with no storage of its own anywhere.
+     */
+    position?: Position;
+    /** Called when the divider moves, with the new position. */
+    onPositionChange?: (position: Position) => void;
+    /** Whether the divider ignores user interaction. @defaultValue false */
+    disabled?: boolean;
+    /** The panes and the divider between them. */
+    children?: ReactNode;
+}
+/** The props ResizablePanel accepts. */
+export interface ResizablePanelProps extends ComponentProps<'div'> {
+    /** The pane's share of the group, as a percentage. @defaultValue 50 */
+    size?: Position;
+}
+/**
+ * Two panes with a divider between them that both a pointer and a keyboard move.
+ *
+ * **The divider is the Component, and everything about it is a decision a
+ * consumer would otherwise make badly.** It is an ARIA separator that is
+ * focusable, so the split is operable without a pointer at all, and it reports
+ * `aria-valuenow` as the position along the split, so a reader is told where the
+ * divider is rather than only being able to feel it. Arrow keys move it by a
+ * small step, Home takes it to one end and End to the other, and both are
+ * clamped, so a reader who holds the key stops at the end rather than pushing a
+ * pane to nothing and being unable to get it back.
+ *
+ * **It remembers nothing across a reload, and that is deliberate.** The position
+ * is a prop and a callback, so a caller who wants a reader's split to survive a
+ * reload persists it and passes it back, and a design system that wrote to a
+ * reader's storage unasked would be making a claim about the product it does not
+ * know. The failure this prevents is a sidebar that silently resets, which is the
+ * same class of defect as a control that forgets a setting the reader chose and
+ * nobody can explain.
+ *
+ * **A divider has a name and it is the caller's word.** There is no default,
+ * because a default would be the same word on every divider on every page and
+ * would be true of none of them.
+ *
+ * This is the one Component here that is not composed on a Base UI primitive,
+ * because Base UI 1.8.0 ships none: the package has no `Resizable` in it, so the
+ * separator role, the focusable-divider keyboard model and the drag are authored
+ * here rather than wrapped. Every other overlay in this batch is composed, and a
+ * hand-rolled focus trap or portal would be a second and worse answer; a divider
+ * is none of those five things.
+ */
+declare function Resizable({ className, label, orientation, defaultPosition, position: positionProp, onPositionChange, disabled, ...props }: ResizableProps): import("react").JSX.Element;
+/**
+ * One pane of the split.
+ *
+ * `size` is a prop rather than something computed from the content, because a
+ * pane whose width depends on what is in it is how a split ends up reporting a
+ * different position after a reload than before one, and the divider is measured
+ * against a box the reader cannot predict.
+ */
+declare function ResizablePanel({ className, size, style, ...props }: ResizablePanelProps): import("react").JSX.Element;
+/**
+ * The divider, and the whole of the Component's behaviour.
+ *
+ * A focusable ARIA separator with a value, so the split is operable and
+ * announced: `role="separator"`, `aria-valuenow` for the position, and
+ * `aria-orientation` for the axis, which is what tells a reader whether the left
+ * and right arrows or the up and down ones are the ones to press.
+ */
+declare function ResizableHandle({ className, label, onKeyDown, ...props }: ResizableHandleProps): import("react").JSX.Element;
+/**
+ * The props ResizableHandle accepts.
+ *
+ * The `label` is required for the same reason the group's is, and it is a prop
+ * rather than a default because there is no honest default: a divider named
+ * "Resize" in a page with a file tree, a preview and a comment thread tells a
+ * reader nothing about which one they are holding, and the words that would
+ * tell them are the words for that product's panes.
+ */
+export interface ResizableHandleProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * The accessible name of this divider.
+     *
+     * Required. A divider with no name is announced as "separator", and a page
+     * with three of them is a page where a screen reader user cannot tell which
+     * one they are about to move.
+     */
+    label: string;
+}
+export { Resizable, ResizablePanel, ResizableHandle };
+//# sourceMappingURL=resizable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAId;;;;;;;;;GASG;AACH,KAAK,QAAQ,GAAG,MAAM,CAAA;AAEtB,sFAAsF;AACtF,KAAK,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAA;AAgDrD,6CAA6C;AAC7C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7E;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC;;;OAGG;IACH,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/C,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wCAAwC;AACxC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAChE,uEAAuE;IACvE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,KAAK,EACL,WAA0B,EAC1B,eAAoB,EACpB,QAAQ,EAAE,YAAY,EACtB,gBAAgB,EAChB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,cAAc,+BA0FhB;AAED;;;;;;;GAOG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,IAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAoBrF;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BA8FvF;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnF;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAED,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/resizable.js

@@ -0,0 +1,205 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+import { cn } from '../../lib/utils.js';
+/** The window the divider may travel in, as a percentage of the group. */
+const MIN = 10;
+const MAX = 90;
+/** How far one arrow-key press moves the divider, as a percentage of the group. */
+const STEP = 5;
+const ResizableContext = createContext(null);
+/**
+ * The group context, which a pane and a divider are both children of.
+ *
+ * The part name is a machine value and lowercase on purpose: it reaches a
+ * developer in a console and never a reader, and the gate that refuses shipped
+ * copy cannot tell a part's own name from a sentence. The diagnostic is the
+ * house's own shape, an error thrown when a caller has composed a part outside
+ * the group it belongs to, and the useful half of it is what to do about it.
+ */
+function useResizableContext(part) {
+    const context = useContext(ResizableContext);
+    if (context === null) {
+        throw new Error(`Resizable: the ${part} must be rendered inside a Resizable, because the split is owned by the group and neither part can know it on its own.`);
+    }
+    return context;
+}
+/**
+ * Two panes with a divider between them that both a pointer and a keyboard move.
+ *
+ * **The divider is the Component, and everything about it is a decision a
+ * consumer would otherwise make badly.** It is an ARIA separator that is
+ * focusable, so the split is operable without a pointer at all, and it reports
+ * `aria-valuenow` as the position along the split, so a reader is told where the
+ * divider is rather than only being able to feel it. Arrow keys move it by a
+ * small step, Home takes it to one end and End to the other, and both are
+ * clamped, so a reader who holds the key stops at the end rather than pushing a
+ * pane to nothing and being unable to get it back.
+ *
+ * **It remembers nothing across a reload, and that is deliberate.** The position
+ * is a prop and a callback, so a caller who wants a reader's split to survive a
+ * reload persists it and passes it back, and a design system that wrote to a
+ * reader's storage unasked would be making a claim about the product it does not
+ * know. The failure this prevents is a sidebar that silently resets, which is the
+ * same class of defect as a control that forgets a setting the reader chose and
+ * nobody can explain.
+ *
+ * **A divider has a name and it is the caller's word.** There is no default,
+ * because a default would be the same word on every divider on every page and
+ * would be true of none of them.
+ *
+ * This is the one Component here that is not composed on a Base UI primitive,
+ * because Base UI 1.8.0 ships none: the package has no `Resizable` in it, so the
+ * separator role, the focusable-divider keyboard model and the drag are authored
+ * here rather than wrapped. Every other overlay in this batch is composed, and a
+ * hand-rolled focus trap or portal would be a second and worse answer; a divider
+ * is none of those five things.
+ */
+function Resizable({ className, label, orientation = 'horizontal', defaultPosition = 50, position: positionProp, onPositionChange, disabled = false, ...props }) {
+    const [internal, setInternal] = useState(defaultPosition);
+    const [dragging, setDragging] = useState(false);
+    const group = useRef(null);
+    const { ref: callerRef, ...rest } = props;
+    // Both refs, rather than mine and then the caller's. The drag measures the
+    // pointer against this element's box, so a caller who forwarded a ref and
+    // silently replaced ours would get a divider the keyboard moves and the pointer
+    // does not, which is a split that only half works.
+    const setGroup = useCallback((element) => {
+        group.current = element;
+        if (typeof callerRef === 'function')
+            callerRef(element);
+        else if (callerRef !== null && callerRef !== undefined)
+            callerRef.current = element;
+    }, [callerRef]);
+    const controlled = positionProp !== undefined;
+    const position = controlled ? positionProp : internal;
+    /**
+     * The position every move is measured from, kept in a ref rather than read
+     * from the rendered value.
+     *
+     * This is the whole of the keyboard model and it is not a style choice. A
+     * reader who holds ArrowRight produces four key events before React has
+     * re-rendered, and a move that read the rendered position each time would see
+     * the same number four times and travel one step instead of four. The divider
+     * would then feel broken to exactly the reader using it the way it is meant to
+     * be used, and a drag would run behind the pointer.
+     */
+    const latest = useRef(position);
+    latest.current = position;
+    const moveTo = useCallback((next) => {
+        if (disabled)
+            return;
+        const clamped = Math.min(MAX, Math.max(MIN, next));
+        latest.current = clamped;
+        if (!controlled)
+            setInternal(clamped);
+        onPositionChange?.(clamped);
+    }, [controlled, disabled, onPositionChange]);
+    const moveBy = useCallback((delta) => {
+        if (disabled)
+            return;
+        moveTo(latest.current + delta);
+    }, [disabled, moveTo]);
+    const value = useMemo(() => ({
+        orientation,
+        position,
+        moveTo,
+        moveBy,
+        min: MIN,
+        max: MAX,
+        disabled,
+        dragging,
+        setDragging,
+        groupElement: () => group.current,
+    }), [orientation, position, moveTo, moveBy, disabled, dragging]);
+    return (_jsx(ResizableContext.Provider, { value: value, children: _jsx("div", { "data-slot": "resizable", role: "group", "aria-label": label, "data-orientation": orientation, "data-dragging": dragging ? 'true' : undefined, ref: setGroup, className: cn('flex h-full w-full', orientation === 'vertical' ? 'flex-col' : 'flex-row', 'data-[dragging]:select-none', className), ...rest }) }));
+}
+/**
+ * One pane of the split.
+ *
+ * `size` is a prop rather than something computed from the content, because a
+ * pane whose width depends on what is in it is how a split ends up reporting a
+ * different position after a reload than before one, and the divider is measured
+ * against a box the reader cannot predict.
+ */
+function ResizablePanel({ className, size = 50, style, ...props }) {
+    const { orientation, disabled } = useResizableContext('panel');
+    return (_jsx("div", { "data-slot": "resizable-panel", "data-orientation": orientation, "data-disabled": disabled ? 'true' : undefined, style: {
+            flexBasis: `${size}%`,
+            flexGrow: 0,
+            flexShrink: 0,
+            minWidth: 0,
+            minHeight: 0,
+            ...style,
+        }, className: cn('overflow-hidden', className), ...props }));
+}
+/**
+ * The divider, and the whole of the Component's behaviour.
+ *
+ * A focusable ARIA separator with a value, so the split is operable and
+ * announced: `role="separator"`, `aria-valuenow` for the position, and
+ * `aria-orientation` for the axis, which is what tells a reader whether the left
+ * and right arrows or the up and down ones are the ones to press.
+ */
+function ResizableHandle({ className, label, onKeyDown, ...props }) {
+    const { orientation, position, moveTo, moveBy, min, max, disabled, dragging, setDragging, groupElement, } = useResizableContext('divider');
+    const last = useRef(null);
+    const onPointerDown = (event) => {
+        if (disabled || event.button !== 0)
+            return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        // The pointer's own coordinate, and not the divider's, because a drag is a
+        // distance travelled and the first event is a press rather than a move.
+        last.current = orientation === 'horizontal' ? event.clientX : event.clientY;
+        setDragging(true);
+    };
+    const onPointerMove = (event) => {
+        if (last.current === null)
+            return;
+        const box = groupElement()?.getBoundingClientRect();
+        if (box === undefined)
+            return;
+        // Measured along the group's own axis, so a horizontal split follows the x
+        // and a vertical one follows the y, and a caller that passes the wrong
+        // `orientation` cannot get a divider that tracks the wrong coordinate.
+        const here = orientation === 'horizontal' ? event.clientX : event.clientY;
+        const delta = here - last.current;
+        const travel = orientation === 'horizontal' ? box.width : box.height;
+        if (travel === 0)
+            return;
+        moveBy((delta / travel) * 100);
+        last.current = here;
+    };
+    const endDrag = (event) => {
+        if (last.current === null)
+            return;
+        event.currentTarget.releasePointerCapture(event.pointerId);
+        last.current = null;
+        setDragging(false);
+    };
+    const onKey = (event) => {
+        if (disabled)
+            return;
+        const decrease = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+        const increase = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+        if (event.key === decrease)
+            moveBy(-STEP);
+        else if (event.key === increase)
+            moveBy(STEP);
+        else if (event.key === 'Home')
+            moveTo(min);
+        else if (event.key === 'End')
+            moveTo(max);
+        else
+            return;
+        // Only the keys this Component owns are prevented, so a reader who binds
+        // something else to the divider still gets it.
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    return (_jsx("div", { "data-slot": "resizable-handle", role: "separator", "aria-label": label, "aria-orientation": orientation, "aria-valuenow": Math.round(position), "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : undefined, tabIndex: disabled ? -1 : 0, "data-orientation": orientation, "data-dragging": dragging ? 'true' : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: (event) => {
+            onKey(event);
+            onKeyDown?.(event);
+        }, className: cn('bg-border relative shrink-0 touch-none outline-none', orientation === 'vertical' ? 'h-px w-full cursor-row-resize' : 'h-full w-px cursor-col-resize', 'transition-colors duration-fast ease-out', 'hover:bg-ring focus-visible:bg-ring data-[dragging]:bg-ring', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props }));
+}
+export { Resizable, ResizablePanel, ResizableHandle };