sonahang-ui 1.0.0

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,70 @@
+import type { DialogHTMLAttributes, ReactNode, RefObject } from "react";
+import type { DialogRole, DialogSize } from "./dialog.tokens";
+import "./Dialog.css";
+export type DialogProps = {
+    /**
+     * Whether the dialog is showing.
+     *
+     * Controlled only, deliberately: a modal has no trigger of its own, so it's
+     * always opened from somewhere else in the app. An uncontrolled dialog could
+     * never be opened.
+     */
+    open: boolean;
+    /**
+     * Called when the dialog asks to close — the close button, the backdrop, or
+     * Escape. Nothing closes on its own; this has to set `open` to false.
+     */
+    onClose: () => void;
+    /** Accessible name, rendered as the heading. */
+    title: ReactNode;
+    /** Optional supporting line under the title. */
+    description?: ReactNode;
+    /** Body content. Scrolls when it outgrows the dialog. */
+    children?: ReactNode;
+    /** Action row pinned below the body — usually buttons. */
+    footer?: ReactNode;
+    /** Width of the dialog. Defaults to `md`. */
+    size?: DialogSize;
+    /** Defaults to `dialog`. Use `alertdialog` for a decision that can't wait. */
+    role?: DialogRole;
+    /** Whether Escape closes the dialog. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Whether clicking the backdrop closes the dialog. Defaults to true. */
+    closeOnBackdropClick?: boolean;
+    /** Whether to render the × in the header. Defaults to true. */
+    showClose?: boolean;
+    /** Accessible name for the × button. Defaults to "Close". */
+    closeLabel?: string;
+    /**
+     * Element to focus when the dialog opens. Without it the browser focuses the
+     * first focusable thing inside, or anything carrying `autoFocus`.
+     */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** Whether to freeze page scrolling while open. Defaults to true. */
+    lockScroll?: boolean;
+    /**
+     * Renders the dialog elsewhere in the DOM — `true` for `document.body`, or
+     * an element to render into. Off by default.
+     *
+     * Not needed for stacking or clipping: `showModal()` puts the dialog in the
+     * top layer, which sits above the whole document whatever the `z-index` and
+     * `overflow` of its ancestors. Reach for this when the dialog's *position in
+     * the DOM* is the problem — nested inside a `<form>` whose submission its
+     * buttons would trigger, inside an element with a native click listener, or
+     * under an ancestor that may become `inert` or unmount beneath it.
+     *
+     * It does not change event propagation in React: a portal moves the DOM
+     * node, not the React tree, so a parent component's `onClick` still fires.
+     */
+    portal?: boolean | HTMLElement;
+    className?: string;
+} & Omit<DialogHTMLAttributes<HTMLDialogElement>, "className" | "title" | "role" | "open" | "onClose" | "onCancel">;
+/**
+ * Modal dialog built on the native `<dialog>` element.
+ *
+ * `showModal()` puts it in the top layer, which is what makes it immune to
+ * `z-index` and `overflow: hidden` on anything around it, and brings the focus
+ * trap, the inert background and the backdrop with it. None of that is
+ * reimplemented here.
+ */
+export declare function Dialog({ open, onClose, title, description, children, footer, size, role, closeOnEscape, closeOnBackdropClick, showClose, closeLabel, initialFocus, lockScroll, portal, className, ...props }: DialogProps): ReactNode;

package/dist/components/Dialog/dialog.tokens.d.ts

@@ -0,0 +1,8 @@
+export declare const dialogSizes: readonly ["sm", "md", "lg", "fullscreen"];
+export type DialogSize = (typeof dialogSizes)[number];
+/**
+ * `alertdialog` tells assistive tech the content is urgent and needs a
+ * response — reserve it for confirmations and destructive warnings.
+ */
+export declare const dialogRoles: readonly ["dialog", "alertdialog"];
+export type DialogRole = (typeof dialogRoles)[number];

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,4 @@
+export { Dialog } from "./Dialog";
+export type { DialogProps } from "./Dialog";
+export { dialogSizes, dialogRoles } from "./dialog.tokens";
+export type { DialogSize, DialogRole } from "./dialog.tokens";

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,72 @@
+import type { DialogHTMLAttributes, ReactNode, RefObject } from "react";
+import type { DrawerSide, DrawerSize } from "./drawer.tokens";
+import "./Drawer.css";
+export type DrawerProps = {
+    /**
+     * Whether the drawer is showing.
+     *
+     * Controlled only, like `Dialog`: a modal surface has no trigger of its own,
+     * so an uncontrolled one could never be opened.
+     */
+    open: boolean;
+    /**
+     * Called when the drawer asks to close — the close button, the scrim, or
+     * Escape. Nothing closes on its own; this has to set `open` to false.
+     */
+    onClose: () => void;
+    /** Accessible name, rendered as the heading. */
+    title: ReactNode;
+    /** Optional supporting line under the title. */
+    description?: ReactNode;
+    /** Body content. Scrolls when it outgrows the drawer. */
+    children?: ReactNode;
+    /** Action row pinned below the body — usually buttons. */
+    footer?: ReactNode;
+    /** Edge to anchor to and slide in from. Defaults to `right`. */
+    side?: DrawerSide;
+    /** Extent along the drawer's own axis. Defaults to `md`. */
+    size?: DrawerSize;
+    /** Whether Escape closes the drawer. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Whether clicking the scrim closes the drawer. Defaults to true. */
+    closeOnBackdropClick?: boolean;
+    /** Whether to render the × in the header. Defaults to true. */
+    showClose?: boolean;
+    /** Accessible name for the × button. Defaults to "Close". */
+    closeLabel?: string;
+    /**
+     * Element to focus when the drawer opens. Without it the browser focuses the
+     * first focusable thing inside, or anything carrying `autoFocus`.
+     */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** Whether to freeze page scrolling while open. Defaults to true. */
+    lockScroll?: boolean;
+    /**
+     * Renders the drawer elsewhere in the DOM — `true` for `document.body`, or
+     * an element to render into. Off by default.
+     *
+     * Not needed for stacking or clipping: `showModal()` puts the drawer in the
+     * top layer, above the whole document whatever the `z-index` and `overflow`
+     * of its ancestors. Reach for this when the drawer's *position in the DOM*
+     * is the problem — nested inside a `<form>` whose submission its buttons
+     * would trigger, inside an element with a native click listener, or under an
+     * ancestor that may become `inert` or unmount beneath it.
+     *
+     * It does not change event propagation in React: a portal moves the DOM
+     * node, not the React tree, so a parent component's `onClick` still fires.
+     */
+    portal?: boolean | HTMLElement;
+    className?: string;
+} & Omit<DialogHTMLAttributes<HTMLDialogElement>, "className" | "title" | "role" | "open" | "onClose" | "onCancel">;
+/**
+ * Panel that slides in from an edge of the viewport, over the page.
+ *
+ * Shares every behaviour with `Dialog` — both are a modal native `<dialog>`,
+ * so both get the top layer, the focus trap, the inert background and the
+ * scrim from the browser rather than from code here. The difference is purely
+ * geometric: a drawer is pinned to one edge and fills its cross axis.
+ *
+ * There's deliberately no `alertdialog` option. A decision urgent enough for
+ * that role shouldn't arrive as a panel sliding in from the side.
+ */
+export declare function Drawer({ open, onClose, title, description, children, footer, side, size, closeOnEscape, closeOnBackdropClick, showClose, closeLabel, initialFocus, lockScroll, portal, className, ...props }: DrawerProps): ReactNode;

package/dist/components/Drawer/drawer.tokens.d.ts

@@ -0,0 +1,10 @@
+/** Edge the drawer is anchored to and slides in from. */
+export declare const drawerSides: readonly ["left", "right", "top", "bottom"];
+export type DrawerSide = (typeof drawerSides)[number];
+/**
+ * Extent along the drawer's own axis — width for `left`/`right`, height for
+ * `top`/`bottom`. Always capped at the viewport, so `sm` on a narrow phone is
+ * simply full-bleed rather than overflowing.
+ */
+export declare const drawerSizes: readonly ["sm", "md", "lg", "full"];
+export type DrawerSize = (typeof drawerSizes)[number];

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,4 @@
+export { Drawer } from "./Drawer";
+export type { DrawerProps } from "./Drawer";
+export { drawerSides, drawerSizes } from "./drawer.tokens";
+export type { DrawerSide, DrawerSize } from "./drawer.tokens";

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { DropdownAlign, DropdownPlacement } from "./dropdown.context";
+import "./Dropdown.css";
+export type DropdownProps = {
+    children?: ReactNode;
+    /** Open state — makes the component controlled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Defaults to closed. */
+    defaultOpen?: boolean;
+    /** Fired whenever the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Which side of the trigger the menu sits on. Defaults to `bottom`. */
+    placement?: DropdownPlacement;
+    /** Which edge the menu lines up with. Defaults to `start`. */
+    align?: DropdownAlign;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className">;
+/**
+ * Root of a menu-button dropdown: a trigger and a popup of commands.
+ *
+ * This is the *action* menu pattern (`role="menu"`), not a value picker —
+ * use `Select` for choosing a value. Nothing here is a form control.
+ */
+export declare function Dropdown({ children, open: controlledOpen, defaultOpen, onOpenChange, placement, align, className, ...props }: DropdownProps): import("react").JSX.Element;

package/dist/components/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import "./Dropdown.css";
+export type DropdownItemProps = {
+    children?: ReactNode;
+    /** Runs when the item is chosen. The menu closes afterwards. */
+    onSelect?: () => void;
+    /** Keeps the menu open after choosing — for items that toggle something. */
+    closeOnSelect?: boolean;
+    /** Icon rendered before the label. */
+    icon?: ReactNode;
+    /** Styles the item as a destructive action. */
+    destructive?: boolean;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "onSelect">;
+/** A single command in the menu. */
+export declare function DropdownItem({ children, onSelect, closeOnSelect, icon, destructive, className, onClick, ...props }: DropdownItemProps): import("react").JSX.Element;

package/dist/components/Dropdown/DropdownMenu.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Dropdown.css";
+export type DropdownMenuProps = {
+    children?: ReactNode;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className">;
+/**
+ * The popup list of commands.
+ *
+ * Unmounted while closed rather than hidden, so there's nothing focusable or
+ * announceable left behind, and owns the roving focus the menu pattern needs.
+ */
+export declare function DropdownMenu({ children, className, onKeyDown, ...props }: DropdownMenuProps): import("react").JSX.Element | null;

package/dist/components/Dropdown/DropdownSeparator.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+import "./Dropdown.css";
+export type DropdownSeparatorProps = {
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className">;
+/**
+ * Divider between groups of commands. Carries `role="separator"` rather than
+ * `aria-hidden`, so the grouping is conveyed to assistive tech too.
+ */
+export declare function DropdownSeparator({ className, ...props }: DropdownSeparatorProps): import("react").JSX.Element;

package/dist/components/Dropdown/DropdownTrigger.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import "./Dropdown.css";
+export type DropdownTriggerProps = {
+    children?: ReactNode;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">;
+/** Button that opens the menu. */
+export declare function DropdownTrigger({ children, className, onClick, onKeyDown, ...props }: DropdownTriggerProps): import("react").JSX.Element;

package/dist/components/Dropdown/dropdown.context.d.ts

@@ -0,0 +1,24 @@
+import type { RefObject } from "react";
+/** Where focus should land when the menu opens, or null to leave it alone. */
+export type DropdownFocusTarget = "first" | "last" | null;
+export type DropdownPlacement = "bottom" | "top";
+export type DropdownAlign = "start" | "end";
+export type DropdownContextValue = {
+    isOpen: boolean;
+    /** Opens the menu, optionally moving focus to an end of the list. */
+    open: (focus?: DropdownFocusTarget) => void;
+    /** Closes the menu. Returns focus to the trigger unless told not to. */
+    close: (options?: {
+        restoreFocus?: boolean;
+    }) => void;
+    /** Set while the menu is opening, consumed once by the menu on mount. */
+    focusOnOpen: DropdownFocusTarget;
+    triggerId: string;
+    menuId: string;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    placement: DropdownPlacement;
+    align: DropdownAlign;
+};
+export declare const DropdownContext: import("react").Context<DropdownContextValue | undefined>;
+/** Reads the surrounding `Dropdown`, failing loudly rather than silently. */
+export declare function useDropdownContext(component: string): DropdownContextValue;

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,11 @@
+export { Dropdown } from "./Dropdown";
+export type { DropdownProps } from "./Dropdown";
+export { DropdownTrigger } from "./DropdownTrigger";
+export type { DropdownTriggerProps } from "./DropdownTrigger";
+export { DropdownMenu } from "./DropdownMenu";
+export type { DropdownMenuProps } from "./DropdownMenu";
+export { DropdownItem } from "./DropdownItem";
+export type { DropdownItemProps } from "./DropdownItem";
+export { DropdownSeparator } from "./DropdownSeparator";
+export type { DropdownSeparatorProps } from "./DropdownSeparator";
+export type { DropdownPlacement, DropdownAlign } from "./dropdown.context";

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ButtonVariant } from "../Button";
+import "./EmptyState.css";
+export type EmptyStateHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * A call to action.
+ *
+ * `href` makes it a link and `onClick` makes it a button — the two are the
+ * same offer to the user but very different elements, and picking the wrong
+ * one costs middle-click, right-click and keyboard behaviour.
+ */
+export type EmptyStateAction = {
+    label: ReactNode;
+    /** Renders an `<a>`. Without it the action is a `<button>`. */
+    href?: string;
+    onClick?: () => void;
+    /** Icon rendered before the label. */
+    icon?: ReactNode;
+    /** Overrides the default styling — `primary` for the main action. */
+    variant?: ButtonVariant;
+    target?: string;
+    rel?: string;
+};
+export type EmptyStateProps = {
+    /** What isn't here. Rendered as a heading. */
+    title: ReactNode;
+    /** A line under the title, usually explaining what to do about it. */
+    description?: ReactNode;
+    /**
+     * Replaces the default mark, or removes it entirely with `false`. Sized by
+     * the component, so a bare `<svg>` is fine.
+     */
+    icon?: ReactNode | false;
+    /** The main call to action. */
+    action?: EmptyStateAction;
+    /** A quieter second option beside it. */
+    secondaryAction?: EmptyStateAction;
+    /** Heading rank for the title. Defaults to `3`. */
+    headingLevel?: EmptyStateHeadingLevel;
+    /** `sm` for an empty state inside a card or panel. Defaults to `md`. */
+    size?: "sm" | "md";
+    /** Anything extra, rendered below the actions. */
+    children?: ReactNode;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "title" | "children">;
+/** Placeholder for a space with nothing in it yet, or nothing left in it. */
+export declare function EmptyState({ title, description, icon, action, secondaryAction, headingLevel, size, children, className, ...props }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateProps, EmptyStateAction, EmptyStateHeadingLevel, } from "./EmptyState";

package/dist/components/FileDrop/FileDrop.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import "./FileDrop.css";
+export type FileDropProps = {
+    /** Visible label for the field. */
+    label?: ReactNode;
+    /** Hint shown below the drop zone. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the field invalid. */
+    error?: ReactNode;
+    /** Prompt inside the drop zone. */
+    placeholder?: ReactNode;
+    /** Allowed types, same syntax as the `accept` attribute: ".pdf,image/*". */
+    accept?: string;
+    /** Allow picking more than one file. */
+    multiple?: boolean;
+    /** Selected files — makes the component controlled. */
+    value?: File[];
+    /** Initial files when uncontrolled. */
+    defaultValue?: File[];
+    /** Fired with the full list of selected files. */
+    onChange?: (files: File[]) => void;
+    /** Fired with files rejected by `accept`, so they're never dropped silently. */
+    onReject?: (files: File[]) => void;
+    /** Hides the list of selected files. */
+    hideFileList?: boolean;
+    disabled?: boolean;
+    name?: string;
+    /** Accessible name when there's no visible `label`. */
+    "aria-label"?: string;
+    /** Class for the wrapper. Use `inputClassName` for the file input. */
+    className?: string;
+    inputClassName?: string;
+};
+/**
+ * File picker that accepts both a click and a drag-and-drop.
+ *
+ * A real `<input type="file">` wrapped in a `<label>`, so clicking anywhere in
+ * the zone opens the picker and the control stays keyboard-operable without
+ * any JavaScript. The zone itself is painted alongside it.
+ */
+export declare function FileDrop({ label, helperText, error, placeholder, accept, multiple, value, defaultValue, onChange, onReject, hideFileList, disabled, name, "aria-label": ariaLabel, className, inputClassName, }: FileDropProps): import("react").JSX.Element;

package/dist/components/FileDrop/index.d.ts

@@ -0,0 +1,3 @@
+export { FileDrop } from "./FileDrop";
+export type { FileDropProps } from "./FileDrop";
+export { isFileAccepted, formatFileSize } from "./isFileAccepted";

package/dist/components/FileDrop/isFileAccepted.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Matches a file against an `accept` string (the same syntax as the `accept`
+ * attribute: ".pdf,image/*,text/csv").
+ *
+ * The browser applies `accept` to the file picker, but **not** to drag-and-drop
+ * — dropped files arrive unfiltered — so this runs on both paths to keep them
+ * behaving the same.
+ */
+export declare function isFileAccepted(file: File, accept?: string): boolean;
+/** "1.4 MB" — for listing the files a user has picked. */
+export declare function formatFileSize(bytes: number): string;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,20 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import "./Input.css";
+export type InputProps = {
+    /** Visible label, associated with the input via `htmlFor`/`id`. */
+    label?: ReactNode;
+    /** Hint shown below the input. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the input invalid. */
+    error?: ReactNode;
+    /** Decorative icon rendered inside the field. See `iconPosition`. */
+    icon?: ReactNode;
+    /** Which side `icon` sits on. Defaults to `left`. */
+    iconPosition?: "left" | "right";
+    /** Class for the wrapper element. Use `inputClassName` for the input itself. */
+    className?: string;
+    /** Class for the underlying `<input>`. */
+    inputClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "className">;
+/** Text input with an associated label, helper text, error state, and optional icon. */
+export declare function Input({ label, helperText, error, icon, iconPosition, className, inputClassName, id, required, disabled, "aria-describedby": ariaDescribedBy, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+export type { InputProps } from "./Input";

package/dist/components/InputOtp/InputOtp.d.ts

@@ -0,0 +1,39 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import type { OtpType } from "./sanitizeOtpValue";
+import "./InputOtp.css";
+export type InputOtpProps = {
+    /** Number of characters in the code. Defaults to 6. */
+    length?: number;
+    /** The code — makes the component controlled. */
+    value?: string;
+    /** Starting code when uncontrolled. */
+    defaultValue?: string;
+    /** Fired with the whole code whenever it changes. */
+    onChange?: (value: string) => void;
+    /** Fired once, when the last character lands. */
+    onComplete?: (value: string) => void;
+    /** Which characters are accepted. Defaults to `numeric`. */
+    type?: OtpType;
+    /** Hides the characters behind dots, for codes that are secrets. */
+    mask?: boolean;
+    /** Draws a separator every N characters — 3 gives `123 456`. */
+    groupSize?: number;
+    /** Visible label, associated with the field via `htmlFor`/`id`. */
+    label?: ReactNode;
+    /** Hint shown below the field. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the field invalid. */
+    error?: ReactNode;
+    /** Class for the wrapper element. */
+    className?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size">;
+/**
+ * One-time-code field: a row of boxes backed by a single text input.
+ *
+ * The boxes are presentation. The value lives in one real `<input>` covering
+ * them, which is what makes `autocomplete="one-time-code"`, pasting, undo,
+ * password managers and screen-reader labelling work without being rebuilt —
+ * a row of six separate inputs is six unlabelled fields to assistive tech, and
+ * reimplements a text field along the way.
+ */
+export declare function InputOtp({ length, value: controlledValue, defaultValue, onChange, onComplete, type, mask, groupSize, label, helperText, error, className, id, required, disabled, "aria-describedby": ariaDescribedBy, onFocus, onBlur, onSelect, onClick, ...props }: InputOtpProps): import("react").JSX.Element;

package/dist/components/InputOtp/index.d.ts

@@ -0,0 +1,4 @@
+export { InputOtp } from "./InputOtp";
+export type { InputOtpProps } from "./InputOtp";
+export { sanitizeOtpValue, otpTypes } from "./sanitizeOtpValue";
+export type { OtpType, SanitizeOtpValueOptions } from "./sanitizeOtpValue";

package/dist/components/InputOtp/sanitizeOtpValue.d.ts

@@ -0,0 +1,20 @@
+export declare const otpTypes: readonly ["numeric", "alphanumeric"];
+export type OtpType = (typeof otpTypes)[number];
+export type SanitizeOtpValueOptions = {
+    /** Number of characters the code holds. */
+    length: number;
+    /** Which characters survive. Defaults to `numeric`. */
+    type?: OtpType;
+};
+/**
+ * Keeps only the characters an OTP field accepts, capped at its length.
+ *
+ * Runs over everything that reaches the field — typing, pasting, and the
+ * controlled `value` — so a pasted "123-456", a code copied with trailing
+ * whitespace, and a stray letter all land as the same clean string.
+ *
+ * Case is preserved for `alphanumeric`: upper-casing here would quietly
+ * change what the user submits, and whether a code is case-sensitive is the
+ * server's business, not this component's.
+ */
+export declare function sanitizeOtpValue(raw: string, { length, type }: SanitizeOtpValueOptions): string;

package/dist/components/MinMaxSlider/MinMaxSlider.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import "./MinMaxSlider.css";
+export type MinMaxValue = [number, number];
+export type MinMaxSliderProps = {
+    /** Visible label for the pair. Provide this or `aria-label`. */
+    label?: ReactNode;
+    /** Hint shown below the slider. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the slider invalid. */
+    error?: ReactNode;
+    /** Current `[from, to]` — makes the slider controlled. */
+    value?: MinMaxValue;
+    /** Initial `[from, to]` when uncontrolled. Defaults to `[min, max]`. */
+    defaultValue?: MinMaxValue;
+    /** Fired with the new `[from, to]`. */
+    onChange?: (value: MinMaxValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Smallest allowed distance between the two thumbs. Defaults to `0`. */
+    minGap?: number;
+    /** Shows the current range beside the label. */
+    showValue?: boolean;
+    /** Formats each end for display and for `aria-valuetext`. */
+    formatValue?: (value: number) => string;
+    /** Base field name. The thumbs submit as `${name}-min` and `${name}-max`. */
+    name?: string;
+    disabled?: boolean;
+    /** Accessible name when there's no visible `label`. */
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * Two-thumb slider for picking a from–to range.
+ *
+ * Built from two overlaid native `<input type="range">` elements rather than a
+ * custom widget, so each thumb keeps real `role="slider"` semantics, keyboard
+ * stepping, and value announcements. The visible track and fill are decorative
+ * spans; the inputs' own tracks are transparent.
+ */
+export declare function MinMaxSlider({ label, helperText, error, value, defaultValue, onChange, min, max, step, minGap, showValue, formatValue, name, disabled, "aria-label": ariaLabel, className, }: MinMaxSliderProps): import("react").JSX.Element;

package/dist/components/MinMaxSlider/index.d.ts

@@ -0,0 +1,2 @@
+export { MinMaxSlider } from "./MinMaxSlider";
+export type { MinMaxSliderProps, MinMaxValue } from "./MinMaxSlider";

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from "react";
+import "./Pagination.css";
+export type PaginationProps = {
+    /** Total number of pages. */
+    count: number;
+    /** Current page, 1-indexed — makes the component controlled. */
+    page?: number;
+    /** Initial page when uncontrolled. Defaults to `1`. */
+    defaultPage?: number;
+    /** Fired with the newly selected page. */
+    onChange?: (page: number) => void;
+    /** Pages to show either side of the current one. Defaults to `1`. */
+    siblingCount?: number;
+    /** Pages to always show at each end. Defaults to `1`. */
+    boundaryCount?: number;
+    /** Adds jump-to-first and jump-to-last buttons. */
+    showFirstLast?: boolean;
+    /** Hides the previous/next buttons. */
+    hidePrevNext?: boolean;
+    /** Disables every control. */
+    disabled?: boolean;
+    /** Labels for the navigation buttons and each page. */
+    labels?: {
+        first?: string;
+        previous?: string;
+        next?: string;
+        last?: string;
+        page?: (page: number) => string;
+    };
+    /** Accessible name for the landmark. Defaults to "Pagination". */
+    "aria-label"?: string;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLElement>, "className" | "onChange">;
+/**
+ * Page navigation.
+ *
+ * A `nav` landmark around a list of page buttons, with runs of hidden pages
+ * collapsed into gaps. The gaps are inert text, not buttons — there's nothing
+ * to activate, so they stay out of the tab order and the accessibility tree.
+ */
+export declare function Pagination({ count, page, defaultPage, onChange, siblingCount, boundaryCount, showFirstLast, hidePrevNext, disabled, labels, "aria-label": ariaLabel, className, ...props }: PaginationProps): import("react").JSX.Element | null;

package/dist/components/Pagination/getPaginationRange.d.ts

@@ -0,0 +1,25 @@
+/** A page number, or a gap standing in for pages that were left out. */
+export type PaginationItem = number | "ellipsis";
+export type PaginationRangeOptions = {
+    /** Current page, 1-indexed. */
+    page: number;
+    /** Total number of pages. */
+    count: number;
+    /** Pages to show either side of the current one. */
+    siblingCount?: number;
+    /** Pages to always show at each end. */
+    boundaryCount?: number;
+};
+/**
+ * Builds the visible page list, collapsing runs of hidden pages into gaps.
+ *
+ * The width is deliberately stable — a given `siblingCount`/`boundaryCount`
+ * yields the same number of slots regardless of the current page, so the
+ * control doesn't resize as you page through. That's why the sibling window
+ * is clamped rather than simply centred on the current page.
+ *
+ * A gap is only used when it actually saves space: standing in for a single
+ * hidden page would take as much room as the page itself, so that page is
+ * shown instead.
+ */
+export declare function getPaginationRange({ page, count, siblingCount, boundaryCount, }: PaginationRangeOptions): PaginationItem[];

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+export { Pagination } from "./Pagination";
+export type { PaginationProps } from "./Pagination";
+export { getPaginationRange } from "./getPaginationRange";
+export type { PaginationItem, PaginationRangeOptions } from "./getPaginationRange";