@crewlethq/ui 0.4.4 → 0.5.1

package/dist/StatCard-KPAFD4E2.css

@@ -0,0 +1,204 @@
+/*
+ * The stat tile.
+ *
+ * THE TONE PAINTS THE VALUE, which is what the props always said and what the
+ * stylesheet never did: 0.2.0 tinted the ICON, so a caller who passed a tone
+ * and no icon got a tile identical to a neutral one. Ink only, and never a
+ * fill: a tinted block behind a 28px number reads as a button.
+ */
+
+.crewlet-statcard {
+  /*
+   * The width of the figure at the end of the value's line. 96px is the
+   * approved design's sparkline, and its meters and state bars stand within
+   * four pixels of it: wide enough that a fortnight of points reads as a
+   * shape, narrow enough that five tiles in a row still leave the number its
+   * room.
+   */
+  --crewlet-statcard-trend-width: 96px;
+
+  display: flex;
+  flex-direction: column;
+  /* The design's 10px between the three lines, and its 16px inset with 14px
+     under the last line: half a scale step each, derived from the steps so
+     they follow the density with everything else. */
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  padding: var(--spacing-4) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  /*
+   * The card recipe: the card's surface, its hairline and its 12px corner,
+   * FLAT, as every card is, so a lone tile is the same object as the panel
+   * beside it rather than a raised cousin of it.
+   */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  min-width: 0;
+}
+
+/* Inside a StatGroup the row is one card and the tiles are its columns, so a
+   tile brings no surface of its own. */
+.crewlet-statcard--flush {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+/*
+ * The label: SENTENCE CASE at the caption step, as the design sets it and as
+ * the caller wrote it. The uppercased, tracked-open micro-caps it used to wear
+ * are a table's column head: five of them over five numbers put a heading on
+ * every tile, and uppercasing is a transform a caller's own words should not
+ * have to survive.
+ */
+.crewlet-statcard__label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-tertiary);
+  min-width: 0;
+}
+
+.crewlet-statcard__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * The value's line: the number at its start, the figure at its end, both on
+ * the line's FOOT, so a 28px number and a 28px sparkline share a baseline
+ * rather than centring on each other.
+ */
+.crewlet-statcard__reading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-width: 0;
+}
+
+/*
+ * THE SCREEN'S ONE DISPLAY NUMBER. The display step, semibold, on the tight
+ * track, with tabular figures so a number that ticks up moves nothing beside
+ * it.
+ *
+ * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The value is one line
+ * that never wraps, and any leading over it is air under the digits that
+ * opens between the number and the line below it and stands the number
+ * higher than the figure it shares a foot with.
+ *
+ * A BLOCK, NOT A FLEX ROW, because it is one line of text that has to END
+ * rather than stop: `text-overflow` acts on a block container only, and as a
+ * flex row the number and its unit were anonymous flex items no rule could
+ * reach, so a value too long for its tile was cut mid-digit with nothing to
+ * say a digit was lost. The unit sits on the same line as inline text, on
+ * the number's baseline.
+ */
+.crewlet-statcard__value {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The unit, "/ 7" after the 4: the quiet ink at a text step, medium, so it
+   reads as part of the figure rather than as a second one. */
+.crewlet-statcard__unit {
+  margin-inline-start: var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The figure at the end of the line. A figure (a sparkline, a meter, a state
+ * bar) FILLS the slot, because none of them has a width of its own to offer.
+ * A control keeps its own and stands at the slot's end: "Review" is a small
+ * button beside the number it acts on, not a bar the width of a sparkline.
+ */
+.crewlet-statcard__trend {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: none;
+  width: var(--crewlet-statcard-trend-width);
+  min-width: 0;
+}
+
+.crewlet-statcard__trend > :where(button, a) {
+  align-self: flex-end;
+}
+
+/*
+ * The placeholder is a line, not a pair of dashes. `--` is read aloud as
+ * "dash dash" and looks exactly like a measured value of nothing; the tile
+ * carries aria-busy instead, and the line says the number is on its way.
+ */
+.crewlet-statcard__placeholder {
+  display: inline-block;
+  width: 3ch;
+  height: 0.7em;
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-inset);
+}
+
+/*
+ * The second line keeps its space whether or not there is one, so a row of
+ * tiles where only some carry one still stands at one height: its leading is
+ * set here and the reserve is exactly one line of it, where a reserve in `em`
+ * was a line shorter than the one a sub actually draws.
+ */
+.crewlet-statcard__sub {
+  min-height: calc(1em * var(--font-line-height-body));
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-body);
+  /* The quiet step, with the label. The line qualifies the number rather than
+     being a second one. */
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * A CHANGE IS COLOURED BY WHETHER IT WAS WANTED, not by its direction: the
+ * sign already says which way the number moved. Good news takes the success
+ * ink and bad news the danger ink, the steps measured as TEXT on every rung;
+ * a change that is neither takes the secondary ink, a step up from the words
+ * after it, so the figure still leads the sentence.
+ */
+.crewlet-statcard__delta {
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-statcard__delta--good { color: var(--color-feedback-success-ink); }
+.crewlet-statcard__delta--bad { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard__delta--neutral { color: var(--color-text-secondary); }
+
+/*
+ * A SECOND LINE THAT REPORTS A STATE takes that state's ink ("Oldest waiting
+ * 2h 10m" is a person kept waiting: warning), the step measured as text on
+ * every rung, as the value's tone does. The delta inside the line keeps its
+ * own ink, which is a class on the delta and outranks this one on the line.
+ */
+.crewlet-statcard__sub--success { color: var(--color-feedback-success-ink); }
+.crewlet-statcard__sub--warning { color: var(--color-feedback-warning-ink); }
+.crewlet-statcard__sub--danger { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard__sub--info { color: var(--color-feedback-info-ink); }
+
+.crewlet-statcard--success .crewlet-statcard__value { color: var(--color-feedback-success-ink); }
+.crewlet-statcard--warning .crewlet-statcard__value { color: var(--color-feedback-warning-ink); }
+.crewlet-statcard--danger .crewlet-statcard__value { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }

package/dist/StatGroup/index.js

@@ -1,2 +1,2 @@
-export { StatGroup } from '../chunk-QNCVHRZL.js';
+export { StatGroup } from '../chunk-QVAFL2LE.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatGroup-TGB6AEKM.css → StatGroup-HVG6O62W.css}

@@ -10,14 +10,13 @@
 .crewlet-stat-group {
   display: grid;
   grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
-  /* The flush-panel recipe: the surface, the hairline, the 12px corner and
-     `overflow: hidden`, which is what lets the tiles inside sit against the
-     corners without their own hairlines escaping past them. The engine puts
-     its stat row inside exactly this. */
+  /* The flush-panel recipe: the card's surface, its hairline and its 12px
+     corner, flat as every card is, and `overflow: hidden`, which is what lets
+     the tiles inside sit against the corners without their own hairlines
+     escaping past them. */
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   overflow: hidden;
 }
 
@@ -38,7 +37,6 @@
   background: transparent;
   border: 0;
   border-radius: var(--radius-none);
-  box-shadow: none;
 }
 
 /*
@@ -57,13 +55,14 @@
 
 /*
  * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row: 900px is a 280px rail plus a 620px content column, so it is
- * the width at which a four-up row of numbers stops having a column each. The
+ * own stat row, and strictly under it, as the shell switches. The step is
+ * 1024px, a 236px rail, the 8px inset and a 780px floor for the sheet, and it
+ * is the width at which the shell stops holding the page beside the rail. The
  * rules are written for the general case rather than per column count: the
  * first tile of each pair loses its left hairline, and everything on the
  * second row and below gains a top one.
  */
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-stat-group {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

package/dist/StatusDot/StatusDot.d.ts

@@ -1,12 +1,30 @@
-import type { PhaseTone, Tone } from '../utils/tone.js';
+import type { ReactNode } from 'react';
+import type { Tone } from '../utils/tone.js';
 export interface StatusDotProps {
-    /** Which state, or which phase. Neutral says "nothing in particular". */
-    tone?: Tone | PhaseTone | undefined;
     /**
-     * A slow pulse, for a state that is still happening. Held still under a
-     * reduced-motion preference, where the mark still reads as its tone.
+     * Which state. Neutral says "nothing in particular", and it is also the dot
+     * beside a category's word, such as a phase's: a category has no hue.
+     */
+    tone?: Tone | undefined;
+    /**
+     * A halo that breathes out round the dot and back, in the tone's soft step,
+     * for a state that is still happening: the approved design pulses the
+     * `info` dot, which is working. One round is `--motion-duration-breath`. The
+     * dot itself never fades, and the halo never touches it: it is cast from a
+     * ring 2px out, so the dot always stands on the surface its fill clears 3:1
+     * against. Held still under a reduced-motion preference, where the dot rests
+     * at its fill with no halo and the word beside it still says the work is
+     * under way. The ring is drawn on the dot's `::after`, and a `position` of
+     * your own on the dot still wins over the one the ring needs.
      */
     pulse?: boolean | undefined;
+    /**
+     * The word the dot belongs to: "Reviewing !231". Given one, the dot and the
+     * word are drawn as one line, `.crewlet-status`, with the room between them
+     * the kit decides rather than the caller (see the stylesheet), and
+     * `className` goes on that line. The word is read; the dot still is not.
+     */
+    children?: ReactNode;
     className?: string | undefined;
 }
 /**
@@ -22,4 +40,4 @@ export interface StatusDotProps {
  * it can sit on, because a mark is read the way a glyph is rather than the way
  * text is.
  */
-export declare function StatusDot({ tone, pulse, className }: StatusDotProps): import("react").JSX.Element;
+export declare function StatusDot({ tone, pulse, children, className }: StatusDotProps): import("react").JSX.Element;

package/dist/StatusDot/index.js

@@ -1,2 +1,2 @@
-export { StatusDot } from '../chunk-PZSWF74H.js';
+export { StatusDot } from '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/StatusDot-7OMCQCZF.css

@@ -0,0 +1,186 @@
+/*
+ * The status dot: a 7px mark in its tone's fill, beside the word it belongs
+ * to. See the component doc for why it is hidden from assistive technology.
+ *
+ * 7px is the approved design's dot. The size is written out rather than
+ * taken from a scale because it is the measure of one mark, not a step
+ * anything else shares, and it is fixed at every density: a mark read the
+ * way a glyph is does not shrink with the gaps around it.
+ *
+ * TWO VALUES PER TONE: the fill the dot is painted in, and the HALO a pulsing
+ * dot breathes out in, which is the same tone's soft step. The halo is held to
+ * being SEEN rather than to a contrast ratio: it never touches the dot (see the
+ * pulse below), so the dot clears 3:1 against the surface it stands on at every
+ * point of the round, and the word beside it says the state. The halo only has
+ * to stand off its ground by the dE 3 the palette suite holds every "can a
+ * reader notice it" difference to. Every soft step does, by 4.48 at the least.
+ */
+
+.crewlet-status-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-circle);
+  /*
+   * The quiet state is still a mark, so it takes the tertiary step rather than
+   * the decoration one the engine spends here: a 7px dot has to clear 3:1 to
+   * be seen at all, and --color-text-muted measures 2.33:1 on a light page and
+   * 2.25:1 on a dark one at their worst grounds. The tertiary step measures
+   * 4.87:1 and 4.65:1 on the same pair, and is the nearest step that holds.
+   */
+  background: var(--color-text-tertiary);
+  /*
+   * The neutral family has no soft step, because it has no hue to tint with,
+   * so its halo is a translucent overlay. Pressed is the one that reads like
+   * the tones' halos: it stands dE 6.09 off its faintest ground (the light
+   * frame) and 8.84 in dark, inside the 4.48 to 8.50 the soft steps span. The
+   * hover overlay stands 3.03, on the floor, and the inset well 1.79, under it.
+   */
+  --crewlet-status-dot-halo: var(--color-surface-pressed);
+  flex: none;
+}
+
+.crewlet-status-dot--info {
+  background: var(--color-feedback-info);
+  --crewlet-status-dot-halo: var(--color-feedback-info-soft);
+}
+
+.crewlet-status-dot--success {
+  background: var(--color-feedback-success);
+  --crewlet-status-dot-halo: var(--color-feedback-success-soft);
+}
+
+.crewlet-status-dot--warning {
+  background: var(--color-feedback-warning);
+  --crewlet-status-dot-halo: var(--color-feedback-warning-soft);
+}
+
+.crewlet-status-dot--danger {
+  background: var(--color-feedback-danger);
+  --crewlet-status-dot-halo: var(--color-feedback-danger-soft);
+}
+
+.crewlet-status-dot--brand {
+  background: var(--color-brand-accent);
+  --crewlet-status-dot-halo: var(--color-brand-accent-soft);
+}
+
+/*
+ * STILL HAPPENING: a halo breathes out round the dot and back in, the approved
+ * design's working pulse. Five things are deliberate.
+ *
+ * THE DOT NEVER FADES. The halo is a box-shadow and it is the only property
+ * the keyframes touch, so the fill stays at the step measured to 3:1 through
+ * the whole round. The pulse this replaced faded the dot itself to 0.35, and
+ * at the bottom of that fade every fill measured 1.35:1 to 2.17:1 against the
+ * surfaces it sits on: for part of every round, a mark under its own floor.
+ *
+ * NOR DOES THE HALO TOUCH IT. The design casts the halo from the dot itself,
+ * and a spread shadow starts at the edge of the box that casts it, so for the
+ * whole round the dot's ground would be its own soft step on the surface
+ * rather than the surface. On that ground the light info, success and warning
+ * fills measure 2.65:1 to 2.95:1 (warning and success on the frame, where they
+ * clear 3.00:1 and 3.01:1 bare): the same fault as the fade, smaller. So the
+ * halo is cast by a RING BOX 2px outside the dot, the offset the Avatar state
+ * ring and the outer focus ring stand at, and an outer shadow is never painted
+ * inside the box that casts it: a band of the real ground always stands
+ * between the dot and its halo, so the dot always stands on the surface its
+ * fill was measured against. The fill does not move. Nothing in this kit
+ * holds a mark to its own soft step, which is also why a Tag draws its dot in
+ * its ink.
+ *
+ * A SHADOW ON A PSEUDO-ELEMENT, not an outline at the same offset, because an
+ * outline's width is snapped to whole device pixels, as a border's is: at 1x
+ * a width breathing to 3px is drawn 1px and then 2px and reaches 3px for an
+ * instant, a flicker between two rings rather than a breath, where a spread
+ * shadow grows smoothly. The ring box is absolutely positioned, so it takes
+ * no room, and the pulsing dot is its containing block through a rule written
+ * in :where(), which weighs nothing, so a position of your own on the dot
+ * still wins, and any position but static keeps the ring on it.
+ *
+ * IT REACHES THE DESIGN'S 5PX, 2 of ground and 3 of halo, painted outside
+ * every box, so it moves nothing beside the dot. Like the 7px it surrounds,
+ * it is the measure of this one mark and is fixed at every density.
+ *
+ * ONE ROUND IS --motion-duration-breath, which is a PERIOD rather than a
+ * transition: out by the half, back by the end, and no `alternate`, which
+ * would play each half as a whole duration and take twice as long. That is
+ * 0.45 rounds a second, far under the three flashes a second that are a
+ * seizure risk, and the in-out ease makes both ends a rest. The halo is read
+ * through the custom property each tone sets above, which the ring box
+ * inherits, so whichever tone pulses breathes in its own soft step.
+ */
+:where(.crewlet-status-dot.is-pulsing) {
+  position: relative;
+}
+
+.crewlet-status-dot.is-pulsing::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: var(--radius-circle);
+  /* Paint, never a target: the box reaches 2px past the dot. */
+  pointer-events: none;
+  animation: crewlet-status-dot-pulse var(--motion-duration-breath) var(--motion-easing-in-out) infinite;
+}
+
+/*
+ * The spread moves and nothing else: the rests and the peak are one shadow in
+ * one colour, so the only thing that interpolates is how far it reaches.
+ */
+@keyframes crewlet-status-dot-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--crewlet-status-dot-halo);
+  }
+
+  50% {
+    box-shadow: 0 0 0 3px var(--crewlet-status-dot-halo);
+  }
+}
+
+/*
+ * A DOT WITH ITS WORD: one line, the dot and then the word, the way every
+ * dot in this kit is meant to be read.
+ *
+ * THE GAP CLEARS THE HALO. A pulsing dot's halo reaches 5px past its edge, 2
+ * of ground and 3 of halo, painted outside every box, so it takes no room and
+ * a gap narrower than that puts the halo on the first letter at every peak:
+ * at the 4px an ordinary mark stands off its word, it struck the R of
+ * "Reviewing". 7px is that reach and 2px of ground on the far side of it, the
+ * same band that stands between the dot and its halo, so at the peak the word
+ * stands off the halo exactly as the halo stands off the dot. It is written in
+ * pixels, not a spacing step, because what it clears is fixed at every
+ * density like the dot and the halo themselves, and it is the same for EVERY
+ * tone, pulsing or not, so a column of statuses starts its words on one line
+ * whichever of them is breathing.
+ */
+.crewlet-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* A status is one line, and the word is what gives way: the dot never does. */
+.crewlet-status__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * HELD, not slowed: a mark that loops for as long as the work runs is exactly
+ * what the setting is for. The stop names the selector that starts the pulse
+ * and comes after it, so it wins on source order at the same specificity,
+ * which is the pairing the package's literal check holds every stylesheet to.
+ * The dot rests at its own fill with no halo, and the word beside it still
+ * says the work is under way.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-status-dot.is-pulsing::after {
+    animation: none;
+  }
+}

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,78 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Tone } from '../utils/tone.js';
+/**
+ * The state the CURRENT step is in, drawn as its chip's soft tint under its
+ * ink. `info` is the default: work under way, the design's working step. A
+ * run parked on a question is `warning`, one that stopped at this step is
+ * `danger`, and `brand` is where the reader is, for a sequence the reader is
+ * walking themselves.
+ *
+ * NOT `neutral`. The quiet chip is what every step that is not current already
+ * is, so a neutral current step would be told from its neighbours by nothing
+ * but `aria-current`, which nobody sees.
+ */
+export type StepperTone = Exclude<Tone, 'neutral'>;
+/** One step of the sequence. */
+export interface StepperStep {
+    /** What tells two steps apart, unique within the stepper: `execute`, `review`. */
+    id: string;
+    /**
+     * The step's words, and anything the step carries beside them: "Execute ·
+     * round 7 of 25", "Context 0.8s".
+     */
+    label: ReactNode;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
+    /** Every step, in order. */
+    steps: readonly StepperStep[];
+    /**
+     * The step under way, by its id. Every step before it is done and every
+     * step after it is still to come. `null` once EVERY step is done, which is
+     * how a finished run is drawn: a turn's history in a task's timeline reads
+     * "Execute ✓ — Review ✓" with nothing current.
+     */
+    current: string | null;
+    /**
+     * What the sequence is, for a screen reader: "Turn progress". REQUIRED,
+     * because a list of four short words with nothing to say what they are the
+     * steps OF is a riddle to somebody who cannot see the row it stands in.
+     */
+    label: string;
+    /** The current step's state. `info` by default. */
+    tone?: StepperTone | undefined;
+    /**
+     * The current step's dot breathes, for a step still under way: the approved
+     * design pulses a working turn's. It is `StatusDot`'s own pulse, so it
+     * never fades the dot, never touches it, and is held still under a reduced
+     * motion preference.
+     */
+    pulse?: boolean | undefined;
+    /**
+     * Said before a finished step's words, where the check glyph stands for a
+     * reader who sees it: "Done Context".
+     */
+    doneLabel?: string | undefined;
+}
+/**
+ * Where a sequence has got to: the phases of a turn, the stages of a run.
+ *
+ * AN ORDERED LIST, because the order IS the information: a step's position
+ * says whether it is behind the current one or ahead of it, and a list says
+ * how many there are before a reader has heard any of them. The step under
+ * way carries `aria-current="step"`, the one value ARIA gives this exact
+ * meaning, and it is on exactly one step while the sequence is running and on
+ * none once it has finished.
+ *
+ * THREE STATES, EACH DRAWN TWO WAYS, so colour is never the only carrier. A
+ * finished step is the secondary ink with a check, and says "Done" before its
+ * words to a screen reader, where the check stands for a reader who sees it.
+ * The current step is its tone's soft tint under the tone's ink with the
+ * tone's dot, and is `aria-current`. A step still to come is the tertiary ink
+ * and nothing else. The hairline round the chips, and the short rule between
+ * two of them, are the design's quiet furniture.
+ *
+ * THE TONE IS DRAWN, NEVER SPOKEN: a reader hears which step is current, not
+ * that it is in the warning hue. A current step whose state is anything but
+ * ordinary work says so in its own words ("Review · sent back").
+ */
+export declare function Stepper({ steps, current, label, tone, pulse, doneLabel, className, ...rest }: StepperProps): import("react").JSX.Element | null;

package/dist/Stepper/index.d.ts

@@ -0,0 +1,3 @@
+import './Stepper.css';
+export { Stepper } from './Stepper.js';
+export type { StepperProps, StepperStep, StepperTone } from './Stepper.js';

package/dist/Stepper/index.js

@@ -0,0 +1,4 @@
+export { Stepper } from '../chunk-5QWIJSQM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';