@particle-academy/react-fancy 5.54.0 → 5.54.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 +55 -0
- package/dist/button.cjs +4 -4
- package/dist/button.js +2 -2
- package/dist/chat-drawer.cjs +3 -3
- package/dist/chat-drawer.js +2 -2
- package/dist/chunk-2O5UXH5R.cjs +191 -0
- package/dist/chunk-2O5UXH5R.cjs.map +1 -0
- package/dist/{chunk-26JZ47BJ.js → chunk-45JO5BEZ.js} +17 -11
- package/dist/chunk-45JO5BEZ.js.map +1 -0
- package/dist/{chunk-TFKG5FSG.cjs → chunk-4I4Y5MZO.cjs} +4 -4
- package/dist/{chunk-TFKG5FSG.cjs.map → chunk-4I4Y5MZO.cjs.map} +1 -1
- package/dist/{chunk-2KFHSFFY.cjs → chunk-6GKR5OAW.cjs} +4 -4
- package/dist/{chunk-2KFHSFFY.cjs.map → chunk-6GKR5OAW.cjs.map} +1 -1
- package/dist/{chunk-X7H75WVP.cjs → chunk-BJKKW77L.cjs} +17 -8
- package/dist/chunk-BJKKW77L.cjs.map +1 -0
- package/dist/chunk-DXZCKDYS.js +189 -0
- package/dist/chunk-DXZCKDYS.js.map +1 -0
- package/dist/{chunk-EJ6P7K4G.js → chunk-EULOJOTU.js} +3 -3
- package/dist/{chunk-EJ6P7K4G.js.map → chunk-EULOJOTU.js.map} +1 -1
- package/dist/chunk-I27K6NLX.cjs +15 -0
- package/dist/chunk-I27K6NLX.cjs.map +1 -0
- package/dist/{chunk-N7ABDCQ6.cjs → chunk-I2TBENUQ.cjs} +11 -11
- package/dist/{chunk-N7ABDCQ6.cjs.map → chunk-I2TBENUQ.cjs.map} +1 -1
- package/dist/{chunk-IVRYSSM7.js → chunk-J3A4Z2P7.js} +2 -2
- package/dist/chunk-J3A4Z2P7.js.map +1 -0
- package/dist/{chunk-EEFWVFKO.js → chunk-KUJ5XRBD.js} +7 -4
- package/dist/chunk-KUJ5XRBD.js.map +1 -0
- package/dist/{chunk-QKFOJKVE.cjs → chunk-MXWR3T3N.cjs} +2 -2
- package/dist/chunk-MXWR3T3N.cjs.map +1 -0
- package/dist/{chunk-G4M3MCJO.cjs → chunk-ONHT2PDW.cjs} +4 -4
- package/dist/{chunk-G4M3MCJO.cjs.map → chunk-ONHT2PDW.cjs.map} +1 -1
- package/dist/{chunk-2MUGEPRD.js → chunk-REKY2CM6.js} +5 -5
- package/dist/{chunk-2MUGEPRD.js.map → chunk-REKY2CM6.js.map} +1 -1
- package/dist/chunk-SV5BW3IA.js +13 -0
- package/dist/chunk-SV5BW3IA.js.map +1 -0
- package/dist/{chunk-OC5OUZSD.js → chunk-TBXZ3NGR.js} +4 -4
- package/dist/{chunk-OC5OUZSD.js.map → chunk-TBXZ3NGR.js.map} +1 -1
- package/dist/{chunk-VP7MT7LH.cjs → chunk-TCW72JBU.cjs} +17 -17
- package/dist/{chunk-VP7MT7LH.cjs.map → chunk-TCW72JBU.cjs.map} +1 -1
- package/dist/{chunk-CF5KRDN4.js → chunk-TGBLDJ72.js} +18 -9
- package/dist/chunk-TGBLDJ72.js.map +1 -0
- package/dist/{chunk-QFC736WY.js → chunk-WE5WGVVX.js} +3 -3
- package/dist/{chunk-QFC736WY.js.map → chunk-WE5WGVVX.js.map} +1 -1
- package/dist/{chunk-YVTFODCJ.cjs → chunk-WUG646R4.cjs} +6 -3
- package/dist/chunk-WUG646R4.cjs.map +1 -0
- package/dist/{chunk-CAMQ5B3V.cjs → chunk-XOXA3QZR.cjs} +21 -15
- package/dist/chunk-XOXA3QZR.cjs.map +1 -0
- package/dist/{chunk-Y6LL3B5P.js → chunk-ZFU4FY3Q.js} +3 -3
- package/dist/{chunk-Y6LL3B5P.js.map → chunk-ZFU4FY3Q.js.map} +1 -1
- package/dist/icon.cjs +7 -7
- package/dist/icon.js +1 -1
- package/dist/index.cjs +40 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +11 -10
- package/dist/index.js.map +1 -1
- package/dist/inputs.cjs +5 -4
- package/dist/inputs.js +3 -2
- package/dist/json-editor.cjs +15 -15
- package/dist/json-editor.js +4 -4
- package/dist/magic-wand.cjs +4 -4
- package/dist/magic-wand.js +3 -3
- package/dist/multi-switch.cjs +3 -2
- package/dist/multi-switch.js +2 -1
- package/dist/prompt-input.cjs +6 -5
- package/dist/prompt-input.js +5 -4
- package/dist/reason-tag.cjs +4 -4
- package/dist/reason-tag.js +3 -3
- package/dist/switch.cjs +2 -2
- package/dist/switch.js +1 -1
- package/dist/tooltip.cjs +3 -2
- package/dist/tooltip.js +2 -1
- package/package.json +1 -1
- package/dist/chunk-26JZ47BJ.js.map +0 -1
- package/dist/chunk-CAMQ5B3V.cjs.map +0 -1
- package/dist/chunk-CF5KRDN4.js.map +0 -1
- package/dist/chunk-EEFWVFKO.js.map +0 -1
- package/dist/chunk-IVRYSSM7.js.map +0 -1
- package/dist/chunk-QKFOJKVE.cjs.map +0 -1
- package/dist/chunk-RVBTDXPD.cjs +0 -169
- package/dist/chunk-RVBTDXPD.cjs.map +0 -1
- package/dist/chunk-VQXXX6DK.js +0 -167
- package/dist/chunk-VQXXX6DK.js.map +0 -1
- package/dist/chunk-X7H75WVP.cjs.map +0 -1
- package/dist/chunk-YVTFODCJ.cjs.map +0 -1
package/dist/chunk-RVBTDXPD.cjs
DELETED
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkO3F6DYWR_cjs = require('./chunk-O3F6DYWR.cjs');
|
|
4
|
-
var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
|
|
5
|
-
var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
|
|
6
|
-
var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
|
|
7
|
-
var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
-
|
|
11
|
-
// src/components/inputs/Switch/Switch.colors.ts
|
|
12
|
-
var switchTrack = {
|
|
13
|
-
// The host's colour, from CSS variables -- no dark: variant, because a
|
|
14
|
-
// host that themes per mode scopes the variables themselves.
|
|
15
|
-
brand: "bg-brand",
|
|
16
|
-
slate: "bg-slate-500",
|
|
17
|
-
gray: "bg-gray-500",
|
|
18
|
-
zinc: "bg-zinc-500",
|
|
19
|
-
neutral: "bg-neutral-500",
|
|
20
|
-
stone: "bg-stone-500",
|
|
21
|
-
red: "bg-red-500",
|
|
22
|
-
orange: "bg-orange-500",
|
|
23
|
-
amber: "bg-amber-500",
|
|
24
|
-
yellow: "bg-yellow-500",
|
|
25
|
-
lime: "bg-lime-500",
|
|
26
|
-
green: "bg-green-500",
|
|
27
|
-
emerald: "bg-emerald-500",
|
|
28
|
-
teal: "bg-teal-500",
|
|
29
|
-
cyan: "bg-cyan-500",
|
|
30
|
-
sky: "bg-sky-500",
|
|
31
|
-
blue: "bg-blue-500",
|
|
32
|
-
indigo: "bg-indigo-500",
|
|
33
|
-
violet: "bg-violet-500",
|
|
34
|
-
purple: "bg-purple-500",
|
|
35
|
-
fuchsia: "bg-fuchsia-500",
|
|
36
|
-
pink: "bg-pink-500",
|
|
37
|
-
rose: "bg-rose-500"
|
|
38
|
-
};
|
|
39
|
-
var Switch = react.forwardRef(
|
|
40
|
-
({
|
|
41
|
-
size = "md",
|
|
42
|
-
dirty,
|
|
43
|
-
error,
|
|
44
|
-
label,
|
|
45
|
-
description,
|
|
46
|
-
required,
|
|
47
|
-
disabled,
|
|
48
|
-
className,
|
|
49
|
-
id,
|
|
50
|
-
name,
|
|
51
|
-
checked: controlledChecked,
|
|
52
|
-
defaultChecked = false,
|
|
53
|
-
onCheckedChange,
|
|
54
|
-
color = "blue",
|
|
55
|
-
mode,
|
|
56
|
-
...rest
|
|
57
|
-
}, ref) => {
|
|
58
|
-
const autoId = react.useId();
|
|
59
|
-
const switchId = id ?? autoId;
|
|
60
|
-
const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
|
|
61
|
-
const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
|
|
62
|
-
const [checked, setChecked] = chunkSNHU2AI4_cjs.useControllableState(
|
|
63
|
-
controlledChecked,
|
|
64
|
-
defaultChecked,
|
|
65
|
-
onCheckedChange
|
|
66
|
-
);
|
|
67
|
-
const trackSizes = {
|
|
68
|
-
xs: "h-3.5 w-6",
|
|
69
|
-
sm: "h-4 w-7",
|
|
70
|
-
md: "h-5 w-9",
|
|
71
|
-
lg: "h-6 w-11",
|
|
72
|
-
xl: "h-7 w-[52px]"
|
|
73
|
-
}[size];
|
|
74
|
-
const knobSizes = {
|
|
75
|
-
xs: "h-2.5 w-2.5",
|
|
76
|
-
sm: "h-3 w-3",
|
|
77
|
-
md: "h-4 w-4",
|
|
78
|
-
lg: "h-5 w-5",
|
|
79
|
-
xl: "h-6 w-6"
|
|
80
|
-
}[size];
|
|
81
|
-
const translateOn = {
|
|
82
|
-
xs: "translate-x-2.5",
|
|
83
|
-
sm: "translate-x-3",
|
|
84
|
-
md: "translate-x-4",
|
|
85
|
-
lg: "translate-x-5",
|
|
86
|
-
xl: "translate-x-6"
|
|
87
|
-
}[size];
|
|
88
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, "data-react-fancy-switch": "", className: chunkZU5Q77OT_cjs.cn("flex items-start gap-2", className), children: [
|
|
89
|
-
!showControl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
90
|
-
"span",
|
|
91
|
-
{
|
|
92
|
-
"data-react-fancy-display": "",
|
|
93
|
-
"data-mode": "view",
|
|
94
|
-
role: interactive ? "button" : void 0,
|
|
95
|
-
tabIndex: interactive ? 0 : void 0,
|
|
96
|
-
title: interactive ? "Click to edit" : void 0,
|
|
97
|
-
onClick: interactive ? enterEdit : void 0,
|
|
98
|
-
onKeyDown: interactive ? (e) => {
|
|
99
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
100
|
-
e.preventDefault();
|
|
101
|
-
enterEdit();
|
|
102
|
-
}
|
|
103
|
-
} : void 0,
|
|
104
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
105
|
-
"text-sm font-medium text-zinc-700 dark:text-zinc-200",
|
|
106
|
-
interactive && "cursor-pointer rounded-md outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white"
|
|
107
|
-
),
|
|
108
|
-
children: checked ? "On" : "Off"
|
|
109
|
-
}
|
|
110
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
111
|
-
"button",
|
|
112
|
-
{
|
|
113
|
-
ref,
|
|
114
|
-
id: switchId,
|
|
115
|
-
type: "button",
|
|
116
|
-
role: "switch",
|
|
117
|
-
"aria-checked": checked,
|
|
118
|
-
disabled,
|
|
119
|
-
autoFocus: interactive,
|
|
120
|
-
onBlur: () => {
|
|
121
|
-
if (interactive) exitEdit();
|
|
122
|
-
},
|
|
123
|
-
onClick: () => setChecked(!checked),
|
|
124
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
125
|
-
"relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
126
|
-
trackSizes,
|
|
127
|
-
checked ? switchTrack[color] : "bg-zinc-200 dark:bg-zinc-600",
|
|
128
|
-
chunkO3F6DYWR_cjs.dirtyRingClasses(dirty),
|
|
129
|
-
error && "ring-2 ring-red-500/50"
|
|
130
|
-
),
|
|
131
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
132
|
-
"span",
|
|
133
|
-
{
|
|
134
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
135
|
-
"pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform",
|
|
136
|
-
knobSizes,
|
|
137
|
-
checked ? translateOn : "translate-x-0"
|
|
138
|
-
)
|
|
139
|
-
}
|
|
140
|
-
)
|
|
141
|
-
}
|
|
142
|
-
),
|
|
143
|
-
name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: checked ? "1" : "0" }),
|
|
144
|
-
(label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
|
|
145
|
-
label && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
146
|
-
"label",
|
|
147
|
-
{
|
|
148
|
-
htmlFor: switchId,
|
|
149
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
150
|
-
"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
|
|
151
|
-
disabled && "cursor-not-allowed opacity-50"
|
|
152
|
-
),
|
|
153
|
-
children: [
|
|
154
|
-
label,
|
|
155
|
-
required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
|
|
156
|
-
]
|
|
157
|
-
}
|
|
158
|
-
),
|
|
159
|
-
description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: description }),
|
|
160
|
-
error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-500", children: error })
|
|
161
|
-
] })
|
|
162
|
-
] });
|
|
163
|
-
}
|
|
164
|
-
);
|
|
165
|
-
Switch.displayName = "Switch";
|
|
166
|
-
|
|
167
|
-
exports.Switch = Switch;
|
|
168
|
-
//# sourceMappingURL=chunk-RVBTDXPD.cjs.map
|
|
169
|
-
//# sourceMappingURL=chunk-RVBTDXPD.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/inputs/Switch/Switch.colors.ts","../src/components/inputs/Switch/Switch.tsx"],"names":["forwardRef","useId","useFieldMode","useInlineEdit","useControllableState","jsxs","cn","jsx","dirtyRingClasses"],"mappings":"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","file":"chunk-RVBTDXPD.cjs","sourcesContent":["// AUTO-GENERATED by scripts/gen-switch-colors — do not edit by hand.\n// 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). Regenerate after changing the palette.\nimport type { Color } from \"../../../utils/types\";\n\nexport const switchTrack: Record<Color, string> = {\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: \"bg-brand\",\n slate: \"bg-slate-500\",\n gray: \"bg-gray-500\",\n zinc: \"bg-zinc-500\",\n neutral: \"bg-neutral-500\",\n stone: \"bg-stone-500\",\n red: \"bg-red-500\",\n orange: \"bg-orange-500\",\n amber: \"bg-amber-500\",\n yellow: \"bg-yellow-500\",\n lime: \"bg-lime-500\",\n green: \"bg-green-500\",\n emerald: \"bg-emerald-500\",\n teal: \"bg-teal-500\",\n cyan: \"bg-cyan-500\",\n sky: \"bg-sky-500\",\n blue: \"bg-blue-500\",\n indigo: \"bg-indigo-500\",\n violet: \"bg-violet-500\",\n purple: \"bg-purple-500\",\n fuchsia: \"bg-fuchsia-500\",\n pink: \"bg-pink-500\",\n rose: \"bg-rose-500\",\n};\n","import { forwardRef, useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { dirtyRingClasses } from \"../inputs.utils\";\nimport type { SwitchProps } from \"./Switch.types\";\nimport { switchTrack } from \"./Switch.colors\";\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n size = \"md\",\n dirty,\n error,\n label,\n description,\n required,\n disabled,\n className,\n id,\n name,\n checked: controlledChecked,\n defaultChecked = false,\n onCheckedChange,\n color = \"blue\",\n mode,\n ...rest\n },\n ref,\n ) => {\n const autoId = useId();\n const switchId = id ?? autoId;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [checked, setChecked] = useControllableState(\n controlledChecked,\n defaultChecked,\n onCheckedChange,\n );\n\n const trackSizes = {\n xs: \"h-3.5 w-6\",\n sm: \"h-4 w-7\",\n md: \"h-5 w-9\",\n lg: \"h-6 w-11\",\n xl: \"h-7 w-[52px]\",\n }[size];\n\n const knobSizes = {\n xs: \"h-2.5 w-2.5\",\n sm: \"h-3 w-3\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n xl: \"h-6 w-6\",\n }[size];\n\n const translateOn = {\n xs: \"translate-x-2.5\",\n sm: \"translate-x-3\",\n md: \"translate-x-4\",\n lg: \"translate-x-5\",\n xl: \"translate-x-6\",\n }[size];\n\n return (\n <div {...rest} data-react-fancy-switch=\"\" className={cn(\"flex items-start gap-2\", className)}>\n {!showControl ? (\n <span\n data-react-fancy-display=\"\"\n data-mode=\"view\"\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n title={interactive ? \"Click to edit\" : undefined}\n onClick={interactive ? enterEdit : undefined}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n enterEdit();\n }\n }\n : undefined\n }\n className={cn(\n \"text-sm font-medium text-zinc-700 dark:text-zinc-200\",\n interactive &&\n \"cursor-pointer rounded-md outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white\",\n )}\n >\n {checked ? \"On\" : \"Off\"}\n </span>\n ) : (\n <button\n ref={ref}\n id={switchId}\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n autoFocus={interactive}\n onBlur={() => {\n if (interactive) exitEdit();\n }}\n onClick={() => setChecked(!checked)}\n className={cn(\n \"relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n trackSizes,\n checked ? switchTrack[color] : \"bg-zinc-200 dark:bg-zinc-600\",\n dirtyRingClasses(dirty),\n error && \"ring-2 ring-red-500/50\",\n )}\n >\n <span\n className={cn(\n \"pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform\",\n knobSizes,\n checked ? translateOn : \"translate-x-0\",\n )}\n />\n </button>\n )}\n {name && (\n <input type=\"hidden\" name={name} value={checked ? \"1\" : \"0\"} />\n )}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <label\n htmlFor={switchId}\n className={cn(\n \"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100\",\n disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n {label}\n {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n </label>\n )}\n {description && (\n <span className=\"text-xs text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">\n {description}\n </span>\n )}\n {error && <span className=\"text-xs text-red-500\">{error}</span>}\n </div>\n )}\n </div>\n );\n },\n);\n\nSwitch.displayName = \"Switch\";\n"]}
|
package/dist/chunk-VQXXX6DK.js
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import { dirtyRingClasses } from './chunk-USWQAMI3.js';
|
|
2
|
-
import { useInlineEdit } from './chunk-OL53XYHF.js';
|
|
3
|
-
import { useFieldMode } from './chunk-NRXK42LO.js';
|
|
4
|
-
import { useControllableState } from './chunk-EDYAXGUM.js';
|
|
5
|
-
import { cn } from './chunk-MMW2JGKZ.js';
|
|
6
|
-
import { forwardRef, useId } from 'react';
|
|
7
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
-
|
|
9
|
-
// src/components/inputs/Switch/Switch.colors.ts
|
|
10
|
-
var switchTrack = {
|
|
11
|
-
// The host's colour, from CSS variables -- no dark: variant, because a
|
|
12
|
-
// host that themes per mode scopes the variables themselves.
|
|
13
|
-
brand: "bg-brand",
|
|
14
|
-
slate: "bg-slate-500",
|
|
15
|
-
gray: "bg-gray-500",
|
|
16
|
-
zinc: "bg-zinc-500",
|
|
17
|
-
neutral: "bg-neutral-500",
|
|
18
|
-
stone: "bg-stone-500",
|
|
19
|
-
red: "bg-red-500",
|
|
20
|
-
orange: "bg-orange-500",
|
|
21
|
-
amber: "bg-amber-500",
|
|
22
|
-
yellow: "bg-yellow-500",
|
|
23
|
-
lime: "bg-lime-500",
|
|
24
|
-
green: "bg-green-500",
|
|
25
|
-
emerald: "bg-emerald-500",
|
|
26
|
-
teal: "bg-teal-500",
|
|
27
|
-
cyan: "bg-cyan-500",
|
|
28
|
-
sky: "bg-sky-500",
|
|
29
|
-
blue: "bg-blue-500",
|
|
30
|
-
indigo: "bg-indigo-500",
|
|
31
|
-
violet: "bg-violet-500",
|
|
32
|
-
purple: "bg-purple-500",
|
|
33
|
-
fuchsia: "bg-fuchsia-500",
|
|
34
|
-
pink: "bg-pink-500",
|
|
35
|
-
rose: "bg-rose-500"
|
|
36
|
-
};
|
|
37
|
-
var Switch = forwardRef(
|
|
38
|
-
({
|
|
39
|
-
size = "md",
|
|
40
|
-
dirty,
|
|
41
|
-
error,
|
|
42
|
-
label,
|
|
43
|
-
description,
|
|
44
|
-
required,
|
|
45
|
-
disabled,
|
|
46
|
-
className,
|
|
47
|
-
id,
|
|
48
|
-
name,
|
|
49
|
-
checked: controlledChecked,
|
|
50
|
-
defaultChecked = false,
|
|
51
|
-
onCheckedChange,
|
|
52
|
-
color = "blue",
|
|
53
|
-
mode,
|
|
54
|
-
...rest
|
|
55
|
-
}, ref) => {
|
|
56
|
-
const autoId = useId();
|
|
57
|
-
const switchId = id ?? autoId;
|
|
58
|
-
const resolvedMode = useFieldMode(mode);
|
|
59
|
-
const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
|
|
60
|
-
const [checked, setChecked] = useControllableState(
|
|
61
|
-
controlledChecked,
|
|
62
|
-
defaultChecked,
|
|
63
|
-
onCheckedChange
|
|
64
|
-
);
|
|
65
|
-
const trackSizes = {
|
|
66
|
-
xs: "h-3.5 w-6",
|
|
67
|
-
sm: "h-4 w-7",
|
|
68
|
-
md: "h-5 w-9",
|
|
69
|
-
lg: "h-6 w-11",
|
|
70
|
-
xl: "h-7 w-[52px]"
|
|
71
|
-
}[size];
|
|
72
|
-
const knobSizes = {
|
|
73
|
-
xs: "h-2.5 w-2.5",
|
|
74
|
-
sm: "h-3 w-3",
|
|
75
|
-
md: "h-4 w-4",
|
|
76
|
-
lg: "h-5 w-5",
|
|
77
|
-
xl: "h-6 w-6"
|
|
78
|
-
}[size];
|
|
79
|
-
const translateOn = {
|
|
80
|
-
xs: "translate-x-2.5",
|
|
81
|
-
sm: "translate-x-3",
|
|
82
|
-
md: "translate-x-4",
|
|
83
|
-
lg: "translate-x-5",
|
|
84
|
-
xl: "translate-x-6"
|
|
85
|
-
}[size];
|
|
86
|
-
return /* @__PURE__ */ jsxs("div", { ...rest, "data-react-fancy-switch": "", className: cn("flex items-start gap-2", className), children: [
|
|
87
|
-
!showControl ? /* @__PURE__ */ jsx(
|
|
88
|
-
"span",
|
|
89
|
-
{
|
|
90
|
-
"data-react-fancy-display": "",
|
|
91
|
-
"data-mode": "view",
|
|
92
|
-
role: interactive ? "button" : void 0,
|
|
93
|
-
tabIndex: interactive ? 0 : void 0,
|
|
94
|
-
title: interactive ? "Click to edit" : void 0,
|
|
95
|
-
onClick: interactive ? enterEdit : void 0,
|
|
96
|
-
onKeyDown: interactive ? (e) => {
|
|
97
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
98
|
-
e.preventDefault();
|
|
99
|
-
enterEdit();
|
|
100
|
-
}
|
|
101
|
-
} : void 0,
|
|
102
|
-
className: cn(
|
|
103
|
-
"text-sm font-medium text-zinc-700 dark:text-zinc-200",
|
|
104
|
-
interactive && "cursor-pointer rounded-md outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white"
|
|
105
|
-
),
|
|
106
|
-
children: checked ? "On" : "Off"
|
|
107
|
-
}
|
|
108
|
-
) : /* @__PURE__ */ jsx(
|
|
109
|
-
"button",
|
|
110
|
-
{
|
|
111
|
-
ref,
|
|
112
|
-
id: switchId,
|
|
113
|
-
type: "button",
|
|
114
|
-
role: "switch",
|
|
115
|
-
"aria-checked": checked,
|
|
116
|
-
disabled,
|
|
117
|
-
autoFocus: interactive,
|
|
118
|
-
onBlur: () => {
|
|
119
|
-
if (interactive) exitEdit();
|
|
120
|
-
},
|
|
121
|
-
onClick: () => setChecked(!checked),
|
|
122
|
-
className: cn(
|
|
123
|
-
"relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
124
|
-
trackSizes,
|
|
125
|
-
checked ? switchTrack[color] : "bg-zinc-200 dark:bg-zinc-600",
|
|
126
|
-
dirtyRingClasses(dirty),
|
|
127
|
-
error && "ring-2 ring-red-500/50"
|
|
128
|
-
),
|
|
129
|
-
children: /* @__PURE__ */ jsx(
|
|
130
|
-
"span",
|
|
131
|
-
{
|
|
132
|
-
className: cn(
|
|
133
|
-
"pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform",
|
|
134
|
-
knobSizes,
|
|
135
|
-
checked ? translateOn : "translate-x-0"
|
|
136
|
-
)
|
|
137
|
-
}
|
|
138
|
-
)
|
|
139
|
-
}
|
|
140
|
-
),
|
|
141
|
-
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "1" : "0" }),
|
|
142
|
-
(label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
|
|
143
|
-
label && /* @__PURE__ */ jsxs(
|
|
144
|
-
"label",
|
|
145
|
-
{
|
|
146
|
-
htmlFor: switchId,
|
|
147
|
-
className: cn(
|
|
148
|
-
"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
|
|
149
|
-
disabled && "cursor-not-allowed opacity-50"
|
|
150
|
-
),
|
|
151
|
-
children: [
|
|
152
|
-
label,
|
|
153
|
-
required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
|
|
154
|
-
]
|
|
155
|
-
}
|
|
156
|
-
),
|
|
157
|
-
description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: description }),
|
|
158
|
-
error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-500", children: error })
|
|
159
|
-
] })
|
|
160
|
-
] });
|
|
161
|
-
}
|
|
162
|
-
);
|
|
163
|
-
Switch.displayName = "Switch";
|
|
164
|
-
|
|
165
|
-
export { Switch };
|
|
166
|
-
//# sourceMappingURL=chunk-VQXXX6DK.js.map
|
|
167
|
-
//# sourceMappingURL=chunk-VQXXX6DK.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/inputs/Switch/Switch.colors.ts","../src/components/inputs/Switch/Switch.tsx"],"names":[],"mappings":"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","file":"chunk-VQXXX6DK.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-switch-colors — do not edit by hand.\n// 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). Regenerate after changing the palette.\nimport type { Color } from \"../../../utils/types\";\n\nexport const switchTrack: Record<Color, string> = {\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: \"bg-brand\",\n slate: \"bg-slate-500\",\n gray: \"bg-gray-500\",\n zinc: \"bg-zinc-500\",\n neutral: \"bg-neutral-500\",\n stone: \"bg-stone-500\",\n red: \"bg-red-500\",\n orange: \"bg-orange-500\",\n amber: \"bg-amber-500\",\n yellow: \"bg-yellow-500\",\n lime: \"bg-lime-500\",\n green: \"bg-green-500\",\n emerald: \"bg-emerald-500\",\n teal: \"bg-teal-500\",\n cyan: \"bg-cyan-500\",\n sky: \"bg-sky-500\",\n blue: \"bg-blue-500\",\n indigo: \"bg-indigo-500\",\n violet: \"bg-violet-500\",\n purple: \"bg-purple-500\",\n fuchsia: \"bg-fuchsia-500\",\n pink: \"bg-pink-500\",\n rose: \"bg-rose-500\",\n};\n","import { forwardRef, useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { dirtyRingClasses } from \"../inputs.utils\";\nimport type { SwitchProps } from \"./Switch.types\";\nimport { switchTrack } from \"./Switch.colors\";\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n size = \"md\",\n dirty,\n error,\n label,\n description,\n required,\n disabled,\n className,\n id,\n name,\n checked: controlledChecked,\n defaultChecked = false,\n onCheckedChange,\n color = \"blue\",\n mode,\n ...rest\n },\n ref,\n ) => {\n const autoId = useId();\n const switchId = id ?? autoId;\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [checked, setChecked] = useControllableState(\n controlledChecked,\n defaultChecked,\n onCheckedChange,\n );\n\n const trackSizes = {\n xs: \"h-3.5 w-6\",\n sm: \"h-4 w-7\",\n md: \"h-5 w-9\",\n lg: \"h-6 w-11\",\n xl: \"h-7 w-[52px]\",\n }[size];\n\n const knobSizes = {\n xs: \"h-2.5 w-2.5\",\n sm: \"h-3 w-3\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n xl: \"h-6 w-6\",\n }[size];\n\n const translateOn = {\n xs: \"translate-x-2.5\",\n sm: \"translate-x-3\",\n md: \"translate-x-4\",\n lg: \"translate-x-5\",\n xl: \"translate-x-6\",\n }[size];\n\n return (\n <div {...rest} data-react-fancy-switch=\"\" className={cn(\"flex items-start gap-2\", className)}>\n {!showControl ? (\n <span\n data-react-fancy-display=\"\"\n data-mode=\"view\"\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n title={interactive ? \"Click to edit\" : undefined}\n onClick={interactive ? enterEdit : undefined}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n enterEdit();\n }\n }\n : undefined\n }\n className={cn(\n \"text-sm font-medium text-zinc-700 dark:text-zinc-200\",\n interactive &&\n \"cursor-pointer rounded-md outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white\",\n )}\n >\n {checked ? \"On\" : \"Off\"}\n </span>\n ) : (\n <button\n ref={ref}\n id={switchId}\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n autoFocus={interactive}\n onBlur={() => {\n if (interactive) exitEdit();\n }}\n onClick={() => setChecked(!checked)}\n className={cn(\n \"relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n trackSizes,\n checked ? switchTrack[color] : \"bg-zinc-200 dark:bg-zinc-600\",\n dirtyRingClasses(dirty),\n error && \"ring-2 ring-red-500/50\",\n )}\n >\n <span\n className={cn(\n \"pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform\",\n knobSizes,\n checked ? translateOn : \"translate-x-0\",\n )}\n />\n </button>\n )}\n {name && (\n <input type=\"hidden\" name={name} value={checked ? \"1\" : \"0\"} />\n )}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <label\n htmlFor={switchId}\n className={cn(\n \"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100\",\n disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n {label}\n {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n </label>\n )}\n {description && (\n <span className=\"text-xs text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">\n {description}\n </span>\n )}\n {error && <span className=\"text-xs text-red-500\">{error}</span>}\n </div>\n )}\n </div>\n );\n },\n);\n\nSwitch.displayName = \"Switch\";\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Tooltip/Tooltip.tsx"],"names":["forwardRef","Tooltip","useState","useRef","useFloatingPosition","useCallback","cloneElement","jsxs","Fragment","Portal","cn","jsx"],"mappings":";;;;;;;;AAaO,IAAM,OAAA,GAAUA,gBAAA;AAAA,EACrB,SAASC,QAAAA,CACP,EAAE,QAAA,EAAU,OAAA,EAAS,SAAA,GAAY,KAAA,EAAO,KAAA,GAAQ,GAAA,EAAK,MAAA,GAAS,CAAA,EAAG,SAAA,IACjE,IAAA,EACA;AACA,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,IAAA,MAAM,SAAA,GAAYC,aAAoB,IAAI,CAAA;AAC1C,IAAA,MAAM,WAAA,GAAcA,aAAuB,IAAI,CAAA;AAC/C,IAAA,MAAM,UAAA,GAAaA,aAAsC,MAAS,CAAA;AAElE,IAAA,MAAM,QAAA,GAAWC,qCAAA,CAAoB,SAAA,EAAW,WAAA,EAAa;AAAA,MAC3D,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA,EAAS;AAAA,KACV,CAAA;AAED,IAAA,MAAM,IAAA,GAAOC,kBAAY,MAAM;AAC7B,MAAA,UAAA,CAAW,UAAU,UAAA,CAAW,MAAM,OAAA,CAAQ,IAAI,GAAG,KAAK,CAAA;AAAA,IAC5D,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,IAAA,MAAM,IAAA,GAAOA,kBAAY,MAAM;AAC7B,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,OAAA,GAAUC,mBAAa,QAAA,EAAmD;AAAA,MAC9E,GAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAc,IAAA;AAAA,MACd,YAAA,EAAc,IAAA;AAAA,MACd,OAAA,EAAS,IAAA;AAAA,MACT,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,MACA,IAAA,mCACEC,wBAAA,EAAA,EACC,QAAA,kBAAAF,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,0BAAA,EAAyB,EAAA;AAAA,UACzB,IAAA,EAAK,SAAA;AAAA,UACL,SAAA,EAAWG,oBAAA;AAAA,YACT,2JAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA,OAAO,EAAE,IAAA,EAAM,SAAS,CAAA,EAAG,GAAA,EAAK,SAAS,CAAA,EAAE;AAAA,UAE1C,QAAA,EAAA;AAAA,YAAA,OAAA;AAAA,4BACDC,cAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAWD,oBAAA;AAAA;AAAA;AAAA;AAAA,kBAIT,uCAAA;AAAA,kBACA,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,KAAK,CAAA,IACjC,yCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,QAAQ,CAAA,IACpC,sCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,MAAM,CAAA,IAClC,uCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,OAAO,CAAA,IACnC;AAAA;AACJ;AAAA;AACF;AAAA;AAAA,OACF,EACF;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-X7H75WVP.cjs","sourcesContent":["import {\n cloneElement,\n forwardRef,\n useCallback,\n useRef,\n useState,\n type ReactElement,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport type { TooltipProps } from \"./Tooltip.types\";\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(\n { children, content, placement = \"top\", delay = 200, offset = 8, className },\n _ref,\n ) {\n const [open, setOpen] = useState(false);\n const anchorRef = useRef<HTMLElement>(null);\n const floatingRef = useRef<HTMLDivElement>(null);\n const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const position = useFloatingPosition(anchorRef, floatingRef, {\n placement,\n offset,\n enabled: open,\n });\n\n const show = useCallback(() => {\n timeoutRef.current = setTimeout(() => setOpen(true), delay);\n }, [delay]);\n\n const hide = useCallback(() => {\n clearTimeout(timeoutRef.current);\n setOpen(false);\n }, []);\n\n const trigger = cloneElement(children as ReactElement<Record<string, unknown>>, {\n ref: anchorRef,\n onMouseEnter: show,\n onMouseLeave: hide,\n onFocus: show,\n onBlur: hide,\n });\n\n return (\n <>\n {trigger}\n {open && (\n <Portal>\n <div\n ref={floatingRef}\n data-react-fancy-tooltip=\"\"\n role=\"tooltip\"\n className={cn(\n \"fancy-fade-in pointer-events-none fixed z-50 max-w-xs rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-zinc-700 dark:text-zinc-100\",\n className,\n )}\n style={{ left: position.x, top: position.y }}\n >\n {content}\n <div\n className={cn(\n // `bg-inherit`, not a colour of its own: a `className` that\n // restyles the bubble would otherwise leave a dark arrow\n // pointing out of a light one.\n \"absolute h-2 w-2 rotate-45 bg-inherit\",\n position.placement.startsWith(\"top\") &&\n \"bottom-[-4px] left-1/2 -translate-x-1/2\",\n position.placement.startsWith(\"bottom\") &&\n \"top-[-4px] left-1/2 -translate-x-1/2\",\n position.placement.startsWith(\"left\") &&\n \"right-[-4px] top-1/2 -translate-y-1/2\",\n position.placement.startsWith(\"right\") &&\n \"left-[-4px] top-1/2 -translate-y-1/2\",\n )}\n />\n </div>\n </Portal>\n )}\n </>\n );\n },\n);\n\nTooltip.displayName = \"Tooltip\";\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":["useId","resolveOption","useFieldMode","useInlineEdit","useControllableState","useRef","useState","useCallback","useEffect","DisplayValue","jsxs","cn","jsx","Field"],"mappings":"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","file":"chunk-YVTFODCJ.cjs","sourcesContent":["import { useRef, useState, useEffect, useCallback, useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\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 { Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\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 const resolvedOptions = list.map(resolveOption);\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 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\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 ref={containerRef}\n {...rest}\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 border-[color:var(--fancy-border-strong,var(--color-zinc-300))] bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\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 className=\"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\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 ? \"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"]}
|