@particle-academy/react-fancy 6.1.0 → 6.1.1
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 +25 -0
- package/dist/breadcrumbs.cjs +2 -2
- package/dist/breadcrumbs.js +1 -1
- package/dist/{chunk-YUNOVQQJ.js → chunk-3S5ED522.js} +12 -2
- package/dist/chunk-3S5ED522.js.map +1 -0
- package/dist/{chunk-35S5BTZH.cjs → chunk-EWE776WI.cjs} +35 -4
- package/dist/chunk-EWE776WI.cjs.map +1 -0
- package/dist/{chunk-IU5WQUUC.js → chunk-FR4RHVPR.js} +34 -6
- package/dist/chunk-FR4RHVPR.js.map +1 -0
- package/dist/{chunk-IB673TEG.cjs → chunk-KOAMRCSC.cjs} +12 -2
- package/dist/chunk-KOAMRCSC.cjs.map +1 -0
- package/dist/{chunk-CQ54H7DZ.cjs → chunk-RZUYCZ5D.cjs} +33 -5
- package/dist/chunk-RZUYCZ5D.cjs.map +1 -0
- package/dist/{chunk-A67EDGC7.js → chunk-WJHPZS3U.js} +35 -4
- package/dist/chunk-WJHPZS3U.js.map +1 -0
- package/dist/index.cjs +7 -7
- package/dist/index.js +3 -3
- package/dist/inputs.cjs +2 -2
- package/dist/inputs.js +1 -1
- package/dist/multi-switch.cjs +2 -2
- package/dist/multi-switch.js +1 -1
- package/dist/tabs.cjs +4 -3
- package/dist/tabs.js +2 -1
- package/package.json +1 -1
- package/dist/chunk-35S5BTZH.cjs.map +0 -1
- package/dist/chunk-A67EDGC7.js.map +0 -1
- package/dist/chunk-CQ54H7DZ.cjs.map +0 -1
- package/dist/chunk-IB673TEG.cjs.map +0 -1
- package/dist/chunk-IU5WQUUC.js.map +0 -1
- package/dist/chunk-YUNOVQQJ.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -11,6 +11,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
11
11
|
|
|
12
12
|
## [Unreleased]
|
|
13
13
|
|
|
14
|
+
## [6.1.1] - 2026-11-01
|
|
15
|
+
|
|
16
|
+
### Fixed
|
|
17
|
+
|
|
18
|
+
- **`Breadcrumbs`: the collapsed (below `md`) dropdown dropped `onClick`
|
|
19
|
+
crumbs.** It rebuilt each item from `href` alone, so a crumb that navigates
|
|
20
|
+
by callback, which `Breadcrumbs.Item` supports, became a dead `<span>` on a
|
|
21
|
+
narrow window. It is now a `<button type="button">` that calls the handler and
|
|
22
|
+
closes the menu. A crumb with `as` now renders through that component in the
|
|
23
|
+
dropdown too (it was a plain `<a>`, or nothing clickable without `href`), and
|
|
24
|
+
a link crumb's `onClick` now fires there as it does on the desktop trail. The
|
|
25
|
+
active crumb stays inert. No consumer action needed.
|
|
26
|
+
- **`MultiSwitch`: the thumb did not follow the selected option's size.** It was
|
|
27
|
+
measured only when the selection changed, so a selected label that changed
|
|
28
|
+
width ("Changed 4" to "Changed 12") left the thumb at its old width. The
|
|
29
|
+
selected option and the container are now watched with a `ResizeObserver`
|
|
30
|
+
and the thumb re-measures. Where `ResizeObserver` does not exist (SSR, older
|
|
31
|
+
jsdom) it measures on selection only, as before. No consumer action needed.
|
|
32
|
+
- **`Tabs`: no tab was keyboard-reachable when the controlled value matched
|
|
33
|
+
none.** `Tabs.Tab` set `tabIndex` to 0 only on the active tab, so an
|
|
34
|
+
`activeTab` naming no tab (a route showing a view with no tab) left every tab
|
|
35
|
+
at -1. The first enabled tab in the tablist now takes the tab stop in that
|
|
36
|
+
case; when a tab is active it alone holds the stop, as before. `Tabs.Tab` now
|
|
37
|
+
also forwards a caller's `ref` alongside its own. No consumer action needed.
|
|
38
|
+
|
|
14
39
|
## [6.1.0] - 2026-11-01
|
|
15
40
|
|
|
16
41
|
### Added
|
package/dist/breadcrumbs.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkEWE776WI_cjs = require('./chunk-EWE776WI.cjs');
|
|
4
4
|
require('./chunk-57FQGQJK.cjs');
|
|
5
5
|
require('./chunk-OUYC6EIL.cjs');
|
|
6
6
|
require('./chunk-ZU5Q77OT.cjs');
|
|
@@ -9,7 +9,7 @@ require('./chunk-ZU5Q77OT.cjs');
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, "Breadcrumbs", {
|
|
11
11
|
enumerable: true,
|
|
12
|
-
get: function () { return
|
|
12
|
+
get: function () { return chunkEWE776WI_cjs.Breadcrumbs; }
|
|
13
13
|
});
|
|
14
14
|
//# sourceMappingURL=breadcrumbs.cjs.map
|
|
15
15
|
//# sourceMappingURL=breadcrumbs.cjs.map
|
package/dist/breadcrumbs.js
CHANGED
|
@@ -99,6 +99,16 @@ function MultiSwitch({
|
|
|
99
99
|
useEffect(() => {
|
|
100
100
|
updateIndicator();
|
|
101
101
|
}, [updateIndicator]);
|
|
102
|
+
useEffect(() => {
|
|
103
|
+
if (typeof ResizeObserver === "undefined") return;
|
|
104
|
+
const container = containerRef.current;
|
|
105
|
+
const activeItem = itemRefs.current[selectedIndex];
|
|
106
|
+
if (!container || !activeItem) return;
|
|
107
|
+
const observer = new ResizeObserver(() => updateIndicator());
|
|
108
|
+
observer.observe(container);
|
|
109
|
+
observer.observe(activeItem);
|
|
110
|
+
return () => observer.disconnect();
|
|
111
|
+
}, [updateIndicator, selectedIndex, showControl]);
|
|
102
112
|
const control = !showControl ? /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxs(
|
|
103
113
|
"div",
|
|
104
114
|
{
|
|
@@ -186,5 +196,5 @@ function MultiSwitch({
|
|
|
186
196
|
MultiSwitch.displayName = "MultiSwitch";
|
|
187
197
|
|
|
188
198
|
export { MultiSwitch };
|
|
189
|
-
//# sourceMappingURL=chunk-
|
|
190
|
-
//# sourceMappingURL=chunk-
|
|
199
|
+
//# sourceMappingURL=chunk-3S5ED522.js.map
|
|
200
|
+
//# sourceMappingURL=chunk-3S5ED522.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.colors.ts","../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":[],"mappings":"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","file":"chunk-3S5ED522.js","sourcesContent":["// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Shades follow badgeSolid: 600 / dark 500 for\n// the thumb, with dark label text on the light hues (amber, yellow, lime).\nimport type { Color } from \"../../../utils/types\";\n\nexport type MultiSwitchColorClasses = {\n /** The selected thumb's fill. */\n thumb: string;\n /** The selected option's label, readable on the thumb. */\n text: string;\n /** The container border while this option is selected. */\n border: string;\n};\n\nexport const multiSwitchColorClasses: Record<Color, MultiSwitchColorClasses> = {\n // The host's colour, from CSS variables -- no dark: variant, because a\n // host that themes per mode scopes the variables themselves.\n brand: { thumb: \"bg-brand\", text: \"text-brand-contrast\", border: \"border-brand\" },\n slate: { thumb: \"bg-slate-600 dark:bg-slate-500\", text: \"text-white\", border: \"border-slate-500 dark:border-slate-400\" },\n gray: { thumb: \"bg-gray-600 dark:bg-gray-500\", text: \"text-white\", border: \"border-gray-500 dark:border-gray-400\" },\n zinc: { thumb: \"bg-zinc-600 dark:bg-zinc-500\", text: \"text-white\", border: \"border-zinc-500 dark:border-zinc-400\" },\n neutral: { thumb: \"bg-neutral-600 dark:bg-neutral-500\", text: \"text-white\", border: \"border-neutral-500 dark:border-neutral-400\" },\n stone: { thumb: \"bg-stone-600 dark:bg-stone-500\", text: \"text-white\", border: \"border-stone-500 dark:border-stone-400\" },\n red: { thumb: \"bg-red-600 dark:bg-red-500\", text: \"text-white\", border: \"border-red-500 dark:border-red-400\" },\n orange: { thumb: \"bg-orange-600 dark:bg-orange-500\", text: \"text-white\", border: \"border-orange-500 dark:border-orange-400\" },\n amber: { thumb: \"bg-amber-400 dark:bg-amber-300\", text: \"text-amber-950\", border: \"border-amber-500 dark:border-amber-400\" },\n yellow: { thumb: \"bg-yellow-400 dark:bg-yellow-300\", text: \"text-yellow-950\", border: \"border-yellow-500 dark:border-yellow-400\" },\n lime: { thumb: \"bg-lime-400 dark:bg-lime-300\", text: \"text-lime-950\", border: \"border-lime-500 dark:border-lime-400\" },\n green: { thumb: \"bg-green-600 dark:bg-green-500\", text: \"text-white\", border: \"border-green-500 dark:border-green-400\" },\n emerald: { thumb: \"bg-emerald-600 dark:bg-emerald-500\", text: \"text-white\", border: \"border-emerald-500 dark:border-emerald-400\" },\n teal: { thumb: \"bg-teal-600 dark:bg-teal-500\", text: \"text-white\", border: \"border-teal-500 dark:border-teal-400\" },\n cyan: { thumb: \"bg-cyan-600 dark:bg-cyan-500\", text: \"text-white\", border: \"border-cyan-500 dark:border-cyan-400\" },\n sky: { thumb: \"bg-sky-600 dark:bg-sky-500\", text: \"text-white\", border: \"border-sky-500 dark:border-sky-400\" },\n blue: { thumb: \"bg-blue-600 dark:bg-blue-500\", text: \"text-white\", border: \"border-blue-500 dark:border-blue-400\" },\n indigo: { thumb: \"bg-indigo-600 dark:bg-indigo-500\", text: \"text-white\", border: \"border-indigo-500 dark:border-indigo-400\" },\n violet: { thumb: \"bg-violet-600 dark:bg-violet-500\", text: \"text-white\", border: \"border-violet-500 dark:border-violet-400\" },\n purple: { thumb: \"bg-purple-600 dark:bg-purple-500\", text: \"text-white\", border: \"border-purple-500 dark:border-purple-400\" },\n fuchsia: { thumb: \"bg-fuchsia-600 dark:bg-fuchsia-500\", text: \"text-white\", border: \"border-fuchsia-500 dark:border-fuchsia-400\" },\n pink: { thumb: \"bg-pink-600 dark:bg-pink-500\", text: \"text-white\", border: \"border-pink-500 dark:border-pink-400\" },\n rose: { thumb: \"bg-rose-600 dark:bg-rose-500\", text: \"text-white\", border: \"border-rose-500 dark:border-rose-400\" },\n};\n","import { useRef, useState, useEffect, useCallback, useId, useMemo, type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { composeRefs } from \"../../../utils/compose-refs\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { resolveOption } from \"../inputs.utils\";\nimport type { Color, Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\nimport { multiSwitchColorClasses } from \"./MultiSwitch.colors\";\n\nconst BORDER_DEFAULT =\n \"border-[color:var(--fancy-border-strong,var(--color-zinc-300))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))]\";\n\nconst sizeClasses: Record<Size, string> = {\n xs: \"px-2 py-1 text-xs\",\n sm: \"px-2.5 py-1.5 text-sm\",\n md: \"px-3 py-2 text-sm\",\n lg: \"px-4 py-2.5 text-base\",\n xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n size = \"md\",\n dirty,\n error,\n label,\n labelHidden,\n description,\n required,\n disabled,\n className,\n id,\n name,\n list,\n value: controlledValue,\n defaultValue,\n onValueChange,\n linear,\n mode,\n ...rest\n}: MultiSwitchProps<V>) {\n const reactId = useId();\n // A `<label for>` cannot name a div[role=\"radiogroup\"], so the group points at\n // the label instead. Needs an id the label and the group both agree on.\n const labelId = label ? `${id ?? reactId}-label` : undefined;\n\n // resolveOption hands an object option back as-is, so `color` survives it.\n const resolvedOptions = list.map(resolveOption) as Array<\n ReturnType<typeof resolveOption<V>> & { color?: Color }\n >;\n const fallback = defaultValue ?? resolvedOptions[0]?.value;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const externalRef = (rest as { ref?: Ref<HTMLDivElement> }).ref;\n const containerSetRef = useMemo(() => composeRefs(externalRef, containerRef), [externalRef]);\n const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);\n\n const selectedIndex = resolvedOptions.findIndex(\n (o) => o.value === value,\n );\n const selectedColor = resolvedOptions[selectedIndex]?.color;\n const colorClasses = selectedColor ? multiSwitchColorClasses[selectedColor] : undefined;\n\n const updateIndicator = useCallback(() => {\n const container = containerRef.current;\n const activeItem = itemRefs.current[selectedIndex];\n if (!container || !activeItem) {\n setIndicator(null);\n return;\n }\n const containerRect = container.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n setIndicator({\n left: itemRect.left - containerRect.left,\n width: itemRect.width,\n });\n }, [selectedIndex]);\n\n useEffect(() => {\n updateIndicator();\n }, [updateIndicator]);\n\n // The selected option can change size without the selection changing: a\n // label carrying a live count (\"Changed 4\" -> \"Changed 12\"), a font loading\n // late, the container reflowing. Watch the selected option and the container\n // and re-measure. Without ResizeObserver (SSR, older jsdom) the thumb is\n // measured on selection only, as it always was.\n useEffect(() => {\n if (typeof ResizeObserver === \"undefined\") return;\n const container = containerRef.current;\n const activeItem = itemRefs.current[selectedIndex];\n if (!container || !activeItem) return;\n const observer = new ResizeObserver(() => updateIndicator());\n observer.observe(container);\n observer.observe(activeItem);\n return () => observer.disconnect();\n }, [updateIndicator, selectedIndex, showControl]);\n\n const control = !showControl ? (\n <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n {resolvedOptions.find((o) => o.value === value)?.label}\n </DisplayValue>\n ) : (\n <div\n {...rest}\n // React 19 passes `ref` to a function component as a plain prop, so a\n // caller's ref (Tooltip's anchor, or anyone's) arrives in `rest`. Spread\n // after `ref={containerRef}` it REPLACED the ref the thumb is measured\n // from, and the selected thumb never rendered. Feed both instead.\n ref={containerSetRef}\n data-react-fancy-multi-switch=\"\"\n role=\"radiogroup\"\n id={id}\n aria-labelledby={labelId}\n onBlur={(e) => {\n if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n }}\n className={cn(\n \"relative inline-flex rounded-lg border bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n colorClasses ? colorClasses.border : BORDER_DEFAULT,\n dirty && \"ring-2 ring-amber-400/50\",\n error && \"ring-2 ring-red-500/50\",\n disabled && \"opacity-50 cursor-not-allowed\",\n className,\n )}\n >\n {indicator && (\n <span\n data-react-fancy-multi-switch-thumb=\"\"\n data-color={selectedColor}\n className={\n colorClasses\n ? `absolute top-0 bottom-0 rounded-lg ${colorClasses.thumb} transition-all duration-200 ease-out`\n : \"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n }\n style={{ left: indicator.left, width: indicator.width }}\n />\n )}\n {resolvedOptions.map((option, index) => {\n const isSelected = option.value === value;\n return (\n <button\n key={String(option.value)}\n ref={(el) => { itemRefs.current[index] = el; }}\n type=\"button\"\n role=\"radio\"\n aria-checked={isSelected}\n disabled={disabled || option.disabled}\n autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n onClick={() => {\n if (linear) {\n const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n setValue(resolvedOptions[nextIndex].value as V);\n } else {\n setValue(option.value as V);\n }\n }}\n className={cn(\n \"relative z-10 font-medium transition-colors duration-200\",\n sizeClasses[size],\n isSelected\n ? (colorClasses?.text ?? \"text-white\")\n : \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n (disabled || option.disabled) && \"cursor-not-allowed\",\n )}\n >\n {option.label}\n </button>\n );\n })}\n {name && <input type=\"hidden\" name={name} value={String(value)} />}\n </div>\n );\n\n if (label || error || description) {\n return (\n <Field\n label={label}\n labelHidden={labelHidden}\n labelId={labelId}\n description={description}\n error={error}\n required={required}\n htmlFor={id}\n size={size}\n >\n {control}\n </Field>\n );\n }\n\n return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}
|
|
@@ -74,8 +74,37 @@ function BreadcrumbsDropdown({ items, activeLabel }) {
|
|
|
74
74
|
"block w-full px-3 py-1.5 text-left text-sm",
|
|
75
75
|
item.active ? "font-medium text-zinc-900 dark:text-white" : "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]"
|
|
76
76
|
);
|
|
77
|
-
if (item.href && !item.active) {
|
|
78
|
-
|
|
77
|
+
if ((item.href || item.as) && !item.active) {
|
|
78
|
+
const Link = item.as ?? "a";
|
|
79
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
80
|
+
Link,
|
|
81
|
+
{
|
|
82
|
+
...item.href ? { href: item.href } : {},
|
|
83
|
+
className: cls,
|
|
84
|
+
onClick: () => {
|
|
85
|
+
item.onClick?.();
|
|
86
|
+
setOpen(false);
|
|
87
|
+
},
|
|
88
|
+
children: item.label
|
|
89
|
+
},
|
|
90
|
+
i
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
if (item.onClick && !item.active) {
|
|
94
|
+
const onClick = item.onClick;
|
|
95
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
96
|
+
"button",
|
|
97
|
+
{
|
|
98
|
+
type: "button",
|
|
99
|
+
className: chunkZU5Q77OT_cjs.cn(cls, "cursor-pointer border-0 bg-transparent"),
|
|
100
|
+
onClick: () => {
|
|
101
|
+
onClick();
|
|
102
|
+
setOpen(false);
|
|
103
|
+
},
|
|
104
|
+
children: item.label
|
|
105
|
+
},
|
|
106
|
+
i
|
|
107
|
+
);
|
|
79
108
|
}
|
|
80
109
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls, children: item.label }, i);
|
|
81
110
|
}) })
|
|
@@ -97,6 +126,8 @@ function BreadcrumbsRoot({
|
|
|
97
126
|
return {
|
|
98
127
|
label: el.props?.children,
|
|
99
128
|
href: el.props?.href,
|
|
129
|
+
as: el.props?.as,
|
|
130
|
+
onClick: el.props?.onClick,
|
|
100
131
|
active: el.props?.active
|
|
101
132
|
};
|
|
102
133
|
});
|
|
@@ -137,5 +168,5 @@ var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
|
|
|
137
168
|
});
|
|
138
169
|
|
|
139
170
|
exports.Breadcrumbs = Breadcrumbs;
|
|
140
|
-
//# sourceMappingURL=chunk-
|
|
141
|
-
//# sourceMappingURL=chunk-
|
|
171
|
+
//# sourceMappingURL=chunk-EWE776WI.cjs.map
|
|
172
|
+
//# sourceMappingURL=chunk-EWE776WI.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsItem.tsx","../src/components/Breadcrumbs/BreadcrumbsDropdown.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["cn","jsx","useState","useRef","useOutsideClick","useEscapeKey","jsxs","ChevronDown","Children","ChevronRight","Fragment"],"mappings":"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","file":"chunk-EWE776WI.cjs","sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nexport function BreadcrumbsItem({\n children,\n href,\n as: As,\n active = false,\n onClick,\n className,\n ...rest\n}: BreadcrumbsItemProps) {\n const baseClass = cn(\n \"text-sm\",\n active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n className,\n );\n\n // The CURRENT crumb stays a <span> even with `as`: it is the page you are on,\n // so a link to it is a link to nowhere, and `aria-current=\"page\"` is the point.\n if ((href || As) && !active) {\n const Link = (As ?? \"a\") as ElementType;\n\n return (\n <Link\n data-react-fancy-breadcrumbs-item=\"\"\n {...(href ? { href } : {})}\n onClick={onClick}\n className={baseClass}\n {...rest}\n >\n {children}\n </Link>\n );\n }\n\n // A crumb that navigates through a callback rather than a URL. Controlled\n // components own their navigation and have no href to give — a repository\n // browser walking directories, a wizard stepping back — and until this\n // existed the only way to make such a crumb clickable was to nest a button\n // inside the span below, which is interactive content inside a non-\n // interactive element.\n if (onClick && !active) {\n return (\n <button\n type=\"button\"\n data-react-fancy-breadcrumbs-item=\"\"\n onClick={onClick}\n className={cn(baseClass, \"cursor-pointer border-0 bg-transparent p-0\")}\n {...rest}\n >\n {children}\n </button>\n );\n }\n\n return (\n <span data-react-fancy-breadcrumbs-item=\"\" className={baseClass} aria-current={active ? \"page\" : undefined} {...rest}>\n {children}\n </span>\n );\n}\n\nBreadcrumbsItem.displayName = \"BreadcrumbsItem\";\n","import { useState, useRef, type ElementType, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\n\ninterface BreadcrumbsDropdownItem {\n label: ReactNode;\n href?: string;\n as?: ElementType;\n onClick?: () => void;\n active?: boolean;\n}\n\ninterface BreadcrumbsDropdownProps {\n items: BreadcrumbsDropdownItem[];\n activeLabel: ReactNode;\n}\n\nexport function BreadcrumbsDropdown({ items, activeLabel }: BreadcrumbsDropdownProps) {\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n useOutsideClick(ref, () => setOpen(false), open);\n useEscapeKey(() => setOpen(false), open);\n\n return (\n <div ref={ref} data-react-fancy-breadcrumbs-dropdown=\"\" className=\"relative flex md:hidden\">\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className=\"flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n >\n {activeLabel}\n <ChevronDown size={14} className={cn(\"transition-transform\", open && \"rotate-180\")} />\n </button>\n {open && (\n <div className=\"absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n {items.map((item, i) => {\n const cls = cn(\n \"block w-full px-3 py-1.5 text-left text-sm\",\n item.active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n );\n\n // Mirrors BreadcrumbsItem: href / `as` wins, then onClick, and the\n // active crumb stays inert whatever it carries.\n if ((item.href || item.as) && !item.active) {\n const Link = (item.as ?? \"a\") as ElementType;\n return (\n <Link\n key={i}\n {...(item.href ? { href: item.href } : {})}\n className={cls}\n onClick={() => {\n item.onClick?.();\n setOpen(false);\n }}\n >\n {item.label}\n </Link>\n );\n }\n\n if (item.onClick && !item.active) {\n const onClick = item.onClick;\n return (\n <button\n key={i}\n type=\"button\"\n className={cn(cls, \"cursor-pointer border-0 bg-transparent\")}\n onClick={() => {\n onClick();\n setOpen(false);\n }}\n >\n {item.label}\n </button>\n );\n }\n\n return (\n <span key={i} className={cls}>\n {item.label}\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nBreadcrumbsDropdown.displayName = \"BreadcrumbsDropdown\";\n","import { Children, Fragment, useState, type ReactElement } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { BreadcrumbsItem } from \"./BreadcrumbsItem\";\nimport { BreadcrumbsDropdown } from \"./BreadcrumbsDropdown\";\nimport type { BreadcrumbsProps, BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nfunction BreadcrumbsRoot({\n children,\n separator,\n shrink,\n className,\n}: BreadcrumbsProps) {\n const items = Children.toArray(children);\n const [expanded, setExpanded] = useState(false);\n\n const sep = separator ?? (\n <ChevronRight size={12} className=\"text-zinc-400\" />\n );\n\n const lastItem = items[items.length - 1];\n\n // Extract info from children for mobile dropdown\n const dropdownItems = items.map((child) => {\n const el = child as ReactElement<BreadcrumbsItemProps>;\n return {\n label: el.props?.children,\n href: el.props?.href,\n as: el.props?.as,\n onClick: el.props?.onClick,\n active: el.props?.active,\n };\n });\n\n const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? \"Menu\";\n\n const showShrunk = shrink && !expanded && items.length > 1;\n\n return (\n <>\n {/* Desktop trail */}\n <nav\n data-react-fancy-breadcrumbs=\"\"\n aria-label=\"Breadcrumb\"\n className={cn(\"hidden items-center gap-2 md:flex\", className)}\n onMouseLeave={() => shrink && setExpanded(false)}\n >\n {showShrunk ? (\n <>\n <button\n type=\"button\"\n onClick={() => setExpanded(true)}\n onMouseEnter={() => setExpanded(true)}\n className=\"text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n >\n ...\n </button>\n <span aria-hidden=\"true\">{sep}</span>\n {lastItem}\n </>\n ) : (\n items.map((child, i) => (\n <Fragment key={i}>\n {i > 0 && <span aria-hidden=\"true\">{sep}</span>}\n {child}\n </Fragment>\n ))\n )}\n </nav>\n\n {/* Mobile dropdown */}\n <BreadcrumbsDropdown items={dropdownItems} activeLabel={activeLabel} />\n </>\n );\n}\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n Item: BreadcrumbsItem,\n});\n"]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
import { composeRefs } from './chunk-SV5BW3IA.js';
|
|
1
2
|
import { useControllableState } from './chunk-EDYAXGUM.js';
|
|
2
3
|
import { cn } from './chunk-MMW2JGKZ.js';
|
|
3
|
-
import { createContext, useMemo, useRef, useCallback
|
|
4
|
+
import { createContext, useMemo, useContext, useState, useLayoutEffect, useRef, useCallback } from 'react';
|
|
4
5
|
import { jsx } from 'react/jsx-runtime';
|
|
5
6
|
|
|
6
7
|
var TabsContext = createContext(null);
|
|
8
|
+
var TabsListContext = createContext(null);
|
|
7
9
|
function useTabs() {
|
|
8
10
|
const ctx = useContext(TabsContext);
|
|
9
11
|
if (!ctx) {
|
|
@@ -12,8 +14,23 @@ function useTabs() {
|
|
|
12
14
|
return ctx;
|
|
13
15
|
}
|
|
14
16
|
function TabsList({ children, className }) {
|
|
15
|
-
const { variant } = useTabs();
|
|
17
|
+
const { variant, activeTab } = useTabs();
|
|
16
18
|
const listRef = useRef(null);
|
|
19
|
+
const [fallback, setFallback] = useState(null);
|
|
20
|
+
const refresh = useCallback(() => {
|
|
21
|
+
const list = listRef.current;
|
|
22
|
+
if (!list) return;
|
|
23
|
+
const own = Array.from(list.querySelectorAll('[role="tab"]')).filter(
|
|
24
|
+
(el) => el.closest('[role="tablist"]') === list
|
|
25
|
+
);
|
|
26
|
+
const anyActive = own.some((el) => el.getAttribute("aria-selected") === "true");
|
|
27
|
+
const next = anyActive ? null : own.find((el) => !el.disabled) ?? null;
|
|
28
|
+
setFallback((prev) => prev === next ? prev : next);
|
|
29
|
+
}, []);
|
|
30
|
+
useLayoutEffect(() => {
|
|
31
|
+
refresh();
|
|
32
|
+
}, [refresh, activeTab, children]);
|
|
33
|
+
const listCtx = useMemo(() => ({ fallback, refresh }), [fallback, refresh]);
|
|
17
34
|
const handleKeyDown = useCallback((e) => {
|
|
18
35
|
const buttons = listRef.current?.querySelectorAll(
|
|
19
36
|
'[role="tab"]:not([disabled])'
|
|
@@ -47,7 +64,7 @@ function TabsList({ children, className }) {
|
|
|
47
64
|
variant === "boxed" && "gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
|
|
48
65
|
className
|
|
49
66
|
),
|
|
50
|
-
children
|
|
67
|
+
children: /* @__PURE__ */ jsx(TabsListContext.Provider, { value: listCtx, children })
|
|
51
68
|
}
|
|
52
69
|
);
|
|
53
70
|
}
|
|
@@ -61,7 +78,17 @@ function TabsTab({
|
|
|
61
78
|
...rest
|
|
62
79
|
}) {
|
|
63
80
|
const { activeTab, setActiveTab, variant } = useTabs();
|
|
81
|
+
const list = useContext(TabsListContext);
|
|
64
82
|
const isActive = activeTab === value;
|
|
83
|
+
const [node, setNode] = useState(null);
|
|
84
|
+
const externalRef = rest.ref;
|
|
85
|
+
const setRef = useMemo(() => composeRefs(externalRef, setNode), [externalRef]);
|
|
86
|
+
const refresh = list?.refresh;
|
|
87
|
+
useLayoutEffect(() => {
|
|
88
|
+
refresh?.();
|
|
89
|
+
return () => refresh?.();
|
|
90
|
+
}, [refresh, disabled, value]);
|
|
91
|
+
const isStop = isActive || node !== null && list?.fallback === node;
|
|
65
92
|
return /* @__PURE__ */ jsx(
|
|
66
93
|
"button",
|
|
67
94
|
{
|
|
@@ -70,12 +97,13 @@ function TabsTab({
|
|
|
70
97
|
role: "tab",
|
|
71
98
|
disabled,
|
|
72
99
|
"aria-selected": isActive,
|
|
73
|
-
tabIndex:
|
|
100
|
+
tabIndex: isStop ? 0 : -1,
|
|
74
101
|
onClick: (e) => {
|
|
75
102
|
if (!disabled) setActiveTab(value);
|
|
76
103
|
onClick?.(e);
|
|
77
104
|
},
|
|
78
105
|
...rest,
|
|
106
|
+
ref: setRef,
|
|
79
107
|
className: cn(
|
|
80
108
|
"text-sm font-medium transition-colors",
|
|
81
109
|
disabled && "cursor-not-allowed opacity-50",
|
|
@@ -135,5 +163,5 @@ var Tabs = Object.assign(TabsRoot, {
|
|
|
135
163
|
});
|
|
136
164
|
|
|
137
165
|
export { Tabs, useTabs };
|
|
138
|
-
//# sourceMappingURL=chunk-
|
|
139
|
-
//# sourceMappingURL=chunk-
|
|
166
|
+
//# sourceMappingURL=chunk-FR4RHVPR.js.map
|
|
167
|
+
//# sourceMappingURL=chunk-FR4RHVPR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Tabs/Tabs.context.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTab.tsx","../src/components/Tabs/TabsPanels.tsx","../src/components/Tabs/TabsPanel.tsx","../src/components/Tabs/Tabs.tsx"],"names":["useContext","useState","useMemo","useLayoutEffect","jsx"],"mappings":";;;;;;AAGO,IAAM,WAAA,GAAc,cAAuC,IAAI,CAAA;AAe/D,IAAM,eAAA,GAAkB,cAA2C,IAAI,CAAA;AAEvE,SAAS,OAAA,GAA4B;AAC1C,EAAA,MAAM,GAAA,GAAM,WAAW,WAAW,CAAA;AAClC,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAM,IAAI,MAAM,qDAAqD,CAAA;AAAA,EACvE;AACA,EAAA,OAAO,GAAA;AACT;ACrBO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAkB;AAC/D,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAU,GAAI,OAAA,EAAQ;AACvC,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AAKjE,EAAA,MAAM,OAAA,GAAU,YAAY,MAAM;AAChC,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,MAAM,KAAA,CAAM,IAAA,CAAK,KAAK,gBAAA,CAA8B,cAAc,CAAC,CAAA,CAAE,MAAA;AAAA,MACzE,CAAC,EAAA,KAAO,EAAA,CAAG,OAAA,CAAQ,kBAAkB,CAAA,KAAM;AAAA,KAC7C;AACA,IAAA,MAAM,SAAA,GAAY,IAAI,IAAA,CAAK,CAAC,OAAO,EAAA,CAAG,YAAA,CAAa,eAAe,CAAA,KAAM,MAAM,CAAA;AAC9E,IAAA,MAAM,IAAA,GAAO,SAAA,GACT,IAAA,GACC,GAAA,CAAI,IAAA,CAAK,CAAC,EAAA,KAAO,CAAE,EAAA,CAAyB,QAAQ,CAAA,IAAK,IAAA;AAC9D,IAAA,WAAA,CAAY,CAAC,IAAA,KAAU,IAAA,KAAS,IAAA,GAAO,OAAO,IAAK,CAAA;AAAA,EACrD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA,EAAG,CAAC,OAAA,EAAS,SAAA,EAAW,QAAQ,CAAC,CAAA;AAEjC,EAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,OAAO,EAAE,QAAA,EAAU,SAAQ,CAAA,EAAI,CAAC,QAAA,EAAU,OAAO,CAAC,CAAA;AAE1E,EAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,CAAA,KAA2B;AAC5D,IAAA,MAAM,OAAA,GAAU,QAAQ,OAAA,EAAS,gBAAA;AAAA,MAC/B;AAAA,KACF;AACA,IAAA,IAAI,CAAC,SAAS,MAAA,EAAQ;AAEtB,IAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,MAAM,YAAA,GAAe,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,aAAkC,CAAA;AAE9E,IAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,YAAA,IAAgB,CAAA,CAAE,QAAQ,WAAA,EAAa;AACnD,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,MAAM,OAAO,YAAA,GAAe,KAAA,CAAM,MAAA,GAAS,CAAA,GAAI,eAAe,CAAA,GAAI,CAAA;AAClE,MAAA,KAAA,CAAM,IAAI,EAAE,KAAA,EAAM;AAClB,MAAA,KAAA,CAAM,IAAI,EAAE,KAAA,EAAM;AAAA,IACpB,WAAW,CAAA,CAAE,GAAA,KAAQ,WAAA,IAAe,CAAA,CAAE,QAAQ,SAAA,EAAW;AACvD,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,MAAM,OAAO,YAAA,GAAe,CAAA,GAAI,YAAA,GAAe,CAAA,GAAI,MAAM,MAAA,GAAS,CAAA;AAClE,MAAA,KAAA,CAAM,IAAI,EAAE,KAAA,EAAM;AAClB,MAAA,KAAA,CAAM,IAAI,EAAE,KAAA,EAAM;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,4BAAA,EAA2B,EAAA;AAAA,MAC3B,GAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,MAAA;AAAA,QACA,YAAY,WAAA,IAAe,4IAAA;AAAA,QAC3B,YAAY,OAAA,IAAW,wJAAA;AAAA,QACvB,YAAY,OAAA,IACV,wJAAA;AAAA,QACF;AAAA,OACF;AAAA,MAEA,8BAAC,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,SAAU,QAAA,EAAS;AAAA;AAAA,GACtD;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;ACpEhB,SAAS,OAAA,CAAQ;AAAA,EACtB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,OAAA,KAAY,OAAA,EAAQ;AACrD,EAAA,MAAM,IAAA,GAAOA,WAAW,eAAe,CAAA;AACvC,EAAA,MAAM,WAAW,SAAA,KAAc,KAAA;AAI/B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,SAAmC,IAAI,CAAA;AAC/D,EAAA,MAAM,cAAe,IAAA,CAA0C,GAAA;AAC/D,EAAA,MAAM,MAAA,GAASC,QAAQ,MAAM,WAAA,CAAY,aAAa,OAAO,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAI7E,EAAA,MAAM,UAAU,IAAA,EAAM,OAAA;AACtB,EAAAC,gBAAgB,MAAM;AACpB,IAAA,OAAA,IAAU;AACV,IAAA,OAAO,MAAM,OAAA,IAAU;AAAA,EACzB,CAAA,EAAG,CAAC,OAAA,EAAS,QAAA,EAAU,KAAK,CAAC,CAAA;AAI7B,EAAA,MAAM,MAAA,GAAS,QAAA,IAAa,IAAA,KAAS,IAAA,IAAQ,MAAM,QAAA,KAAa,IAAA;AAEhE,EAAA,uBACEC,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,2BAAA,EAA0B,EAAA;AAAA,MAC1B,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,KAAA;AAAA,MACL,QAAA;AAAA,MACA,eAAA,EAAe,QAAA;AAAA,MACf,QAAA,EAAU,SAAS,CAAA,GAAI,EAAA;AAAA,MACvB,OAAA,EAAS,CAAC,CAAA,KAAM;AAAE,QAAA,IAAI,CAAC,QAAA,EAAU,YAAA,CAAa,KAAK,CAAA;AAAG,QAAA,OAAA,GAAU,CAAC,CAAA;AAAA,MAAG,CAAA;AAAA,MACnE,GAAG,IAAA;AAAA,MACJ,GAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,uCAAA;AAAA,QACA,QAAA,IAAY,+BAAA;AAAA,QACZ,YAAY,WAAA,IAAe;AAAA,UACzB,wBAAA;AAAA,UACA,WACI,iEAAA,GACA;AAAA,SACN;AAAA,QACA,YAAY,OAAA,IAAW;AAAA,UACrB,wBAAA;AAAA,UACA,WACI,4JAAA,GACA;AAAA,SACN;AAAA,QACA,YAAY,OAAA,IAAW;AAAA,UACrB,+BAAA;AAAA,UACA,WACI,4JAAA,GACA;AAAA,SACN;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;ACzEf,SAAS,UAAA,CAAW,EAAE,QAAA,EAAU,SAAA,EAAU,EAAoB;AACnE,EAAA,uBAAOA,GAAAA,CAAC,KAAA,EAAA,EAAI,8BAAA,EAA6B,EAAA,EAAG,WAAW,EAAA,CAAG,MAAA,EAAQ,SAAS,CAAA,EAAI,QAAA,EAAS,CAAA;AAC1F;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;ACHlB,SAAS,SAAA,CAAU,EAAE,QAAA,EAAU,KAAA,EAAO,WAAU,EAAmB;AACxE,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,EAAQ;AAE9B,EAAA,IAAI,SAAA,KAAc,OAAO,OAAO,IAAA;AAEhC,EAAA,uBACEA,GAAAA,CAAC,KAAA,EAAA,EAAI,6BAAA,EAA4B,EAAA,EAAG,IAAA,EAAK,UAAA,EAAW,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA,EACzF,QAAA,EACH,CAAA;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;ACNxB,SAAS,QAAA,CAAS;AAAA,EAChB,QAAA;AAAA,EACA,UAAA,GAAa,EAAA;AAAA,EACb,SAAA,EAAW,aAAA;AAAA,EACX,WAAA;AAAA,EACA,OAAA,GAAU,WAAA;AAAA,EACV;AACF,CAAA,EAAc;AACZ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,oBAAA;AAAA,IAChC,aAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,GAAA,GAAMF,OAAAA;AAAA,IACV,OAAO,EAAE,SAAA,EAAW,YAAA,EAAc,OAAA,EAAQ,CAAA;AAAA,IAC1C,CAAC,SAAA,EAAW,YAAA,EAAc,OAAO;AAAA,GACnC;AAEA,EAAA,uBACEE,GAAAA,CAAC,WAAA,CAAY,QAAA,EAAZ,EAAqB,OAAO,GAAA,EAC3B,QAAA,kBAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,yBAAsB,EAAA,EAAG,SAAA,EAAW,GAAG,SAAS,CAAA,EAAI,UAAS,CAAA,EACpE,CAAA;AAEJ;AAEO,IAAM,IAAA,GAAO,MAAA,CAAO,MAAA,CAAO,QAAA,EAAU;AAAA,EAC1C,IAAA,EAAM,QAAA;AAAA,EACN,GAAA,EAAK,OAAA;AAAA,EACL,MAAA,EAAQ,UAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAC","file":"chunk-FR4RHVPR.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TabsContextValue } from \"./Tabs.types\";\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\n/**\n * What a `Tabs.List` tells its tabs about the roving tab stop.\n *\n * `fallback` is the tab that takes `tabIndex=0` when NO tab is active (the\n * controlled value matches none), so the tablist stays reachable by keyboard.\n * `refresh` lets a tab ask the list to re-derive it when the tab changes in a\n * way the list did not render for (disabled toggled, mounted, unmounted).\n */\nexport interface TabsListContextValue {\n fallback: HTMLElement | null;\n refresh: () => void;\n}\n\nexport const TabsListContext = createContext<TabsListContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n const ctx = useContext(TabsContext);\n if (!ctx) {\n throw new Error(\"Tabs compound components must be used within <Tabs>\");\n }\n return ctx;\n}\n","import { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TabsListContext, useTabs } from \"./Tabs.context\";\nimport type { TabsListProps } from \"./Tabs.types\";\n\nexport function TabsList({ children, className }: TabsListProps) {\n const { variant, activeTab } = useTabs();\n const listRef = useRef<HTMLDivElement>(null);\n const [fallback, setFallback] = useState<HTMLElement | null>(null);\n\n // Which tab holds the stop when none is active. Read from the rendered\n // tablist, the same source the arrow keys use, so \"first\" means first in\n // the DOM whatever wraps the tabs. Tabs of a nested tablist are skipped.\n const refresh = useCallback(() => {\n const list = listRef.current;\n if (!list) return;\n const own = Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n (el) => el.closest('[role=\"tablist\"]') === list,\n );\n const anyActive = own.some((el) => el.getAttribute(\"aria-selected\") === \"true\");\n const next = anyActive\n ? null\n : (own.find((el) => !(el as HTMLButtonElement).disabled) ?? null);\n setFallback((prev) => (prev === next ? prev : next));\n }, []);\n\n useLayoutEffect(() => {\n refresh();\n }, [refresh, activeTab, children]);\n\n const listCtx = useMemo(() => ({ fallback, refresh }), [fallback, refresh]);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n const buttons = listRef.current?.querySelectorAll<HTMLButtonElement>(\n '[role=\"tab\"]:not([disabled])',\n );\n if (!buttons?.length) return;\n\n const items = Array.from(buttons);\n const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);\n\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[next].focus();\n items[next].click();\n } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prev].focus();\n items[prev].click();\n }\n }, []);\n\n return (\n <div\n data-react-fancy-tabs-list=\"\"\n ref={listRef}\n role=\"tablist\"\n onKeyDown={handleKeyDown}\n className={cn(\n \"flex\",\n variant === \"underline\" && \"gap-0 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n variant === \"pills\" && \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n variant === \"boxed\" &&\n \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n <TabsListContext.Provider value={listCtx}>{children}</TabsListContext.Provider>\n </div>\n );\n}\n\nTabsList.displayName = \"TabsList\";\n","import { useContext, useLayoutEffect, useMemo, useState, type Ref } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { composeRefs } from \"../../utils/compose-refs\";\nimport { TabsListContext, useTabs } from \"./Tabs.context\";\nimport type { TabsTabProps } from \"./Tabs.types\";\n\nexport function TabsTab({\n children,\n value,\n disabled = false,\n className,\n onClick,\n ...rest\n}: TabsTabProps) {\n const { activeTab, setActiveTab, variant } = useTabs();\n const list = useContext(TabsListContext);\n const isActive = activeTab === value;\n\n // The node lives in state, not a ref, so comparing it to the list's\n // fallback during render is a pure read.\n const [node, setNode] = useState<HTMLButtonElement | null>(null);\n const externalRef = (rest as { ref?: Ref<HTMLButtonElement> }).ref;\n const setRef = useMemo(() => composeRefs(externalRef, setNode), [externalRef]);\n\n // Re-derive the fallback when this tab changes in a way the list may not\n // have rendered for, and when it leaves.\n const refresh = list?.refresh;\n useLayoutEffect(() => {\n refresh?.();\n return () => refresh?.();\n }, [refresh, disabled, value]);\n\n // Roving tabindex: the active tab holds the stop. When no tab is active the\n // list names the first enabled one, so the tablist is never unreachable.\n const isStop = isActive || (node !== null && list?.fallback === node);\n\n return (\n <button\n data-react-fancy-tabs-tab=\"\"\n type=\"button\"\n role=\"tab\"\n disabled={disabled}\n aria-selected={isActive}\n tabIndex={isStop ? 0 : -1}\n onClick={(e) => { if (!disabled) setActiveTab(value); onClick?.(e); }}\n {...rest}\n ref={setRef}\n className={cn(\n \"text-sm font-medium transition-colors\",\n disabled && \"cursor-not-allowed opacity-50\",\n variant === \"underline\" && [\n \"border-b-2 px-4 py-2.5\",\n isActive\n ? \"border-zinc-900 text-zinc-900 dark:border-white dark:text-white\"\n : \"border-transparent text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:border-zinc-300 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n ],\n variant === \"pills\" && [\n \"rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n variant === \"boxed\" && [\n \"flex-1 rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n className,\n )}\n >\n {children}\n </button>\n );\n}\n\nTabsTab.displayName = \"TabsTab\";\n","import { cn } from \"../../utils/cn\";\nimport type { TabsPanelsProps } from \"./Tabs.types\";\n\nexport function TabsPanels({ children, className }: TabsPanelsProps) {\n return <div data-react-fancy-tabs-panels=\"\" className={cn(\"mt-4\", className)}>{children}</div>;\n}\n\nTabsPanels.displayName = \"TabsPanels\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsPanelProps } from \"./Tabs.types\";\n\nexport function TabsPanel({ children, value, className }: TabsPanelProps) {\n const { activeTab } = useTabs();\n\n if (activeTab !== value) return null;\n\n return (\n <div data-react-fancy-tabs-panel=\"\" role=\"tabpanel\" className={cn(\"fancy-fade-in\", className)}>\n {children}\n </div>\n );\n}\n\nTabsPanel.displayName = \"TabsPanel\";\n","import { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { TabsContext } from \"./Tabs.context\";\nimport { TabsList } from \"./TabsList\";\nimport { TabsTab } from \"./TabsTab\";\nimport { TabsPanels } from \"./TabsPanels\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nfunction TabsRoot({\n children,\n defaultTab = \"\",\n activeTab: controlledTab,\n onTabChange,\n variant = \"underline\",\n className,\n}: TabsProps) {\n const [activeTab, setActiveTab] = useControllableState(\n controlledTab,\n defaultTab,\n onTabChange,\n );\n\n const ctx = useMemo(\n () => ({ activeTab, setActiveTab, variant }),\n [activeTab, setActiveTab, variant],\n );\n\n return (\n <TabsContext.Provider value={ctx}>\n <div data-react-fancy-tabs=\"\" className={cn(className)}>{children}</div>\n </TabsContext.Provider>\n );\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Tab: TabsTab,\n Panels: TabsPanels,\n Panel: TabsPanel,\n});\n"]}
|
|
@@ -101,6 +101,16 @@ function MultiSwitch({
|
|
|
101
101
|
react.useEffect(() => {
|
|
102
102
|
updateIndicator();
|
|
103
103
|
}, [updateIndicator]);
|
|
104
|
+
react.useEffect(() => {
|
|
105
|
+
if (typeof ResizeObserver === "undefined") return;
|
|
106
|
+
const container = containerRef.current;
|
|
107
|
+
const activeItem = itemRefs.current[selectedIndex];
|
|
108
|
+
if (!container || !activeItem) return;
|
|
109
|
+
const observer = new ResizeObserver(() => updateIndicator());
|
|
110
|
+
observer.observe(container);
|
|
111
|
+
observer.observe(activeItem);
|
|
112
|
+
return () => observer.disconnect();
|
|
113
|
+
}, [updateIndicator, selectedIndex, showControl]);
|
|
104
114
|
const control = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(chunkP53432AK_cjs.DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
105
115
|
"div",
|
|
106
116
|
{
|
|
@@ -188,5 +198,5 @@ function MultiSwitch({
|
|
|
188
198
|
MultiSwitch.displayName = "MultiSwitch";
|
|
189
199
|
|
|
190
200
|
exports.MultiSwitch = MultiSwitch;
|
|
191
|
-
//# sourceMappingURL=chunk-
|
|
192
|
-
//# sourceMappingURL=chunk-
|
|
201
|
+
//# sourceMappingURL=chunk-KOAMRCSC.cjs.map
|
|
202
|
+
//# sourceMappingURL=chunk-KOAMRCSC.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.colors.ts","../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":["useId","resolveOption","useFieldMode","useInlineEdit","useControllableState","useRef","useMemo","composeRefs","useState","useCallback","useEffect","DisplayValue","jsxs","cn","jsx","Field"],"mappings":"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","file":"chunk-KOAMRCSC.cjs","sourcesContent":["// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Shades follow badgeSolid: 600 / dark 500 for\n// the thumb, with dark label text on the light hues (amber, yellow, lime).\nimport type { Color } from \"../../../utils/types\";\n\nexport type MultiSwitchColorClasses = {\n /** The selected thumb's fill. */\n thumb: string;\n /** The selected option's label, readable on the thumb. */\n text: string;\n /** The container border while this option is selected. */\n border: string;\n};\n\nexport const multiSwitchColorClasses: Record<Color, MultiSwitchColorClasses> = {\n // The host's colour, from CSS variables -- no dark: variant, because a\n // host that themes per mode scopes the variables themselves.\n brand: { thumb: \"bg-brand\", text: \"text-brand-contrast\", border: \"border-brand\" },\n slate: { thumb: \"bg-slate-600 dark:bg-slate-500\", text: \"text-white\", border: \"border-slate-500 dark:border-slate-400\" },\n gray: { thumb: \"bg-gray-600 dark:bg-gray-500\", text: \"text-white\", border: \"border-gray-500 dark:border-gray-400\" },\n zinc: { thumb: \"bg-zinc-600 dark:bg-zinc-500\", text: \"text-white\", border: \"border-zinc-500 dark:border-zinc-400\" },\n neutral: { thumb: \"bg-neutral-600 dark:bg-neutral-500\", text: \"text-white\", border: \"border-neutral-500 dark:border-neutral-400\" },\n stone: { thumb: \"bg-stone-600 dark:bg-stone-500\", text: \"text-white\", border: \"border-stone-500 dark:border-stone-400\" },\n red: { thumb: \"bg-red-600 dark:bg-red-500\", text: \"text-white\", border: \"border-red-500 dark:border-red-400\" },\n orange: { thumb: \"bg-orange-600 dark:bg-orange-500\", text: \"text-white\", border: \"border-orange-500 dark:border-orange-400\" },\n amber: { thumb: \"bg-amber-400 dark:bg-amber-300\", text: \"text-amber-950\", border: \"border-amber-500 dark:border-amber-400\" },\n yellow: { thumb: \"bg-yellow-400 dark:bg-yellow-300\", text: \"text-yellow-950\", border: \"border-yellow-500 dark:border-yellow-400\" },\n lime: { thumb: \"bg-lime-400 dark:bg-lime-300\", text: \"text-lime-950\", border: \"border-lime-500 dark:border-lime-400\" },\n green: { thumb: \"bg-green-600 dark:bg-green-500\", text: \"text-white\", border: \"border-green-500 dark:border-green-400\" },\n emerald: { thumb: \"bg-emerald-600 dark:bg-emerald-500\", text: \"text-white\", border: \"border-emerald-500 dark:border-emerald-400\" },\n teal: { thumb: \"bg-teal-600 dark:bg-teal-500\", text: \"text-white\", border: \"border-teal-500 dark:border-teal-400\" },\n cyan: { thumb: \"bg-cyan-600 dark:bg-cyan-500\", text: \"text-white\", border: \"border-cyan-500 dark:border-cyan-400\" },\n sky: { thumb: \"bg-sky-600 dark:bg-sky-500\", text: \"text-white\", border: \"border-sky-500 dark:border-sky-400\" },\n blue: { thumb: \"bg-blue-600 dark:bg-blue-500\", text: \"text-white\", border: \"border-blue-500 dark:border-blue-400\" },\n indigo: { thumb: \"bg-indigo-600 dark:bg-indigo-500\", text: \"text-white\", border: \"border-indigo-500 dark:border-indigo-400\" },\n violet: { thumb: \"bg-violet-600 dark:bg-violet-500\", text: \"text-white\", border: \"border-violet-500 dark:border-violet-400\" },\n purple: { thumb: \"bg-purple-600 dark:bg-purple-500\", text: \"text-white\", border: \"border-purple-500 dark:border-purple-400\" },\n fuchsia: { thumb: \"bg-fuchsia-600 dark:bg-fuchsia-500\", text: \"text-white\", border: \"border-fuchsia-500 dark:border-fuchsia-400\" },\n pink: { thumb: \"bg-pink-600 dark:bg-pink-500\", text: \"text-white\", border: \"border-pink-500 dark:border-pink-400\" },\n rose: { thumb: \"bg-rose-600 dark:bg-rose-500\", text: \"text-white\", border: \"border-rose-500 dark:border-rose-400\" },\n};\n","import { useRef, useState, useEffect, useCallback, useId, useMemo, type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { composeRefs } from \"../../../utils/compose-refs\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { resolveOption } from \"../inputs.utils\";\nimport type { Color, Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\nimport { multiSwitchColorClasses } from \"./MultiSwitch.colors\";\n\nconst BORDER_DEFAULT =\n \"border-[color:var(--fancy-border-strong,var(--color-zinc-300))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))]\";\n\nconst sizeClasses: Record<Size, string> = {\n xs: \"px-2 py-1 text-xs\",\n sm: \"px-2.5 py-1.5 text-sm\",\n md: \"px-3 py-2 text-sm\",\n lg: \"px-4 py-2.5 text-base\",\n xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n size = \"md\",\n dirty,\n error,\n label,\n labelHidden,\n description,\n required,\n disabled,\n className,\n id,\n name,\n list,\n value: controlledValue,\n defaultValue,\n onValueChange,\n linear,\n mode,\n ...rest\n}: MultiSwitchProps<V>) {\n const reactId = useId();\n // A `<label for>` cannot name a div[role=\"radiogroup\"], so the group points at\n // the label instead. Needs an id the label and the group both agree on.\n const labelId = label ? `${id ?? reactId}-label` : undefined;\n\n // resolveOption hands an object option back as-is, so `color` survives it.\n const resolvedOptions = list.map(resolveOption) as Array<\n ReturnType<typeof resolveOption<V>> & { color?: Color }\n >;\n const fallback = defaultValue ?? resolvedOptions[0]?.value;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const externalRef = (rest as { ref?: Ref<HTMLDivElement> }).ref;\n const containerSetRef = useMemo(() => composeRefs(externalRef, containerRef), [externalRef]);\n const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);\n\n const selectedIndex = resolvedOptions.findIndex(\n (o) => o.value === value,\n );\n const selectedColor = resolvedOptions[selectedIndex]?.color;\n const colorClasses = selectedColor ? multiSwitchColorClasses[selectedColor] : undefined;\n\n const updateIndicator = useCallback(() => {\n const container = containerRef.current;\n const activeItem = itemRefs.current[selectedIndex];\n if (!container || !activeItem) {\n setIndicator(null);\n return;\n }\n const containerRect = container.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n setIndicator({\n left: itemRect.left - containerRect.left,\n width: itemRect.width,\n });\n }, [selectedIndex]);\n\n useEffect(() => {\n updateIndicator();\n }, [updateIndicator]);\n\n // The selected option can change size without the selection changing: a\n // label carrying a live count (\"Changed 4\" -> \"Changed 12\"), a font loading\n // late, the container reflowing. Watch the selected option and the container\n // and re-measure. Without ResizeObserver (SSR, older jsdom) the thumb is\n // measured on selection only, as it always was.\n useEffect(() => {\n if (typeof ResizeObserver === \"undefined\") return;\n const container = containerRef.current;\n const activeItem = itemRefs.current[selectedIndex];\n if (!container || !activeItem) return;\n const observer = new ResizeObserver(() => updateIndicator());\n observer.observe(container);\n observer.observe(activeItem);\n return () => observer.disconnect();\n }, [updateIndicator, selectedIndex, showControl]);\n\n const control = !showControl ? (\n <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n {resolvedOptions.find((o) => o.value === value)?.label}\n </DisplayValue>\n ) : (\n <div\n {...rest}\n // React 19 passes `ref` to a function component as a plain prop, so a\n // caller's ref (Tooltip's anchor, or anyone's) arrives in `rest`. Spread\n // after `ref={containerRef}` it REPLACED the ref the thumb is measured\n // from, and the selected thumb never rendered. Feed both instead.\n ref={containerSetRef}\n data-react-fancy-multi-switch=\"\"\n role=\"radiogroup\"\n id={id}\n aria-labelledby={labelId}\n onBlur={(e) => {\n if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n }}\n className={cn(\n \"relative inline-flex rounded-lg border bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n colorClasses ? colorClasses.border : BORDER_DEFAULT,\n dirty && \"ring-2 ring-amber-400/50\",\n error && \"ring-2 ring-red-500/50\",\n disabled && \"opacity-50 cursor-not-allowed\",\n className,\n )}\n >\n {indicator && (\n <span\n data-react-fancy-multi-switch-thumb=\"\"\n data-color={selectedColor}\n className={\n colorClasses\n ? `absolute top-0 bottom-0 rounded-lg ${colorClasses.thumb} transition-all duration-200 ease-out`\n : \"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n }\n style={{ left: indicator.left, width: indicator.width }}\n />\n )}\n {resolvedOptions.map((option, index) => {\n const isSelected = option.value === value;\n return (\n <button\n key={String(option.value)}\n ref={(el) => { itemRefs.current[index] = el; }}\n type=\"button\"\n role=\"radio\"\n aria-checked={isSelected}\n disabled={disabled || option.disabled}\n autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n onClick={() => {\n if (linear) {\n const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n setValue(resolvedOptions[nextIndex].value as V);\n } else {\n setValue(option.value as V);\n }\n }}\n className={cn(\n \"relative z-10 font-medium transition-colors duration-200\",\n sizeClasses[size],\n isSelected\n ? (colorClasses?.text ?? \"text-white\")\n : \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n (disabled || option.disabled) && \"cursor-not-allowed\",\n )}\n >\n {option.label}\n </button>\n );\n })}\n {name && <input type=\"hidden\" name={name} value={String(value)} />}\n </div>\n );\n\n if (label || error || description) {\n return (\n <Field\n label={label}\n labelHidden={labelHidden}\n labelId={labelId}\n description={description}\n error={error}\n required={required}\n htmlFor={id}\n size={size}\n >\n {control}\n </Field>\n );\n }\n\n return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var chunkI27K6NLX_cjs = require('./chunk-I27K6NLX.cjs');
|
|
3
4
|
var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
|
|
4
5
|
var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
|
|
5
6
|
var react = require('react');
|
|
6
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
8
|
|
|
8
9
|
var TabsContext = react.createContext(null);
|
|
10
|
+
var TabsListContext = react.createContext(null);
|
|
9
11
|
function useTabs() {
|
|
10
12
|
const ctx = react.useContext(TabsContext);
|
|
11
13
|
if (!ctx) {
|
|
@@ -14,8 +16,23 @@ function useTabs() {
|
|
|
14
16
|
return ctx;
|
|
15
17
|
}
|
|
16
18
|
function TabsList({ children, className }) {
|
|
17
|
-
const { variant } = useTabs();
|
|
19
|
+
const { variant, activeTab } = useTabs();
|
|
18
20
|
const listRef = react.useRef(null);
|
|
21
|
+
const [fallback, setFallback] = react.useState(null);
|
|
22
|
+
const refresh = react.useCallback(() => {
|
|
23
|
+
const list = listRef.current;
|
|
24
|
+
if (!list) return;
|
|
25
|
+
const own = Array.from(list.querySelectorAll('[role="tab"]')).filter(
|
|
26
|
+
(el) => el.closest('[role="tablist"]') === list
|
|
27
|
+
);
|
|
28
|
+
const anyActive = own.some((el) => el.getAttribute("aria-selected") === "true");
|
|
29
|
+
const next = anyActive ? null : own.find((el) => !el.disabled) ?? null;
|
|
30
|
+
setFallback((prev) => prev === next ? prev : next);
|
|
31
|
+
}, []);
|
|
32
|
+
react.useLayoutEffect(() => {
|
|
33
|
+
refresh();
|
|
34
|
+
}, [refresh, activeTab, children]);
|
|
35
|
+
const listCtx = react.useMemo(() => ({ fallback, refresh }), [fallback, refresh]);
|
|
19
36
|
const handleKeyDown = react.useCallback((e) => {
|
|
20
37
|
const buttons = listRef.current?.querySelectorAll(
|
|
21
38
|
'[role="tab"]:not([disabled])'
|
|
@@ -49,7 +66,7 @@ function TabsList({ children, className }) {
|
|
|
49
66
|
variant === "boxed" && "gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
|
|
50
67
|
className
|
|
51
68
|
),
|
|
52
|
-
children
|
|
69
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TabsListContext.Provider, { value: listCtx, children })
|
|
53
70
|
}
|
|
54
71
|
);
|
|
55
72
|
}
|
|
@@ -63,7 +80,17 @@ function TabsTab({
|
|
|
63
80
|
...rest
|
|
64
81
|
}) {
|
|
65
82
|
const { activeTab, setActiveTab, variant } = useTabs();
|
|
83
|
+
const list = react.useContext(TabsListContext);
|
|
66
84
|
const isActive = activeTab === value;
|
|
85
|
+
const [node, setNode] = react.useState(null);
|
|
86
|
+
const externalRef = rest.ref;
|
|
87
|
+
const setRef = react.useMemo(() => chunkI27K6NLX_cjs.composeRefs(externalRef, setNode), [externalRef]);
|
|
88
|
+
const refresh = list?.refresh;
|
|
89
|
+
react.useLayoutEffect(() => {
|
|
90
|
+
refresh?.();
|
|
91
|
+
return () => refresh?.();
|
|
92
|
+
}, [refresh, disabled, value]);
|
|
93
|
+
const isStop = isActive || node !== null && list?.fallback === node;
|
|
67
94
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
95
|
"button",
|
|
69
96
|
{
|
|
@@ -72,12 +99,13 @@ function TabsTab({
|
|
|
72
99
|
role: "tab",
|
|
73
100
|
disabled,
|
|
74
101
|
"aria-selected": isActive,
|
|
75
|
-
tabIndex:
|
|
102
|
+
tabIndex: isStop ? 0 : -1,
|
|
76
103
|
onClick: (e) => {
|
|
77
104
|
if (!disabled) setActiveTab(value);
|
|
78
105
|
onClick?.(e);
|
|
79
106
|
},
|
|
80
107
|
...rest,
|
|
108
|
+
ref: setRef,
|
|
81
109
|
className: chunkZU5Q77OT_cjs.cn(
|
|
82
110
|
"text-sm font-medium transition-colors",
|
|
83
111
|
disabled && "cursor-not-allowed opacity-50",
|
|
@@ -138,5 +166,5 @@ var Tabs = Object.assign(TabsRoot, {
|
|
|
138
166
|
|
|
139
167
|
exports.Tabs = Tabs;
|
|
140
168
|
exports.useTabs = useTabs;
|
|
141
|
-
//# sourceMappingURL=chunk-
|
|
142
|
-
//# sourceMappingURL=chunk-
|
|
169
|
+
//# sourceMappingURL=chunk-RZUYCZ5D.cjs.map
|
|
170
|
+
//# sourceMappingURL=chunk-RZUYCZ5D.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Tabs/Tabs.context.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTab.tsx","../src/components/Tabs/TabsPanels.tsx","../src/components/Tabs/TabsPanel.tsx","../src/components/Tabs/Tabs.tsx"],"names":["createContext","useContext","useRef","useState","useCallback","useLayoutEffect","useMemo","jsx","cn","composeRefs","useControllableState"],"mappings":"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","file":"chunk-RZUYCZ5D.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TabsContextValue } from \"./Tabs.types\";\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\n/**\n * What a `Tabs.List` tells its tabs about the roving tab stop.\n *\n * `fallback` is the tab that takes `tabIndex=0` when NO tab is active (the\n * controlled value matches none), so the tablist stays reachable by keyboard.\n * `refresh` lets a tab ask the list to re-derive it when the tab changes in a\n * way the list did not render for (disabled toggled, mounted, unmounted).\n */\nexport interface TabsListContextValue {\n fallback: HTMLElement | null;\n refresh: () => void;\n}\n\nexport const TabsListContext = createContext<TabsListContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n const ctx = useContext(TabsContext);\n if (!ctx) {\n throw new Error(\"Tabs compound components must be used within <Tabs>\");\n }\n return ctx;\n}\n","import { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TabsListContext, useTabs } from \"./Tabs.context\";\nimport type { TabsListProps } from \"./Tabs.types\";\n\nexport function TabsList({ children, className }: TabsListProps) {\n const { variant, activeTab } = useTabs();\n const listRef = useRef<HTMLDivElement>(null);\n const [fallback, setFallback] = useState<HTMLElement | null>(null);\n\n // Which tab holds the stop when none is active. Read from the rendered\n // tablist, the same source the arrow keys use, so \"first\" means first in\n // the DOM whatever wraps the tabs. Tabs of a nested tablist are skipped.\n const refresh = useCallback(() => {\n const list = listRef.current;\n if (!list) return;\n const own = Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n (el) => el.closest('[role=\"tablist\"]') === list,\n );\n const anyActive = own.some((el) => el.getAttribute(\"aria-selected\") === \"true\");\n const next = anyActive\n ? null\n : (own.find((el) => !(el as HTMLButtonElement).disabled) ?? null);\n setFallback((prev) => (prev === next ? prev : next));\n }, []);\n\n useLayoutEffect(() => {\n refresh();\n }, [refresh, activeTab, children]);\n\n const listCtx = useMemo(() => ({ fallback, refresh }), [fallback, refresh]);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n const buttons = listRef.current?.querySelectorAll<HTMLButtonElement>(\n '[role=\"tab\"]:not([disabled])',\n );\n if (!buttons?.length) return;\n\n const items = Array.from(buttons);\n const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);\n\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[next].focus();\n items[next].click();\n } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prev].focus();\n items[prev].click();\n }\n }, []);\n\n return (\n <div\n data-react-fancy-tabs-list=\"\"\n ref={listRef}\n role=\"tablist\"\n onKeyDown={handleKeyDown}\n className={cn(\n \"flex\",\n variant === \"underline\" && \"gap-0 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n variant === \"pills\" && \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n variant === \"boxed\" &&\n \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n <TabsListContext.Provider value={listCtx}>{children}</TabsListContext.Provider>\n </div>\n );\n}\n\nTabsList.displayName = \"TabsList\";\n","import { useContext, useLayoutEffect, useMemo, useState, type Ref } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { composeRefs } from \"../../utils/compose-refs\";\nimport { TabsListContext, useTabs } from \"./Tabs.context\";\nimport type { TabsTabProps } from \"./Tabs.types\";\n\nexport function TabsTab({\n children,\n value,\n disabled = false,\n className,\n onClick,\n ...rest\n}: TabsTabProps) {\n const { activeTab, setActiveTab, variant } = useTabs();\n const list = useContext(TabsListContext);\n const isActive = activeTab === value;\n\n // The node lives in state, not a ref, so comparing it to the list's\n // fallback during render is a pure read.\n const [node, setNode] = useState<HTMLButtonElement | null>(null);\n const externalRef = (rest as { ref?: Ref<HTMLButtonElement> }).ref;\n const setRef = useMemo(() => composeRefs(externalRef, setNode), [externalRef]);\n\n // Re-derive the fallback when this tab changes in a way the list may not\n // have rendered for, and when it leaves.\n const refresh = list?.refresh;\n useLayoutEffect(() => {\n refresh?.();\n return () => refresh?.();\n }, [refresh, disabled, value]);\n\n // Roving tabindex: the active tab holds the stop. When no tab is active the\n // list names the first enabled one, so the tablist is never unreachable.\n const isStop = isActive || (node !== null && list?.fallback === node);\n\n return (\n <button\n data-react-fancy-tabs-tab=\"\"\n type=\"button\"\n role=\"tab\"\n disabled={disabled}\n aria-selected={isActive}\n tabIndex={isStop ? 0 : -1}\n onClick={(e) => { if (!disabled) setActiveTab(value); onClick?.(e); }}\n {...rest}\n ref={setRef}\n className={cn(\n \"text-sm font-medium transition-colors\",\n disabled && \"cursor-not-allowed opacity-50\",\n variant === \"underline\" && [\n \"border-b-2 px-4 py-2.5\",\n isActive\n ? \"border-zinc-900 text-zinc-900 dark:border-white dark:text-white\"\n : \"border-transparent text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:border-zinc-300 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n ],\n variant === \"pills\" && [\n \"rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n variant === \"boxed\" && [\n \"flex-1 rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n className,\n )}\n >\n {children}\n </button>\n );\n}\n\nTabsTab.displayName = \"TabsTab\";\n","import { cn } from \"../../utils/cn\";\nimport type { TabsPanelsProps } from \"./Tabs.types\";\n\nexport function TabsPanels({ children, className }: TabsPanelsProps) {\n return <div data-react-fancy-tabs-panels=\"\" className={cn(\"mt-4\", className)}>{children}</div>;\n}\n\nTabsPanels.displayName = \"TabsPanels\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsPanelProps } from \"./Tabs.types\";\n\nexport function TabsPanel({ children, value, className }: TabsPanelProps) {\n const { activeTab } = useTabs();\n\n if (activeTab !== value) return null;\n\n return (\n <div data-react-fancy-tabs-panel=\"\" role=\"tabpanel\" className={cn(\"fancy-fade-in\", className)}>\n {children}\n </div>\n );\n}\n\nTabsPanel.displayName = \"TabsPanel\";\n","import { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { TabsContext } from \"./Tabs.context\";\nimport { TabsList } from \"./TabsList\";\nimport { TabsTab } from \"./TabsTab\";\nimport { TabsPanels } from \"./TabsPanels\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nfunction TabsRoot({\n children,\n defaultTab = \"\",\n activeTab: controlledTab,\n onTabChange,\n variant = \"underline\",\n className,\n}: TabsProps) {\n const [activeTab, setActiveTab] = useControllableState(\n controlledTab,\n defaultTab,\n onTabChange,\n );\n\n const ctx = useMemo(\n () => ({ activeTab, setActiveTab, variant }),\n [activeTab, setActiveTab, variant],\n );\n\n return (\n <TabsContext.Provider value={ctx}>\n <div data-react-fancy-tabs=\"\" className={cn(className)}>{children}</div>\n </TabsContext.Provider>\n );\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Tab: TabsTab,\n Panels: TabsPanels,\n Panel: TabsPanel,\n});\n"]}
|
|
@@ -72,8 +72,37 @@ function BreadcrumbsDropdown({ items, activeLabel }) {
|
|
|
72
72
|
"block w-full px-3 py-1.5 text-left text-sm",
|
|
73
73
|
item.active ? "font-medium text-zinc-900 dark:text-white" : "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]"
|
|
74
74
|
);
|
|
75
|
-
if (item.href && !item.active) {
|
|
76
|
-
|
|
75
|
+
if ((item.href || item.as) && !item.active) {
|
|
76
|
+
const Link = item.as ?? "a";
|
|
77
|
+
return /* @__PURE__ */ jsx(
|
|
78
|
+
Link,
|
|
79
|
+
{
|
|
80
|
+
...item.href ? { href: item.href } : {},
|
|
81
|
+
className: cls,
|
|
82
|
+
onClick: () => {
|
|
83
|
+
item.onClick?.();
|
|
84
|
+
setOpen(false);
|
|
85
|
+
},
|
|
86
|
+
children: item.label
|
|
87
|
+
},
|
|
88
|
+
i
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
if (item.onClick && !item.active) {
|
|
92
|
+
const onClick = item.onClick;
|
|
93
|
+
return /* @__PURE__ */ jsx(
|
|
94
|
+
"button",
|
|
95
|
+
{
|
|
96
|
+
type: "button",
|
|
97
|
+
className: cn(cls, "cursor-pointer border-0 bg-transparent"),
|
|
98
|
+
onClick: () => {
|
|
99
|
+
onClick();
|
|
100
|
+
setOpen(false);
|
|
101
|
+
},
|
|
102
|
+
children: item.label
|
|
103
|
+
},
|
|
104
|
+
i
|
|
105
|
+
);
|
|
77
106
|
}
|
|
78
107
|
return /* @__PURE__ */ jsx("span", { className: cls, children: item.label }, i);
|
|
79
108
|
}) })
|
|
@@ -95,6 +124,8 @@ function BreadcrumbsRoot({
|
|
|
95
124
|
return {
|
|
96
125
|
label: el.props?.children,
|
|
97
126
|
href: el.props?.href,
|
|
127
|
+
as: el.props?.as,
|
|
128
|
+
onClick: el.props?.onClick,
|
|
98
129
|
active: el.props?.active
|
|
99
130
|
};
|
|
100
131
|
});
|
|
@@ -135,5 +166,5 @@ var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
|
|
|
135
166
|
});
|
|
136
167
|
|
|
137
168
|
export { Breadcrumbs };
|
|
138
|
-
//# sourceMappingURL=chunk-
|
|
139
|
-
//# sourceMappingURL=chunk-
|
|
169
|
+
//# sourceMappingURL=chunk-WJHPZS3U.js.map
|
|
170
|
+
//# sourceMappingURL=chunk-WJHPZS3U.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsItem.tsx","../src/components/Breadcrumbs/BreadcrumbsDropdown.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["jsx","useState","jsxs","Fragment"],"mappings":"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","file":"chunk-WJHPZS3U.js","sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nexport function BreadcrumbsItem({\n children,\n href,\n as: As,\n active = false,\n onClick,\n className,\n ...rest\n}: BreadcrumbsItemProps) {\n const baseClass = cn(\n \"text-sm\",\n active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n className,\n );\n\n // The CURRENT crumb stays a <span> even with `as`: it is the page you are on,\n // so a link to it is a link to nowhere, and `aria-current=\"page\"` is the point.\n if ((href || As) && !active) {\n const Link = (As ?? \"a\") as ElementType;\n\n return (\n <Link\n data-react-fancy-breadcrumbs-item=\"\"\n {...(href ? { href } : {})}\n onClick={onClick}\n className={baseClass}\n {...rest}\n >\n {children}\n </Link>\n );\n }\n\n // A crumb that navigates through a callback rather than a URL. Controlled\n // components own their navigation and have no href to give — a repository\n // browser walking directories, a wizard stepping back — and until this\n // existed the only way to make such a crumb clickable was to nest a button\n // inside the span below, which is interactive content inside a non-\n // interactive element.\n if (onClick && !active) {\n return (\n <button\n type=\"button\"\n data-react-fancy-breadcrumbs-item=\"\"\n onClick={onClick}\n className={cn(baseClass, \"cursor-pointer border-0 bg-transparent p-0\")}\n {...rest}\n >\n {children}\n </button>\n );\n }\n\n return (\n <span data-react-fancy-breadcrumbs-item=\"\" className={baseClass} aria-current={active ? \"page\" : undefined} {...rest}>\n {children}\n </span>\n );\n}\n\nBreadcrumbsItem.displayName = \"BreadcrumbsItem\";\n","import { useState, useRef, type ElementType, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\n\ninterface BreadcrumbsDropdownItem {\n label: ReactNode;\n href?: string;\n as?: ElementType;\n onClick?: () => void;\n active?: boolean;\n}\n\ninterface BreadcrumbsDropdownProps {\n items: BreadcrumbsDropdownItem[];\n activeLabel: ReactNode;\n}\n\nexport function BreadcrumbsDropdown({ items, activeLabel }: BreadcrumbsDropdownProps) {\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n useOutsideClick(ref, () => setOpen(false), open);\n useEscapeKey(() => setOpen(false), open);\n\n return (\n <div ref={ref} data-react-fancy-breadcrumbs-dropdown=\"\" className=\"relative flex md:hidden\">\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className=\"flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n >\n {activeLabel}\n <ChevronDown size={14} className={cn(\"transition-transform\", open && \"rotate-180\")} />\n </button>\n {open && (\n <div className=\"absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n {items.map((item, i) => {\n const cls = cn(\n \"block w-full px-3 py-1.5 text-left text-sm\",\n item.active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n );\n\n // Mirrors BreadcrumbsItem: href / `as` wins, then onClick, and the\n // active crumb stays inert whatever it carries.\n if ((item.href || item.as) && !item.active) {\n const Link = (item.as ?? \"a\") as ElementType;\n return (\n <Link\n key={i}\n {...(item.href ? { href: item.href } : {})}\n className={cls}\n onClick={() => {\n item.onClick?.();\n setOpen(false);\n }}\n >\n {item.label}\n </Link>\n );\n }\n\n if (item.onClick && !item.active) {\n const onClick = item.onClick;\n return (\n <button\n key={i}\n type=\"button\"\n className={cn(cls, \"cursor-pointer border-0 bg-transparent\")}\n onClick={() => {\n onClick();\n setOpen(false);\n }}\n >\n {item.label}\n </button>\n );\n }\n\n return (\n <span key={i} className={cls}>\n {item.label}\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nBreadcrumbsDropdown.displayName = \"BreadcrumbsDropdown\";\n","import { Children, Fragment, useState, type ReactElement } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { BreadcrumbsItem } from \"./BreadcrumbsItem\";\nimport { BreadcrumbsDropdown } from \"./BreadcrumbsDropdown\";\nimport type { BreadcrumbsProps, BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nfunction BreadcrumbsRoot({\n children,\n separator,\n shrink,\n className,\n}: BreadcrumbsProps) {\n const items = Children.toArray(children);\n const [expanded, setExpanded] = useState(false);\n\n const sep = separator ?? (\n <ChevronRight size={12} className=\"text-zinc-400\" />\n );\n\n const lastItem = items[items.length - 1];\n\n // Extract info from children for mobile dropdown\n const dropdownItems = items.map((child) => {\n const el = child as ReactElement<BreadcrumbsItemProps>;\n return {\n label: el.props?.children,\n href: el.props?.href,\n as: el.props?.as,\n onClick: el.props?.onClick,\n active: el.props?.active,\n };\n });\n\n const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? \"Menu\";\n\n const showShrunk = shrink && !expanded && items.length > 1;\n\n return (\n <>\n {/* Desktop trail */}\n <nav\n data-react-fancy-breadcrumbs=\"\"\n aria-label=\"Breadcrumb\"\n className={cn(\"hidden items-center gap-2 md:flex\", className)}\n onMouseLeave={() => shrink && setExpanded(false)}\n >\n {showShrunk ? (\n <>\n <button\n type=\"button\"\n onClick={() => setExpanded(true)}\n onMouseEnter={() => setExpanded(true)}\n className=\"text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n >\n ...\n </button>\n <span aria-hidden=\"true\">{sep}</span>\n {lastItem}\n </>\n ) : (\n items.map((child, i) => (\n <Fragment key={i}>\n {i > 0 && <span aria-hidden=\"true\">{sep}</span>}\n {child}\n </Fragment>\n ))\n )}\n </nav>\n\n {/* Mobile dropdown */}\n <BreadcrumbsDropdown items={dropdownItems} activeLabel={activeLabel} />\n </>\n );\n}\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n Item: BreadcrumbsItem,\n});\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -10,7 +10,7 @@ var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
|
|
|
10
10
|
var chunkDJB3N4G3_cjs = require('./chunk-DJB3N4G3.cjs');
|
|
11
11
|
require('./chunk-URTLYNZI.cjs');
|
|
12
12
|
require('./chunk-QGPMVFZJ.cjs');
|
|
13
|
-
var
|
|
13
|
+
var chunkKOAMRCSC_cjs = require('./chunk-KOAMRCSC.cjs');
|
|
14
14
|
var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
|
|
15
15
|
var chunk4DL2U23D_cjs = require('./chunk-4DL2U23D.cjs');
|
|
16
16
|
var chunkYH75G6SP_cjs = require('./chunk-YH75G6SP.cjs');
|
|
@@ -24,7 +24,7 @@ var chunk7DDUMW4R_cjs = require('./chunk-7DDUMW4R.cjs');
|
|
|
24
24
|
var chunkFVQO75KY_cjs = require('./chunk-FVQO75KY.cjs');
|
|
25
25
|
var chunkATJSHM6J_cjs = require('./chunk-ATJSHM6J.cjs');
|
|
26
26
|
var chunkYJXP6AOL_cjs = require('./chunk-YJXP6AOL.cjs');
|
|
27
|
-
var
|
|
27
|
+
var chunkRZUYCZ5D_cjs = require('./chunk-RZUYCZ5D.cjs');
|
|
28
28
|
require('./chunk-XURQVDCN.cjs');
|
|
29
29
|
var chunkOUNGGQIS_cjs = require('./chunk-OUNGGQIS.cjs');
|
|
30
30
|
var chunkOASSZI6M_cjs = require('./chunk-OASSZI6M.cjs');
|
|
@@ -117,7 +117,7 @@ require('./chunk-VBWRH4UW.cjs');
|
|
|
117
117
|
var chunkOCHUZ7J3_cjs = require('./chunk-OCHUZ7J3.cjs');
|
|
118
118
|
require('./chunk-X6LGRB4H.cjs');
|
|
119
119
|
var chunkQUKUX5KU_cjs = require('./chunk-QUKUX5KU.cjs');
|
|
120
|
-
var
|
|
120
|
+
var chunkEWE776WI_cjs = require('./chunk-EWE776WI.cjs');
|
|
121
121
|
var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
|
|
122
122
|
var chunkOUYC6EIL_cjs = require('./chunk-OUYC6EIL.cjs');
|
|
123
123
|
require('./chunk-M5MUGSON.cjs');
|
|
@@ -245,7 +245,7 @@ Object.defineProperty(exports, "CheckboxGroup", {
|
|
|
245
245
|
});
|
|
246
246
|
Object.defineProperty(exports, "MultiSwitch", {
|
|
247
247
|
enumerable: true,
|
|
248
|
-
get: function () { return
|
|
248
|
+
get: function () { return chunkKOAMRCSC_cjs.MultiSwitch; }
|
|
249
249
|
});
|
|
250
250
|
Object.defineProperty(exports, "RadioGroup", {
|
|
251
251
|
enumerable: true,
|
|
@@ -317,11 +317,11 @@ Object.defineProperty(exports, "Table", {
|
|
|
317
317
|
});
|
|
318
318
|
Object.defineProperty(exports, "Tabs", {
|
|
319
319
|
enumerable: true,
|
|
320
|
-
get: function () { return
|
|
320
|
+
get: function () { return chunkRZUYCZ5D_cjs.Tabs; }
|
|
321
321
|
});
|
|
322
322
|
Object.defineProperty(exports, "useTabs", {
|
|
323
323
|
enumerable: true,
|
|
324
|
-
get: function () { return
|
|
324
|
+
get: function () { return chunkRZUYCZ5D_cjs.useTabs; }
|
|
325
325
|
});
|
|
326
326
|
Object.defineProperty(exports, "PromptInput", {
|
|
327
327
|
enumerable: true,
|
|
@@ -881,7 +881,7 @@ Object.defineProperty(exports, "BrandMark", {
|
|
|
881
881
|
});
|
|
882
882
|
Object.defineProperty(exports, "Breadcrumbs", {
|
|
883
883
|
enumerable: true,
|
|
884
|
-
get: function () { return
|
|
884
|
+
get: function () { return chunkEWE776WI_cjs.Breadcrumbs; }
|
|
885
885
|
});
|
|
886
886
|
Object.defineProperty(exports, "useOutsideClick", {
|
|
887
887
|
enumerable: true,
|
package/dist/index.js
CHANGED
|
@@ -8,7 +8,7 @@ export { Checkbox } from './chunk-OTM7RL2L.js';
|
|
|
8
8
|
export { CheckboxGroup } from './chunk-TAYJSIOP.js';
|
|
9
9
|
import './chunk-V4EARA4F.js';
|
|
10
10
|
import './chunk-SHDSKHCC.js';
|
|
11
|
-
export { MultiSwitch } from './chunk-
|
|
11
|
+
export { MultiSwitch } from './chunk-3S5ED522.js';
|
|
12
12
|
export { RadioGroup } from './chunk-4FH2JHUY.js';
|
|
13
13
|
export { TimeGrid } from './chunk-MLZGGAXQ.js';
|
|
14
14
|
export { TimePicker } from './chunk-AZQXPI5S.js';
|
|
@@ -22,7 +22,7 @@ export { Stat, StatBand } from './chunk-KC3PYCBO.js';
|
|
|
22
22
|
export { StatList } from './chunk-SXXDTW7S.js';
|
|
23
23
|
export { StickyNote } from './chunk-CCG2L5EH.js';
|
|
24
24
|
export { Table } from './chunk-YAPGHVBZ.js';
|
|
25
|
-
export { Tabs, useTabs } from './chunk-
|
|
25
|
+
export { Tabs, useTabs } from './chunk-FR4RHVPR.js';
|
|
26
26
|
import './chunk-TMR56BBE.js';
|
|
27
27
|
export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel, promptDataUrlToFile, promptFileToDataUrl } from './chunk-B6WTCAGY.js';
|
|
28
28
|
export { Tooltip } from './chunk-GR2WKBER.js';
|
|
@@ -115,7 +115,7 @@ import './chunk-IQ4KQJAO.js';
|
|
|
115
115
|
export { Badge } from './chunk-OZ4QFJ7N.js';
|
|
116
116
|
import './chunk-S53A6JIE.js';
|
|
117
117
|
export { Brand, BrandMark } from './chunk-FWAVMWMP.js';
|
|
118
|
-
export { Breadcrumbs } from './chunk-
|
|
118
|
+
export { Breadcrumbs } from './chunk-WJHPZS3U.js';
|
|
119
119
|
export { useOutsideClick } from './chunk-RGANGU7X.js';
|
|
120
120
|
export { EscapeLayerContext, useEscapeKey, useEscapeLayer } from './chunk-YX6FTJ6N.js';
|
|
121
121
|
import './chunk-LQ4ICCN2.js';
|
package/dist/inputs.cjs
CHANGED
|
@@ -10,7 +10,7 @@ var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
|
|
|
10
10
|
var chunkDJB3N4G3_cjs = require('./chunk-DJB3N4G3.cjs');
|
|
11
11
|
require('./chunk-URTLYNZI.cjs');
|
|
12
12
|
require('./chunk-QGPMVFZJ.cjs');
|
|
13
|
-
var
|
|
13
|
+
var chunkKOAMRCSC_cjs = require('./chunk-KOAMRCSC.cjs');
|
|
14
14
|
var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
|
|
15
15
|
require('./chunk-I27K6NLX.cjs');
|
|
16
16
|
var chunk7JLKOVHX_cjs = require('./chunk-7JLKOVHX.cjs');
|
|
@@ -59,7 +59,7 @@ Object.defineProperty(exports, "CheckboxGroup", {
|
|
|
59
59
|
});
|
|
60
60
|
Object.defineProperty(exports, "MultiSwitch", {
|
|
61
61
|
enumerable: true,
|
|
62
|
-
get: function () { return
|
|
62
|
+
get: function () { return chunkKOAMRCSC_cjs.MultiSwitch; }
|
|
63
63
|
});
|
|
64
64
|
Object.defineProperty(exports, "RadioGroup", {
|
|
65
65
|
enumerable: true,
|
package/dist/inputs.js
CHANGED
|
@@ -8,7 +8,7 @@ export { Checkbox } from './chunk-OTM7RL2L.js';
|
|
|
8
8
|
export { CheckboxGroup } from './chunk-TAYJSIOP.js';
|
|
9
9
|
import './chunk-V4EARA4F.js';
|
|
10
10
|
import './chunk-SHDSKHCC.js';
|
|
11
|
-
export { MultiSwitch } from './chunk-
|
|
11
|
+
export { MultiSwitch } from './chunk-3S5ED522.js';
|
|
12
12
|
export { RadioGroup } from './chunk-4FH2JHUY.js';
|
|
13
13
|
import './chunk-SV5BW3IA.js';
|
|
14
14
|
export { Select } from './chunk-XIA2UAVO.js';
|
package/dist/multi-switch.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkKOAMRCSC_cjs = require('./chunk-KOAMRCSC.cjs');
|
|
4
4
|
require('./chunk-I27K6NLX.cjs');
|
|
5
5
|
require('./chunk-P53432AK.cjs');
|
|
6
6
|
require('./chunk-QF7CD4JH.cjs');
|
|
@@ -14,7 +14,7 @@ require('./chunk-ZU5Q77OT.cjs');
|
|
|
14
14
|
|
|
15
15
|
Object.defineProperty(exports, "MultiSwitch", {
|
|
16
16
|
enumerable: true,
|
|
17
|
-
get: function () { return
|
|
17
|
+
get: function () { return chunkKOAMRCSC_cjs.MultiSwitch; }
|
|
18
18
|
});
|
|
19
19
|
//# sourceMappingURL=multi-switch.cjs.map
|
|
20
20
|
//# sourceMappingURL=multi-switch.cjs.map
|
package/dist/multi-switch.js
CHANGED
package/dist/tabs.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkRZUYCZ5D_cjs = require('./chunk-RZUYCZ5D.cjs');
|
|
4
|
+
require('./chunk-I27K6NLX.cjs');
|
|
4
5
|
require('./chunk-SNHU2AI4.cjs');
|
|
5
6
|
require('./chunk-ZU5Q77OT.cjs');
|
|
6
7
|
|
|
@@ -8,11 +9,11 @@ require('./chunk-ZU5Q77OT.cjs');
|
|
|
8
9
|
|
|
9
10
|
Object.defineProperty(exports, "Tabs", {
|
|
10
11
|
enumerable: true,
|
|
11
|
-
get: function () { return
|
|
12
|
+
get: function () { return chunkRZUYCZ5D_cjs.Tabs; }
|
|
12
13
|
});
|
|
13
14
|
Object.defineProperty(exports, "useTabs", {
|
|
14
15
|
enumerable: true,
|
|
15
|
-
get: function () { return
|
|
16
|
+
get: function () { return chunkRZUYCZ5D_cjs.useTabs; }
|
|
16
17
|
});
|
|
17
18
|
//# sourceMappingURL=tabs.cjs.map
|
|
18
19
|
//# sourceMappingURL=tabs.cjs.map
|
package/dist/tabs.js
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsItem.tsx","../src/components/Breadcrumbs/BreadcrumbsDropdown.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["cn","jsx","useState","useRef","useOutsideClick","useEscapeKey","jsxs","ChevronDown","Children","ChevronRight","Fragment"],"mappings":"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","file":"chunk-35S5BTZH.cjs","sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nexport function BreadcrumbsItem({\n children,\n href,\n as: As,\n active = false,\n onClick,\n className,\n ...rest\n}: BreadcrumbsItemProps) {\n const baseClass = cn(\n \"text-sm\",\n active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n className,\n );\n\n // The CURRENT crumb stays a <span> even with `as`: it is the page you are on,\n // so a link to it is a link to nowhere, and `aria-current=\"page\"` is the point.\n if ((href || As) && !active) {\n const Link = (As ?? \"a\") as ElementType;\n\n return (\n <Link\n data-react-fancy-breadcrumbs-item=\"\"\n {...(href ? { href } : {})}\n onClick={onClick}\n className={baseClass}\n {...rest}\n >\n {children}\n </Link>\n );\n }\n\n // A crumb that navigates through a callback rather than a URL. Controlled\n // components own their navigation and have no href to give — a repository\n // browser walking directories, a wizard stepping back — and until this\n // existed the only way to make such a crumb clickable was to nest a button\n // inside the span below, which is interactive content inside a non-\n // interactive element.\n if (onClick && !active) {\n return (\n <button\n type=\"button\"\n data-react-fancy-breadcrumbs-item=\"\"\n onClick={onClick}\n className={cn(baseClass, \"cursor-pointer border-0 bg-transparent p-0\")}\n {...rest}\n >\n {children}\n </button>\n );\n }\n\n return (\n <span data-react-fancy-breadcrumbs-item=\"\" className={baseClass} aria-current={active ? \"page\" : undefined} {...rest}>\n {children}\n </span>\n );\n}\n\nBreadcrumbsItem.displayName = \"BreadcrumbsItem\";\n","import { useState, useRef, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\n\ninterface BreadcrumbsDropdownItem {\n label: ReactNode;\n href?: string;\n active?: boolean;\n}\n\ninterface BreadcrumbsDropdownProps {\n items: BreadcrumbsDropdownItem[];\n activeLabel: ReactNode;\n}\n\nexport function BreadcrumbsDropdown({ items, activeLabel }: BreadcrumbsDropdownProps) {\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n useOutsideClick(ref, () => setOpen(false), open);\n useEscapeKey(() => setOpen(false), open);\n\n return (\n <div ref={ref} data-react-fancy-breadcrumbs-dropdown=\"\" className=\"relative flex md:hidden\">\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className=\"flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n >\n {activeLabel}\n <ChevronDown size={14} className={cn(\"transition-transform\", open && \"rotate-180\")} />\n </button>\n {open && (\n <div className=\"absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n {items.map((item, i) => {\n const cls = cn(\n \"block w-full px-3 py-1.5 text-left text-sm\",\n item.active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n );\n\n if (item.href && !item.active) {\n return (\n <a key={i} href={item.href} className={cls} onClick={() => setOpen(false)}>\n {item.label}\n </a>\n );\n }\n\n return (\n <span key={i} className={cls}>\n {item.label}\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nBreadcrumbsDropdown.displayName = \"BreadcrumbsDropdown\";\n","import { Children, Fragment, useState, type ReactElement } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { BreadcrumbsItem } from \"./BreadcrumbsItem\";\nimport { BreadcrumbsDropdown } from \"./BreadcrumbsDropdown\";\nimport type { BreadcrumbsProps, BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nfunction BreadcrumbsRoot({\n children,\n separator,\n shrink,\n className,\n}: BreadcrumbsProps) {\n const items = Children.toArray(children);\n const [expanded, setExpanded] = useState(false);\n\n const sep = separator ?? (\n <ChevronRight size={12} className=\"text-zinc-400\" />\n );\n\n const lastItem = items[items.length - 1];\n\n // Extract info from children for mobile dropdown\n const dropdownItems = items.map((child) => {\n const el = child as ReactElement<BreadcrumbsItemProps>;\n return {\n label: el.props?.children,\n href: el.props?.href,\n active: el.props?.active,\n };\n });\n\n const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? \"Menu\";\n\n const showShrunk = shrink && !expanded && items.length > 1;\n\n return (\n <>\n {/* Desktop trail */}\n <nav\n data-react-fancy-breadcrumbs=\"\"\n aria-label=\"Breadcrumb\"\n className={cn(\"hidden items-center gap-2 md:flex\", className)}\n onMouseLeave={() => shrink && setExpanded(false)}\n >\n {showShrunk ? (\n <>\n <button\n type=\"button\"\n onClick={() => setExpanded(true)}\n onMouseEnter={() => setExpanded(true)}\n className=\"text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n >\n ...\n </button>\n <span aria-hidden=\"true\">{sep}</span>\n {lastItem}\n </>\n ) : (\n items.map((child, i) => (\n <Fragment key={i}>\n {i > 0 && <span aria-hidden=\"true\">{sep}</span>}\n {child}\n </Fragment>\n ))\n )}\n </nav>\n\n {/* Mobile dropdown */}\n <BreadcrumbsDropdown items={dropdownItems} activeLabel={activeLabel} />\n </>\n );\n}\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n Item: BreadcrumbsItem,\n});\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsItem.tsx","../src/components/Breadcrumbs/BreadcrumbsDropdown.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["jsx","useState","jsxs","Fragment"],"mappings":";;;;;;;AAIO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA,EAAI,EAAA;AAAA,EACJ,MAAA,GAAS,KAAA;AAAA,EACT,OAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,EAAA;AAAA,IAChB,SAAA;AAAA,IACA,SACI,2CAAA,GACA,2QAAA;AAAA,IACJ;AAAA,GACF;AAIA,EAAA,IAAA,CAAK,IAAA,IAAQ,EAAA,KAAO,CAAC,MAAA,EAAQ;AAC3B,IAAA,MAAM,OAAQ,EAAA,IAAM,GAAA;AAEpB,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,mCAAA,EAAkC,EAAA;AAAA,QACjC,GAAI,IAAA,GAAO,EAAE,IAAA,KAAS,EAAC;AAAA,QACxB,OAAA;AAAA,QACA,SAAA,EAAW,SAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AAQA,EAAA,IAAI,OAAA,IAAW,CAAC,MAAA,EAAQ;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,mCAAA,EAAkC,EAAA;AAAA,QAClC,OAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,4CAA4C,CAAA;AAAA,QACpE,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,mCAAA,EAAkC,EAAA,EAAG,SAAA,EAAW,SAAA,EAAW,cAAA,EAAc,MAAA,GAAS,MAAA,GAAS,MAAA,EAAY,GAAG,IAAA,EAC7G,QAAA,EACH,CAAA;AAEJ;AAEA,eAAA,CAAgB,WAAA,GAAc,iBAAA;ACjDvB,SAAS,mBAAA,CAAoB,EAAE,KAAA,EAAO,WAAA,EAAY,EAA6B;AACpF,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AAEvC,EAAA,eAAA,CAAgB,GAAA,EAAK,MAAM,OAAA,CAAQ,KAAK,GAAG,IAAI,CAAA;AAC/C,EAAA,YAAA,CAAa,MAAM,OAAA,CAAQ,KAAK,CAAA,EAAG,IAAI,CAAA;AAEvC,EAAA,4BACG,KAAA,EAAA,EAAI,GAAA,EAAU,uCAAA,EAAsC,EAAA,EAAG,WAAU,yBAAA,EAChE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAS,MAAM,OAAA,CAAQ,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,QAChC,SAAA,EAAU,8OAAA;AAAA,QAET,QAAA,EAAA;AAAA,UAAA,WAAA;AAAA,0BACDA,GAAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,EAAA,EAAI,WAAW,EAAA,CAAG,sBAAA,EAAwB,IAAA,IAAQ,YAAY,CAAA,EAAG;AAAA;AAAA;AAAA,KACtF;AAAA,IACC,IAAA,oBACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oUACZ,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,KAAM;AACtB,MAAA,MAAM,GAAA,GAAM,EAAA;AAAA,QACV,4CAAA;AAAA,QACA,IAAA,CAAK,SACD,2CAAA,GACA;AAAA,OACN;AAEA,MAAA,IAAI,IAAA,CAAK,IAAA,IAAQ,CAAC,IAAA,CAAK,MAAA,EAAQ;AAC7B,QAAA,uBACEA,GAAAA,CAAC,GAAA,EAAA,EAAU,IAAA,EAAM,KAAK,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,OAAA,EAAS,MAAM,OAAA,CAAQ,KAAK,CAAA,EACrE,QAAA,EAAA,IAAA,CAAK,SADA,CAER,CAAA;AAAA,MAEJ;AAEA,MAAA,uBACEA,GAAAA,CAAC,MAAA,EAAA,EAAa,WAAW,GAAA,EACtB,QAAA,EAAA,IAAA,CAAK,SADG,CAEX,CAAA;AAAA,IAEJ,CAAC,CAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEA,mBAAA,CAAoB,WAAA,GAAc,qBAAA;ACzDlC,SAAS,eAAA,CAAgB;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AACvC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,SAAS,KAAK,CAAA;AAE9C,EAAA,MAAM,GAAA,GAAM,6BACVD,GAAAA,CAAC,gBAAa,IAAA,EAAM,EAAA,EAAI,WAAU,eAAA,EAAgB,CAAA;AAGpD,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA;AAGvC,EAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,GAAA,CAAI,CAAC,KAAA,KAAU;AACzC,IAAA,MAAM,EAAA,GAAK,KAAA;AACX,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,GAAG,KAAA,EAAO,QAAA;AAAA,MACjB,IAAA,EAAM,GAAG,KAAA,EAAO,IAAA;AAAA,MAChB,MAAA,EAAQ,GAAG,KAAA,EAAO;AAAA,KACpB;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,cAAc,aAAA,CAAc,aAAA,CAAc,MAAA,GAAS,CAAC,GAAG,KAAA,IAAS,MAAA;AAEtE,EAAA,MAAM,UAAA,GAAa,MAAA,IAAU,CAAC,QAAA,IAAY,MAAM,MAAA,GAAS,CAAA;AAEzD,EAAA,uBACEE,IAAAA,CAAAC,QAAAA,EAAA,EAEE,QAAA,EAAA;AAAA,oBAAAH,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,8BAAA,EAA6B,EAAA;AAAA,QAC7B,YAAA,EAAW,YAAA;AAAA,QACX,SAAA,EAAW,EAAA,CAAG,mCAAA,EAAqC,SAAS,CAAA;AAAA,QAC5D,YAAA,EAAc,MAAM,MAAA,IAAU,WAAA,CAAY,KAAK,CAAA;AAAA,QAE9C,QAAA,EAAA,UAAA,mBACCE,IAAAA,CAAAC,QAAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAH,GAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA;AAAA,cAC/B,YAAA,EAAc,MAAM,WAAA,CAAY,IAAI,CAAA;AAAA,cACpC,SAAA,EAAU,oEAAA;AAAA,cACX,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACAA,GAAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,QAAQ,QAAA,EAAA,GAAA,EAAI,CAAA;AAAA,UAC7B;AAAA,SAAA,EACH,CAAA,GAEA,MAAM,GAAA,CAAI,CAAC,OAAO,CAAA,qBAChBE,KAACC,UAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,CAAA,GAAI,qBAAKH,GAAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,QAAQ,QAAA,EAAA,GAAA,EAAI,CAAA;AAAA,UACvC;AAAA,SAAA,EAAA,EAFY,CAGf,CACD;AAAA;AAAA,KAEL;AAAA,oBAGAA,GAAAA,CAAC,mBAAA,EAAA,EAAoB,KAAA,EAAO,eAAe,WAAA,EAA0B;AAAA,GAAA,EACvE,CAAA;AAEJ;AAEO,IAAM,WAAA,GAAc,MAAA,CAAO,MAAA,CAAO,eAAA,EAAiB;AAAA,EACxD,IAAA,EAAM;AACR,CAAC","file":"chunk-A67EDGC7.js","sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nexport function BreadcrumbsItem({\n children,\n href,\n as: As,\n active = false,\n onClick,\n className,\n ...rest\n}: BreadcrumbsItemProps) {\n const baseClass = cn(\n \"text-sm\",\n active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n className,\n );\n\n // The CURRENT crumb stays a <span> even with `as`: it is the page you are on,\n // so a link to it is a link to nowhere, and `aria-current=\"page\"` is the point.\n if ((href || As) && !active) {\n const Link = (As ?? \"a\") as ElementType;\n\n return (\n <Link\n data-react-fancy-breadcrumbs-item=\"\"\n {...(href ? { href } : {})}\n onClick={onClick}\n className={baseClass}\n {...rest}\n >\n {children}\n </Link>\n );\n }\n\n // A crumb that navigates through a callback rather than a URL. Controlled\n // components own their navigation and have no href to give — a repository\n // browser walking directories, a wizard stepping back — and until this\n // existed the only way to make such a crumb clickable was to nest a button\n // inside the span below, which is interactive content inside a non-\n // interactive element.\n if (onClick && !active) {\n return (\n <button\n type=\"button\"\n data-react-fancy-breadcrumbs-item=\"\"\n onClick={onClick}\n className={cn(baseClass, \"cursor-pointer border-0 bg-transparent p-0\")}\n {...rest}\n >\n {children}\n </button>\n );\n }\n\n return (\n <span data-react-fancy-breadcrumbs-item=\"\" className={baseClass} aria-current={active ? \"page\" : undefined} {...rest}>\n {children}\n </span>\n );\n}\n\nBreadcrumbsItem.displayName = \"BreadcrumbsItem\";\n","import { useState, useRef, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\n\ninterface BreadcrumbsDropdownItem {\n label: ReactNode;\n href?: string;\n active?: boolean;\n}\n\ninterface BreadcrumbsDropdownProps {\n items: BreadcrumbsDropdownItem[];\n activeLabel: ReactNode;\n}\n\nexport function BreadcrumbsDropdown({ items, activeLabel }: BreadcrumbsDropdownProps) {\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n useOutsideClick(ref, () => setOpen(false), open);\n useEscapeKey(() => setOpen(false), open);\n\n return (\n <div ref={ref} data-react-fancy-breadcrumbs-dropdown=\"\" className=\"relative flex md:hidden\">\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className=\"flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n >\n {activeLabel}\n <ChevronDown size={14} className={cn(\"transition-transform\", open && \"rotate-180\")} />\n </button>\n {open && (\n <div className=\"absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n {items.map((item, i) => {\n const cls = cn(\n \"block w-full px-3 py-1.5 text-left text-sm\",\n item.active\n ? \"font-medium text-zinc-900 dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n );\n\n if (item.href && !item.active) {\n return (\n <a key={i} href={item.href} className={cls} onClick={() => setOpen(false)}>\n {item.label}\n </a>\n );\n }\n\n return (\n <span key={i} className={cls}>\n {item.label}\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nBreadcrumbsDropdown.displayName = \"BreadcrumbsDropdown\";\n","import { Children, Fragment, useState, type ReactElement } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { BreadcrumbsItem } from \"./BreadcrumbsItem\";\nimport { BreadcrumbsDropdown } from \"./BreadcrumbsDropdown\";\nimport type { BreadcrumbsProps, BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nfunction BreadcrumbsRoot({\n children,\n separator,\n shrink,\n className,\n}: BreadcrumbsProps) {\n const items = Children.toArray(children);\n const [expanded, setExpanded] = useState(false);\n\n const sep = separator ?? (\n <ChevronRight size={12} className=\"text-zinc-400\" />\n );\n\n const lastItem = items[items.length - 1];\n\n // Extract info from children for mobile dropdown\n const dropdownItems = items.map((child) => {\n const el = child as ReactElement<BreadcrumbsItemProps>;\n return {\n label: el.props?.children,\n href: el.props?.href,\n active: el.props?.active,\n };\n });\n\n const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? \"Menu\";\n\n const showShrunk = shrink && !expanded && items.length > 1;\n\n return (\n <>\n {/* Desktop trail */}\n <nav\n data-react-fancy-breadcrumbs=\"\"\n aria-label=\"Breadcrumb\"\n className={cn(\"hidden items-center gap-2 md:flex\", className)}\n onMouseLeave={() => shrink && setExpanded(false)}\n >\n {showShrunk ? (\n <>\n <button\n type=\"button\"\n onClick={() => setExpanded(true)}\n onMouseEnter={() => setExpanded(true)}\n className=\"text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n >\n ...\n </button>\n <span aria-hidden=\"true\">{sep}</span>\n {lastItem}\n </>\n ) : (\n items.map((child, i) => (\n <Fragment key={i}>\n {i > 0 && <span aria-hidden=\"true\">{sep}</span>}\n {child}\n </Fragment>\n ))\n )}\n </nav>\n\n {/* Mobile dropdown */}\n <BreadcrumbsDropdown items={dropdownItems} activeLabel={activeLabel} />\n </>\n );\n}\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n Item: BreadcrumbsItem,\n});\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tabs/Tabs.context.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTab.tsx","../src/components/Tabs/TabsPanels.tsx","../src/components/Tabs/TabsPanel.tsx","../src/components/Tabs/Tabs.tsx"],"names":["createContext","useContext","useRef","useCallback","jsx","cn","useControllableState","useMemo"],"mappings":"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","file":"chunk-CQ54H7DZ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TabsContextValue } from \"./Tabs.types\";\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n const ctx = useContext(TabsContext);\n if (!ctx) {\n throw new Error(\"Tabs compound components must be used within <Tabs>\");\n }\n return ctx;\n}\n","import { useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsListProps } from \"./Tabs.types\";\n\nexport function TabsList({ children, className }: TabsListProps) {\n const { variant } = useTabs();\n const listRef = useRef<HTMLDivElement>(null);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n const buttons = listRef.current?.querySelectorAll<HTMLButtonElement>(\n '[role=\"tab\"]:not([disabled])',\n );\n if (!buttons?.length) return;\n\n const items = Array.from(buttons);\n const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);\n\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[next].focus();\n items[next].click();\n } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prev].focus();\n items[prev].click();\n }\n }, []);\n\n return (\n <div\n data-react-fancy-tabs-list=\"\"\n ref={listRef}\n role=\"tablist\"\n onKeyDown={handleKeyDown}\n className={cn(\n \"flex\",\n variant === \"underline\" && \"gap-0 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n variant === \"pills\" && \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n variant === \"boxed\" &&\n \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n {children}\n </div>\n );\n}\n\nTabsList.displayName = \"TabsList\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsTabProps } from \"./Tabs.types\";\n\nexport function TabsTab({\n children,\n value,\n disabled = false,\n className,\n onClick,\n ...rest\n}: TabsTabProps) {\n const { activeTab, setActiveTab, variant } = useTabs();\n const isActive = activeTab === value;\n\n return (\n <button\n data-react-fancy-tabs-tab=\"\"\n type=\"button\"\n role=\"tab\"\n disabled={disabled}\n aria-selected={isActive}\n tabIndex={isActive ? 0 : -1}\n onClick={(e) => { if (!disabled) setActiveTab(value); onClick?.(e); }}\n {...rest}\n className={cn(\n \"text-sm font-medium transition-colors\",\n disabled && \"cursor-not-allowed opacity-50\",\n variant === \"underline\" && [\n \"border-b-2 px-4 py-2.5\",\n isActive\n ? \"border-zinc-900 text-zinc-900 dark:border-white dark:text-white\"\n : \"border-transparent text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:border-zinc-300 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n ],\n variant === \"pills\" && [\n \"rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n variant === \"boxed\" && [\n \"flex-1 rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n className,\n )}\n >\n {children}\n </button>\n );\n}\n\nTabsTab.displayName = \"TabsTab\";\n","import { cn } from \"../../utils/cn\";\nimport type { TabsPanelsProps } from \"./Tabs.types\";\n\nexport function TabsPanels({ children, className }: TabsPanelsProps) {\n return <div data-react-fancy-tabs-panels=\"\" className={cn(\"mt-4\", className)}>{children}</div>;\n}\n\nTabsPanels.displayName = \"TabsPanels\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsPanelProps } from \"./Tabs.types\";\n\nexport function TabsPanel({ children, value, className }: TabsPanelProps) {\n const { activeTab } = useTabs();\n\n if (activeTab !== value) return null;\n\n return (\n <div data-react-fancy-tabs-panel=\"\" role=\"tabpanel\" className={cn(\"fancy-fade-in\", className)}>\n {children}\n </div>\n );\n}\n\nTabsPanel.displayName = \"TabsPanel\";\n","import { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { TabsContext } from \"./Tabs.context\";\nimport { TabsList } from \"./TabsList\";\nimport { TabsTab } from \"./TabsTab\";\nimport { TabsPanels } from \"./TabsPanels\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nfunction TabsRoot({\n children,\n defaultTab = \"\",\n activeTab: controlledTab,\n onTabChange,\n variant = \"underline\",\n className,\n}: TabsProps) {\n const [activeTab, setActiveTab] = useControllableState(\n controlledTab,\n defaultTab,\n onTabChange,\n );\n\n const ctx = useMemo(\n () => ({ activeTab, setActiveTab, variant }),\n [activeTab, setActiveTab, variant],\n );\n\n return (\n <TabsContext.Provider value={ctx}>\n <div data-react-fancy-tabs=\"\" className={cn(className)}>{children}</div>\n </TabsContext.Provider>\n );\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Tab: TabsTab,\n Panels: TabsPanels,\n Panel: TabsPanel,\n});\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.colors.ts","../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":["useId","resolveOption","useFieldMode","useInlineEdit","useControllableState","useRef","useMemo","composeRefs","useState","useCallback","useEffect","DisplayValue","jsxs","cn","jsx","Field"],"mappings":"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","file":"chunk-IB673TEG.cjs","sourcesContent":["// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Shades follow badgeSolid: 600 / dark 500 for\n// the thumb, with dark label text on the light hues (amber, yellow, lime).\nimport type { Color } from \"../../../utils/types\";\n\nexport type MultiSwitchColorClasses = {\n /** The selected thumb's fill. */\n thumb: string;\n /** The selected option's label, readable on the thumb. */\n text: string;\n /** The container border while this option is selected. */\n border: string;\n};\n\nexport const multiSwitchColorClasses: Record<Color, MultiSwitchColorClasses> = {\n // The host's colour, from CSS variables -- no dark: variant, because a\n // host that themes per mode scopes the variables themselves.\n brand: { thumb: \"bg-brand\", text: \"text-brand-contrast\", border: \"border-brand\" },\n slate: { thumb: \"bg-slate-600 dark:bg-slate-500\", text: \"text-white\", border: \"border-slate-500 dark:border-slate-400\" },\n gray: { thumb: \"bg-gray-600 dark:bg-gray-500\", text: \"text-white\", border: \"border-gray-500 dark:border-gray-400\" },\n zinc: { thumb: \"bg-zinc-600 dark:bg-zinc-500\", text: \"text-white\", border: \"border-zinc-500 dark:border-zinc-400\" },\n neutral: { thumb: \"bg-neutral-600 dark:bg-neutral-500\", text: \"text-white\", border: \"border-neutral-500 dark:border-neutral-400\" },\n stone: { thumb: \"bg-stone-600 dark:bg-stone-500\", text: \"text-white\", border: \"border-stone-500 dark:border-stone-400\" },\n red: { thumb: \"bg-red-600 dark:bg-red-500\", text: \"text-white\", border: \"border-red-500 dark:border-red-400\" },\n orange: { thumb: \"bg-orange-600 dark:bg-orange-500\", text: \"text-white\", border: \"border-orange-500 dark:border-orange-400\" },\n amber: { thumb: \"bg-amber-400 dark:bg-amber-300\", text: \"text-amber-950\", border: \"border-amber-500 dark:border-amber-400\" },\n yellow: { thumb: \"bg-yellow-400 dark:bg-yellow-300\", text: \"text-yellow-950\", border: \"border-yellow-500 dark:border-yellow-400\" },\n lime: { thumb: \"bg-lime-400 dark:bg-lime-300\", text: \"text-lime-950\", border: \"border-lime-500 dark:border-lime-400\" },\n green: { thumb: \"bg-green-600 dark:bg-green-500\", text: \"text-white\", border: \"border-green-500 dark:border-green-400\" },\n emerald: { thumb: \"bg-emerald-600 dark:bg-emerald-500\", text: \"text-white\", border: \"border-emerald-500 dark:border-emerald-400\" },\n teal: { thumb: \"bg-teal-600 dark:bg-teal-500\", text: \"text-white\", border: \"border-teal-500 dark:border-teal-400\" },\n cyan: { thumb: \"bg-cyan-600 dark:bg-cyan-500\", text: \"text-white\", border: \"border-cyan-500 dark:border-cyan-400\" },\n sky: { thumb: \"bg-sky-600 dark:bg-sky-500\", text: \"text-white\", border: \"border-sky-500 dark:border-sky-400\" },\n blue: { thumb: \"bg-blue-600 dark:bg-blue-500\", text: \"text-white\", border: \"border-blue-500 dark:border-blue-400\" },\n indigo: { thumb: \"bg-indigo-600 dark:bg-indigo-500\", text: \"text-white\", border: \"border-indigo-500 dark:border-indigo-400\" },\n violet: { thumb: \"bg-violet-600 dark:bg-violet-500\", text: \"text-white\", border: \"border-violet-500 dark:border-violet-400\" },\n purple: { thumb: \"bg-purple-600 dark:bg-purple-500\", text: \"text-white\", border: \"border-purple-500 dark:border-purple-400\" },\n fuchsia: { thumb: \"bg-fuchsia-600 dark:bg-fuchsia-500\", text: \"text-white\", border: \"border-fuchsia-500 dark:border-fuchsia-400\" },\n pink: { thumb: \"bg-pink-600 dark:bg-pink-500\", text: \"text-white\", border: \"border-pink-500 dark:border-pink-400\" },\n rose: { thumb: \"bg-rose-600 dark:bg-rose-500\", text: \"text-white\", border: \"border-rose-500 dark:border-rose-400\" },\n};\n","import { useRef, useState, useEffect, useCallback, useId, useMemo, type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { composeRefs } from \"../../../utils/compose-refs\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { resolveOption } from \"../inputs.utils\";\nimport type { Color, Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\nimport { multiSwitchColorClasses } from \"./MultiSwitch.colors\";\n\nconst BORDER_DEFAULT =\n \"border-[color:var(--fancy-border-strong,var(--color-zinc-300))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))]\";\n\nconst sizeClasses: Record<Size, string> = {\n xs: \"px-2 py-1 text-xs\",\n sm: \"px-2.5 py-1.5 text-sm\",\n md: \"px-3 py-2 text-sm\",\n lg: \"px-4 py-2.5 text-base\",\n xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n size = \"md\",\n dirty,\n error,\n label,\n labelHidden,\n description,\n required,\n disabled,\n className,\n id,\n name,\n list,\n value: controlledValue,\n defaultValue,\n onValueChange,\n linear,\n mode,\n ...rest\n}: MultiSwitchProps<V>) {\n const reactId = useId();\n // A `<label for>` cannot name a div[role=\"radiogroup\"], so the group points at\n // the label instead. Needs an id the label and the group both agree on.\n const labelId = label ? `${id ?? reactId}-label` : undefined;\n\n // resolveOption hands an object option back as-is, so `color` survives it.\n const resolvedOptions = list.map(resolveOption) as Array<\n ReturnType<typeof resolveOption<V>> & { color?: Color }\n >;\n const fallback = defaultValue ?? resolvedOptions[0]?.value;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const externalRef = (rest as { ref?: Ref<HTMLDivElement> }).ref;\n const containerSetRef = useMemo(() => composeRefs(externalRef, containerRef), [externalRef]);\n const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);\n\n const selectedIndex = resolvedOptions.findIndex(\n (o) => o.value === value,\n );\n const selectedColor = resolvedOptions[selectedIndex]?.color;\n const colorClasses = selectedColor ? multiSwitchColorClasses[selectedColor] : undefined;\n\n const updateIndicator = useCallback(() => {\n const container = containerRef.current;\n const activeItem = itemRefs.current[selectedIndex];\n if (!container || !activeItem) {\n setIndicator(null);\n return;\n }\n const containerRect = container.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n setIndicator({\n left: itemRect.left - containerRect.left,\n width: itemRect.width,\n });\n }, [selectedIndex]);\n\n useEffect(() => {\n updateIndicator();\n }, [updateIndicator]);\n\n const control = !showControl ? (\n <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n {resolvedOptions.find((o) => o.value === value)?.label}\n </DisplayValue>\n ) : (\n <div\n {...rest}\n // React 19 passes `ref` to a function component as a plain prop, so a\n // caller's ref (Tooltip's anchor, or anyone's) arrives in `rest`. Spread\n // after `ref={containerRef}` it REPLACED the ref the thumb is measured\n // from, and the selected thumb never rendered. Feed both instead.\n ref={containerSetRef}\n data-react-fancy-multi-switch=\"\"\n role=\"radiogroup\"\n id={id}\n aria-labelledby={labelId}\n onBlur={(e) => {\n if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n }}\n className={cn(\n \"relative inline-flex rounded-lg border bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n colorClasses ? colorClasses.border : BORDER_DEFAULT,\n dirty && \"ring-2 ring-amber-400/50\",\n error && \"ring-2 ring-red-500/50\",\n disabled && \"opacity-50 cursor-not-allowed\",\n className,\n )}\n >\n {indicator && (\n <span\n data-react-fancy-multi-switch-thumb=\"\"\n data-color={selectedColor}\n className={\n colorClasses\n ? `absolute top-0 bottom-0 rounded-lg ${colorClasses.thumb} transition-all duration-200 ease-out`\n : \"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n }\n style={{ left: indicator.left, width: indicator.width }}\n />\n )}\n {resolvedOptions.map((option, index) => {\n const isSelected = option.value === value;\n return (\n <button\n key={String(option.value)}\n ref={(el) => { itemRefs.current[index] = el; }}\n type=\"button\"\n role=\"radio\"\n aria-checked={isSelected}\n disabled={disabled || option.disabled}\n autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n onClick={() => {\n if (linear) {\n const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n setValue(resolvedOptions[nextIndex].value as V);\n } else {\n setValue(option.value as V);\n }\n }}\n className={cn(\n \"relative z-10 font-medium transition-colors duration-200\",\n sizeClasses[size],\n isSelected\n ? (colorClasses?.text ?? \"text-white\")\n : \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n (disabled || option.disabled) && \"cursor-not-allowed\",\n )}\n >\n {option.label}\n </button>\n );\n })}\n {name && <input type=\"hidden\" name={name} value={String(value)} />}\n </div>\n );\n\n if (label || error || description) {\n return (\n <Field\n label={label}\n labelHidden={labelHidden}\n labelId={labelId}\n description={description}\n error={error}\n required={required}\n htmlFor={id}\n size={size}\n >\n {control}\n </Field>\n );\n }\n\n return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tabs/Tabs.context.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTab.tsx","../src/components/Tabs/TabsPanels.tsx","../src/components/Tabs/TabsPanel.tsx","../src/components/Tabs/Tabs.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-IU5WQUUC.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TabsContextValue } from \"./Tabs.types\";\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n const ctx = useContext(TabsContext);\n if (!ctx) {\n throw new Error(\"Tabs compound components must be used within <Tabs>\");\n }\n return ctx;\n}\n","import { useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsListProps } from \"./Tabs.types\";\n\nexport function TabsList({ children, className }: TabsListProps) {\n const { variant } = useTabs();\n const listRef = useRef<HTMLDivElement>(null);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n const buttons = listRef.current?.querySelectorAll<HTMLButtonElement>(\n '[role=\"tab\"]:not([disabled])',\n );\n if (!buttons?.length) return;\n\n const items = Array.from(buttons);\n const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);\n\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[next].focus();\n items[next].click();\n } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prev].focus();\n items[prev].click();\n }\n }, []);\n\n return (\n <div\n data-react-fancy-tabs-list=\"\"\n ref={listRef}\n role=\"tablist\"\n onKeyDown={handleKeyDown}\n className={cn(\n \"flex\",\n variant === \"underline\" && \"gap-0 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n variant === \"pills\" && \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n variant === \"boxed\" &&\n \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n {children}\n </div>\n );\n}\n\nTabsList.displayName = \"TabsList\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsTabProps } from \"./Tabs.types\";\n\nexport function TabsTab({\n children,\n value,\n disabled = false,\n className,\n onClick,\n ...rest\n}: TabsTabProps) {\n const { activeTab, setActiveTab, variant } = useTabs();\n const isActive = activeTab === value;\n\n return (\n <button\n data-react-fancy-tabs-tab=\"\"\n type=\"button\"\n role=\"tab\"\n disabled={disabled}\n aria-selected={isActive}\n tabIndex={isActive ? 0 : -1}\n onClick={(e) => { if (!disabled) setActiveTab(value); onClick?.(e); }}\n {...rest}\n className={cn(\n \"text-sm font-medium transition-colors\",\n disabled && \"cursor-not-allowed opacity-50\",\n variant === \"underline\" && [\n \"border-b-2 px-4 py-2.5\",\n isActive\n ? \"border-zinc-900 text-zinc-900 dark:border-white dark:text-white\"\n : \"border-transparent text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:border-zinc-300 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n ],\n variant === \"pills\" && [\n \"rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n variant === \"boxed\" && [\n \"flex-1 rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n className,\n )}\n >\n {children}\n </button>\n );\n}\n\nTabsTab.displayName = \"TabsTab\";\n","import { cn } from \"../../utils/cn\";\nimport type { TabsPanelsProps } from \"./Tabs.types\";\n\nexport function TabsPanels({ children, className }: TabsPanelsProps) {\n return <div data-react-fancy-tabs-panels=\"\" className={cn(\"mt-4\", className)}>{children}</div>;\n}\n\nTabsPanels.displayName = \"TabsPanels\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsPanelProps } from \"./Tabs.types\";\n\nexport function TabsPanel({ children, value, className }: TabsPanelProps) {\n const { activeTab } = useTabs();\n\n if (activeTab !== value) return null;\n\n return (\n <div data-react-fancy-tabs-panel=\"\" role=\"tabpanel\" className={cn(\"fancy-fade-in\", className)}>\n {children}\n </div>\n );\n}\n\nTabsPanel.displayName = \"TabsPanel\";\n","import { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { TabsContext } from \"./Tabs.context\";\nimport { TabsList } from \"./TabsList\";\nimport { TabsTab } from \"./TabsTab\";\nimport { TabsPanels } from \"./TabsPanels\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nfunction TabsRoot({\n children,\n defaultTab = \"\",\n activeTab: controlledTab,\n onTabChange,\n variant = \"underline\",\n className,\n}: TabsProps) {\n const [activeTab, setActiveTab] = useControllableState(\n controlledTab,\n defaultTab,\n onTabChange,\n );\n\n const ctx = useMemo(\n () => ({ activeTab, setActiveTab, variant }),\n [activeTab, setActiveTab, variant],\n );\n\n return (\n <TabsContext.Provider value={ctx}>\n <div data-react-fancy-tabs=\"\" className={cn(className)}>{children}</div>\n </TabsContext.Provider>\n );\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Tab: TabsTab,\n Panels: TabsPanels,\n Panel: TabsPanel,\n});\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.colors.ts","../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":[],"mappings":"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","file":"chunk-YUNOVQQJ.js","sourcesContent":["// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Shades follow badgeSolid: 600 / dark 500 for\n// the thumb, with dark label text on the light hues (amber, yellow, lime).\nimport type { Color } from \"../../../utils/types\";\n\nexport type MultiSwitchColorClasses = {\n /** The selected thumb's fill. */\n thumb: string;\n /** The selected option's label, readable on the thumb. */\n text: string;\n /** The container border while this option is selected. */\n border: string;\n};\n\nexport const multiSwitchColorClasses: Record<Color, MultiSwitchColorClasses> = {\n // The host's colour, from CSS variables -- no dark: variant, because a\n // host that themes per mode scopes the variables themselves.\n brand: { thumb: \"bg-brand\", text: \"text-brand-contrast\", border: \"border-brand\" },\n slate: { thumb: \"bg-slate-600 dark:bg-slate-500\", text: \"text-white\", border: \"border-slate-500 dark:border-slate-400\" },\n gray: { thumb: \"bg-gray-600 dark:bg-gray-500\", text: \"text-white\", border: \"border-gray-500 dark:border-gray-400\" },\n zinc: { thumb: \"bg-zinc-600 dark:bg-zinc-500\", text: \"text-white\", border: \"border-zinc-500 dark:border-zinc-400\" },\n neutral: { thumb: \"bg-neutral-600 dark:bg-neutral-500\", text: \"text-white\", border: \"border-neutral-500 dark:border-neutral-400\" },\n stone: { thumb: \"bg-stone-600 dark:bg-stone-500\", text: \"text-white\", border: \"border-stone-500 dark:border-stone-400\" },\n red: { thumb: \"bg-red-600 dark:bg-red-500\", text: \"text-white\", border: \"border-red-500 dark:border-red-400\" },\n orange: { thumb: \"bg-orange-600 dark:bg-orange-500\", text: \"text-white\", border: \"border-orange-500 dark:border-orange-400\" },\n amber: { thumb: \"bg-amber-400 dark:bg-amber-300\", text: \"text-amber-950\", border: \"border-amber-500 dark:border-amber-400\" },\n yellow: { thumb: \"bg-yellow-400 dark:bg-yellow-300\", text: \"text-yellow-950\", border: \"border-yellow-500 dark:border-yellow-400\" },\n lime: { thumb: \"bg-lime-400 dark:bg-lime-300\", text: \"text-lime-950\", border: \"border-lime-500 dark:border-lime-400\" },\n green: { thumb: \"bg-green-600 dark:bg-green-500\", text: \"text-white\", border: \"border-green-500 dark:border-green-400\" },\n emerald: { thumb: \"bg-emerald-600 dark:bg-emerald-500\", text: \"text-white\", border: \"border-emerald-500 dark:border-emerald-400\" },\n teal: { thumb: \"bg-teal-600 dark:bg-teal-500\", text: \"text-white\", border: \"border-teal-500 dark:border-teal-400\" },\n cyan: { thumb: \"bg-cyan-600 dark:bg-cyan-500\", text: \"text-white\", border: \"border-cyan-500 dark:border-cyan-400\" },\n sky: { thumb: \"bg-sky-600 dark:bg-sky-500\", text: \"text-white\", border: \"border-sky-500 dark:border-sky-400\" },\n blue: { thumb: \"bg-blue-600 dark:bg-blue-500\", text: \"text-white\", border: \"border-blue-500 dark:border-blue-400\" },\n indigo: { thumb: \"bg-indigo-600 dark:bg-indigo-500\", text: \"text-white\", border: \"border-indigo-500 dark:border-indigo-400\" },\n violet: { thumb: \"bg-violet-600 dark:bg-violet-500\", text: \"text-white\", border: \"border-violet-500 dark:border-violet-400\" },\n purple: { thumb: \"bg-purple-600 dark:bg-purple-500\", text: \"text-white\", border: \"border-purple-500 dark:border-purple-400\" },\n fuchsia: { thumb: \"bg-fuchsia-600 dark:bg-fuchsia-500\", text: \"text-white\", border: \"border-fuchsia-500 dark:border-fuchsia-400\" },\n pink: { thumb: \"bg-pink-600 dark:bg-pink-500\", text: \"text-white\", border: \"border-pink-500 dark:border-pink-400\" },\n rose: { thumb: \"bg-rose-600 dark:bg-rose-500\", text: \"text-white\", border: \"border-rose-500 dark:border-rose-400\" },\n};\n","import { useRef, useState, useEffect, useCallback, useId, useMemo, type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { composeRefs } from \"../../../utils/compose-refs\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { resolveOption } from \"../inputs.utils\";\nimport type { Color, Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\nimport { multiSwitchColorClasses } from \"./MultiSwitch.colors\";\n\nconst BORDER_DEFAULT =\n \"border-[color:var(--fancy-border-strong,var(--color-zinc-300))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))]\";\n\nconst sizeClasses: Record<Size, string> = {\n xs: \"px-2 py-1 text-xs\",\n sm: \"px-2.5 py-1.5 text-sm\",\n md: \"px-3 py-2 text-sm\",\n lg: \"px-4 py-2.5 text-base\",\n xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n size = \"md\",\n dirty,\n error,\n label,\n labelHidden,\n description,\n required,\n disabled,\n className,\n id,\n name,\n list,\n value: controlledValue,\n defaultValue,\n onValueChange,\n linear,\n mode,\n ...rest\n}: MultiSwitchProps<V>) {\n const reactId = useId();\n // A `<label for>` cannot name a div[role=\"radiogroup\"], so the group points at\n // the label instead. Needs an id the label and the group both agree on.\n const labelId = label ? `${id ?? reactId}-label` : undefined;\n\n // resolveOption hands an object option back as-is, so `color` survives it.\n const resolvedOptions = list.map(resolveOption) as Array<\n ReturnType<typeof resolveOption<V>> & { color?: Color }\n >;\n const fallback = defaultValue ?? resolvedOptions[0]?.value;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const externalRef = (rest as { ref?: Ref<HTMLDivElement> }).ref;\n const containerSetRef = useMemo(() => composeRefs(externalRef, containerRef), [externalRef]);\n const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);\n\n const selectedIndex = resolvedOptions.findIndex(\n (o) => o.value === value,\n );\n const selectedColor = resolvedOptions[selectedIndex]?.color;\n const colorClasses = selectedColor ? multiSwitchColorClasses[selectedColor] : undefined;\n\n const updateIndicator = useCallback(() => {\n const container = containerRef.current;\n const activeItem = itemRefs.current[selectedIndex];\n if (!container || !activeItem) {\n setIndicator(null);\n return;\n }\n const containerRect = container.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n setIndicator({\n left: itemRect.left - containerRect.left,\n width: itemRect.width,\n });\n }, [selectedIndex]);\n\n useEffect(() => {\n updateIndicator();\n }, [updateIndicator]);\n\n const control = !showControl ? (\n <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n {resolvedOptions.find((o) => o.value === value)?.label}\n </DisplayValue>\n ) : (\n <div\n {...rest}\n // React 19 passes `ref` to a function component as a plain prop, so a\n // caller's ref (Tooltip's anchor, or anyone's) arrives in `rest`. Spread\n // after `ref={containerRef}` it REPLACED the ref the thumb is measured\n // from, and the selected thumb never rendered. Feed both instead.\n ref={containerSetRef}\n data-react-fancy-multi-switch=\"\"\n role=\"radiogroup\"\n id={id}\n aria-labelledby={labelId}\n onBlur={(e) => {\n if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n }}\n className={cn(\n \"relative inline-flex rounded-lg border bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n colorClasses ? colorClasses.border : BORDER_DEFAULT,\n dirty && \"ring-2 ring-amber-400/50\",\n error && \"ring-2 ring-red-500/50\",\n disabled && \"opacity-50 cursor-not-allowed\",\n className,\n )}\n >\n {indicator && (\n <span\n data-react-fancy-multi-switch-thumb=\"\"\n data-color={selectedColor}\n className={\n colorClasses\n ? `absolute top-0 bottom-0 rounded-lg ${colorClasses.thumb} transition-all duration-200 ease-out`\n : \"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n }\n style={{ left: indicator.left, width: indicator.width }}\n />\n )}\n {resolvedOptions.map((option, index) => {\n const isSelected = option.value === value;\n return (\n <button\n key={String(option.value)}\n ref={(el) => { itemRefs.current[index] = el; }}\n type=\"button\"\n role=\"radio\"\n aria-checked={isSelected}\n disabled={disabled || option.disabled}\n autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n onClick={() => {\n if (linear) {\n const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n setValue(resolvedOptions[nextIndex].value as V);\n } else {\n setValue(option.value as V);\n }\n }}\n className={cn(\n \"relative z-10 font-medium transition-colors duration-200\",\n sizeClasses[size],\n isSelected\n ? (colorClasses?.text ?? \"text-white\")\n : \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n (disabled || option.disabled) && \"cursor-not-allowed\",\n )}\n >\n {option.label}\n </button>\n );\n })}\n {name && <input type=\"hidden\" name={name} value={String(value)} />}\n </div>\n );\n\n if (label || error || description) {\n return (\n <Field\n label={label}\n labelHidden={labelHidden}\n labelId={labelId}\n description={description}\n error={error}\n required={required}\n htmlFor={id}\n size={size}\n >\n {control}\n </Field>\n );\n }\n\n return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}
|