@central-ui/react 0.3.0 → 0.5.0

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

@@ -1,70 +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 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;
+/** 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;
-export declare function List({ disableStyle, className, ...props }: Steps.ListProps & StyleProps): import("react").JSX.Element;
-export declare function Item({ disableStyle, className, ...props }: Steps.ItemProps & 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, 'children'> & StyleProps): import("react").JSX.Element;
-export declare function Separator({ disableStyle, className, ...props }: Steps.SeparatorProps & StyleProps): import("react").JSX.Element;
-export declare function Content({ disableStyle, className, ...props }: Steps.ContentProps & StyleProps): import("react").JSX.Element;
-export declare function CompletedContent({ disableStyle, className, ...props }: Steps.CompletedContentProps & StyleProps): import("react").JSX.Element;
-export declare function OpenButton({ disableStyle, className, ...props }: Steps.TriggerProps & 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 {};

package/dist/components/stepper/index.js

@@ -1,99 +1,222 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { asChildStyleAttributes } from "../../utils/asChild.js";
-import { Steps, useSteps as useArkSteps } from '@ark-ui/react/steps';
+import { Steps, useStepsItemContext } from '@ark-ui/react/steps';
 import { Check } from "../../utils/icons.js";
-// Creates a controlled steps state machine for RootProvider.
-export function useSteps(props) {
-    return useArkSteps({ orientation: 'vertical', ...props });
-}
-// Reads the state of the nearest Steps root.
-export { useStepsContext } from '@ark-ui/react/steps';
-// Reads the state of the nearest Steps item.
-export { useStepsItemContext } from '@ark-ui/react/steps';
+import { cloneElement, createContext, useContext } from 'react';
+import { twMerge } from 'tailwind-merge';
+const StepperContext = /* @__PURE__ */ createContext(null);
 /**
- * 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 function Root({ children, className, orientation = 'vertical', ...props }) {
-    // className is left out, since Root renders no element of its own to receive it
-    return (_jsx(Steps.Root, { ...props, orientation: orientation, asChild: true, children: _jsx(_Fragment, { children: children }) }));
+export function Root({ items, value, defaultValue = items[0], onValueChange, preventStepClicks = false, children, }) {
+    if (new Set(items).size !== items.length)
+        throw new Error('Stepper.Root items must not repeat a value.');
+    // Ark counts steps by index, with one past the last meaning every step is done
+    const toStep = (stepValue) => (stepValue === null ? items.length : indexOf(items, stepValue, 'Root'));
+    return (_jsx(StepperContext.Provider, { value: { items, preventStepClicks }, children: _jsx(Steps.Root, { count: items.length, step: value === undefined ? undefined : toStep(value), defaultStep: toStep(defaultValue ?? null), onStepChange: onValueChange && ((details) => onValueChange(details.step === items.length ? null : items[details.step])), orientation: "vertical", linear: preventStepClicks, asChild: true, children: _jsx(_Fragment, { children: children }) }) }));
 }
-/** 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 function NextButton({ asChild, disableStyle, ...props }) {
-    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-nextbutton', disableStyle });
-    return _jsx(Steps.NextTrigger, { ...props, asChild: asChild, ...styleAttributes });
+/** Lays out ItemsList on the left of the current Content or CompletedContent. Spacing only, no look of its own. */
+export function Container({ disableStyle, className, ref, ...props }) {
+    useStepperContext('Container');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "stepper-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-/** 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 function PreviousButton({ asChild, disableStyle, ...props }) {
-    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-previousbutton', disableStyle });
-    return _jsx(Steps.PrevTrigger, { ...props, asChild: asChild, ...styleAttributes });
+/** Holds the Items; screen readers hear it as a tab list, no setup needed. */
+export function ItemsList({ disableStyle, className, ...props }) {
+    return _jsx(Steps.List, { ...props, "data-component": "stepper-itemslist", "data-style-disabled": disableStyle ? '' : undefined, className: className });
 }
-export function List({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.List, { "data-component": "stepper-list", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+/**
+ * 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 function Item({ value, disableStyle, className, style, ...props }) {
+    const context = useStepperContext('Item');
+    // Ark splits a step into an Item and its Trigger; asChild merges them into one button
+    return (_jsx(Steps.Item, { index: indexOf(context.items, value, 'Item'), asChild: true, children: _jsx(Steps.Trigger, { ...props, "data-component": "stepper-item", "data-style-disabled": disableStyle ? '' : undefined, "data-prevent-clicks": context.preventStepClicks ? '' : undefined, className: className, 
+            // Core: the Separator is positioned against it
+            style: { position: 'relative', ...style } }) }));
 }
-export function Item({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.Item, { "data-component": "stepper-item", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+/** The circle marking the step, always shown. Holds IndicatorIcon and IndicatorText, which take turns automatically. */
+export function Indicator({ disableStyle, className, ref, ...props }) {
+    // A span, since it sits inside Item's button
+    return (_jsx(Steps.Indicator, { asChild: true, children: _jsx("span", { ...props, ref: ref, "data-component": "stepper-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
 }
-/** 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 function Indicator({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.ItemContext, { children: (step) => (_jsx(Steps.Indicator, { "data-component": "stepper-indicator", "data-style-disabled": disableStyle ? '' : undefined, "data-completed": step.completed ? '' : undefined, className: className, ...props, children: step.completed ? (_jsx(Check, { "data-component": "stepper-indicator-1", strokeWidth: 2.5 })) : (_jsx("span", { "data-component": "stepper-indicator-2" })) })) }));
+/** 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 function IndicatorIcon({ disableStyle, className, strokeWidth, children, ...props }) {
+    const item = useStepsItemContext();
+    if (!item.completed)
+        return null;
+    return cloneElement(children ?? _jsx(Check, {}), {
+        'aria-hidden': true,
+        ...props,
+        ...itemStateAttributes(item),
+        strokeWidth: strokeWidth ?? children?.props.strokeWidth ?? 2.5,
+        'data-component': 'stepper-indicatoricon',
+        'data-style-disabled': disableStyle ? '' : undefined,
+        className: twMerge(children?.props.className, className),
+    });
 }
-export function Separator({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.Separator, { "data-component": "stepper-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+/** 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 function IndicatorText({ disableStyle, className, children, ref, ...props }) {
+    const item = useStepsItemContext();
+    if (item.completed)
+        return null;
+    return (_jsx("span", { ...props, ...itemStateAttributes(item), ref: ref, "data-component": "stepper-indicatortext", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ?? item.index + 1 }));
 }
-export function Content({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.Content, { "data-component": "stepper-content", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+/**
+ * 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 function ItemMeta({ disableStyle, className, ref, ...props }) {
+    const item = useStepsItemContext();
+    return (_jsx("span", { ...props, ...itemStateAttributes(item), ref: ref, "data-component": "stepper-itemmeta", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** The step's name, beside the Indicator. */
+export function ItemTitle({ disableStyle, className, ref, ...props }) {
+    const item = useStepsItemContext();
+    return (_jsx("span", { ...props, ...itemStateAttributes(item), ref: ref, "data-component": "stepper-itemtitle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** A short hint under ItemTitle, like "Select product". */
+export function ItemDescription({ disableStyle, className, ref, ...props }) {
+    const item = useStepsItemContext();
+    return (_jsx("span", { ...props, ...itemStateAttributes(item), ref: ref, "data-component": "stepper-itemdescription", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/**
+ * 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 function Separator({ disableStyle, className, style, ref, ...props }) {
+    const item = useStepsItemContext();
+    if (item.last)
+        return null;
+    // A span, since it sits inside Item's button
+    return (_jsx(Steps.Separator, { asChild: true, children: _jsx("span", { ...props, ref: ref, "aria-hidden": true, "data-component": "stepper-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className, 
+            // Core: drawn over the Item; the preset places it
+            style: { position: 'absolute', ...style } }) }));
+}
+/** 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 function Body({ disableStyle, className, ref, ...props }) {
+    useStepperContext('Body');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "stepper-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** 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 function Content({ value, disableStyle, className, ...props }) {
+    const context = useStepperContext('Content');
+    return (_jsx(Steps.Content, { ...props, index: indexOf(context.items, value, 'Content'), "data-component": "stepper-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** Shows only once every step is done, after NextButton on the last step. */
 export function CompletedContent({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.CompletedContent, { "data-component": "stepper-completedcontent", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+    return _jsx(Steps.CompletedContent, { ...props, "data-component": "stepper-completedcontent", "data-style-disabled": disableStyle ? '' : undefined, className: className });
+}
+/** 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 function Footer({ disableStyle, className, ref, ...props }) {
+    useStepperContext('Footer');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "stepper-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** 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 function PreviousButton({ asChild, disableStyle, ...props }) {
+    return _jsx(Steps.PrevTrigger, { ...props, asChild: asChild, ...asChildStyleAttributes({ asChild, component: 'stepper-previousbutton', disableStyle }) });
+}
+/** 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 function NextButton({ asChild, disableStyle, ...props }) {
+    return _jsx(Steps.NextTrigger, { ...props, asChild: asChild, ...asChildStyleAttributes({ asChild, component: 'stepper-nextbutton', disableStyle }) });
+}
+function useStepperContext(part) {
+    const context = useContext(StepperContext);
+    if (!context)
+        throw new Error(`Stepper.${part} must be placed inside Stepper.Root.`);
+    return context;
+}
+function indexOf(items, value, part) {
+    const index = items.indexOf(value);
+    if (index === -1)
+        throw new Error(`Stepper.${part} got the value "${value}", which is missing from Stepper.Root items.`);
+    return index;
 }
-export function OpenButton({ disableStyle, className, ...props }) {
-    return (_jsx(Steps.Trigger, { "data-component": "stepper-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+// The same step-state attributes Ark puts on its own parts, for the parts rendered here
+function itemStateAttributes(item) {
+    return {
+        'data-current': item.current ? '' : undefined,
+        'data-complete': item.completed ? '' : undefined,
+        'data-incomplete': item.incomplete ? '' : undefined,
+    };
 }

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

@@ -38,22 +38,22 @@ export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & ValidationProps
  * </Switch.Root>
  */
 export declare function Root({ children, validation, checked, defaultChecked, onCheckedChange, id, ...props }: RootProps): import("react").JSX.Element;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SwitchRootProps, "className" | "render" | "nativeButton" | CoreKeys> & {
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Button({ disableStyle, className, ref, ...props }: (Omit<BaseSwitch.Root.Props, CoreKeys | 'className' | 'render' | 'nativeButton'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+}) & 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 const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SwitchThumbProps, "className"> & {
+export declare function Indicator({ disableStyle, className, ref, ...props }: (Omit<BaseSwitch.Thumb.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+}) & 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, 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;
 export {};