@central-ui/react 0.3.0 → 0.5.0

package/dist/components/numberinput/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { NumberField as BaseNumber } from '@base-ui/react/number-field';
 import { ChevronUp, ChevronDown, LoaderCircle } from "../../utils/icons.js";
 import { useForwardClickToInput } from "../../utils/useForwardClickToInput.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { cloneElement, createContext, useContext, useEffect, useId, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
@@ -41,7 +41,7 @@ import { readValidation, validationAttributes, validationMessageContent } from "
  *   }
  * </NumberInput.Root>
  */
-export const Root = /* @__PURE__ */ forwardRef(function Root({ id, validation, children, ...props }, ref) {
+export function Root({ id, validation, children, ref, ...props }) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     // Holding the ids of Description, Error and Success, so the control announces them to screen readers through aria-describedby
@@ -55,59 +55,59 @@ export const Root = /* @__PURE__ */ forwardRef(function Root({ id, validation, c
                 max: props.max,
                 validation: readValidation(validation),
             }, children: _jsx("div", { ...rootProps }) })), children: children }));
-});
-export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+}
+export function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useInputContext();
     return (_jsx(BaseNumber.Input, { ...props, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds]
             .filter(Boolean)
             .join(' ') || undefined, "data-component": "numberinput-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+}
+export function Container({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "numberinput-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export function Label({ disableStyle, className, id, ref, ...props }) {
     const context = useInputContext();
     const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
     return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "numberinput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+}
+export function Description({ disableStyle, className, id, ref, ...props }) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "numberinput-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+export function Error({ children, ref, ...props }) {
     const context = useInputContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "numberinput-error", children: content });
-});
+}
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+export function Success({ children, ref, ...props }) {
     const context = useInputContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "numberinput-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the number input
-const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+function Message({ disableStyle, className, id, component, ref, ...props }) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
-export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+}
+export function Addon({ disableStyle, className, variant = 'normal', ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "numberinput-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+}
+export function AddonText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "numberinput-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function AddonIcon({ disableStyle, children, className, ...props }) {
     const attributes = usePartAttributes();
@@ -123,34 +123,34 @@ export function AddonIcon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+export function AddonButton({ disableStyle, className, disabled, type = 'button', ref, ...props }) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "numberinput-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+export function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "numberinput-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, onClick, ...props }, ref) {
+}
+export function InputGroup({ disableStyle, className, onClick, ref, ...props }) {
     const attributes = usePartAttributes();
     const forwardClick = useForwardClickToInput('input:not([type="hidden"])', onClick);
     return (_jsx(BaseNumber.Group, { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "numberinput-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const ButtonsList = /* @__PURE__ */ forwardRef(function ButtonsList({ disableStyle, className, ...props }, ref) {
+}
+export function ButtonsList({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "numberinput-buttonslist", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Formats the current number automatically. Omit children for the default display; customize only when the usual number formatting is insufficient. */
-export const ValueText = /* @__PURE__ */ forwardRef(function ValueText({ disableStyle, className, ...props }, ref) {
+export function ValueText({ disableStyle, className, ref, ...props }) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "numberinput-valuetext", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: context.inputValue }));
-});
-export const IncrementButton = /* @__PURE__ */ forwardRef(function IncrementButton({ disableStyle, className, ...props }, ref) {
+}
+export function IncrementButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseNumber.Increment, { ...props, ref: ref, "data-component": "numberinput-incrementbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function IncrementButtonIcon({ disableStyle, children = _jsx(ChevronUp, {}), className, ...props }) {
     const context = useInputContext();
@@ -173,9 +173,9 @@ export function IncrementButtonIcon({ disableStyle, children = _jsx(ChevronUp, {
         className: twMerge(children.props.className, className),
     });
 }
-export const DecrementButton = /* @__PURE__ */ forwardRef(function DecrementButton({ disableStyle, className, ...props }, ref) {
+export function DecrementButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseNumber.Decrement, { ...props, ref: ref, "data-component": "numberinput-decrementbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function DecrementButtonIcon({ disableStyle, children = _jsx(ChevronDown, {}), className, ...props }) {
     const context = useInputContext();

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

@@ -42,27 +42,27 @@ export type RootProps = Omit<BaseOtp.Root.Props, 'className' | 'render'> & {
  *   }
  * </OtpInput.Root>
  */
-export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").OTPFieldInputProps, "className" | "id" | "name" | "form" | "defaultValue" | "disabled" | "value" | "render" | "required" | "readOnly"> & {
+export declare function Root({ id, validation, children, ref, ...props }: RootProps): import("react").JSX.Element;
+export declare function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: (Omit<BaseOtp.Input.Props, 'className' | 'id' | 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'name' | 'form' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Label({ disableStyle, className, id, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, id, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
     children?: ValidationMessageChildren;
 };
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Error({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
-export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 /** Calls children for each code slot. Render Input inside each callback; the component handles slot ordering and keyboard/paste behavior. */
-export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+export declare function List({ disableStyle, className, children, ref, ...props }: (Omit<ComponentProps<'div'>, 'children'> & {
     /** Render an Input for each slot. Use the index for keys or separator placement; input ordering is automatic. */
     children: (index: number) => ReactNode;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SeparatorProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Separator({ disableStyle, className, ref, ...props }: (Omit<BaseOtp.Separator.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 export {};

package/dist/components/otpinput/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { OTPField as BaseOtp } from '@base-ui/react/otp-field';
-import { Fragment, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { Fragment, createContext, useContext, useEffect, useId, useState, } from 'react';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Configure length and value on Root. Render an Input for each callback invocation from List; slot order is managed automatically. Keyboard navigation and paste distribution are built in; do not split or synchronize the code yourself.
@@ -36,7 +36,7 @@ import { readValidation, validationAttributes, validationMessageContent } from "
  *   }
  * </OtpInput.Root>
  */
-export const Root = /* @__PURE__ */ forwardRef(function Root({ id, validation, children, ...props }, ref) {
+export function Root({ id, validation, children, ref, ...props }) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const [connections, setConnections] = useState({
@@ -45,19 +45,19 @@ export const Root = /* @__PURE__ */ forwardRef(function Root({ id, validation, c
     return (_jsx(BaseOtp.Root, { ...props, id: inputId, ref: ref, "aria-labelledby": connections.labelId ?? props['aria-labelledby'], "aria-describedby": [props['aria-describedby'], ...connections.descriptionIds]
             .filter(Boolean)
             .join(' ') || undefined, render: (rootProps, state) => (_jsx(InputContext.Provider, { value: { ...state, inputId, connections, setConnections, validation: readValidation(validation) }, children: _jsx("div", { ...rootProps }) })), children: children }));
-});
-export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+}
+export function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useInputContext();
     return (_jsx(BaseOtp.Input, { ...props, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
             .filter(Boolean)
             .join(' ') || undefined, "aria-labelledby": props['aria-labelledby'] ?? context.connections.labelId, "data-component": "otpinput-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+}
+export function Container({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "otpinput-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export function Label({ disableStyle, className, id, ref, ...props }) {
     const context = useInputContext();
     const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
@@ -69,43 +69,43 @@ export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, c
         }));
     }, [labelId, context.setConnections]);
     return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "otpinput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+}
+export function Description({ disableStyle, className, id, ref, ...props }) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "otpinput-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+export function Error({ children, ref, ...props }) {
     const context = useInputContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "otpinput-error", children: content });
-});
+}
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+export function Success({ children, ref, ...props }) {
     const context = useInputContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "otpinput-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the otp input
-const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+function Message({ disableStyle, className, id, component, ref, ...props }) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+}
 /** Calls children for each code slot. Render Input inside each callback; the component handles slot ordering and keyboard/paste behavior. */
-export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, className, children, ...props }, ref) {
+export function List({ disableStyle, className, children, ref, ...props }) {
     const context = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "otpinput-list", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: Array.from({ length: context.length }, (_, index) => (_jsx(Fragment, { children: children(index) }, index))) }));
-});
-export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
+}
+export function Separator({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseOtp.Separator, { ...props, ref: ref, "data-component": "otpinput-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const InputContext = /* @__PURE__ */ createContext(null);
 function useInputContext() {
     const context = useContext(InputContext);

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

@@ -0,0 +1,158 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { SVGIconProps } from '../../types/Icon.ts';
+import type { ComponentProps, HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+/** One entry of PageList: a page to go to, or a gap standing for the pages hidden between two numbers. */
+export type PageItem = {
+    type: 'page';
+    value: number;
+} | {
+    type: 'ellipsis';
+    index: number;
+};
+export type RootProps = {
+    /** The total number of data items, like rows in a table; the page count is worked out from it and pageSize. */
+    count: number;
+    /** The current page, from 1. Use with onPageChange to control it yourself, like reading it from the URL search params. */
+    page?: number;
+    /**
+     * The page shown first, when you don't control page.
+     * @default 1
+     */
+    defaultPage?: number;
+    /** Called with the new page whenever it changes, from a click, or from count or pageSize shrinking so the current page no longer exists. */
+    onPageChange?: (page: number) => void;
+    /**
+     * How many data items one page holds. Together with count, it decides how many pages exist: 240 items at 20 per page make 12 pages.
+     * To let the user pick it, like from a "Rows per page" select, keep it in your own state and pass it here.
+     * @default 10
+     */
+    pageSize?: number;
+    /**
+     * How many page numbers show on each side of the current page, before a gap (…) hides the rest.
+     * With page 10 of 20: 1 shows "1 … 9 10 11 … 20", 2 shows "1 … 8 9 10 11 12 … 20", 0 shows "1 … 10 … 20". Lower it for narrow screens.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many page numbers always show at the very start and the very end, however far the current page is from them.
+     * With page 10 of 20: 1 shows "1 … 9 10 11 … 20", 2 shows "1 2 … 9 10 11 … 19 20".
+     * @default 1
+     */
+    boundaryCount?: number;
+    /** The Container. */
+    children: ReactNode;
+};
+/**
+ * Splits a long list of items, like a table's rows, into pages and lets the user move between them.
+ * Root holds the page state and renders nothing itself; Container renders the row. It only tracks the page: showing that page's items is up to you, from page and pageSize.
+ * PageList renders a Page for every page number and gap it decides to show. First/Previous/Next/Last buttons are optional, and disable themselves on the first or last page.
+ * Screen readers hear English labels, like "next page" or "page 3"; to translate one, pass your own aria-label to that part.
+ *
+ * @example Complete composition
+ * import { Pagination } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Pagination.Root count={240} pageSize={20}>
+ *       <Pagination.Container>
+ *         <Pagination.FirstButton>
+ *           <Pagination.FirstButtonIcon />
+ *         </Pagination.FirstButton>
+ *         <Pagination.PreviousButton>
+ *           <Pagination.PreviousButtonIcon />
+ *         </Pagination.PreviousButton>
+ *         <Pagination.PageList>{(item) => <Pagination.Page item={item} />}</Pagination.PageList>
+ *         <Pagination.NextButton>
+ *           <Pagination.NextButtonIcon />
+ *         </Pagination.NextButton>
+ *         <Pagination.LastButton>
+ *           <Pagination.LastButtonIcon />
+ *         </Pagination.LastButton>
+ *       </Pagination.Container>
+ *     </Pagination.Root>
+ *   )
+ * }
+ *
+ * @example Control the page, like keeping it in the URL search params
+ * const { page } = Route.useSearch()
+ * const navigate = Route.useNavigate()
+ *
+ * ;<Pagination.Root
+ *   count={orders.total}
+ *   pageSize={20}
+ *   page={page}
+ *   onPageChange={(page) => navigate({ search: { page } })}
+ * >
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Pagination.Root>
+ *
+ * @example Previous and next only, without page numbers
+ * ;<Pagination.Root count={240} pageSize={20}>
+ *   <Pagination.Container>
+ *     <Pagination.PreviousButton>
+ *       <Pagination.PreviousButtonIcon />
+ *     </Pagination.PreviousButton>
+ *     <Pagination.NextButton>
+ *       <Pagination.NextButtonIcon />
+ *     </Pagination.NextButton>
+ *   </Pagination.Container>
+ * </Pagination.Root>
+ */
+export declare function Root({ onPageChange, children, ...props }: RootProps): import("react").JSX.Element;
+/** Lays out the buttons and PageList in a row. Renders a nav labeled for screen readers, no setup needed. */
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'nav'> & StyleProps): import("react").JSX.Element;
+/**
+ * Renders one Page per page number and gap through its children function, which receives that entry.
+ * Which numbers show, and where gaps go, comes from the current page, siblingCount and boundaryCount.
+ *
+ * @example
+ * ;<Pagination.PageList>{(item) => <Pagination.Page item={item} />}</Pagination.PageList>
+ */
+export declare function PageList({ disableStyle, className, children, ref, ...props }: Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
+    /** Called once per page number or gap; return a Page. */
+    children: (item: PageItem) => ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Renders the item it receives from PageList: a page button going to that page on click (no click handler needed), carrying data-selected while current, or a gap.
+ * Shows the page number or an ellipsis icon by default. Carries data-type="page" or data-type="ellipsis", to style each its own way.
+ *
+ * @example Custom content
+ * ;<Pagination.PageList>
+ *   {(item) => (
+ *     <Pagination.Page item={item}>
+ *       {(item) => (item.type === 'page' ? `P${item.value}` : '…')}
+ *     </Pagination.Page>
+ *   )}
+ * </Pagination.PageList>
+ */
+export declare function Page({ item, children, disableStyle, className, ref, ...props }: Omit<HTMLAttributes<HTMLElement>, 'children'> & StyleProps & {
+    /** The entry received from PageList's children function. */
+    item: PageItem;
+    /** Omit for the page number, or the ellipsis icon for a gap. Pass a function only to show something else, from the item. */
+    children?: ReactNode | ((item: PageItem) => ReactNode);
+    ref?: Ref<HTMLButtonElement | HTMLDivElement>;
+}): import("react").JSX.Element;
+type ButtonPartProps = Omit<ComponentProps<'button'>, 'type'> & StyleProps;
+/** Goes to the first page; no click handler needed. Disabled on the first page. Supply its content: normally FirstButtonIcon, optionally next to a text like "First"; it stays square with only the icon and widens for text. */
+export declare function FirstButton({ disableStyle, ...props }: ButtonPartProps): import("react").JSX.Element;
+/** Goes to the previous page; no click handler needed. Disabled on the first page. Supply its content: normally PreviousButtonIcon, optionally next to a text like "Previous"; it stays square with only the icon and widens for text. */
+export declare function PreviousButton({ disableStyle, ...props }: ButtonPartProps): import("react").JSX.Element;
+/** Goes to the next page; no click handler needed. Disabled on the last page. Supply its content: normally NextButtonIcon, optionally next to a text like "Next"; it stays square with only the icon and widens for text. */
+export declare function NextButton({ disableStyle, ...props }: ButtonPartProps): import("react").JSX.Element;
+/** Goes to the last page; no click handler needed. Disabled on the last page. Supply its content: normally LastButtonIcon, optionally next to a text like "Last"; it stays square with only the icon and widens for text. */
+export declare function LastButton({ disableStyle, ...props }: ButtonPartProps): import("react").JSX.Element;
+type BuiltInIconProps = Omit<SVGIconProps, 'children'> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child icon only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+};
+/** Built-in decorative first-page icon. Place inside FirstButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export declare function FirstButtonIcon(props: BuiltInIconProps): import("react").JSX.Element;
+/** Built-in decorative previous icon. Place inside PreviousButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export declare function PreviousButtonIcon(props: BuiltInIconProps): import("react").JSX.Element;
+/** Built-in decorative next icon. Place inside NextButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export declare function NextButtonIcon(props: BuiltInIconProps): import("react").JSX.Element;
+/** Built-in decorative last-page icon. Place inside LastButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export declare function LastButtonIcon(props: BuiltInIconProps): import("react").JSX.Element;
+export {};

package/dist/components/pagination/index.js

@@ -0,0 +1,157 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, Ellipsis } from "../../utils/icons.js";
+import { Pagination as ArkPagination, usePagination, usePaginationContext } from '@ark-ui/react/pagination';
+import { Fragment, cloneElement } from 'react';
+import { twMerge } from 'tailwind-merge';
+/**
+ * Splits a long list of items, like a table's rows, into pages and lets the user move between them.
+ * Root holds the page state and renders nothing itself; Container renders the row. It only tracks the page: showing that page's items is up to you, from page and pageSize.
+ * PageList renders a Page for every page number and gap it decides to show. First/Previous/Next/Last buttons are optional, and disable themselves on the first or last page.
+ * Screen readers hear English labels, like "next page" or "page 3"; to translate one, pass your own aria-label to that part.
+ *
+ * @example Complete composition
+ * import { Pagination } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Pagination.Root count={240} pageSize={20}>
+ *       <Pagination.Container>
+ *         <Pagination.FirstButton>
+ *           <Pagination.FirstButtonIcon />
+ *         </Pagination.FirstButton>
+ *         <Pagination.PreviousButton>
+ *           <Pagination.PreviousButtonIcon />
+ *         </Pagination.PreviousButton>
+ *         <Pagination.PageList>{(item) => <Pagination.Page item={item} />}</Pagination.PageList>
+ *         <Pagination.NextButton>
+ *           <Pagination.NextButtonIcon />
+ *         </Pagination.NextButton>
+ *         <Pagination.LastButton>
+ *           <Pagination.LastButtonIcon />
+ *         </Pagination.LastButton>
+ *       </Pagination.Container>
+ *     </Pagination.Root>
+ *   )
+ * }
+ *
+ * @example Control the page, like keeping it in the URL search params
+ * const { page } = Route.useSearch()
+ * const navigate = Route.useNavigate()
+ *
+ * ;<Pagination.Root
+ *   count={orders.total}
+ *   pageSize={20}
+ *   page={page}
+ *   onPageChange={(page) => navigate({ search: { page } })}
+ * >
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Pagination.Root>
+ *
+ * @example Previous and next only, without page numbers
+ * ;<Pagination.Root count={240} pageSize={20}>
+ *   <Pagination.Container>
+ *     <Pagination.PreviousButton>
+ *       <Pagination.PreviousButtonIcon />
+ *     </Pagination.PreviousButton>
+ *     <Pagination.NextButton>
+ *       <Pagination.NextButtonIcon />
+ *     </Pagination.NextButton>
+ *   </Pagination.Container>
+ * </Pagination.Root>
+ */
+export function Root({ onPageChange, children, ...props }) {
+    const pagination = usePagination({
+        ...props,
+        onPageChange: onPageChange && ((details) => onPageChange(details.page)),
+    });
+    return (_jsx(ArkPagination.RootProvider, { value: pagination, asChild: true, children: _jsx(_Fragment, { children: children }) }));
+}
+/** Lays out the buttons and PageList in a row. Renders a nav labeled for screen readers, no setup needed. */
+export function Container({ disableStyle, className, ref, ...props }) {
+    const pagination = usePaginationContext();
+    return (_jsx("nav", { ...pagination.getRootProps(), ...props, ref: ref, "data-component": "pagination-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/**
+ * Renders one Page per page number and gap through its children function, which receives that entry.
+ * Which numbers show, and where gaps go, comes from the current page, siblingCount and boundaryCount.
+ *
+ * @example
+ * ;<Pagination.PageList>{(item) => <Pagination.Page item={item} />}</Pagination.PageList>
+ */
+export function PageList({ disableStyle, className, children, ref, ...props }) {
+    const pagination = usePaginationContext();
+    return (_jsx("div", { ...props, ref: ref, "data-component": "pagination-pagelist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: pagination.pages.map((page, index) => (_jsx(Fragment, { children: children(page.type === 'page' ? page : { type: 'ellipsis', index }) }, page.type === 'page' ? `page-${page.value}` : `ellipsis-${index}`))) }));
+}
+/**
+ * Renders the item it receives from PageList: a page button going to that page on click (no click handler needed), carrying data-selected while current, or a gap.
+ * Shows the page number or an ellipsis icon by default. Carries data-type="page" or data-type="ellipsis", to style each its own way.
+ *
+ * @example Custom content
+ * ;<Pagination.PageList>
+ *   {(item) => (
+ *     <Pagination.Page item={item}>
+ *       {(item) => (item.type === 'page' ? `P${item.value}` : '…')}
+ *     </Pagination.Page>
+ *   )}
+ * </Pagination.PageList>
+ */
+export function Page({ item, children, disableStyle, className, ref, ...props }) {
+    const content = typeof children === 'function'
+        ? children(item)
+        : (children ?? (item.type === 'page' ? item.value : _jsx(Ellipsis, { "aria-hidden": true, strokeWidth: 2, "data-component": "pagination-pageicon" })));
+    const attributes = {
+        'data-component': 'pagination-page',
+        'data-style-disabled': disableStyle ? '' : undefined,
+        'data-type': item.type,
+        className,
+    };
+    if (item.type === 'ellipsis') {
+        return (_jsx(ArkPagination.Ellipsis, { ...props, ...attributes, ref: ref, index: item.index, children: content }));
+    }
+    return (_jsx(ArkPagination.Item, { ...props, ...attributes, ref: ref, type: "page", value: item.value, children: content }));
+}
+/** Goes to the first page; no click handler needed. Disabled on the first page. Supply its content: normally FirstButtonIcon, optionally next to a text like "First"; it stays square with only the icon and widens for text. */
+export function FirstButton({ disableStyle, ...props }) {
+    return _jsx(ArkPagination.FirstTrigger, { ...props, "data-component": "pagination-firstbutton", "data-style-disabled": disableStyle ? '' : undefined });
+}
+/** Goes to the previous page; no click handler needed. Disabled on the first page. Supply its content: normally PreviousButtonIcon, optionally next to a text like "Previous"; it stays square with only the icon and widens for text. */
+export function PreviousButton({ disableStyle, ...props }) {
+    return _jsx(ArkPagination.PrevTrigger, { ...props, "data-component": "pagination-previousbutton", "data-style-disabled": disableStyle ? '' : undefined });
+}
+/** Goes to the next page; no click handler needed. Disabled on the last page. Supply its content: normally NextButtonIcon, optionally next to a text like "Next"; it stays square with only the icon and widens for text. */
+export function NextButton({ disableStyle, ...props }) {
+    return _jsx(ArkPagination.NextTrigger, { ...props, "data-component": "pagination-nextbutton", "data-style-disabled": disableStyle ? '' : undefined });
+}
+/** Goes to the last page; no click handler needed. Disabled on the last page. Supply its content: normally LastButtonIcon, optionally next to a text like "Last"; it stays square with only the icon and widens for text. */
+export function LastButton({ disableStyle, ...props }) {
+    return _jsx(ArkPagination.LastTrigger, { ...props, "data-component": "pagination-lastbutton", "data-style-disabled": disableStyle ? '' : undefined });
+}
+/** Built-in decorative first-page icon. Place inside FirstButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export function FirstButtonIcon(props) {
+    return _jsx(BuiltInIcon, { ...props, icon: ChevronFirst, component: "pagination-firstbuttonicon" });
+}
+/** Built-in decorative previous icon. Place inside PreviousButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export function PreviousButtonIcon(props) {
+    return _jsx(BuiltInIcon, { ...props, icon: ChevronLeft, component: "pagination-previousbuttonicon" });
+}
+/** Built-in decorative next icon. Place inside NextButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export function NextButtonIcon(props) {
+    return _jsx(BuiltInIcon, { ...props, icon: ChevronRight, component: "pagination-nextbuttonicon" });
+}
+/** Built-in decorative last-page icon. Place inside LastButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2. */
+export function LastButtonIcon(props) {
+    return _jsx(BuiltInIcon, { ...props, icon: ChevronLast, component: "pagination-lastbuttonicon" });
+}
+// The shared body of the built-in decorative icons above, which only differ by their icon and component name
+function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ...props }) {
+    return cloneElement(children ?? _jsx(Icon, {}), {
+        'aria-hidden': true,
+        ...props,
+        strokeWidth: strokeWidth ?? children?.props.strokeWidth ?? 2,
+        'data-component': component,
+        'data-style-disabled': disableStyle ? '' : undefined,
+        className: twMerge(children?.props.className, className),
+    });
+}