@central-ui/react 0.4.0 → 0.5.0

package/dist/components/stepper/index.js

@@ -1,101 +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;
 }
-/** 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 function OpenButton({ asChild, disableStyle, ...props }) {
-    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-openbutton', disableStyle });
-    return _jsx(Steps.Trigger, { ...props, asChild: asChild, ...styleAttributes });
+// 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/index.d.ts

@@ -11,6 +11,7 @@ export * as FileUpload from './components/fileupload/index.tsx';
 export * as Input from './components/input/index.tsx';
 export * as Menu from './components/menu/index.tsx';
 export * as NumberInput from './components/numberinput/index.tsx';
+export * as Pagination from './components/pagination/index.tsx';
 export * as PasswordInput from './components/passwordinput/index.tsx';
 export * as OtpInput from './components/otpinput/index.tsx';
 export * as Popover from './components/popover/index.tsx';

package/dist/index.js

@@ -11,6 +11,7 @@ export * as FileUpload from "./components/fileupload/index.js";
 export * as Input from "./components/input/index.js";
 export * as Menu from "./components/menu/index.js";
 export * as NumberInput from "./components/numberinput/index.js";
+export * as Pagination from "./components/pagination/index.js";
 export * as PasswordInput from "./components/passwordinput/index.js";
 export * as OtpInput from "./components/otpinput/index.js";
 export * as Popover from "./components/popover/index.js";

package/dist/utils/icons.d.ts

@@ -15,6 +15,14 @@ export declare const ChevronDown: {
     ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
     displayName: string;
 };
+export declare const ChevronFirst: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronLast: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
 export declare const ChevronLeft: {
     ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
     displayName: string;
@@ -39,6 +47,10 @@ export declare const CircleCheck: {
     ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
     displayName: string;
 };
+export declare const Ellipsis: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
 export declare const Eye: {
     ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
     displayName: string;

package/dist/utils/icons.js

@@ -43,6 +43,14 @@ export const Check = /* @__PURE__ */ createIcon('check', [
 export const ChevronDown = /* @__PURE__ */ createIcon('chevron-down', [
     ['path', { d: 'm6 9 6 6 6-6' }],
 ]);
+export const ChevronFirst = /* @__PURE__ */ createIcon('chevron-first', [
+    ['path', { d: 'm17 18-6-6 6-6' }],
+    ['path', { d: 'M7 6v12' }],
+]);
+export const ChevronLast = /* @__PURE__ */ createIcon('chevron-last', [
+    ['path', { d: 'm7 18 6-6-6-6' }],
+    ['path', { d: 'M17 6v12' }],
+]);
 export const ChevronLeft = /* @__PURE__ */ createIcon('chevron-left', [
     ['path', { d: 'm15 18-6-6 6-6' }],
 ]);
@@ -65,6 +73,11 @@ export const CircleCheck = /* @__PURE__ */ createIcon('circle-check', [
     ['circle', { cx: '12', cy: '12', r: '10' }],
     ['path', { d: 'm16 9-5.5 5.5L8 12' }],
 ]);
+export const Ellipsis = /* @__PURE__ */ createIcon('ellipsis', [
+    ['circle', { cx: '12', cy: '12', r: '1' }],
+    ['circle', { cx: '19', cy: '12', r: '1' }],
+    ['circle', { cx: '5', cy: '12', r: '1' }],
+]);
 export const Eye = /* @__PURE__ */ createIcon('eye', [
     [
         'path',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-ui/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Accessible React components with optional Tailwind CSS style presets",
   "license": "MIT",
   "keywords": [

package/src/presets/shopify-polaris/shopify-polaris-pagination.css

@@ -0,0 +1,55 @@
+/* pagination */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='pagination-container']),
+    &:where([data-component='pagination-pagelist']) {
+      @apply flex w-fit items-center gap-1;
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']),
+    &:where([data-component='pagination-page'])[data-type='page'] {
+      @apply flex h-7 min-w-7 shrink-0 cursor-pointer items-center justify-center rounded-full px-2 text-[0.8rem] font-medium tabular-nums outline-none select-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,color,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default;
+
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+      &[data-selected] {
+        @apply bg-neutral-950 text-white hover:bg-black focus-visible:bg-black active:bg-black;
+      }
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']) {
+      /* Roomy padding for text; the icon's negative margins below pull an icon-only button back to an exact square */
+      @apply gap-2.5 px-3;
+    }
+
+    &:where([data-component='pagination-page'])[data-type='ellipsis'] {
+      @apply flex h-7 min-w-7 shrink-0 items-center justify-center text-neutral-500;
+    }
+
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']),
+    &:where([data-component='pagination-pageicon']) {
+      @apply h-4 w-fit shrink-0;
+    }
+
+    /* Arrows point the reading direction, and their negative margins keep icon-only buttons square */
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']) {
+      @apply -mx-1.5 rtl:-scale-x-100;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-stepper.css

@@ -1,55 +1,91 @@
 /* stepper */
 @layer components {
   :where(:not([data-style-disabled])) {
-    &:where([data-component='stepper-list']) {
-      @apply flex w-full flex-col gap-1.5;
-      &[data-orientation='horizontal'] {
-        @apply flex-row;
-      }
+    /* Steps on the left of the current Content */
+    &:where([data-component='stepper-container']) {
+      @apply flex w-full items-start gap-8;
+    }
+
+    &:where([data-component='stepper-itemslist']) {
+      @apply flex w-56 shrink-0 flex-col;
+    }
+
+    &:where([data-component='stepper-body']) {
+      @apply flex min-w-0 flex-col gap-3;
     }
 
+    &:where([data-component='stepper-footer']) {
+      @apply flex items-center gap-2;
+    }
+
+    /* Indicator on the left, spanning the meta, title and description stacked beside it */
     &:where([data-component='stepper-item']) {
-      @apply relative flex w-full items-stretch gap-3;
-      &[data-orientation='horizontal'] {
-        @apply flex-1;
+      @apply grid w-full cursor-pointer grid-cols-[auto_1fr] content-start gap-x-3 pb-7 text-left outline-none last:pb-0 focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500;
+      /* Steps move only with Previous and Next */
+      &[data-prevent-clicks] {
+        @apply cursor-default;
       }
     }
 
     &:where([data-component='stepper-indicator']) {
-      @apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-200;
+      @apply row-span-3 flex aspect-square size-6.5 shrink-0 items-center justify-center rounded-full text-xs font-medium tabular-nums transition-colors duration-200;
+      &[data-incomplete] {
+        @apply bg-neutral-200 text-neutral-500;
+      }
+      &[data-current] {
+        @apply bg-blue-600 text-white ring-4 ring-blue-200;
+      }
+      &[data-complete] {
+        @apply bg-neutral-950 text-white;
+      }
     }
 
-    &:where([data-component='stepper-indicator'])[data-completed] {
-      @apply bg-neutral-950;
+    &:where([data-component='stepper-indicatoricon']) {
+      @apply size-3.5 shrink-0;
     }
 
-    &:where([data-component='stepper-indicator'])
-      &:where([data-component='stepper-indicator-1']) {
-      @apply h-3.5 w-fit shrink-0 text-white;
+    /* Optional small text above the title, centered on the Indicator */
+    &:where([data-component='stepper-itemmeta']) {
+      @apply col-start-2 text-xs text-neutral-600 ;
+      &[data-incomplete] {
+        @apply text-neutral-400;
+      }
     }
 
-    &:where([data-component='stepper-indicator'])
-      &:where([data-component='stepper-indicator-2']) {
-      @apply h-2 w-2 rounded-full bg-white;
+    &:where([data-component='stepper-itemtitle']) {
+      @apply col-start-2 text-[0.9rem] -mt-0.5 font-medium text-neutral-950 truncate;
+      /* Centered on the Indicator when no ItemMeta comes first */
+      
+      &[data-incomplete] {
+        @apply text-neutral-400;
+      }
     }
 
+    &:where([data-component='stepper-itemdescription']) {
+      @apply col-start-2 text-sm text-neutral-600;
+      &[data-incomplete] {
+        @apply text-neutral-400;
+      }
+    }
+
+    /* The line from this step's Indicator down to the next one; top and bottom set its gaps from both Indicators */
     &:where([data-component='stepper-separator']) {
-      @apply absolute top-7 bottom-0 left-3 w-px bg-neutral-300 data-[complete]:bg-neutral-700;
-      &[data-orientation='horizontal'] {
-        @apply top-3 right-0 bottom-auto left-7 h-px w-auto;
+      @apply top-8.5 bottom-1 left-3.25 w-px -translate-x-1/2 bg-neutral-300;
+      &[data-complete] {
+        @apply bg-neutral-950;
       }
     }
 
+    /* Body above Footer; only while shown, since its hidden attribute must keep hiding it */
     &:where([data-component='stepper-content']) {
-      @apply w-full p-3;
+      @apply min-w-0 flex-1;
+      &:not([hidden]) {
+        @apply flex flex-col gap-4;
+      }
     }
 
     &:where([data-component='stepper-completedcontent']) {
-      @apply w-full rounded-xl bg-green-50 p-3 text-sm leading-relaxed text-green-800;
-    }
-
-    &:where([data-component='stepper-openbutton']) {
-      @apply flex w-full cursor-pointer items-start gap-3 pb-5 text-left text-[0.95rem] font-medium text-neutral-950 outline-none focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-30;
+      @apply min-w-0 flex-1 rounded-xl bg-green-50 p-3 text-sm  text-green-800;
     }
   }
 }
@@ -58,7 +94,7 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='stepper-nextbutton'], [data-component='stepper-previousbutton']) {
-      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem];
 
       &:not(:disabled) {
         @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;

package/src/presets/shopify-polaris/shopify-polaris.css

@@ -35,6 +35,7 @@
 @import './shopify-polaris-table.css';
 @import './shopify-polaris-card.css';
 @import './shopify-polaris-carousel.css';
+@import './shopify-polaris-pagination.css';
 @import './shopify-polaris-skeleton.css';
 @import './shopify-polaris-avatar.css';
 @import './shopify-polaris-metric.css';

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-pagination.css

@@ -0,0 +1,49 @@
+/* pagination */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='pagination-container']),
+    &:where([data-component='pagination-pagelist']) {
+      @apply flex w-fit items-center gap-1;
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']),
+    &:where([data-component='pagination-page'])[data-type='page'] {
+      @apply flex h-7.5 min-w-7.5 shrink-0 cursor-pointer items-center justify-center rounded-full px-2.5 bg-white text-[0.8rem] font-semibold tabular-nums text-neutral-700 outline-none select-none focus-visible:outline-2 focus-visible:outline-blue-500 shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+
+      &[data-selected] {
+        @apply [background:linear-gradient(180deg,rgba(48,48,48,0)_63.53%,rgba(255,255,255,0.15)_100%),rgba(48,48,48,1)] text-white shadow-[0_-1px_0_1px_rgba(0,0,0,0.8)_inset,0_0_0_1px_rgba(48,48,48,1)_inset,0_0.5px_0_1.5px_rgba(255,255,255,0.25)_inset] hover:brightness-85 active:shadow-[0_0_0_1px_#000000_inset,0px_0px_0px_50px_rgba(0,0,0,0.5)_inset];
+      }
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']) {
+      /* Roomy padding for text; the icon's negative margins below pull an icon-only button back to an exact square */
+      @apply gap-2.25 px-3;
+    }
+
+    &:where([data-component='pagination-page'])[data-type='ellipsis'] {
+      @apply flex h-7.5 min-w-7.5 shrink-0 items-center justify-center text-neutral-500;
+    }
+
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']),
+    &:where([data-component='pagination-pageicon']) {
+      @apply h-4 w-fit shrink-0;
+    }
+
+    /* Arrows point the reading direction, and their negative margins keep icon-only buttons square */
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']) {
+      @apply -mx-1.25 rtl:-scale-x-100;
+    }
+  }
+}