@particle-academy/react-fancy 6.2.0 → 6.3.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.
- package/CHANGELOG.md +34 -0
- package/README.md +1 -0
- package/dist/breadcrumbs.cjs +2 -2
- package/dist/breadcrumbs.d.cts +13 -2
- package/dist/breadcrumbs.d.ts +13 -2
- package/dist/breadcrumbs.js +1 -1
- package/dist/chunk-5EW47IH7.js +194 -0
- package/dist/chunk-5EW47IH7.js.map +1 -0
- package/dist/{chunk-WJHPZS3U.js → chunk-GTS3QA7M.js} +11 -4
- package/dist/chunk-GTS3QA7M.js.map +1 -0
- package/dist/{chunk-EWE776WI.cjs → chunk-SKMORSBO.cjs} +11 -4
- package/dist/chunk-SKMORSBO.cjs.map +1 -0
- package/dist/chunk-Y3QAEF2P.cjs +196 -0
- package/dist/chunk-Y3QAEF2P.cjs.map +1 -0
- package/dist/index.cjs +13 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -3
- package/dist/index.js.map +1 -1
- package/dist/inputs.cjs +5 -5
- package/dist/inputs.js +1 -1
- package/dist/stepper.cjs +14 -0
- package/dist/stepper.cjs.map +1 -0
- package/dist/stepper.d.cts +72 -0
- package/dist/stepper.d.ts +72 -0
- package/dist/stepper.js +5 -0
- package/dist/stepper.js.map +1 -0
- package/docs/Breadcrumbs.md +10 -1
- package/docs/Stepper.md +124 -0
- package/package.json +11 -1
- package/dist/chunk-EWE776WI.cjs.map +0 -1
- package/dist/chunk-WJHPZS3U.js.map +0 -1
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
|
|
4
|
+
var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var lucideReact = require('lucide-react');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
var DEFAULT_STATE_LABELS = {
|
|
10
|
+
upcoming: "Not started",
|
|
11
|
+
current: "Current",
|
|
12
|
+
complete: "Completed",
|
|
13
|
+
error: "Error"
|
|
14
|
+
};
|
|
15
|
+
function StepperStep(_props) {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
StepperStep.displayName = "StepperStep";
|
|
19
|
+
function stepsFromChildren(children) {
|
|
20
|
+
const out = [];
|
|
21
|
+
for (const child of react.Children.toArray(children)) {
|
|
22
|
+
if (!react.isValidElement(child) || child.type !== StepperStep) continue;
|
|
23
|
+
const { children: content, ...rest } = child.props;
|
|
24
|
+
out.push({ ...rest, content });
|
|
25
|
+
}
|
|
26
|
+
return out;
|
|
27
|
+
}
|
|
28
|
+
var indicatorClass = {
|
|
29
|
+
complete: "border-transparent bg-zinc-900 text-white dark:bg-white dark:text-zinc-900",
|
|
30
|
+
current: "border-2 border-zinc-900 bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 ring-4 ring-zinc-900/10 dark:border-white dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white dark:ring-white/15",
|
|
31
|
+
upcoming: "border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
|
|
32
|
+
error: "border-transparent bg-red-600 text-white dark:bg-red-500"
|
|
33
|
+
};
|
|
34
|
+
var titleClass = {
|
|
35
|
+
complete: "font-medium text-zinc-900 dark:text-white",
|
|
36
|
+
current: "font-semibold text-zinc-900 dark:text-white",
|
|
37
|
+
upcoming: "font-medium text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
|
|
38
|
+
error: "font-semibold text-red-700 dark:text-red-400"
|
|
39
|
+
};
|
|
40
|
+
function Indicator({ state, index }) {
|
|
41
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
+
"span",
|
|
43
|
+
{
|
|
44
|
+
"aria-hidden": "true",
|
|
45
|
+
"data-react-fancy-stepper-indicator": "",
|
|
46
|
+
className: chunkZU5Q77OT_cjs.cn(
|
|
47
|
+
"relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold",
|
|
48
|
+
indicatorClass[state]
|
|
49
|
+
),
|
|
50
|
+
children: state === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16, strokeWidth: 3 }) : state === "error" ? "!" : index + 1
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
var StepperRoot = react.forwardRef(
|
|
55
|
+
({
|
|
56
|
+
steps: stepsProp,
|
|
57
|
+
children,
|
|
58
|
+
current: currentProp,
|
|
59
|
+
defaultCurrent = 0,
|
|
60
|
+
onChange,
|
|
61
|
+
orientation = "vertical",
|
|
62
|
+
clickable = false,
|
|
63
|
+
showContent = "all",
|
|
64
|
+
stateLabels,
|
|
65
|
+
className,
|
|
66
|
+
onKeyDown,
|
|
67
|
+
...rest
|
|
68
|
+
}, ref) => {
|
|
69
|
+
const [current, setCurrent] = chunkSNHU2AI4_cjs.useControllableState(currentProp, defaultCurrent, onChange);
|
|
70
|
+
const steps = stepsProp ?? stepsFromChildren(children);
|
|
71
|
+
const labels = { ...DEFAULT_STATE_LABELS, ...stateLabels };
|
|
72
|
+
const horizontal = orientation === "horizontal";
|
|
73
|
+
const handleKeyDown = (e) => {
|
|
74
|
+
onKeyDown?.(e);
|
|
75
|
+
if (!clickable || e.defaultPrevented) return;
|
|
76
|
+
const prevKey = horizontal ? "ArrowLeft" : "ArrowUp";
|
|
77
|
+
const nextKey = horizontal ? "ArrowRight" : "ArrowDown";
|
|
78
|
+
if (![prevKey, nextKey, "Home", "End"].includes(e.key)) return;
|
|
79
|
+
const list = e.currentTarget;
|
|
80
|
+
const target = e.target.closest("[data-react-fancy-stepper-trigger]");
|
|
81
|
+
if (!target || target.closest("[data-react-fancy-stepper]") !== list) return;
|
|
82
|
+
const buttons = Array.from(
|
|
83
|
+
list.querySelectorAll("[data-react-fancy-stepper-trigger]")
|
|
84
|
+
).filter((b) => b.closest("[data-react-fancy-stepper]") === list && !b.disabled);
|
|
85
|
+
const at = buttons.indexOf(target);
|
|
86
|
+
let next;
|
|
87
|
+
if (e.key === "Home") next = buttons[0];
|
|
88
|
+
else if (e.key === "End") next = buttons[buttons.length - 1];
|
|
89
|
+
else if (e.key === nextKey) next = buttons[at + 1] ?? target;
|
|
90
|
+
else next = at > 0 ? buttons[at - 1] : target;
|
|
91
|
+
e.preventDefault();
|
|
92
|
+
next?.focus();
|
|
93
|
+
};
|
|
94
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
95
|
+
"ol",
|
|
96
|
+
{
|
|
97
|
+
ref,
|
|
98
|
+
"data-react-fancy-stepper": "",
|
|
99
|
+
"data-orientation": orientation,
|
|
100
|
+
"data-current": current,
|
|
101
|
+
className: chunkZU5Q77OT_cjs.cn(horizontal ? "flex items-start" : "flex flex-col", className),
|
|
102
|
+
onKeyDown: handleKeyDown,
|
|
103
|
+
...rest,
|
|
104
|
+
children: steps.map((step, index) => {
|
|
105
|
+
const derived = index < current ? "complete" : index === current ? "current" : "upcoming";
|
|
106
|
+
const state = step.state ?? derived;
|
|
107
|
+
const isCurrent = index === current;
|
|
108
|
+
const isLast = index === steps.length - 1;
|
|
109
|
+
const showBody = step.content != null && (showContent === "all" || isCurrent);
|
|
110
|
+
const headerInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
111
|
+
/* @__PURE__ */ jsxRuntime.jsx(Indicator, { state, index }),
|
|
112
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", "data-react-fancy-stepper-state": "", children: [
|
|
113
|
+
labels[state],
|
|
114
|
+
":",
|
|
115
|
+
" "
|
|
116
|
+
] }),
|
|
117
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-stepper-title": "", className: chunkZU5Q77OT_cjs.cn("text-sm", titleClass[state]), children: step.title })
|
|
118
|
+
] });
|
|
119
|
+
const headerClass = horizontal ? "flex flex-col items-center gap-2 text-center" : "flex items-center gap-x-4 text-left";
|
|
120
|
+
const header = clickable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
121
|
+
"button",
|
|
122
|
+
{
|
|
123
|
+
type: "button",
|
|
124
|
+
"data-react-fancy-stepper-trigger": "",
|
|
125
|
+
disabled: step.disabled,
|
|
126
|
+
onClick: () => {
|
|
127
|
+
if (index !== current) setCurrent(index);
|
|
128
|
+
},
|
|
129
|
+
className: chunkZU5Q77OT_cjs.cn(
|
|
130
|
+
headerClass,
|
|
131
|
+
"cursor-pointer rounded-md border-0 bg-transparent p-0",
|
|
132
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
133
|
+
"focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))] focus-visible:ring-offset-[color:var(--fancy-surface,var(--color-white))]",
|
|
134
|
+
"dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-visible:ring-offset-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
|
|
135
|
+
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
136
|
+
),
|
|
137
|
+
children: headerInner
|
|
138
|
+
}
|
|
139
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClass, children: headerInner });
|
|
140
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
141
|
+
"li",
|
|
142
|
+
{
|
|
143
|
+
"data-react-fancy-stepper-step": "",
|
|
144
|
+
"data-state": state,
|
|
145
|
+
"data-index": index,
|
|
146
|
+
"data-step-id": step.id,
|
|
147
|
+
"data-disabled": step.disabled ? "true" : void 0,
|
|
148
|
+
"aria-current": isCurrent ? "step" : void 0,
|
|
149
|
+
className: chunkZU5Q77OT_cjs.cn("relative", horizontal ? "min-w-0 flex-1" : !isLast && "pb-8"),
|
|
150
|
+
children: [
|
|
151
|
+
!isLast && /* @__PURE__ */ jsxRuntime.jsx(
|
|
152
|
+
"span",
|
|
153
|
+
{
|
|
154
|
+
"aria-hidden": "true",
|
|
155
|
+
"data-react-fancy-stepper-connector": "",
|
|
156
|
+
className: chunkZU5Q77OT_cjs.cn(
|
|
157
|
+
"absolute",
|
|
158
|
+
horizontal ? "top-4 left-[calc(50%+1.5rem)] h-px w-[calc(100%-3rem)]" : "top-10 bottom-2 left-4 w-px -translate-x-1/2",
|
|
159
|
+
index < current ? "bg-zinc-900 dark:bg-white" : "bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]"
|
|
160
|
+
)
|
|
161
|
+
}
|
|
162
|
+
),
|
|
163
|
+
header,
|
|
164
|
+
(step.description != null || showBody) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: horizontal ? "mt-1 px-2 text-center" : "pl-12", children: [
|
|
165
|
+
step.description != null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
166
|
+
"div",
|
|
167
|
+
{
|
|
168
|
+
"data-react-fancy-stepper-description": "",
|
|
169
|
+
className: "text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
|
|
170
|
+
children: step.description
|
|
171
|
+
}
|
|
172
|
+
),
|
|
173
|
+
showBody && /* @__PURE__ */ jsxRuntime.jsx(
|
|
174
|
+
"div",
|
|
175
|
+
{
|
|
176
|
+
"data-react-fancy-stepper-content": "",
|
|
177
|
+
className: "mt-2 text-sm text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))]",
|
|
178
|
+
children: step.content
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
] })
|
|
182
|
+
]
|
|
183
|
+
},
|
|
184
|
+
step.id ?? index
|
|
185
|
+
);
|
|
186
|
+
})
|
|
187
|
+
}
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
StepperRoot.displayName = "Stepper";
|
|
192
|
+
var Stepper = Object.assign(StepperRoot, { Step: StepperStep });
|
|
193
|
+
|
|
194
|
+
exports.Stepper = Stepper;
|
|
195
|
+
//# sourceMappingURL=chunk-Y3QAEF2P.cjs.map
|
|
196
|
+
//# sourceMappingURL=chunk-Y3QAEF2P.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Stepper/Stepper.tsx"],"names":["Children","isValidElement","jsx","cn","Check","forwardRef","useControllableState","jsxs","Fragment"],"mappings":"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","file":"chunk-Y3QAEF2P.cjs","sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type {\n StepperProps,\n StepperStep as StepperStepData,\n StepperStepProps,\n StepperStepState,\n} from \"./Stepper.types\";\n\nconst DEFAULT_STATE_LABELS: Record<StepperStepState, string> = {\n upcoming: \"Not started\",\n current: \"Current\",\n complete: \"Completed\",\n error: \"Error\",\n};\n\n/**\n * Declarative step. Renders nothing itself: `Stepper` reads its props as data\n * and renders it through the same path as an entry in `steps`, so the two forms\n * cannot drift apart in markup, states or handles. Its children are the step's\n * content. It must be a DIRECT child of `Stepper` (not wrapped in another\n * component) for the same reason `Breadcrumbs.Item` must.\n */\nfunction StepperStep(_props: StepperStepProps): null {\n return null;\n}\nStepperStep.displayName = \"StepperStep\";\n\nfunction stepsFromChildren(children: ReactNode): StepperStepData[] {\n const out: StepperStepData[] = [];\n for (const child of Children.toArray(children)) {\n if (!isValidElement<StepperStepProps>(child) || child.type !== StepperStep) continue;\n const { children: content, ...rest } = child.props;\n out.push({ ...rest, content });\n }\n return out;\n}\n\nconst indicatorClass: Record<StepperStepState, string> = {\n complete:\n \"border-transparent bg-zinc-900 text-white dark:bg-white dark:text-zinc-900\",\n current:\n \"border-2 border-zinc-900 bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 ring-4 ring-zinc-900/10 dark:border-white dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white dark:ring-white/15\",\n upcoming:\n \"border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n error: \"border-transparent bg-red-600 text-white dark:bg-red-500\",\n};\n\nconst titleClass: Record<StepperStepState, string> = {\n complete: \"font-medium text-zinc-900 dark:text-white\",\n current: \"font-semibold text-zinc-900 dark:text-white\",\n upcoming:\n \"font-medium text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n error: \"font-semibold text-red-700 dark:text-red-400\",\n};\n\n/** The glyph differs per state, so state reads without colour: number, tick, \"!\". */\nfunction Indicator({ state, index }: { state: StepperStepState; index: number }) {\n return (\n <span\n aria-hidden=\"true\"\n data-react-fancy-stepper-indicator=\"\"\n className={cn(\n \"relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold\",\n indicatorClass[state],\n )}\n >\n {state === \"complete\" ? <Check size={16} strokeWidth={3} /> : state === \"error\" ? \"!\" : index + 1}\n </span>\n );\n}\n\nconst StepperRoot = forwardRef<HTMLOListElement, StepperProps>(\n (\n {\n steps: stepsProp,\n children,\n current: currentProp,\n defaultCurrent = 0,\n onChange,\n orientation = \"vertical\",\n clickable = false,\n showContent = \"all\",\n stateLabels,\n className,\n onKeyDown,\n ...rest\n },\n ref,\n ) => {\n const [current, setCurrent] = useControllableState(currentProp, defaultCurrent, onChange);\n const steps = stepsProp ?? stepsFromChildren(children);\n const labels = { ...DEFAULT_STATE_LABELS, ...stateLabels };\n const horizontal = orientation === \"horizontal\";\n\n // Arrow keys move focus between step buttons; Enter / Space activate them\n // natively. Focus only -- the current step changes on activation, never on\n // arrowing past it. DOM is read in the handler, never during render.\n const handleKeyDown = (e: KeyboardEvent<HTMLOListElement>) => {\n onKeyDown?.(e);\n if (!clickable || e.defaultPrevented) return;\n\n const prevKey = horizontal ? \"ArrowLeft\" : \"ArrowUp\";\n const nextKey = horizontal ? \"ArrowRight\" : \"ArrowDown\";\n if (![prevKey, nextKey, \"Home\", \"End\"].includes(e.key)) return;\n\n const list = e.currentTarget;\n const target = (e.target as HTMLElement).closest<HTMLButtonElement>(\"[data-react-fancy-stepper-trigger]\");\n if (!target || target.closest(\"[data-react-fancy-stepper]\") !== list) return;\n\n // Only this stepper's own buttons: a stepper nested in step content is\n // its own list.\n const buttons = Array.from(\n list.querySelectorAll<HTMLButtonElement>(\"[data-react-fancy-stepper-trigger]\"),\n ).filter((b) => b.closest(\"[data-react-fancy-stepper]\") === list && !b.disabled);\n const at = buttons.indexOf(target);\n\n let next: HTMLButtonElement | undefined;\n if (e.key === \"Home\") next = buttons[0];\n else if (e.key === \"End\") next = buttons[buttons.length - 1];\n else if (e.key === nextKey) next = buttons[at + 1] ?? target;\n else next = at > 0 ? buttons[at - 1] : target;\n\n e.preventDefault();\n next?.focus();\n };\n\n return (\n <ol\n ref={ref}\n data-react-fancy-stepper=\"\"\n data-orientation={orientation}\n data-current={current}\n className={cn(horizontal ? \"flex items-start\" : \"flex flex-col\", className)}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {steps.map((step, index) => {\n const derived: StepperStepState =\n index < current ? \"complete\" : index === current ? \"current\" : \"upcoming\";\n const state = step.state ?? derived;\n const isCurrent = index === current;\n const isLast = index === steps.length - 1;\n const showBody = step.content != null && (showContent === \"all\" || isCurrent);\n\n const headerInner = (\n <>\n <Indicator state={state} index={index} />\n {/* State in words, before the title so it is read first. A\n sibling of the title, so the title handle reads the title. */}\n <span className=\"sr-only\" data-react-fancy-stepper-state=\"\">\n {labels[state]}:{\" \"}\n </span>\n <span data-react-fancy-stepper-title=\"\" className={cn(\"text-sm\", titleClass[state])}>\n {step.title}\n </span>\n </>\n );\n\n const headerClass = horizontal\n ? \"flex flex-col items-center gap-2 text-center\"\n : \"flex items-center gap-x-4 text-left\";\n\n const header = clickable ? (\n <button\n type=\"button\"\n data-react-fancy-stepper-trigger=\"\"\n disabled={step.disabled}\n onClick={() => {\n if (index !== current) setCurrent(index);\n }}\n className={cn(\n headerClass,\n \"cursor-pointer rounded-md border-0 bg-transparent p-0\",\n \"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n \"focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))] focus-visible:ring-offset-[color:var(--fancy-surface,var(--color-white))]\",\n \"dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-visible:ring-offset-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n )}\n >\n {headerInner}\n </button>\n ) : (\n <div className={headerClass}>{headerInner}</div>\n );\n\n return (\n <li\n key={step.id ?? index}\n data-react-fancy-stepper-step=\"\"\n data-state={state}\n data-index={index}\n data-step-id={step.id}\n data-disabled={step.disabled ? \"true\" : undefined}\n aria-current={isCurrent ? \"step\" : undefined}\n className={cn(\"relative\", horizontal ? \"min-w-0 flex-1\" : !isLast && \"pb-8\")}\n >\n {!isLast && (\n <span\n aria-hidden=\"true\"\n data-react-fancy-stepper-connector=\"\"\n className={cn(\n \"absolute\",\n horizontal\n ? \"top-4 left-[calc(50%+1.5rem)] h-px w-[calc(100%-3rem)]\"\n : \"top-10 bottom-2 left-4 w-px -translate-x-1/2\",\n index < current\n ? \"bg-zinc-900 dark:bg-white\"\n : \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n )}\n />\n )}\n {header}\n {(step.description != null || showBody) && (\n <div className={horizontal ? \"mt-1 px-2 text-center\" : \"pl-12\"}>\n {step.description != null && (\n <div\n data-react-fancy-stepper-description=\"\"\n className=\"text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\"\n >\n {step.description}\n </div>\n )}\n {showBody && (\n <div\n data-react-fancy-stepper-content=\"\"\n className=\"mt-2 text-sm text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))]\"\n >\n {step.content}\n </div>\n )}\n </div>\n )}\n </li>\n );\n })}\n </ol>\n );\n },\n);\n\nStepperRoot.displayName = \"Stepper\";\n\nexport const Stepper = Object.assign(StepperRoot, { Step: StepperStep });\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
require('./chunk-O5IO7TCO.cjs');
|
|
4
|
+
var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
|
|
4
5
|
require('./chunk-HXLSEBAL.cjs');
|
|
5
6
|
var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
|
|
6
7
|
require('./chunk-OYZDSMNP.cjs');
|
|
@@ -11,7 +12,7 @@ var chunkDJB3N4G3_cjs = require('./chunk-DJB3N4G3.cjs');
|
|
|
11
12
|
require('./chunk-URTLYNZI.cjs');
|
|
12
13
|
require('./chunk-QGPMVFZJ.cjs');
|
|
13
14
|
var chunkKOAMRCSC_cjs = require('./chunk-KOAMRCSC.cjs');
|
|
14
|
-
|
|
15
|
+
require('./chunk-XURQVDCN.cjs');
|
|
15
16
|
var chunk4DL2U23D_cjs = require('./chunk-4DL2U23D.cjs');
|
|
16
17
|
var chunkYH75G6SP_cjs = require('./chunk-YH75G6SP.cjs');
|
|
17
18
|
var chunkUXYFM2XT_cjs = require('./chunk-UXYFM2XT.cjs');
|
|
@@ -22,10 +23,10 @@ var chunkKOTUFZJ6_cjs = require('./chunk-KOTUFZJ6.cjs');
|
|
|
22
23
|
var chunkFNIHCNVD_cjs = require('./chunk-FNIHCNVD.cjs');
|
|
23
24
|
var chunk7DDUMW4R_cjs = require('./chunk-7DDUMW4R.cjs');
|
|
24
25
|
var chunkFVQO75KY_cjs = require('./chunk-FVQO75KY.cjs');
|
|
26
|
+
var chunkY3QAEF2P_cjs = require('./chunk-Y3QAEF2P.cjs');
|
|
25
27
|
var chunkATJSHM6J_cjs = require('./chunk-ATJSHM6J.cjs');
|
|
26
28
|
var chunkYJXP6AOL_cjs = require('./chunk-YJXP6AOL.cjs');
|
|
27
29
|
var chunkRZUYCZ5D_cjs = require('./chunk-RZUYCZ5D.cjs');
|
|
28
|
-
require('./chunk-XURQVDCN.cjs');
|
|
29
30
|
var chunkOUNGGQIS_cjs = require('./chunk-OUNGGQIS.cjs');
|
|
30
31
|
var chunkOASSZI6M_cjs = require('./chunk-OASSZI6M.cjs');
|
|
31
32
|
var chunkBK6XQQYG_cjs = require('./chunk-BK6XQQYG.cjs');
|
|
@@ -117,7 +118,7 @@ require('./chunk-VBWRH4UW.cjs');
|
|
|
117
118
|
var chunkOCHUZ7J3_cjs = require('./chunk-OCHUZ7J3.cjs');
|
|
118
119
|
require('./chunk-X6LGRB4H.cjs');
|
|
119
120
|
var chunkQUKUX5KU_cjs = require('./chunk-QUKUX5KU.cjs');
|
|
120
|
-
var
|
|
121
|
+
var chunkSKMORSBO_cjs = require('./chunk-SKMORSBO.cjs');
|
|
121
122
|
var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
|
|
122
123
|
var chunkOUYC6EIL_cjs = require('./chunk-OUYC6EIL.cjs');
|
|
123
124
|
require('./chunk-M5MUGSON.cjs');
|
|
@@ -223,6 +224,10 @@ var THEME_TOKENS = {
|
|
|
223
224
|
}
|
|
224
225
|
};
|
|
225
226
|
|
|
227
|
+
Object.defineProperty(exports, "RadioGroup", {
|
|
228
|
+
enumerable: true,
|
|
229
|
+
get: function () { return chunkH7ELUIF6_cjs.RadioGroup; }
|
|
230
|
+
});
|
|
226
231
|
Object.defineProperty(exports, "Slider", {
|
|
227
232
|
enumerable: true,
|
|
228
233
|
get: function () { return chunkZ4UXLQSK_cjs.Slider; }
|
|
@@ -247,10 +252,6 @@ Object.defineProperty(exports, "MultiSwitch", {
|
|
|
247
252
|
enumerable: true,
|
|
248
253
|
get: function () { return chunkKOAMRCSC_cjs.MultiSwitch; }
|
|
249
254
|
});
|
|
250
|
-
Object.defineProperty(exports, "RadioGroup", {
|
|
251
|
-
enumerable: true,
|
|
252
|
-
get: function () { return chunkH7ELUIF6_cjs.RadioGroup; }
|
|
253
|
-
});
|
|
254
255
|
Object.defineProperty(exports, "TimeGrid", {
|
|
255
256
|
enumerable: true,
|
|
256
257
|
get: function () { return chunk4DL2U23D_cjs.TimeGrid; }
|
|
@@ -307,6 +308,10 @@ Object.defineProperty(exports, "StatList", {
|
|
|
307
308
|
enumerable: true,
|
|
308
309
|
get: function () { return chunkFVQO75KY_cjs.StatList; }
|
|
309
310
|
});
|
|
311
|
+
Object.defineProperty(exports, "Stepper", {
|
|
312
|
+
enumerable: true,
|
|
313
|
+
get: function () { return chunkY3QAEF2P_cjs.Stepper; }
|
|
314
|
+
});
|
|
310
315
|
Object.defineProperty(exports, "StickyNote", {
|
|
311
316
|
enumerable: true,
|
|
312
317
|
get: function () { return chunkATJSHM6J_cjs.StickyNote; }
|
|
@@ -881,7 +886,7 @@ Object.defineProperty(exports, "BrandMark", {
|
|
|
881
886
|
});
|
|
882
887
|
Object.defineProperty(exports, "Breadcrumbs", {
|
|
883
888
|
enumerable: true,
|
|
884
|
-
get: function () { return
|
|
889
|
+
get: function () { return chunkSKMORSBO_cjs.Breadcrumbs; }
|
|
885
890
|
});
|
|
886
891
|
Object.defineProperty(exports, "useOutsideClick", {
|
|
887
892
|
enumerable: true,
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n * --fancy-surface the light value\n * --fancy-surface-dark the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n * bg-[color:var(--fancy-surface,var(--color-white))]\n * dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n * - **Set nothing and nothing changes.** An unset custom property resolves to\n * its fallback, which is the exact declaration the old `bg-white` produced.\n * - **Set one and every surface follows**, wherever the variable is in scope:\n * `:root`, `body`, or any wrapper element. No selector to match, no layer or\n * specificity to win — a custom property is inherited, not cascaded against.\n * - **Both modes are stated, not derived.** The dark value is a separate\n * variable rather than a flip under `.dark`, so which one applies is decided\n * by the host's own `dark:` variant — the same switch that drives every\n * other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n * that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n surface: {\n variable: \"--fancy-surface\",\n darkVariable: \"--fancy-surface-dark\",\n light: \"var(--color-white)\",\n dark: \"var(--color-zinc-900)\",\n description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n },\n \"surface-muted\": {\n variable: \"--fancy-surface-muted\",\n darkVariable: \"--fancy-surface-muted-dark\",\n light: \"var(--color-zinc-100)\",\n dark: \"var(--color-zinc-800)\",\n description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n },\n border: {\n variable: \"--fancy-border\",\n darkVariable: \"--fancy-border-dark\",\n light: \"var(--color-zinc-200)\",\n dark: \"var(--color-zinc-700)\",\n description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n },\n \"border-strong\": {\n variable: \"--fancy-border-strong\",\n darkVariable: \"--fancy-border-strong-dark\",\n light: \"var(--color-zinc-300)\",\n dark: \"var(--color-zinc-700)\",\n description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n },\n input: {\n variable: \"--fancy-input\",\n darkVariable: \"--fancy-input-dark\",\n light: \"var(--color-white)\",\n dark: \"#1e1e24\",\n description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n },\n text: {\n variable: \"--fancy-text\",\n darkVariable: \"--fancy-text-dark\",\n light: \"var(--color-zinc-900)\",\n dark: \"var(--color-zinc-100)\",\n description: \"Strongest foreground: headings, values, field text, active items.\",\n },\n \"text-soft\": {\n variable: \"--fancy-text-soft\",\n darkVariable: \"--fancy-text-soft-dark\",\n light: \"var(--color-zinc-700)\",\n dark: \"var(--color-zinc-300)\",\n description: \"Body copy and menu items: readable, one step back from text.\",\n },\n \"text-muted\": {\n variable: \"--fancy-text-muted\",\n darkVariable: \"--fancy-text-muted-dark\",\n light: \"var(--color-zinc-500)\",\n dark: \"var(--color-zinc-400)\",\n description: \"Descriptions, captions, secondary labels, axis labels.\",\n },\n \"text-faint\": {\n variable: \"--fancy-text-faint\",\n darkVariable: \"--fancy-text-faint-dark\",\n light: \"var(--color-zinc-400)\",\n dark: \"var(--color-zinc-500)\",\n description: \"Placeholders, disabled hints, decorative icons.\",\n },\n \"text-subtle\": {\n variable: \"--fancy-text-subtle\",\n darkVariable: \"--fancy-text-subtle-dark\",\n light: \"var(--color-zinc-600)\",\n dark: \"var(--color-zinc-400)\",\n description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n },\n \"surface-hover\": {\n variable: \"--fancy-surface-hover\",\n darkVariable: \"--fancy-surface-hover-dark\",\n light: \"var(--color-zinc-50)\",\n // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n },\n focus: {\n variable: \"--fancy-focus\",\n darkVariable: \"--fancy-focus-dark\",\n light: \"var(--color-blue-500)\",\n dark: \"var(--color-blue-400)\",\n description: \"The focus border and ring on form controls.\",\n },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -51,6 +51,7 @@ export { FauxClient } from './faux-client.cjs';
|
|
|
51
51
|
export { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.cjs';
|
|
52
52
|
export { StickyNote, StickyNoteColor, StickyNoteProps } from './sticky-note.cjs';
|
|
53
53
|
export { b as Timeline, a as TimelineBlockProps, c as TimelineEvent, T as TimelineItemProps, d as TimelineOrientation, e as TimelineProps, f as TimelineVariant } from './Timeline-BSk0X2nV.cjs';
|
|
54
|
+
export { Stepper, StepperOrientation, StepperProps, StepperStep, StepperStepProps, StepperStepState } from './stepper.cjs';
|
|
54
55
|
export { TimeGrid, TimeGridBlockedCell, TimeGridCell, TimeGridCoord, TimeGridDisabledRange, TimeGridMarkDef, TimeGridProps, TimeGridSelection, TimeGridSelectionShape, TimeGridStateDef, TimeGridTone } from './time-grid.cjs';
|
|
55
56
|
export { Marquee, MarqueeDirection, MarqueeProps } from './marquee.cjs';
|
|
56
57
|
export { Tooltip, TooltipProps } from './tooltip.cjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -51,6 +51,7 @@ export { FauxClient } from './faux-client.js';
|
|
|
51
51
|
export { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.js';
|
|
52
52
|
export { StickyNote, StickyNoteColor, StickyNoteProps } from './sticky-note.js';
|
|
53
53
|
export { b as Timeline, a as TimelineBlockProps, c as TimelineEvent, T as TimelineItemProps, d as TimelineOrientation, e as TimelineProps, f as TimelineVariant } from './Timeline-B-3JFX43.js';
|
|
54
|
+
export { Stepper, StepperOrientation, StepperProps, StepperStep, StepperStepProps, StepperStepState } from './stepper.js';
|
|
54
55
|
export { TimeGrid, TimeGridBlockedCell, TimeGridCell, TimeGridCoord, TimeGridDisabledRange, TimeGridMarkDef, TimeGridProps, TimeGridSelection, TimeGridSelectionShape, TimeGridStateDef, TimeGridTone } from './time-grid.js';
|
|
55
56
|
export { Marquee, MarqueeDirection, MarqueeProps } from './marquee.js';
|
|
56
57
|
export { Tooltip, TooltipProps } from './tooltip.js';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import './chunk-VXHFR5MV.js';
|
|
2
|
+
export { RadioGroup } from './chunk-4FH2JHUY.js';
|
|
2
3
|
import './chunk-GNHQVPZP.js';
|
|
3
4
|
export { Slider } from './chunk-NVXTHTJI.js';
|
|
4
5
|
import './chunk-NW3GJWJ7.js';
|
|
@@ -9,7 +10,7 @@ export { CheckboxGroup } from './chunk-TAYJSIOP.js';
|
|
|
9
10
|
import './chunk-V4EARA4F.js';
|
|
10
11
|
import './chunk-SHDSKHCC.js';
|
|
11
12
|
export { MultiSwitch } from './chunk-3S5ED522.js';
|
|
12
|
-
|
|
13
|
+
import './chunk-TMR56BBE.js';
|
|
13
14
|
export { TimeGrid } from './chunk-MLZGGAXQ.js';
|
|
14
15
|
export { TimePicker } from './chunk-AZQXPI5S.js';
|
|
15
16
|
export { Timeline } from './chunk-QGY5FPVM.js';
|
|
@@ -20,10 +21,10 @@ export { Sidebar, useSidebar } from './chunk-JY2RC6I4.js';
|
|
|
20
21
|
export { Skeleton } from './chunk-X7VIIM2P.js';
|
|
21
22
|
export { Stat, StatBand } from './chunk-KC3PYCBO.js';
|
|
22
23
|
export { StatList } from './chunk-SXXDTW7S.js';
|
|
24
|
+
export { Stepper } from './chunk-5EW47IH7.js';
|
|
23
25
|
export { StickyNote } from './chunk-CCG2L5EH.js';
|
|
24
26
|
export { Table } from './chunk-YAPGHVBZ.js';
|
|
25
27
|
export { Tabs, useTabs } from './chunk-FR4RHVPR.js';
|
|
26
|
-
import './chunk-TMR56BBE.js';
|
|
27
28
|
export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel, promptDataUrlToFile, promptFileToDataUrl } from './chunk-B6WTCAGY.js';
|
|
28
29
|
export { Tooltip } from './chunk-GR2WKBER.js';
|
|
29
30
|
export { PullQuote } from './chunk-44VYWOCG.js';
|
|
@@ -115,7 +116,7 @@ import './chunk-IQ4KQJAO.js';
|
|
|
115
116
|
export { Badge } from './chunk-OZ4QFJ7N.js';
|
|
116
117
|
import './chunk-S53A6JIE.js';
|
|
117
118
|
export { Brand, BrandMark } from './chunk-FWAVMWMP.js';
|
|
118
|
-
export { Breadcrumbs } from './chunk-
|
|
119
|
+
export { Breadcrumbs } from './chunk-GTS3QA7M.js';
|
|
119
120
|
export { useOutsideClick } from './chunk-RGANGU7X.js';
|
|
120
121
|
export { EscapeLayerContext, useEscapeKey, useEscapeLayer } from './chunk-YX6FTJ6N.js';
|
|
121
122
|
import './chunk-LQ4ICCN2.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n * --fancy-surface the light value\n * --fancy-surface-dark the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n * bg-[color:var(--fancy-surface,var(--color-white))]\n * dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n * - **Set nothing and nothing changes.** An unset custom property resolves to\n * its fallback, which is the exact declaration the old `bg-white` produced.\n * - **Set one and every surface follows**, wherever the variable is in scope:\n * `:root`, `body`, or any wrapper element. No selector to match, no layer or\n * specificity to win — a custom property is inherited, not cascaded against.\n * - **Both modes are stated, not derived.** The dark value is a separate\n * variable rather than a flip under `.dark`, so which one applies is decided\n * by the host's own `dark:` variant — the same switch that drives every\n * other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n * that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n surface: {\n variable: \"--fancy-surface\",\n darkVariable: \"--fancy-surface-dark\",\n light: \"var(--color-white)\",\n dark: \"var(--color-zinc-900)\",\n description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n },\n \"surface-muted\": {\n variable: \"--fancy-surface-muted\",\n darkVariable: \"--fancy-surface-muted-dark\",\n light: \"var(--color-zinc-100)\",\n dark: \"var(--color-zinc-800)\",\n description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n },\n border: {\n variable: \"--fancy-border\",\n darkVariable: \"--fancy-border-dark\",\n light: \"var(--color-zinc-200)\",\n dark: \"var(--color-zinc-700)\",\n description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n },\n \"border-strong\": {\n variable: \"--fancy-border-strong\",\n darkVariable: \"--fancy-border-strong-dark\",\n light: \"var(--color-zinc-300)\",\n dark: \"var(--color-zinc-700)\",\n description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n },\n input: {\n variable: \"--fancy-input\",\n darkVariable: \"--fancy-input-dark\",\n light: \"var(--color-white)\",\n dark: \"#1e1e24\",\n description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n },\n text: {\n variable: \"--fancy-text\",\n darkVariable: \"--fancy-text-dark\",\n light: \"var(--color-zinc-900)\",\n dark: \"var(--color-zinc-100)\",\n description: \"Strongest foreground: headings, values, field text, active items.\",\n },\n \"text-soft\": {\n variable: \"--fancy-text-soft\",\n darkVariable: \"--fancy-text-soft-dark\",\n light: \"var(--color-zinc-700)\",\n dark: \"var(--color-zinc-300)\",\n description: \"Body copy and menu items: readable, one step back from text.\",\n },\n \"text-muted\": {\n variable: \"--fancy-text-muted\",\n darkVariable: \"--fancy-text-muted-dark\",\n light: \"var(--color-zinc-500)\",\n dark: \"var(--color-zinc-400)\",\n description: \"Descriptions, captions, secondary labels, axis labels.\",\n },\n \"text-faint\": {\n variable: \"--fancy-text-faint\",\n darkVariable: \"--fancy-text-faint-dark\",\n light: \"var(--color-zinc-400)\",\n dark: \"var(--color-zinc-500)\",\n description: \"Placeholders, disabled hints, decorative icons.\",\n },\n \"text-subtle\": {\n variable: \"--fancy-text-subtle\",\n darkVariable: \"--fancy-text-subtle-dark\",\n light: \"var(--color-zinc-600)\",\n dark: \"var(--color-zinc-400)\",\n description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n },\n \"surface-hover\": {\n variable: \"--fancy-surface-hover\",\n darkVariable: \"--fancy-surface-hover-dark\",\n light: \"var(--color-zinc-50)\",\n // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n },\n focus: {\n variable: \"--fancy-focus\",\n darkVariable: \"--fancy-focus-dark\",\n light: \"var(--color-blue-500)\",\n dark: \"var(--color-blue-400)\",\n description: \"The focus border and ring on form controls.\",\n },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}
|
package/dist/inputs.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
require('./chunk-O5IO7TCO.cjs');
|
|
4
|
+
var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
|
|
4
5
|
require('./chunk-HXLSEBAL.cjs');
|
|
5
6
|
var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
|
|
6
7
|
require('./chunk-OYZDSMNP.cjs');
|
|
@@ -11,7 +12,6 @@ var chunkDJB3N4G3_cjs = require('./chunk-DJB3N4G3.cjs');
|
|
|
11
12
|
require('./chunk-URTLYNZI.cjs');
|
|
12
13
|
require('./chunk-QGPMVFZJ.cjs');
|
|
13
14
|
var chunkKOAMRCSC_cjs = require('./chunk-KOAMRCSC.cjs');
|
|
14
|
-
var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
|
|
15
15
|
require('./chunk-I27K6NLX.cjs');
|
|
16
16
|
var chunk7JLKOVHX_cjs = require('./chunk-7JLKOVHX.cjs');
|
|
17
17
|
var chunk2O5UXH5R_cjs = require('./chunk-2O5UXH5R.cjs');
|
|
@@ -37,6 +37,10 @@ require('./chunk-ZU5Q77OT.cjs');
|
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
|
|
40
|
+
Object.defineProperty(exports, "RadioGroup", {
|
|
41
|
+
enumerable: true,
|
|
42
|
+
get: function () { return chunkH7ELUIF6_cjs.RadioGroup; }
|
|
43
|
+
});
|
|
40
44
|
Object.defineProperty(exports, "Slider", {
|
|
41
45
|
enumerable: true,
|
|
42
46
|
get: function () { return chunkZ4UXLQSK_cjs.Slider; }
|
|
@@ -61,10 +65,6 @@ Object.defineProperty(exports, "MultiSwitch", {
|
|
|
61
65
|
enumerable: true,
|
|
62
66
|
get: function () { return chunkKOAMRCSC_cjs.MultiSwitch; }
|
|
63
67
|
});
|
|
64
|
-
Object.defineProperty(exports, "RadioGroup", {
|
|
65
|
-
enumerable: true,
|
|
66
|
-
get: function () { return chunkH7ELUIF6_cjs.RadioGroup; }
|
|
67
|
-
});
|
|
68
68
|
Object.defineProperty(exports, "Select", {
|
|
69
69
|
enumerable: true,
|
|
70
70
|
get: function () { return chunk7JLKOVHX_cjs.Select; }
|
package/dist/inputs.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import './chunk-VXHFR5MV.js';
|
|
2
|
+
export { RadioGroup } from './chunk-4FH2JHUY.js';
|
|
2
3
|
import './chunk-GNHQVPZP.js';
|
|
3
4
|
export { Slider } from './chunk-NVXTHTJI.js';
|
|
4
5
|
import './chunk-NW3GJWJ7.js';
|
|
@@ -9,7 +10,6 @@ export { CheckboxGroup } from './chunk-TAYJSIOP.js';
|
|
|
9
10
|
import './chunk-V4EARA4F.js';
|
|
10
11
|
import './chunk-SHDSKHCC.js';
|
|
11
12
|
export { MultiSwitch } from './chunk-3S5ED522.js';
|
|
12
|
-
export { RadioGroup } from './chunk-4FH2JHUY.js';
|
|
13
13
|
import './chunk-SV5BW3IA.js';
|
|
14
14
|
export { Select } from './chunk-XIA2UAVO.js';
|
|
15
15
|
export { Switch } from './chunk-DXZCKDYS.js';
|
package/dist/stepper.cjs
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkY3QAEF2P_cjs = require('./chunk-Y3QAEF2P.cjs');
|
|
4
|
+
require('./chunk-SNHU2AI4.cjs');
|
|
5
|
+
require('./chunk-ZU5Q77OT.cjs');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Object.defineProperty(exports, "Stepper", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () { return chunkY3QAEF2P_cjs.Stepper; }
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=stepper.cjs.map
|
|
14
|
+
//# sourceMappingURL=stepper.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"stepper.cjs"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { OlHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Where a step stands. `upcoming`, `current` and `complete` are derived from
|
|
6
|
+
* the step's position against `current`; `error` is only ever declared, on the
|
|
7
|
+
* step itself, and overrides the derived state.
|
|
8
|
+
*/
|
|
9
|
+
type StepperStepState = "upcoming" | "current" | "complete" | "error";
|
|
10
|
+
type StepperOrientation = "vertical" | "horizontal";
|
|
11
|
+
/** One step, as data. Everything an agent needs to emit a stepper is JSON. */
|
|
12
|
+
interface StepperStep$1 {
|
|
13
|
+
/** Stable identity, rendered as `data-step-id`. Recommended for agent handles. */
|
|
14
|
+
id?: string;
|
|
15
|
+
/** Step heading. */
|
|
16
|
+
title: ReactNode;
|
|
17
|
+
/** Short supporting line under the title. */
|
|
18
|
+
description?: ReactNode;
|
|
19
|
+
/** The step's body: instructions, a code sample, a screenshot. */
|
|
20
|
+
content?: ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Override the derived state. Usually `"error"`; the others are accepted so
|
|
23
|
+
* a caller can mark a skipped step complete without moving `current`.
|
|
24
|
+
*/
|
|
25
|
+
state?: StepperStepState;
|
|
26
|
+
/** With `clickable`, renders this step's button disabled. */
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
}
|
|
29
|
+
interface StepperProps extends Omit<OlHTMLAttributes<HTMLOListElement>, "onChange" | "children" | "defaultValue"> {
|
|
30
|
+
/** The steps as data. Wins over `children` when both are given. */
|
|
31
|
+
steps?: StepperStep$1[];
|
|
32
|
+
/** `Stepper.Step` elements, read as data. Ignored when `steps` is given. */
|
|
33
|
+
children?: ReactNode;
|
|
34
|
+
/** Controlled index of the current step. `steps.length` means all complete. */
|
|
35
|
+
current?: number;
|
|
36
|
+
/** Uncontrolled starting index. Default `0`. */
|
|
37
|
+
defaultCurrent?: number;
|
|
38
|
+
/** Called with the chosen step's index. Only fires when `clickable`. */
|
|
39
|
+
onChange?: (index: number) => void;
|
|
40
|
+
/** Default `"vertical"`. Horizontal suits short content. */
|
|
41
|
+
orientation?: StepperOrientation;
|
|
42
|
+
/**
|
|
43
|
+
* Render each step's header as a button that makes it current. Off by
|
|
44
|
+
* default: a Stepper is content, with no interactive elements at all.
|
|
45
|
+
*/
|
|
46
|
+
clickable?: boolean;
|
|
47
|
+
/** Show every step's content (default), or only the current step's. */
|
|
48
|
+
showContent?: "all" | "current";
|
|
49
|
+
/** Words for each state, read by screen readers. English by default. */
|
|
50
|
+
stateLabels?: Partial<Record<StepperStepState, string>>;
|
|
51
|
+
}
|
|
52
|
+
/** Declarative form of a `StepperStep`; its children are the step's content. */
|
|
53
|
+
interface StepperStepProps extends Omit<StepperStep$1, "content"> {
|
|
54
|
+
children?: ReactNode;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Declarative step. Renders nothing itself: `Stepper` reads its props as data
|
|
59
|
+
* and renders it through the same path as an entry in `steps`, so the two forms
|
|
60
|
+
* cannot drift apart in markup, states or handles. Its children are the step's
|
|
61
|
+
* content. It must be a DIRECT child of `Stepper` (not wrapped in another
|
|
62
|
+
* component) for the same reason `Breadcrumbs.Item` must.
|
|
63
|
+
*/
|
|
64
|
+
declare function StepperStep(_props: StepperStepProps): null;
|
|
65
|
+
declare namespace StepperStep {
|
|
66
|
+
var displayName: string;
|
|
67
|
+
}
|
|
68
|
+
declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>> & {
|
|
69
|
+
Step: typeof StepperStep;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export { Stepper, type StepperOrientation, type StepperProps, type StepperStep$1 as StepperStep, type StepperStepProps, type StepperStepState };
|