@sphynxoid/stepwise 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme;@layer base{:where([data-stepwise],[data-stepwise] *),:where([data-stepwise],[data-stepwise] *):before,:where([data-stepwise],[data-stepwise] *):after{box-sizing:border-box;border:0 solid;margin:0;padding:0}:where([data-stepwise] button,button[data-stepwise]){font:inherit;letter-spacing:inherit;color:inherit;appearance:none;background-color:#0000;border-radius:0}:where([data-stepwise] h3,[data-stepwise] p){font-size:inherit;font-weight:inherit}:where([data-stepwise] kbd,[data-stepwise] code){font-family:var(--stepwise-font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace)}:where([data-stepwise]){color:var(--stepwise-foreground)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.top-20{top:5rem}.bottom-6{bottom:1.5rem}.left-1\/2{left:50%}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-8{margin-top:2rem}.mt-16{margin-top:4rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.h-3\.5{height:.875rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.w-11{width:2.75rem}.w-72{width:18rem}.w-\[min\(92vw\,26rem\)\]{width:min(92vw,26rem)}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-\[calc\(100vw-1rem\)\]{max-width:calc(100vw - 1rem)}.max-w-md{max-width:28rem}.min-w-0{min-width:0}.min-w-\[3px\]{min-width:3px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-y-150{--tw-scale-y:150%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-mt-40{scroll-margin-top:10rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-\[2px\]{gap:2px}.gap-\[3px\]{gap:3px}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem * 2) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-10{column-gap:2.5rem}.gap-y-8{row-gap:2rem}.overflow-x-auto{overflow-x:auto}.rounded-\[2px\]{border-radius:2px}.rounded-sm{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dotted{--tw-border-style:dotted;border-style:dotted}.border-accent\/40{border-color:var(--stepwise-accent)}@supports (color:color-mix(in lab, red, red)){.border-accent\/40{border-color:color-mix(in oklab, var(--stepwise-accent) 40%, transparent)}}.border-destructive\/40{border-color:var(--stepwise-destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/40{border-color:color-mix(in oklab, var(--stepwise-destructive) 40%, transparent)}}.border-primary,.border-primary\/30{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/30{border-color:color-mix(in oklab, var(--stepwise-primary) 30%, transparent)}}.border-primary\/40{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/40{border-color:color-mix(in oklab, var(--stepwise-primary) 40%, transparent)}}.border-primary\/50{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/50{border-color:color-mix(in oklab, var(--stepwise-primary) 50%, transparent)}}.border-transparent{border-color:#0000}.border-white\/10{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--stepwise-foreground) 10%, transparent)}}.border-white\/15{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--stepwise-foreground) 15%, transparent)}}.border-white\/20{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab, var(--stepwise-foreground) 20%, transparent)}}.bg-accent\/70{background-color:var(--stepwise-accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/70{background-color:color-mix(in oklab, var(--stepwise-accent) 70%, transparent)}}.bg-background\/40{background-color:var(--stepwise-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/40{background-color:color-mix(in oklab, var(--stepwise-background) 40%, transparent)}}.bg-background\/85{background-color:var(--stepwise-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--stepwise-background) 85%, transparent)}}.bg-background\/95{background-color:var(--stepwise-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/95{background-color:color-mix(in oklab, var(--stepwise-background) 95%, transparent)}}.bg-black\/40{background-color:var(--stepwise-shade)}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab, var(--stepwise-shade) 40%, transparent)}}.bg-black\/70{background-color:var(--stepwise-shade)}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab, var(--stepwise-shade) 70%, transparent)}}.bg-card{background-color:var(--stepwise-card)}.bg-destructive\/70{background-color:var(--stepwise-destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/70{background-color:color-mix(in oklab, var(--stepwise-destructive) 70%, transparent)}}.bg-foreground\/30{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/30{background-color:color-mix(in oklab, var(--stepwise-foreground) 30%, transparent)}}.bg-popover{background-color:var(--stepwise-popover)}.bg-primary,.bg-primary\/5{background-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--stepwise-primary) 5%, transparent)}}.bg-primary\/10{background-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--stepwise-primary) 10%, transparent)}}.bg-primary\/90{background-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--stepwise-primary) 90%, transparent)}}.bg-white\/5{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--stepwise-foreground) 5%, transparent)}}.bg-white\/10{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--stepwise-foreground) 10%, transparent)}}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1\.5{padding-inline:.375rem}.px-2{padding-inline:.5rem}.px-2\.5{padding-inline:.625rem}.px-3{padding-inline:.75rem}.px-3\.5{padding-inline:.875rem}.px-4{padding-inline:1rem}.py-0\.5{padding-block:.125rem}.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}.pt-1\.5{padding-top:.375rem}.pt-3{padding-top:.75rem}.pt-10{padding-top:2.5rem}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-lg{font-size:1.125rem;line-height:var(--tw-leading,calc(1.75 / 1.125))}.text-sm{font-size:.875rem;line-height:var(--tw-leading,calc(1.25 / .875))}.text-xs{font-size:.75rem;line-height:var(--tw-leading,calc(1 / .75))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.leading-5{--tw-leading:calc(.25rem * 5);line-height:1.25rem}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:1.625;line-height:1.625}.font-bold{--tw-font-weight:700;font-weight:700}.tracking-widest{--tw-tracking:.1em;letter-spacing:.1em}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.text-accent{color:var(--stepwise-accent)}.text-destructive{color:var(--stepwise-destructive)}.text-foreground\/25{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/25{color:color-mix(in oklab, var(--stepwise-foreground) 25%, transparent)}}.text-foreground\/30{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/30{color:color-mix(in oklab, var(--stepwise-foreground) 30%, transparent)}}.text-foreground\/35{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/35{color:color-mix(in oklab, var(--stepwise-foreground) 35%, transparent)}}.text-foreground\/40{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/40{color:color-mix(in oklab, var(--stepwise-foreground) 40%, transparent)}}.text-foreground\/45{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/45{color:color-mix(in oklab, var(--stepwise-foreground) 45%, transparent)}}.text-foreground\/50{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--stepwise-foreground) 50%, transparent)}}.text-foreground\/55{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/55{color:color-mix(in oklab, var(--stepwise-foreground) 55%, transparent)}}.text-foreground\/60{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/60{color:color-mix(in oklab, var(--stepwise-foreground) 60%, transparent)}}.text-foreground\/70{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--stepwise-foreground) 70%, transparent)}}.text-foreground\/80{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--stepwise-foreground) 80%, transparent)}}.text-foreground\/85{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/85{color:color-mix(in oklab, var(--stepwise-foreground) 85%, transparent)}}.text-foreground\/95{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/95{color:color-mix(in oklab, var(--stepwise-foreground) 95%, transparent)}}.text-primary{color:var(--stepwise-primary)}.text-primary-foreground{color:var(--stepwise-primary-foreground)}.text-primary\/70{color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.text-primary\/70{color:color-mix(in oklab, var(--stepwise-primary) 70%, transparent)}}.text-primary\/80{color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.text-primary\/80{color:color-mix(in oklab, var(--stepwise-primary) 80%, transparent)}}.text-primary\/90{color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.text-primary\/90{color:color-mix(in oklab, var(--stepwise-primary) 90%, transparent)}}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_8px_24px_rgba\(0\,0\,0\,0\.35\)\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#00000059);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary,.ring-primary\/80{--tw-ring-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/80{--tw-ring-color:color-mix(in oklab, var(--stepwise-primary) 80%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\:border-primary\/70:hover{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/70:hover{border-color:color-mix(in oklab, var(--stepwise-primary) 70%, transparent)}}.hover\:border-white\/15:hover{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/15:hover{border-color:color-mix(in oklab, var(--stepwise-foreground) 15%, transparent)}}.hover\:bg-primary:hover{background-color:var(--stepwise-primary)}.hover\:bg-white\/5:hover{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--stepwise-foreground) 5%, transparent)}}.hover\:text-foreground:hover{color:var(--stepwise-foreground)}.hover\:text-primary:hover{color:var(--stepwise-primary)}}.focus-visible\:text-primary:focus-visible{color:var(--stepwise-primary)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary\/60:focus-visible{--tw-ring-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-primary\/60:focus-visible{--tw-ring-color:color-mix(in oklab, var(--stepwise-primary) 60%, transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--stepwise-ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--stepwise-ring) 50%, transparent)}}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}}@media (min-width:48rem){.md\:top-24{top:6rem}.md\:inline{display:inline}}@media (min-width:80rem){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.\[\&_a\]\:text-accent a{color:var(--stepwise-accent)}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_a\]\:underline-offset-4 a{text-underline-offset:4px}.\[\&_strong\]\:text-foreground\/80 strong{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.\[\&_strong\]\:text-foreground\/80 strong{color:color-mix(in oklab, var(--stepwise-foreground) 80%, transparent)}}}:where(:root){--stepwise-background:#f8fafd;--stepwise-foreground:#101828;--stepwise-card:#fff;--stepwise-popover:#fff;--stepwise-primary:#2563eb;--stepwise-primary-foreground:#fff;--stepwise-accent:#059669;--stepwise-destructive:#d92d20;--stepwise-ring:#2563eb;--stepwise-shade:#94a3b8}@media (prefers-color-scheme:dark){:where(:root){--stepwise-background:#0a0e1a;--stepwise-foreground:#e9eef8;--stepwise-card:#101626;--stepwise-popover:#131a2c;--stepwise-primary:#6aa2ff;--stepwise-primary-foreground:#071021;--stepwise-accent:#71e58f;--stepwise-destructive:#ff6b62;--stepwise-ring:#6aa2ff;--stepwise-shade:#000}}:where(.dark,[data-theme=dark]){--stepwise-background:#0a0e1a;--stepwise-foreground:#e9eef8;--stepwise-card:#101626;--stepwise-popover:#131a2c;--stepwise-primary:#6aa2ff;--stepwise-primary-foreground:#071021;--stepwise-accent:#71e58f;--stepwise-destructive:#ff6b62;--stepwise-ring:#6aa2ff;--stepwise-shade:#000}:where(.light,[data-theme=light]){--stepwise-background:#f8fafd;--stepwise-foreground:#101828;--stepwise-card:#fff;--stepwise-popover:#fff;--stepwise-primary:#2563eb;--stepwise-primary-foreground:#fff;--stepwise-accent:#059669;--stepwise-destructive:#d92d20;--stepwise-ring:#2563eb;--stepwise-shade:#94a3b8}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
@@ -1,12 +1,17 @@
1
1
  import { ReactNode } from 'react';
2
2
 
3
3
  type StepTone = "neutral" | "accent" | "good" | "bad" | "write" | "idle";
4
- interface StepwiseStep {
4
+ /**
5
+ * One frame of a trace. `Data` carries the consumer's domain payload (array
6
+ * snapshots, highlighted slots, …) alongside the presentation fields, so a
7
+ * trace is a single typed array: `StepwiseStep<{ arr: number[] }>[]`.
8
+ */
9
+ type StepwiseStep<Data extends object = Record<never, never>> = {
5
10
  tone: StepTone;
6
11
  label: string;
7
12
  code?: string[];
8
13
  note?: string;
9
- }
14
+ } & Data;
10
15
  interface TourStepInput {
11
16
  id?: string;
12
17
  title: string;
@@ -85,4 +90,4 @@ interface TourDriver {
85
90
  hide(): void;
86
91
  }
87
92
 
88
- export type { Chapter as C, PlayerEngine as P, StepTone as S, TourDriver as T, TourStepInput as a, ShortcutItem as b, PlayerEngineApi as c, PlayerEngineHandle as d, StepwiseStep as e, TourContext as f };
93
+ export type { Chapter as C, PlayerEngine as P, StepwiseStep as S, TourDriver as T, StepTone as a, TourStepInput as b, ShortcutItem as c, PlayerEngineApi as d, PlayerEngineHandle as e, TourContext as f };
package/package.json CHANGED
@@ -1,86 +1,101 @@
1
- {
2
- "name": "@sphynxoid/stepwise",
3
- "version": "0.1.0",
4
- "description": "A kit for interactive, narrated, step-driven visualizations — one primitive (useSteps) at every scale.",
5
- "license": "MIT",
6
- "author": "The Sphynx <jmail.hamza@gmail.com>",
7
- "homepage": "https://github.com/TheSphynxoid/stepwise#readme",
8
- "repository": {
9
- "type": "git",
10
- "url": "git+https://github.com/TheSphynxoid/stepwise.git"
11
- },
12
- "bugs": "https://github.com/TheSphynxoid/stepwise/issues",
13
- "keywords": [
14
- "react",
15
- "hooks",
16
- "step",
17
- "player",
18
- "tour",
19
- "guided-tour",
20
- "scrollytelling",
21
- "chapters",
22
- "visualization",
23
- "interactive",
24
- "narrated",
25
- "glossary",
26
- "tailwind"
27
- ],
28
- "type": "module",
29
- "main": "./dist/index.js",
30
- "types": "./dist/index.d.ts",
31
- "exports": {
32
- ".": {
33
- "types": "./dist/index.d.ts",
34
- "import": "./dist/index.js"
35
- },
36
- "./adapters/gsap": {
37
- "types": "./dist/adapters/gsap.d.ts",
38
- "import": "./dist/adapters/gsap.js"
39
- },
40
- "./adapters/driver-js": {
41
- "types": "./dist/adapters/driver-js.d.ts",
42
- "import": "./dist/adapters/driver-js.js"
43
- },
44
- "./adapters/scroll": {
45
- "types": "./dist/adapters/scroll.d.ts",
46
- "import": "./dist/adapters/scroll.js"
47
- }
48
- },
49
- "sideEffects": [
50
- "./dist/adapters/driver-js.js"
51
- ],
52
- "files": ["dist", "README.md"],
53
- "scripts": {
54
- "build": "tsup",
55
- "test": "vitest run",
56
- "prepublishOnly": "npm run test && npm run build",
57
- "clean": "rimraf dist"
58
- },
59
- "publishConfig": {
60
- "access": "public"
61
- },
62
- "peerDependencies": {
63
- "react": "^18.0.0 || ^19.0.0",
64
- "react-dom": "^18.0.0 || ^19.0.0",
65
- "driver.js": ">= 1.0.0",
66
- "gsap": ">= 3.0.0"
67
- },
68
- "peerDependenciesMeta": {
69
- "driver.js": { "optional": true },
70
- "gsap": { "optional": true }
71
- },
72
- "dependencies": {
73
- "clsx": "^2.1.0",
74
- "tailwind-merge": "^2.0.0"
75
- },
76
- "devDependencies": {
77
- "@testing-library/react": "^16.0.0",
78
- "@types/react": "^19.0.0",
79
- "jsdom": "^26.0.0",
80
- "react": "^19.0.0",
81
- "react-dom": "^19.0.0",
82
- "tsup": "^8.0.0",
83
- "typescript": "^5.0.0",
84
- "vitest": "^3.0.0"
85
- }
86
- }
1
+ {
2
+ "name": "@sphynxoid/stepwise",
3
+ "version": "0.2.0",
4
+ "description": "A kit for interactive, narrated, step-driven visualizations — one primitive (useSteps) at every scale.",
5
+ "license": "MIT",
6
+ "author": "The Sphynx <jmail.hamza@gmail.com>",
7
+ "homepage": "https://github.com/TheSphynxoid/stepwise#readme",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/TheSphynxoid/stepwise.git"
11
+ },
12
+ "bugs": "https://github.com/TheSphynxoid/stepwise/issues",
13
+ "keywords": [
14
+ "react",
15
+ "hooks",
16
+ "step",
17
+ "player",
18
+ "tour",
19
+ "guided-tour",
20
+ "scrollytelling",
21
+ "chapters",
22
+ "visualization",
23
+ "interactive",
24
+ "narrated",
25
+ "glossary",
26
+ "tailwind",
27
+ "shadcn"
28
+ ],
29
+ "type": "module",
30
+ "main": "./dist/index.js",
31
+ "types": "./dist/index.d.ts",
32
+ "exports": {
33
+ ".": {
34
+ "types": "./dist/index.d.ts",
35
+ "import": "./dist/index.js"
36
+ },
37
+ "./adapters/gsap": {
38
+ "types": "./dist/adapters/gsap.d.ts",
39
+ "import": "./dist/adapters/gsap.js"
40
+ },
41
+ "./adapters/driver-js": {
42
+ "types": "./dist/adapters/driver-js.d.ts",
43
+ "import": "./dist/adapters/driver-js.js"
44
+ },
45
+ "./adapters/scroll": {
46
+ "types": "./dist/adapters/scroll.d.ts",
47
+ "import": "./dist/adapters/scroll.js"
48
+ },
49
+ "./styles.css": "./dist/styles.css"
50
+ },
51
+ "sideEffects": [
52
+ "./dist/adapters/driver-js.js",
53
+ "*.css"
54
+ ],
55
+ "files": [
56
+ "dist",
57
+ "README.md"
58
+ ],
59
+ "scripts": {
60
+ "build": "tsup && npm run build:css",
61
+ "build:css": "tailwindcss -i src/styles.css -o dist/styles.css --minify",
62
+ "test": "vitest run",
63
+ "prepublishOnly": "npm run test && npm run build",
64
+ "clean": "rimraf dist",
65
+ "release": "npm publish --access public",
66
+ "bump": "npm version"
67
+ },
68
+ "publishConfig": {
69
+ "access": "public"
70
+ },
71
+ "peerDependencies": {
72
+ "driver.js": ">= 1.0.0",
73
+ "gsap": ">= 3.0.0",
74
+ "react": "^18.0.0 || ^19.0.0",
75
+ "react-dom": "^18.0.0 || ^19.0.0"
76
+ },
77
+ "peerDependenciesMeta": {
78
+ "driver.js": {
79
+ "optional": true
80
+ },
81
+ "gsap": {
82
+ "optional": true
83
+ }
84
+ },
85
+ "dependencies": {
86
+ "clsx": "^2.1.0",
87
+ "tailwind-merge": "^2.0.0"
88
+ },
89
+ "devDependencies": {
90
+ "@tailwindcss/cli": "^4.3.3",
91
+ "@testing-library/react": "^16.0.0",
92
+ "@types/react": "^19.0.0",
93
+ "jsdom": "^26.0.0",
94
+ "react": "^19.0.0",
95
+ "react-dom": "^19.0.0",
96
+ "tailwindcss": "^4.3.3",
97
+ "tsup": "^8.0.0",
98
+ "typescript": "^5.0.0",
99
+ "vitest": "^3.0.0"
100
+ }
101
+ }