@pablo-v/stepper 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pablo Viniegra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# @pablo-v/stepper
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Multi-step progress indicator
+
+```bash
+pnpm add @pablo-v/stepper @pablo-v/tokens
+```
+
+```tsx
+import '@pablo-v/tokens/styles.css';
+import '@pablo-v/stepper/style.css';
+import { Stepper } from '@pablo-v/stepper';
+```

package/dist/Stepper.d.ts

@@ -0,0 +1,24 @@
+import { type Orientation } from '@pablo-v/core';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+export type StepStatus = 'complete' | 'current' | 'upcoming' | 'error';
+export interface StepperStep {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Overrides the status derived from `current`, e.g. `'error'`. */
+    status?: StepStatus;
+    disabled?: boolean;
+}
+export interface StepperProps extends Omit<ComponentPropsWithRef<'ol'>, 'onChange'> {
+    steps: StepperStep[];
+    /** Index of the active step. Steps before it are complete. */
+    current: number;
+    /** Makes complete steps buttons that jump back to them. */
+    onStepClick?: (index: number) => void;
+    /** @default 'horizontal' */
+    orientation?: Orientation;
+    /** Screen-reader text appended to each step by status. */
+    statusLabels?: Partial<Record<StepStatus, string>>;
+}
+/** Progress through a sequence of steps, with pixel-cell connectors between them. */
+export declare function Stepper({ steps, current, onStepClick, orientation, statusLabels, className, ...rest }: StepperProps): import("react").JSX.Element;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../src/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IACjF,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4BAA4B;IAC5B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;CACpD;AASD,qFAAqF;AACrF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,WAAW,EACX,WAA0B,EAC1B,YAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,+BAiEd"}

package/dist/Stepper.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@pablo-v/core';
+import { CheckIcon, ErrorIcon } from '@pablo-v/pixel-icons';
+const STATUS_LABELS = {
+    complete: 'completed',
+    current: 'current',
+    upcoming: 'not started',
+    error: 'has errors',
+};
+/** Progress through a sequence of steps, with pixel-cell connectors between them. */
+export function Stepper({ steps, current, onStepClick, orientation = 'horizontal', statusLabels, className, ...rest }) {
+    const labels = { ...STATUS_LABELS, ...statusLabels };
+    return (_jsx("ol", { "data-orientation": orientation, className: cx('pxl-stepper', className), ...rest, children: steps.map((step, index) => {
+            const status = step.status ??
+                (index < current ? 'complete' : index === current ? 'current' : 'upcoming');
+            const interactive = onStepClick && status !== 'current' && index < current && !step.disabled;
+            const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "pxl-stepper__marker", "aria-hidden": "true", children: status === 'complete' ? (_jsx(CheckIcon, {})) : status === 'error' ? (_jsx(ErrorIcon, {})) : (index + 1) }), _jsxs("span", { className: "pxl-stepper__text", children: [_jsxs("span", { className: "pxl-stepper__label", children: [step.label, _jsxs("span", { className: "pxl-stepper__status", children: [", ", labels[status]] })] }), step.description != null && (_jsx("span", { className: "pxl-stepper__description", children: step.description }))] })] }));
+            return (_jsxs("li", { "data-status": status, "aria-current": status === 'current' ? 'step' : undefined, className: "pxl-stepper__step", children: [interactive ? (_jsx("button", { type: "button", className: "pxl-stepper__body", onClick: () => onStepClick(index), children: body })) : (_jsx("span", { className: "pxl-stepper__body", "data-disabled": step.disabled || undefined, children: body })), index < steps.length - 1 && (_jsx("span", { className: "pxl-stepper__connector", "data-lit": index < current || undefined, "aria-hidden": "true" }))] }, index));
+        }) }));
+}
+//# sourceMappingURL=Stepper.js.map

package/dist/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../src/Stepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAoB,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAyB5D,MAAM,aAAa,GAA+B;IAChD,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,qFAAqF;AACrF,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,WAAW,EACX,WAAW,GAAG,YAAY,EAC1B,YAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACM;IACb,MAAM,MAAM,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,YAAY,EAAE,CAAC;IACrD,OAAO,CACL,iCAAsB,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,KAAM,IAAI,YACjF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,MAAM,GACV,IAAI,CAAC,MAAM;gBACX,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;YAC9E,MAAM,WAAW,GACf,WAAW,IAAI,MAAM,KAAK,SAAS,IAAI,KAAK,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC3E,MAAM,IAAI,GAAG,CACX,8BACE,eAAM,SAAS,EAAC,qBAAqB,iBAAa,MAAM,YACrD,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CACvB,KAAC,SAAS,KAAG,CACd,CAAC,CAAC,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,SAAS,KAAG,CACd,CAAC,CAAC,CAAC,CACF,KAAK,GAAG,CAAC,CACV,GACI,EACP,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBAAM,SAAS,EAAC,oBAAoB,aACjC,IAAI,CAAC,KAAK,EACX,gBAAM,SAAS,EAAC,qBAAqB,mBAAI,MAAM,CAAC,MAAM,CAAC,IAAQ,IAC1D,EACN,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAC3B,eAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,CAAC,WAAW,GAAQ,CACrE,IACI,IACN,CACJ,CAAC;YACF,OAAO,CACL,6BAGe,MAAM,kBACL,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvD,SAAS,EAAC,mBAAmB,aAE5B,WAAW,CAAC,CAAC,CAAC,CACb,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,YAEhC,IAAI,GACE,CACV,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,mBAAmB,mBAAgB,IAAI,CAAC,QAAQ,IAAI,SAAS,YAC1E,IAAI,GACA,CACR,EACA,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,eACE,SAAS,EAAC,wBAAwB,cACxB,KAAK,GAAG,OAAO,IAAI,SAAS,iBAC1B,MAAM,GAClB,CACH,KAxBI,KAAK,CAyBP,CACN,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper, type StepperProps, type StepperStep, type StepStatus } from './Stepper.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAwD,MAAM,cAAc,CAAC"}

package/dist/stepper.css

@@ -0,0 +1,217 @@
+.pxl-stepper {
+  --_marker: var(--pxl-size-xs);
+
+  display: flex;
+  gap: var(--pxl-space-2);
+  margin: 0;
+  padding: 0;
+  color: var(--pxl-fg);
+  font-family: var(--pxl-font-sans);
+  font-size: var(--pxl-text-sm);
+  list-style: none;
+}
+
+.pxl-stepper[data-orientation="vertical"] {
+  flex-direction: column;
+  gap: 0;
+}
+
+.pxl-stepper__step {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  gap: var(--pxl-space-2);
+  min-width: 0;
+}
+
+.pxl-stepper__step:last-child {
+  flex: 0 0 auto;
+}
+
+.pxl-stepper[data-orientation="vertical"] .pxl-stepper__step {
+  flex-direction: column;
+  gap: 0;
+}
+
+.pxl-stepper__body {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pxl-space-2);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--pxl-radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+button.pxl-stepper__body {
+  cursor: pointer;
+}
+
+button.pxl-stepper__body:focus-visible {
+  outline: 2px solid var(--pxl-accent);
+  outline-offset: 2px;
+}
+
+.pxl-stepper__body[data-disabled] {
+  opacity: var(--pxl-opacity-disabled);
+}
+
+.pxl-stepper__marker {
+  display: grid;
+  flex: none;
+  place-items: center;
+  box-sizing: border-box;
+  width: var(--_marker);
+  height: var(--_marker);
+  border: 1px solid var(--pxl-gray-600);
+  border-radius: var(--pxl-radius-sm);
+  background: var(--pxl-bg);
+  color: var(--pxl-fg-muted);
+  font-family: var(--pxl-font-mono);
+  font-size: var(--pxl-text-xs);
+  font-variant-numeric: tabular-nums;
+  transition:
+    background-color var(--pxl-dur-fast) linear,
+    border-color var(--pxl-dur-fast) linear,
+    color var(--pxl-dur-fast) linear;
+}
+
+.pxl-stepper__step[data-status="current"] .pxl-stepper__marker {
+  border-color: var(--pxl-accent);
+  background: var(--pxl-accent-subtle);
+  color: var(--pxl-accent-text);
+}
+
+.pxl-stepper__step[data-status="complete"] .pxl-stepper__marker {
+  border-color: var(--pxl-fg);
+  background: var(--pxl-fg);
+  color: var(--pxl-bg);
+}
+
+.pxl-stepper__marker > .pxl-icon {
+  animation: pxl-pop-in var(--pxl-dur-base) var(--pxl-ease-out);
+}
+
+.pxl-stepper__step[data-status="error"] .pxl-stepper__marker {
+  border-color: var(--pxl-danger);
+  background: var(--pxl-danger-subtle);
+  color: var(--pxl-danger);
+}
+
+.pxl-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding-top: calc((var(--_marker) - 1.4em) / 2);
+  line-height: 1.4;
+}
+
+.pxl-stepper__label {
+  font-weight: 500;
+}
+
+.pxl-stepper__step[data-status="upcoming"] .pxl-stepper__label {
+  color: var(--pxl-fg-muted);
+  font-weight: 400;
+}
+
+button.pxl-stepper__body:hover .pxl-stepper__label {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.pxl-stepper__description {
+  color: var(--pxl-fg-muted);
+  font-size: var(--pxl-text-xs);
+}
+
+.pxl-stepper__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The connector is a row of 4px cells; a lit copy wipes over it once the step before it is done. */
+.pxl-stepper__connector {
+  --_cells: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px);
+  position: relative;
+  flex: 1;
+  min-width: var(--pxl-space-4);
+  height: 4px;
+  margin-top: calc((var(--_marker) - 4px) / 2);
+  color: var(--pxl-gray-300);
+  background: var(--_cells);
+}
+
+.pxl-stepper__connector::after {
+  position: absolute;
+  inset: 0;
+  color: var(--pxl-fg);
+  background: var(--_cells);
+  content: "";
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--pxl-dur-slow) var(--pxl-ease-out);
+}
+
+.pxl-stepper__connector[data-lit]::after {
+  transform: none;
+}
+
+.pxl-stepper[data-orientation="vertical"] .pxl-stepper__connector {
+  --_cells: repeating-linear-gradient(180deg, currentColor 0 4px, transparent 4px 6px);
+  flex: none;
+  width: 4px;
+  min-width: 0;
+  height: auto;
+  min-height: var(--pxl-space-6);
+  margin: var(--pxl-space-1) 0 var(--pxl-space-1) calc((var(--_marker) - 4px) / 2);
+}
+
+.pxl-stepper[data-orientation="vertical"] .pxl-stepper__connector::after {
+  transform: scaleY(0);
+  transform-origin: top;
+}
+
+.pxl-stepper[data-orientation="vertical"] .pxl-stepper__connector[data-lit]::after {
+  transform: none;
+}
+
+/* Narrow rows keep every marker and only the current step's text, which stays readable to screen readers. */
+@media (width < 30rem) {
+  .pxl-stepper:not([data-orientation="vertical"])
+    .pxl-stepper__step:not([data-status="current"])
+    .pxl-stepper__text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .pxl-stepper:not([data-orientation="vertical"]) .pxl-stepper__step:not(:last-child) {
+    flex: 1 0 auto;
+  }
+}
+
+@media (forced-colors: active) {
+  .pxl-stepper__connector,
+  .pxl-stepper__connector::after {
+    background: none;
+  }
+
+  .pxl-stepper__connector {
+    border-top: 2px dotted CanvasText;
+  }
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@pablo-v/stepper",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Multi-step progress indicator",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PabloViniegra/pixel-ui.git",
+    "directory": "packages/stepper"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "source": "./src/stepper.css",
+      "default": "./dist/stepper.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pablo-v/core": "^0.2.1",
+    "@pablo-v/pixel-icons": "^1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@pablo-v/tokens": "^0.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && node ../../scripts/copy-assets.mjs",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
 }