@central-ui/react 0.4.0 → 0.5.0

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),
+    });
+}

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

@@ -1,71 +1,161 @@
 import type { StyleProps } from '../../types/Style.ts';
-import type { UseStepsProps } from '@ark-ui/react/steps';
+import type { SVGIconProps } from '../../types/Icon.ts';
 import { Steps } from '@ark-ui/react/steps';
-export declare function useSteps(props: UseStepsProps): import("@ark-ui/react/steps").UseStepsReturn;
-export { useStepsContext } from '@ark-ui/react/steps';
-export { useStepsItemContext } from '@ark-ui/react/steps';
+import type { ComponentProps, ReactElement, ReactNode, Ref } from 'react';
+export type RootProps = {
+    /** Every step's value, in order, like ['details', 'shipping', 'review']. Each Item and Content takes one of these as its value. */
+    items: readonly string[];
+    /** The current step's value, or null once every step is done, which shows CompletedContent. Use with onValueChange to control it yourself. */
+    value?: string | null;
+    /**
+     * The step shown first, when you don't control value.
+     * @default items[0]
+     */
+    defaultValue?: string | null;
+    /** Called with the new step's value whenever it changes, or with null when NextButton is clicked on the last step, finishing them all. */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Makes the steps unclickable, so the user can only move with PreviousButton and NextButton, in order. Use it when a step needs the previous one done first, like payment after shipping.
+     * @default false
+     */
+    preventStepClicks?: boolean;
+    /** The Container. */
+    children: ReactNode;
+};
 /**
- * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextButton/PreviousButton navigate between steps; pass asChild to give their behavior to your own buttons instead. Indicator reflects progress automatically; CompletedContent is shown after the last step.
+ * Splits a long task, like a checkout or an onboarding form, into steps the user goes through one by one.
+ * Root holds the current step and renders nothing itself. List every step's value in items, in order, then give each Item and Content one of them, like Tabs.
+ * Each Content holds its step's Body and Footer, and that Footer holds the step's own PreviousButton and NextButton, so every step words its buttons for itself, like "I agree" or "Place order". Never place the buttons outside a Content.
+ * NextButton on the last step finishes them all, showing CompletedContent. Indicator, IndicatorIcon, IndicatorText and Separator follow progress automatically.
  *
  * @example Complete composition
  * import { Button, Stepper } from '@central-ui/react'
  *
  * function Example() {
  *   return (
- *     <Stepper.Root count={2} defaultStep={0}>
- *       <div className="flex items-start gap-4">
- *         <Stepper.List className="w-32 shrink-0">
- *           <Stepper.Item index={0}>
- *             <Stepper.OpenButton>
- *               <Stepper.Indicator />
- *               Details
- *             </Stepper.OpenButton>
+ *     <Stepper.Root items={['details', 'review']}>
+ *       <Stepper.Container>
+ *         <Stepper.ItemsList>
+ *           <Stepper.Item value="details">
+ *             <Stepper.Indicator>
+ *               <Stepper.IndicatorIcon />
+ *               <Stepper.IndicatorText />
+ *             </Stepper.Indicator>
+ *             <Stepper.ItemTitle>Details</Stepper.ItemTitle>
+ *             <Stepper.ItemDescription>Set your basics</Stepper.ItemDescription>
  *             <Stepper.Separator />
  *           </Stepper.Item>
- *           <Stepper.Item index={1}>
- *             <Stepper.OpenButton>
- *               <Stepper.Indicator />
- *               Review
- *             </Stepper.OpenButton>
+ *           <Stepper.Item value="review">
+ *             <Stepper.Indicator>
+ *               <Stepper.IndicatorIcon />
+ *               <Stepper.IndicatorText />
+ *             </Stepper.Indicator>
+ *             <Stepper.ItemTitle>Review</Stepper.ItemTitle>
+ *             <Stepper.ItemDescription>Check everything</Stepper.ItemDescription>
+ *             <Stepper.Separator />
  *           </Stepper.Item>
- *         </Stepper.List>
- *         <div className="w-full flex flex-col gap-3">
- *           <Stepper.Content index={0}>Set your basics.</Stepper.Content>
- *           <Stepper.Content index={1}>Check everything.</Stepper.Content>
- *           <Stepper.CompletedContent>Done.</Stepper.CompletedContent>
- *           <div className="flex gap-2">
- *             <Stepper.PreviousButton>Previous</Stepper.PreviousButton>
+ *         </Stepper.ItemsList>
+ *         <Stepper.Content value="details">
+ *           <Stepper.Body>Set your basics.</Stepper.Body>
+ *           <Stepper.Footer>
+ *             <Stepper.NextButton asChild>
+ *               <Button.default variant="primary" size="small">
+ *                 Continue
+ *               </Button.default>
+ *             </Stepper.NextButton>
+ *           </Stepper.Footer>
+ *         </Stepper.Content>
+ *         <Stepper.Content value="review">
+ *           <Stepper.Body>Check everything.</Stepper.Body>
+ *           <Stepper.Footer>
+ *             <Stepper.PreviousButton>Back</Stepper.PreviousButton>
  *             <Stepper.NextButton asChild>
  *               <Button.default variant="primary" size="small">
- *                 Next
+ *                 Place order
  *               </Button.default>
  *             </Stepper.NextButton>
- *           </div>
- *         </div>
- *       </div>
+ *           </Stepper.Footer>
+ *         </Stepper.Content>
+ *         <Stepper.CompletedContent>Done.</Stepper.CompletedContent>
+ *       </Stepper.Container>
  *     </Stepper.Root>
  *   )
  * }
  *
- * @example Show the steps horizontally
- * // Keep the same indexed Item and Content pairs.
- * ;<Stepper.Root count={2} orientation="horizontal">
+ * @example Control the step
+ * const [step, setStep] = useState<string | null>('details')
+ *
+ * ;<Stepper.Root items={['details', 'review']} value={step} onValueChange={setStep}>
  *   {
  *     // Rest of components here
  *   }
  * </Stepper.Root>
  */
-export declare function Root({ children, className, orientation, ...props }: Omit<Steps.RootProps, 'asChild'>): import("react").JSX.Element;
-/** Moves to the next step. Pass asChild to give this behavior to your own button, like a "Continue" Button; it keeps the state data attributes but none of this part's styling. */
-export declare function NextButton({ asChild, disableStyle, ...props }: Steps.NextTriggerProps & StyleProps): import("react").JSX.Element;
-/** Moves to the previous step. Pass asChild to give this behavior to your own button, like a "Back" Button; it keeps the state data attributes but none of this part's styling. */
-export declare function PreviousButton({ asChild, disableStyle, ...props }: Steps.PrevTriggerProps & StyleProps): import("react").JSX.Element;
-export declare function List({ disableStyle, className, ...props }: Omit<Steps.ListProps, 'asChild'> & StyleProps): import("react").JSX.Element;
-export declare function Item({ disableStyle, className, ...props }: Omit<Steps.ItemProps, 'asChild'> & StyleProps): import("react").JSX.Element;
-/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
-export declare function Indicator({ disableStyle, className, ...props }: Omit<Steps.IndicatorProps, 'asChild' | 'children'> & StyleProps): import("react").JSX.Element;
-export declare function Separator({ disableStyle, className, ...props }: Omit<Steps.SeparatorProps, 'asChild'> & StyleProps): import("react").JSX.Element;
-export declare function Content({ disableStyle, className, ...props }: Omit<Steps.ContentProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function Root({ items, value, defaultValue, onValueChange, preventStepClicks, children, }: RootProps): import("react").JSX.Element;
+/** Lays out ItemsList on the left of the current Content or CompletedContent. Spacing only, no look of its own. */
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** Holds the Items; screen readers hear it as a tab list, no setup needed. */
+export declare function ItemsList({ disableStyle, className, ...props }: Omit<Steps.ListProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+/**
+ * One step, as a single button opening its step on click, no click handler needed; does nothing with preventStepClicks.
+ * Carries data-current, data-complete or data-incomplete. Its value must be one of Root's items.
+ */
+export declare function Item({ value, disableStyle, className, style, ...props }: Omit<Steps.TriggerProps, 'asChild'> & StyleProps & {
+    /** One of Root's items. */
+    value: string;
+    ref?: Ref<HTMLButtonElement>;
+}): import("react").JSX.Element;
+/** The circle marking the step, always shown. Holds IndicatorIcon and IndicatorText, which take turns automatically. */
+export declare function Indicator({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): 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 check icon, shown only once the step is done; renders nothing before. Place inside Indicator. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 2.5. */
+export declare function IndicatorIcon({ disableStyle, className, strokeWidth, children, ...props }: BuiltInIconProps): import("react").FunctionComponentElement<any> | null;
+/** The step's number, worked out automatically; renders nothing once the step is done, leaving room for IndicatorIcon. Pass children only to show something else. Place inside Indicator. */
+export declare function IndicatorText({ disableStyle, className, children, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element | null;
+/**
+ * Optional small text above ItemTitle, like a date ("Jan 2024") or "Step 1 of 3". Add it only when the steps need that extra context; leave it out otherwise.
+ */
+export declare function ItemMeta({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+/** The step's name, beside the Indicator. */
+export declare function ItemTitle({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+/** A short hint under ItemTitle, like "Select product". */
+export declare function ItemDescription({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+/**
+ * The line joining a step to the next one, filled once the step is done. Renders nothing on the last step, so every Item can hold one.
+ *
+ * Changing its gap from the Indicators: the line lives inside its own Item, stretching between two distances measured from that Item's edges.
+ * - top: where the line starts, measured from the top of this Item. It must clear this step's Indicator, so it's the Indicator's height plus the gap you want under it.
+ *   The preset's top-8.5 (34px) is the 26px Indicator + an 8px gap.
+ * - bottom: where the line ends, measured from the bottom of this Item. The next step's Indicator starts right at that edge, so bottom is exactly the gap above the next Indicator.
+ *   The preset's bottom-1 is a 4px gap.
+ * Together they set the line's length: the Item's height minus top minus bottom. A taller Item, like one with a longer description, just makes a longer line with the same gaps.
+ * If you resize the Indicator, set top to its new height plus your gap, and left to half its width, so the line stays centered under it.
+ *
+ * @example Even 8px gaps on both ends
+ * // 26px Indicator + 8px gap = top-8.5; 8px gap = bottom-2
+ * ;<Stepper.Separator className="top-8.5 bottom-2" />
+ *
+ * @example A line touching both Indicators
+ * // top equals the Indicator's height; bottom is 0
+ * ;<Stepper.Separator className="top-6.5 bottom-0" />
+ */
+export declare function Separator({ disableStyle, className, style, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element | null;
+/** Holds the step's main content, like its form fields. Place inside a Content, above its Footer. Spacing only, no look of its own. */
+export declare function Body({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** One step's side, beside ItemsList, showing only while its step is current, no visibility condition needed. Holds the step's Body and Footer. Its value must be one of Root's items. */
+export declare function Content({ value, disableStyle, className, ...props }: Omit<Steps.ContentProps, 'asChild' | 'index'> & StyleProps & {
+    /** One of Root's items. */
+    value: string;
+}): import("react").JSX.Element;
+/** Shows only once every step is done, after NextButton on the last step. */
 export declare function CompletedContent({ disableStyle, className, ...props }: Omit<Steps.CompletedContentProps, 'asChild'> & StyleProps): import("react").JSX.Element;
-/** Opens its Item's step. Pass asChild to give this behavior to your own button; it keeps the state data attributes but none of this part's styling. */
-export declare function OpenButton({ asChild, disableStyle, ...props }: Steps.TriggerProps & StyleProps): import("react").JSX.Element;
+/** The row under the step's Body, inside its Content, holding that step's PreviousButton and NextButton directly. Leave it out of a step needing no buttons. */
+export declare function Footer({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** Moves to the previous step, no click handler needed. Place it in a Content's Footer, never outside a Content; leave it out of the first step's Footer. Pass asChild to give this behavior to your own button, like a "Back" Button; it keeps the state data attributes but none of this part's styling. */
+export declare function PreviousButton({ asChild, disableStyle, ...props }: Steps.PrevTriggerProps & StyleProps): import("react").JSX.Element;
+/** Moves to the next step, no click handler needed; on the last step, it finishes them all. Place it in a Content's Footer, never outside a Content, worded for that step, like "I agree". Pass asChild to give this behavior to your own button, like a primary "Continue" Button; it keeps the state data attributes but none of this part's styling. */
+export declare function NextButton({ asChild, disableStyle, ...props }: Steps.NextTriggerProps & StyleProps): import("react").JSX.Element;
+export {};