@openwarelabs/ui 0.12.2 → 0.14.0

package/dist/components/Image/Image.types.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, ImgHTMLAttributes, ReactNode } from "react";
+export type ImageFit = "cover" | "contain";
+export type ImageRadius = "none" | "control" | "container";
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> {
+    /**
+     * What the image shows, for screen readers and when it can't load. Required: pass `alt=""` for a decorative image
+     * that adds nothing to the text around it.
+     */
+    alt: string;
+    /** Width over height, such as `16 / 9` or `1`: the image fills a box of that shape as wide as its container. Leave it out to keep the image's own size. */
+    ratio?: number;
+    /** `cover` fills the box and crops what's over; `contain` shows the whole image, with space around it if the shapes differ. @default "cover" */
+    fit?: ImageFit;
+    /** The corners: `control` matches inputs and buttons (8px), `container` matches cards (12px). @default "none" */
+    radius?: ImageRadius;
+    /** Shown instead when the image fails to load or there's no `src`. @default an image icon on a muted ground */
+    fallback?: ReactNode;
+    /** A line under the image. With it, the image and the caption come in a `<figure>`. */
+    caption?: ReactNode;
+    /** Lazy loads the image only as it nears the screen; pass `"eager"` for one at the top of the page. @default "lazy" */
+    loading?: "lazy" | "eager";
+    /** @default "async" */
+    decoding?: "async" | "sync" | "auto";
+    /** Goes on the outer box (or the figure), not the `<img>`, so you can size and place it. */
+    className?: string;
+    /** Goes on the outer box (or the figure), not the `<img>`, so you can size and place it. */
+    style?: CSSProperties;
+}

package/dist/components/Menu/Menu.context.d.cts

@@ -0,0 +1,3 @@
+import type { MenuContextValue } from "./Menu.types.cjs";
+/** Lets a MenuItem close the menu around it. Menu and ContextMenu both provide it. */
+export declare const MenuContext: import("react").Context<MenuContextValue | null>;

package/dist/components/Menu/Menu.context.d.ts

@@ -0,0 +1,3 @@
+import type { MenuContextValue } from "./Menu.types.js";
+/** Lets a MenuItem close the menu around it. Menu and ContextMenu both provide it. */
+export declare const MenuContext: import("react").Context<MenuContextValue | null>;

package/dist/components/Menu/Menu.d.cts

@@ -1,43 +1,13 @@
-import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
-export interface MenuProps {
-    /** The button that opens it, usually a Button. Menu adds the click handler and the aria attributes. */
-    trigger: ReactElement;
-    /** MenuItem, MenuLabel and MenuSeparator. */
-    children: ReactNode;
-    /** Names the menu for screen readers. */
-    label: string;
-    /** Which edge of the trigger it lines up with.
-     * @default "start" */
-    align?: "start" | "end";
-    /** Prefers opening upward. Either way it flips when there's no room.
-     * @default false */
-    above?: boolean;
-    /** CSS width; default fits the items, at least 200px. */
-    width?: number | string;
-    /** Starts open, for documentation and tests. */
-    defaultOpen?: boolean;
-    className?: string;
-}
+import type { MenuItemProps, MenuLabelProps, MenuProps } from "./Menu.types.cjs";
+export type { MenuContextValue, MenuItemProps, MenuLabelProps, MenuProps } from "./Menu.types.cjs";
 /**
  * A dropdown menu of actions under a button. Opening it focuses the first item; the arrow keys, Home and End
  * move; Escape closes it and returns focus to the button; a click outside or Tab closes it.
  */
 export declare function Menu({ trigger, children, label, align, above, width, defaultOpen, className }: MenuProps): import("react").JSX.Element;
-export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
-    /** A 15px lucide-react icon before the label. */
-    icon?: ReactNode;
-    /** Runs the action; the menu then closes. */
-    onSelect?(): void;
-    /** Red, for actions that delete or can't be undone. */
-    destructive?: boolean;
-    /** Shown on the right, e.g. "⌘,". Only a shortcut that actually works. */
-    shortcut?: string;
-}
-/** One action in a Menu. */
+/** One action in a Menu or a ContextMenu. */
 export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A small uppercase heading for a group of items. */
-export declare function MenuLabel({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
+export declare function MenuLabel({ children }: MenuLabelProps): import("react").JSX.Element;
 /** A hairline between groups of items. */
 export declare function MenuSeparator(): import("react").JSX.Element;

package/dist/components/Menu/Menu.d.ts

@@ -1,43 +1,13 @@
-import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
-export interface MenuProps {
-    /** The button that opens it, usually a Button. Menu adds the click handler and the aria attributes. */
-    trigger: ReactElement;
-    /** MenuItem, MenuLabel and MenuSeparator. */
-    children: ReactNode;
-    /** Names the menu for screen readers. */
-    label: string;
-    /** Which edge of the trigger it lines up with.
-     * @default "start" */
-    align?: "start" | "end";
-    /** Prefers opening upward. Either way it flips when there's no room.
-     * @default false */
-    above?: boolean;
-    /** CSS width; default fits the items, at least 200px. */
-    width?: number | string;
-    /** Starts open, for documentation and tests. */
-    defaultOpen?: boolean;
-    className?: string;
-}
+import type { MenuItemProps, MenuLabelProps, MenuProps } from "./Menu.types.js";
+export type { MenuContextValue, MenuItemProps, MenuLabelProps, MenuProps } from "./Menu.types.js";
 /**
  * A dropdown menu of actions under a button. Opening it focuses the first item; the arrow keys, Home and End
  * move; Escape closes it and returns focus to the button; a click outside or Tab closes it.
  */
 export declare function Menu({ trigger, children, label, align, above, width, defaultOpen, className }: MenuProps): import("react").JSX.Element;
-export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
-    /** A 15px lucide-react icon before the label. */
-    icon?: ReactNode;
-    /** Runs the action; the menu then closes. */
-    onSelect?(): void;
-    /** Red, for actions that delete or can't be undone. */
-    destructive?: boolean;
-    /** Shown on the right, e.g. "⌘,". Only a shortcut that actually works. */
-    shortcut?: string;
-}
-/** One action in a Menu. */
+/** One action in a Menu or a ContextMenu. */
 export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A small uppercase heading for a group of items. */
-export declare function MenuLabel({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
+export declare function MenuLabel({ children }: MenuLabelProps): import("react").JSX.Element;
 /** A hairline between groups of items. */
 export declare function MenuSeparator(): import("react").JSX.Element;

package/dist/components/Menu/Menu.types.d.cts

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+export interface MenuProps {
+    /** The button that opens it, usually a Button. Menu adds the click handler and the aria attributes. */
+    trigger: ReactElement;
+    /** MenuItem, MenuLabel and MenuSeparator. */
+    children: ReactNode;
+    /** Names the menu for screen readers. */
+    label: string;
+    /** Which edge of the trigger it lines up with.
+     * @default "start" */
+    align?: "start" | "end";
+    /** Prefers opening upward. Either way it flips when there's no room.
+     * @default false */
+    above?: boolean;
+    /** CSS width; default fits the items, at least 200px. */
+    width?: number | string;
+    /** Starts open, for documentation and tests. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+    /** A 15px lucide-react icon before the label. */
+    icon?: ReactNode;
+    /** Runs the action; the menu then closes. */
+    onSelect?(): void;
+    /** Red, for actions that delete or can't be undone. */
+    destructive?: boolean;
+    /** Shown on the right, e.g. "⌘,". Only a shortcut that actually works. */
+    shortcut?: string;
+}
+export interface MenuLabelProps {
+    /** The heading's text. */
+    children: ReactNode;
+}
+/** What a MenuItem reaches for to close the menu it's in (a Menu or a ContextMenu). */
+export interface MenuContextValue {
+    /** Closes the menu and puts focus back where it was before it opened. */
+    close(): void;
+}

package/dist/components/Menu/Menu.types.d.ts

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+export interface MenuProps {
+    /** The button that opens it, usually a Button. Menu adds the click handler and the aria attributes. */
+    trigger: ReactElement;
+    /** MenuItem, MenuLabel and MenuSeparator. */
+    children: ReactNode;
+    /** Names the menu for screen readers. */
+    label: string;
+    /** Which edge of the trigger it lines up with.
+     * @default "start" */
+    align?: "start" | "end";
+    /** Prefers opening upward. Either way it flips when there's no room.
+     * @default false */
+    above?: boolean;
+    /** CSS width; default fits the items, at least 200px. */
+    width?: number | string;
+    /** Starts open, for documentation and tests. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+    /** A 15px lucide-react icon before the label. */
+    icon?: ReactNode;
+    /** Runs the action; the menu then closes. */
+    onSelect?(): void;
+    /** Red, for actions that delete or can't be undone. */
+    destructive?: boolean;
+    /** Shown on the right, e.g. "⌘,". Only a shortcut that actually works. */
+    shortcut?: string;
+}
+export interface MenuLabelProps {
+    /** The heading's text. */
+    children: ReactNode;
+}
+/** What a MenuItem reaches for to close the menu it's in (a Menu or a ContextMenu). */
+export interface MenuContextValue {
+    /** Closes the menu and puts focus back where it was before it opened. */
+    close(): void;
+}

package/dist/components/PasswordInput/PasswordInput.d.cts

@@ -0,0 +1,9 @@
+import type { PasswordInputProps } from "./PasswordInput.types.cjs";
+export { passwordStrength } from "./passwordStrength.cjs";
+export type { PasswordInputProps, PasswordRequirement, PasswordStrength, PasswordStrengthScorer } from "./PasswordInput.types.cjs";
+/**
+ * A password field with a button that shows and hides what's typed. It can also show how strong the password is, and a
+ * checklist of rules that tick as they're met. Every Input prop passes through, and the ref is the input's; `className`
+ * goes on the wrapper around the field and what's under it.
+ */
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,9 @@
+import type { PasswordInputProps } from "./PasswordInput.types.js";
+export { passwordStrength } from "./passwordStrength.js";
+export type { PasswordInputProps, PasswordRequirement, PasswordStrength, PasswordStrengthScorer } from "./PasswordInput.types.js";
+/**
+ * A password field with a button that shows and hides what's typed. It can also show how strong the password is, and a
+ * checklist of rules that tick as they're met. Every Input prop passes through, and the ref is the input's; `className`
+ * goes on the wrapper around the field and what's under it.
+ */
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/PasswordInput/PasswordInput.types.d.cts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import type { InputProps } from "../Input/Input.cjs";
+/** How strong a password is: a score from 0 (very weak) to 4 (strong), and the word shown for it. */
+export interface PasswordStrength {
+    /** 0 very weak, 1 weak, 2 fair, 3 good, 4 strong. */
+    score: 0 | 1 | 2 | 3 | 4;
+    /** The word shown and read out, such as "Good". Defaults to the score's: Very weak, Weak, Fair, Good, Strong. */
+    label?: string;
+}
+/** Scores a password, such as a wrapper around zxcvbn or your server's own rules. */
+export type PasswordStrengthScorer = (value: string) => PasswordStrength;
+/** One rule in the checklist under the field. */
+export interface PasswordRequirement {
+    /** What the rule asks for, such as "At least 12 characters". */
+    label: ReactNode;
+    /** Whether the password meets it. */
+    test(value: string): boolean;
+}
+export interface PasswordInputProps extends Omit<InputProps, "type" | "endContent"> {
+    /**
+     * Shows a strength meter under the field: `true` scores it with the built-in `passwordStrength`, or pass your own
+     * function from the value to `{ score, label }`. The word is announced politely as it changes.
+     * @default false
+     */
+    strength?: boolean | PasswordStrengthScorer;
+    /** Names the strength meter, and starts the line under it.
+     * @default "Password strength" */
+    strengthLabel?: string;
+    /** Rules shown as a checklist under the field, each ticked once the password meets it. */
+    requirements?: PasswordRequirement[];
+    /** Shows the password as text, when you control it. */
+    visible?: boolean;
+    /** Shows the password as text at first, when it controls itself.
+     * @default false */
+    defaultVisible?: boolean;
+    /** Called when the person shows or hides the password. */
+    onVisibleChange?(visible: boolean): void;
+    /** Names the show and hide button for screen readers. It stays the same either way; aria-pressed says which.
+     * @default "Show password" */
+    toggleLabel?: string;
+    /**
+     * What browsers and password managers fill in: `current-password` to sign in, `new-password` to sign up or change
+     * a password (so they offer a strong one).
+     * @default "current-password"
+     */
+    autoComplete?: string;
+}

package/dist/components/PasswordInput/PasswordInput.types.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import type { InputProps } from "../Input/Input.js";
+/** How strong a password is: a score from 0 (very weak) to 4 (strong), and the word shown for it. */
+export interface PasswordStrength {
+    /** 0 very weak, 1 weak, 2 fair, 3 good, 4 strong. */
+    score: 0 | 1 | 2 | 3 | 4;
+    /** The word shown and read out, such as "Good". Defaults to the score's: Very weak, Weak, Fair, Good, Strong. */
+    label?: string;
+}
+/** Scores a password, such as a wrapper around zxcvbn or your server's own rules. */
+export type PasswordStrengthScorer = (value: string) => PasswordStrength;
+/** One rule in the checklist under the field. */
+export interface PasswordRequirement {
+    /** What the rule asks for, such as "At least 12 characters". */
+    label: ReactNode;
+    /** Whether the password meets it. */
+    test(value: string): boolean;
+}
+export interface PasswordInputProps extends Omit<InputProps, "type" | "endContent"> {
+    /**
+     * Shows a strength meter under the field: `true` scores it with the built-in `passwordStrength`, or pass your own
+     * function from the value to `{ score, label }`. The word is announced politely as it changes.
+     * @default false
+     */
+    strength?: boolean | PasswordStrengthScorer;
+    /** Names the strength meter, and starts the line under it.
+     * @default "Password strength" */
+    strengthLabel?: string;
+    /** Rules shown as a checklist under the field, each ticked once the password meets it. */
+    requirements?: PasswordRequirement[];
+    /** Shows the password as text, when you control it. */
+    visible?: boolean;
+    /** Shows the password as text at first, when it controls itself.
+     * @default false */
+    defaultVisible?: boolean;
+    /** Called when the person shows or hides the password. */
+    onVisibleChange?(visible: boolean): void;
+    /** Names the show and hide button for screen readers. It stays the same either way; aria-pressed says which.
+     * @default "Show password" */
+    toggleLabel?: string;
+    /**
+     * What browsers and password managers fill in: `current-password` to sign in, `new-password` to sign up or change
+     * a password (so they offer a strong one).
+     * @default "current-password"
+     */
+    autoComplete?: string;
+}

package/dist/components/PasswordInput/passwordStrength.d.cts

@@ -0,0 +1,9 @@
+import type { PasswordStrength } from "./PasswordInput.types.cjs";
+/** The word for each score, from 0 to 4. */
+export declare const strengthLabels: readonly ["Very weak", "Weak", "Fair", "Good", "Strong"];
+/**
+ * A small, quick estimate of a password's strength, from 0 (very weak) to 4 (strong): points for length and for mixing
+ * lower case, upper case, digits and symbols, less for common passwords, repeats, runs like "1234" and years. It runs
+ * in the browser and sends nothing anywhere. It's a nudge, not a guarantee: check passwords against leaks on the server.
+ */
+export declare function passwordStrength(value: string): Required<PasswordStrength>;

package/dist/components/PasswordInput/passwordStrength.d.ts

@@ -0,0 +1,9 @@
+import type { PasswordStrength } from "./PasswordInput.types.js";
+/** The word for each score, from 0 to 4. */
+export declare const strengthLabels: readonly ["Very weak", "Weak", "Fair", "Good", "Strong"];
+/**
+ * A small, quick estimate of a password's strength, from 0 (very weak) to 4 (strong): points for length and for mixing
+ * lower case, upper case, digits and symbols, less for common passwords, repeats, runs like "1234" and years. It runs
+ * in the browser and sends nothing anywhere. It's a nudge, not a guarantee: check passwords against leaks on the server.
+ */
+export declare function passwordStrength(value: string): Required<PasswordStrength>;

package/dist/components/Rating/Rating.d.cts

@@ -0,0 +1,8 @@
+import type { RatingProps } from "./Rating.types.cjs";
+export type { RatingLabels, RatingProps } from "./Rating.types.cjs";
+/**
+ * Stars to pick a score, or to show one. Picking, it's a group of radios: the arrow keys change the rating,
+ * the pointer previews it, and it's sent with a form under its `name`. With `readOnly`, it shows a rating
+ * to any fraction, read as "4.5 out of 5 stars", with an optional count of reviews.
+ */
+export declare function Rating({ value, defaultValue, onChange, max, allowHalf, clearable, size, readOnly, disabled, showValue, count, name, required, isInvalid, labels: labelsProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, className, }: RatingProps): import("react").JSX.Element;

package/dist/components/Rating/Rating.d.ts

@@ -0,0 +1,8 @@
+import type { RatingProps } from "./Rating.types.js";
+export type { RatingLabels, RatingProps } from "./Rating.types.js";
+/**
+ * Stars to pick a score, or to show one. Picking, it's a group of radios: the arrow keys change the rating,
+ * the pointer previews it, and it's sent with a form under its `name`. With `readOnly`, it shows a rating
+ * to any fraction, read as "4.5 out of 5 stars", with an optional count of reviews.
+ */
+export declare function Rating({ value, defaultValue, onChange, max, allowHalf, clearable, size, readOnly, disabled, showValue, count, name, required, isInvalid, labels: labelsProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, className, }: RatingProps): import("react").JSX.Element;

package/dist/components/Rating/Rating.types.d.cts

@@ -0,0 +1,59 @@
+export interface RatingLabels {
+    /** Names one star's radio for screen readers.
+     * @default (value) => value === 1 ? "1 star" : `${value} stars` */
+    star?(value: number): string;
+    /** Reads out a rating that's shown, not picked.
+     * @default (value, max) => `${value} out of ${max} stars` */
+    summary?(value: number, max: number): string;
+    /** The text after the stars when there's a `count`.
+     * @default (count) => `${count} reviews`, with thousands separated */
+    count?(count: number): string;
+}
+export interface RatingProps {
+    /** The rating, when you control it. 0 is no rating yet. Read-only, it can be any fraction, like 4.6. */
+    value?: number;
+    /** The starting rating when uncontrolled.
+     * @default 0 */
+    defaultValue?: number;
+    /** Called with the new rating; 0 when it's cleared. */
+    onChange?(value: number): void;
+    /** How many stars.
+     * @default 5 */
+    max?: number;
+    /** Lets people pick half stars: the left half of a star is half a point.
+     * @default false */
+    allowHalf?: boolean;
+    /** Choosing the current rating again clears it, back to 0.
+     * @default false */
+    clearable?: boolean;
+    /** sm 16px, md 20px, lg 24px stars.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Shows a rating rather than asking for one: an image read as "4.5 out of 5 stars", filled to any fraction.
+     * @default false */
+    readOnly?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Shows the number after the stars, like 4.6.
+     * @default false */
+    showValue?: boolean;
+    /** How many ratings it's from, shown after the stars as "1,203 reviews". */
+    count?: number;
+    /** The form field name: the rating is sent under it (nothing when it's 0). Generated when left out. */
+    name?: string;
+    /** Asks for a rating before the form can be sent. */
+    required?: boolean;
+    /** Marks it invalid, with an error colour; Field sets this. */
+    isInvalid?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: RatingLabels;
+    /** Names the rating for screen readers when there's no Field label: "Rate this recipe". */
+    "aria-label"?: string;
+    /** Names the rating by another element's id, such as a Field's label; Field sets this. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the stars, so a Field's label points at them; Field sets this. */
+    id?: string;
+    className?: string;
+}

package/dist/components/Rating/Rating.types.d.ts

@@ -0,0 +1,59 @@
+export interface RatingLabels {
+    /** Names one star's radio for screen readers.
+     * @default (value) => value === 1 ? "1 star" : `${value} stars` */
+    star?(value: number): string;
+    /** Reads out a rating that's shown, not picked.
+     * @default (value, max) => `${value} out of ${max} stars` */
+    summary?(value: number, max: number): string;
+    /** The text after the stars when there's a `count`.
+     * @default (count) => `${count} reviews`, with thousands separated */
+    count?(count: number): string;
+}
+export interface RatingProps {
+    /** The rating, when you control it. 0 is no rating yet. Read-only, it can be any fraction, like 4.6. */
+    value?: number;
+    /** The starting rating when uncontrolled.
+     * @default 0 */
+    defaultValue?: number;
+    /** Called with the new rating; 0 when it's cleared. */
+    onChange?(value: number): void;
+    /** How many stars.
+     * @default 5 */
+    max?: number;
+    /** Lets people pick half stars: the left half of a star is half a point.
+     * @default false */
+    allowHalf?: boolean;
+    /** Choosing the current rating again clears it, back to 0.
+     * @default false */
+    clearable?: boolean;
+    /** sm 16px, md 20px, lg 24px stars.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Shows a rating rather than asking for one: an image read as "4.5 out of 5 stars", filled to any fraction.
+     * @default false */
+    readOnly?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Shows the number after the stars, like 4.6.
+     * @default false */
+    showValue?: boolean;
+    /** How many ratings it's from, shown after the stars as "1,203 reviews". */
+    count?: number;
+    /** The form field name: the rating is sent under it (nothing when it's 0). Generated when left out. */
+    name?: string;
+    /** Asks for a rating before the form can be sent. */
+    required?: boolean;
+    /** Marks it invalid, with an error colour; Field sets this. */
+    isInvalid?: boolean;
+    /** The words it uses, for other languages. */
+    labels?: RatingLabels;
+    /** Names the rating for screen readers when there's no Field label: "Rate this recipe". */
+    "aria-label"?: string;
+    /** Names the rating by another element's id, such as a Field's label; Field sets this. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the stars, so a Field's label points at them; Field sets this. */
+    id?: string;
+    className?: string;
+}

package/dist/components/Splitter/Splitter.d.cts

@@ -0,0 +1,14 @@
+import type { SplitterHandleProps, SplitterPanelProps, SplitterProps } from "./Splitter.types.cjs";
+export type { SplitterDirection, SplitterHandleProps, SplitterPanelProps, SplitterProps } from "./Splitter.types.cjs";
+/**
+ * Lays panels side by side, or stacked, with a handle between each pair to drag them bigger or smaller. Sizes are
+ * percentages. Handles move with the arrow keys too, and a collapsible panel folds away with Enter or a double-click.
+ */
+export declare function Splitter({ children, direction, sizes, defaultSizes, onSizesChange, autoSaveId, className, ...props }: SplitterProps): import("react").JSX.Element;
+/** One of a Splitter's panels. Give it a `defaultSize`, and limits with `minSize` and `maxSize`. */
+export declare function SplitterPanel({ defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, collapsible: _collapsible, collapsedSize: _collapsedSize, onResize: _onResize, onCollapsedChange: _onCollapsedChange, className, style, ...props }: SplitterPanelProps): import("react").JSX.Element;
+/**
+ * The line between two panels. Drag it, or focus it and use the arrow keys (Shift for bigger steps), Home and End.
+ * Enter or a double-click collapses a collapsible panel beside it, and expands it again.
+ */
+export declare function SplitterHandle({ "aria-label": ariaLabel, grip, disabled, className, onPointerDown, onKeyDown, onDoubleClick, ...props }: SplitterHandleProps): import("react").JSX.Element | null;

package/dist/components/Splitter/Splitter.d.ts

@@ -0,0 +1,14 @@
+import type { SplitterHandleProps, SplitterPanelProps, SplitterProps } from "./Splitter.types.js";
+export type { SplitterDirection, SplitterHandleProps, SplitterPanelProps, SplitterProps } from "./Splitter.types.js";
+/**
+ * Lays panels side by side, or stacked, with a handle between each pair to drag them bigger or smaller. Sizes are
+ * percentages. Handles move with the arrow keys too, and a collapsible panel folds away with Enter or a double-click.
+ */
+export declare function Splitter({ children, direction, sizes, defaultSizes, onSizesChange, autoSaveId, className, ...props }: SplitterProps): import("react").JSX.Element;
+/** One of a Splitter's panels. Give it a `defaultSize`, and limits with `minSize` and `maxSize`. */
+export declare function SplitterPanel({ defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, collapsible: _collapsible, collapsedSize: _collapsedSize, onResize: _onResize, onCollapsedChange: _onCollapsedChange, className, style, ...props }: SplitterPanelProps): import("react").JSX.Element;
+/**
+ * The line between two panels. Drag it, or focus it and use the arrow keys (Shift for bigger steps), Home and End.
+ * Enter or a double-click collapses a collapsible panel beside it, and expands it again.
+ */
+export declare function SplitterHandle({ "aria-label": ariaLabel, grip, disabled, className, onPointerDown, onKeyDown, onDoubleClick, ...props }: SplitterHandleProps): import("react").JSX.Element | null;

package/dist/components/Splitter/Splitter.layout.d.cts

@@ -0,0 +1,12 @@
+import type { SplitterPanelLimits } from "./Splitter.types.cjs";
+export declare const isCollapsed: (limits: SplitterPanelLimits, size: number) => boolean;
+/** Panels with a default size keep it; the rest share what's left. Then everything is scaled to add up to 100. */
+export declare function initialSizes(defaults: Array<number | undefined>): number[];
+export declare function normalise(sizes: number[]): number[];
+/**
+ * Moves the handle after panel `handle` by `delta` percent: the panel on the side it moves away from grows (up to its
+ * maximum), and the panels on the other side shrink in turn, nearest first, down to their minimums. With `snap`, a
+ * collapsible panel collapses once it's dragged more than halfway from its minimum to its collapsed size, and
+ * expands again past the same point.
+ */
+export declare function moveHandle(sizes: number[], limits: SplitterPanelLimits[], handle: number, delta: number, snap: boolean): number[];

package/dist/components/Splitter/Splitter.layout.d.ts

@@ -0,0 +1,12 @@
+import type { SplitterPanelLimits } from "./Splitter.types.js";
+export declare const isCollapsed: (limits: SplitterPanelLimits, size: number) => boolean;
+/** Panels with a default size keep it; the rest share what's left. Then everything is scaled to add up to 100. */
+export declare function initialSizes(defaults: Array<number | undefined>): number[];
+export declare function normalise(sizes: number[]): number[];
+/**
+ * Moves the handle after panel `handle` by `delta` percent: the panel on the side it moves away from grows (up to its
+ * maximum), and the panels on the other side shrink in turn, nearest first, down to their minimums. With `snap`, a
+ * collapsible panel collapses once it's dragged more than halfway from its minimum to its collapsed size, and
+ * expands again past the same point.
+ */
+export declare function moveHandle(sizes: number[], limits: SplitterPanelLimits[], handle: number, delta: number, snap: boolean): number[];

package/dist/components/Splitter/Splitter.types.d.cts

@@ -0,0 +1,69 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type SplitterDirection = "horizontal" | "vertical";
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** SplitterPanels with a SplitterHandle between each pair, straight inside (fragments are fine). */
+    children: ReactNode;
+    /** `horizontal` puts the panels side by side, `vertical` stacks them.
+     * @default "horizontal" */
+    direction?: SplitterDirection;
+    /** Each panel's size in percent, in order, adding up to 100, when you control it. */
+    sizes?: number[];
+    /** The sizes at first, when it controls itself. Without it, each panel's `defaultSize` is used, and panels without
+     * one share what's left. */
+    defaultSizes?: number[];
+    /** Called with every panel's size, in percent, as they change: while dragging, on each key press, on collapsing. */
+    onSizesChange?(sizes: number[]): void;
+    /** Remembers the sizes in localStorage under this name and puts them back next time. Give each splitter its own. */
+    autoSaveId?: string;
+}
+export interface SplitterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onResize"> {
+    children?: ReactNode;
+    /** Its size at first, in percent of the splitter. Panels without one share what the others leave. */
+    defaultSize?: number;
+    /** The smallest it can be dragged, in percent. @default 0 */
+    minSize?: number;
+    /** The largest it can be dragged, in percent. @default 100 */
+    maxSize?: number;
+    /** Lets it fold away: dragging well past `minSize`, double-clicking its handle, or Enter on the handle collapses it
+     * to `collapsedSize`, and the same expands it again. @default false */
+    collapsible?: boolean;
+    /** Its size when collapsed, in percent: 0 hides it, more leaves a strip such as a rail of icons. @default 0 */
+    collapsedSize?: number;
+    /** Called with its new size, in percent, when it changes. */
+    onResize?(size: number): void;
+    /** Called when it collapses or expands. */
+    onCollapsedChange?(collapsed: boolean): void;
+}
+export interface SplitterHandleProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
+    /** Names the handle for screen readers: say which panel it resizes, such as "Resize sidebar".
+     * @default "Resize panels" */
+    "aria-label"?: string;
+    /** Shows a small grip on the line, so it's easier to see and to catch on a touch screen. @default false */
+    grip?: boolean;
+    /** Keeps the panels at their sizes: the handle can't be dragged or focused. @default false */
+    disabled?: boolean;
+}
+/** A panel's limits, in percent, as the layout maths reads them. Internal. */
+export interface SplitterPanelLimits {
+    minSize: number;
+    maxSize: number;
+    collapsible: boolean;
+    collapsedSize: number;
+}
+/** What a Splitter shares with its panels and handles. Internal. */
+export interface SplitterState {
+    direction: SplitterDirection;
+    sizes: number[];
+    limits: SplitterPanelLimits[];
+    /** Each panel's element id, for the handles' aria-controls. */
+    panelIds: string[];
+    /** Moves handle `handle` by `delta` percent; `snap` lets a collapsible panel fold or unfold on the way. */
+    move(handle: number, delta: number, snap: boolean, from?: number[]): void;
+    /** Collapses or expands the collapsible panel beside the handle. */
+    toggle(handle: number): void;
+    /** The panels' length along the direction, in pixels, and whether a horizontal splitter runs right to left. */
+    measure(): {
+        length: number;
+        reversed: boolean;
+    };
+}