@particle-academy/react-fancy 5.22.0 → 5.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{FieldMode.context-C28RH8GR.d.cts → FieldMode.context-BOShROIw.d.cts} +1 -1
- package/dist/{FieldMode.context-Bv_wuS8V.d.ts → FieldMode.context-DNyItEKV.d.ts} +1 -1
- package/dist/autocomplete.d.cts +1 -1
- package/dist/autocomplete.d.ts +1 -1
- package/dist/checkbox-group.cjs +3 -3
- package/dist/checkbox-group.d.cts +2 -2
- package/dist/checkbox-group.d.ts +2 -2
- package/dist/checkbox-group.js +2 -2
- package/dist/checkbox.d.cts +1 -1
- package/dist/checkbox.d.ts +1 -1
- package/dist/chunk-4VVC46ZZ.js +37 -0
- package/dist/chunk-4VVC46ZZ.js.map +1 -0
- package/dist/{chunk-FERMW3YE.js → chunk-5MU6X3KO.js} +8 -3
- package/dist/chunk-5MU6X3KO.js.map +1 -0
- package/dist/{chunk-BZP4LOO5.cjs → chunk-5XTNJBC5.cjs} +16 -16
- package/dist/{chunk-BZP4LOO5.cjs.map → chunk-5XTNJBC5.cjs.map} +1 -1
- package/dist/chunk-7TGJFNZM.cjs +39 -0
- package/dist/chunk-7TGJFNZM.cjs.map +1 -0
- package/dist/{chunk-NP7SU2DF.cjs → chunk-BBOIFV27.cjs} +8 -3
- package/dist/chunk-BBOIFV27.cjs.map +1 -0
- package/dist/{chunk-UMJ3JMDT.cjs → chunk-BJYTI2ID.cjs} +21 -4
- package/dist/chunk-BJYTI2ID.cjs.map +1 -0
- package/dist/{chunk-SG3L4322.js → chunk-DEFGT75G.js} +5 -3
- package/dist/chunk-DEFGT75G.js.map +1 -0
- package/dist/{chunk-VGAOLXTK.js → chunk-E2I4C5EA.js} +6 -6
- package/dist/{chunk-VGAOLXTK.js.map → chunk-E2I4C5EA.js.map} +1 -1
- package/dist/{chunk-MEUR7C6X.js → chunk-FUG3OCGP.js} +8 -5
- package/dist/chunk-FUG3OCGP.js.map +1 -0
- package/dist/{chunk-LNFMT2CE.cjs → chunk-FXP4JLGU.cjs} +13 -7
- package/dist/chunk-FXP4JLGU.cjs.map +1 -0
- package/dist/{chunk-TWSPVX6X.cjs → chunk-GHAZOIEG.cjs} +4 -4
- package/dist/{chunk-TWSPVX6X.cjs.map → chunk-GHAZOIEG.cjs.map} +1 -1
- package/dist/{chunk-NHTSQRAF.cjs → chunk-HBCKKE24.cjs} +6 -4
- package/dist/chunk-HBCKKE24.cjs.map +1 -0
- package/dist/{chunk-AVCDGSXV.cjs → chunk-IRD6UXDK.cjs} +8 -5
- package/dist/chunk-IRD6UXDK.cjs.map +1 -0
- package/dist/{chunk-DKKU3VVJ.js → chunk-IUT3Q2EC.js} +22 -5
- package/dist/chunk-IUT3Q2EC.js.map +1 -0
- package/dist/{chunk-XLVYW5LK.js → chunk-IYTTEPCV.js} +3 -3
- package/dist/{chunk-XLVYW5LK.js.map → chunk-IYTTEPCV.js.map} +1 -1
- package/dist/{chunk-PVQBXEV3.js → chunk-JAAJJJKI.js} +5 -3
- package/dist/chunk-JAAJJJKI.js.map +1 -0
- package/dist/{chunk-NZFJ4XMJ.cjs → chunk-JDRKYYXP.cjs} +6 -4
- package/dist/chunk-JDRKYYXP.cjs.map +1 -0
- package/dist/{chunk-GIIGXAT4.js → chunk-JP4C3ROX.js} +5 -3
- package/dist/chunk-JP4C3ROX.js.map +1 -0
- package/dist/{chunk-HYNED2OA.js → chunk-L2FPIFMN.js} +8 -3
- package/dist/chunk-L2FPIFMN.js.map +1 -0
- package/dist/{chunk-DIHH75KD.js → chunk-PIFJECFU.js} +8 -3
- package/dist/chunk-PIFJECFU.js.map +1 -0
- package/dist/{chunk-PAESRUUH.cjs → chunk-UA2C2U3M.cjs} +9 -4
- package/dist/chunk-UA2C2U3M.cjs.map +1 -0
- package/dist/{chunk-ZPHHKIFV.cjs → chunk-V6VFSX6V.cjs} +6 -4
- package/dist/chunk-V6VFSX6V.cjs.map +1 -0
- package/dist/{chunk-MCCE5RDB.cjs → chunk-VUKIFFWK.cjs} +10 -5
- package/dist/chunk-VUKIFFWK.cjs.map +1 -0
- package/dist/{chunk-D7G53WOZ.js → chunk-ZH3SPBVB.js} +9 -3
- package/dist/chunk-ZH3SPBVB.js.map +1 -0
- package/dist/color-picker.d.cts +1 -1
- package/dist/color-picker.d.ts +1 -1
- package/dist/date-picker.cjs +3 -3
- package/dist/date-picker.d.cts +1 -1
- package/dist/date-picker.d.ts +1 -1
- package/dist/date-picker.js +2 -2
- package/dist/editor.d.cts +1 -1
- package/dist/editor.d.ts +1 -1
- package/dist/field.cjs +2 -2
- package/dist/field.d.cts +12 -1
- package/dist/field.d.ts +12 -1
- package/dist/field.js +1 -1
- package/dist/grid.cjs +2 -2
- package/dist/grid.d.cts +22 -1
- package/dist/grid.d.ts +22 -1
- package/dist/grid.js +1 -1
- package/dist/{index-BfFk-CIv.d.ts → index-DWJGBEW9.d.ts} +1 -1
- package/dist/{index-BypPN_6l.d.cts → index-YSQnfXN-.d.cts} +1 -1
- package/dist/index.cjs +35 -35
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +12 -12
- package/dist/input.cjs +3 -3
- package/dist/input.d.cts +1 -1
- package/dist/input.d.ts +1 -1
- package/dist/input.js +2 -2
- package/dist/inputs.cjs +18 -18
- package/dist/inputs.d.cts +2 -2
- package/dist/inputs.d.ts +2 -2
- package/dist/inputs.js +9 -9
- package/dist/{inputs.types-CkWdvN-t.d.cts → inputs.types-CJbAS14j.d.cts} +9 -0
- package/dist/{inputs.types-DERzxpe1.d.ts → inputs.types-vl3PAc4q.d.ts} +9 -0
- package/dist/json-editor.cjs +17 -17
- package/dist/json-editor.d.cts +2 -2
- package/dist/json-editor.d.ts +2 -2
- package/dist/json-editor.js +6 -6
- package/dist/magic-wand.cjs +4 -4
- package/dist/magic-wand.js +3 -3
- package/dist/mode.d.cts +2 -2
- package/dist/mode.d.ts +2 -2
- package/dist/multi-switch.cjs +3 -3
- package/dist/multi-switch.d.cts +13 -3
- package/dist/multi-switch.d.ts +13 -3
- package/dist/multi-switch.js +2 -2
- package/dist/otp-input.d.cts +1 -1
- package/dist/otp-input.d.ts +1 -1
- package/dist/radio-group.cjs +3 -3
- package/dist/radio-group.d.cts +2 -2
- package/dist/radio-group.d.ts +2 -2
- package/dist/radio-group.js +2 -2
- package/dist/select.cjs +3 -3
- package/dist/select.d.cts +1 -1
- package/dist/select.d.ts +1 -1
- package/dist/select.js +2 -2
- package/dist/slider.cjs +3 -3
- package/dist/slider.d.cts +1 -1
- package/dist/slider.d.ts +1 -1
- package/dist/slider.js +2 -2
- package/dist/switch.d.cts +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/textarea.cjs +3 -3
- package/dist/textarea.d.cts +1 -1
- package/dist/textarea.d.ts +1 -1
- package/dist/textarea.js +2 -2
- package/dist/time-picker.d.cts +1 -1
- package/dist/time-picker.d.ts +1 -1
- package/package.json +1 -1
- package/dist/chunk-5DSMOURR.cjs +0 -32
- package/dist/chunk-5DSMOURR.cjs.map +0 -1
- package/dist/chunk-AVCDGSXV.cjs.map +0 -1
- package/dist/chunk-D7G53WOZ.js.map +0 -1
- package/dist/chunk-DIHH75KD.js.map +0 -1
- package/dist/chunk-DKKU3VVJ.js.map +0 -1
- package/dist/chunk-FERMW3YE.js.map +0 -1
- package/dist/chunk-GIIGXAT4.js.map +0 -1
- package/dist/chunk-HYNED2OA.js.map +0 -1
- package/dist/chunk-LNFMT2CE.cjs.map +0 -1
- package/dist/chunk-M6AONUIX.js +0 -30
- package/dist/chunk-M6AONUIX.js.map +0 -1
- package/dist/chunk-MCCE5RDB.cjs.map +0 -1
- package/dist/chunk-MEUR7C6X.js.map +0 -1
- package/dist/chunk-NHTSQRAF.cjs.map +0 -1
- package/dist/chunk-NP7SU2DF.cjs.map +0 -1
- package/dist/chunk-NZFJ4XMJ.cjs.map +0 -1
- package/dist/chunk-PAESRUUH.cjs.map +0 -1
- package/dist/chunk-PVQBXEV3.js.map +0 -1
- package/dist/chunk-SG3L4322.js.map +0 -1
- package/dist/chunk-UMJ3JMDT.cjs.map +0 -1
- package/dist/chunk-ZPHHKIFV.cjs.map +0 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
var GAP = {
|
|
8
|
+
sm: { className: "gap-3", length: "0.75rem" },
|
|
9
|
+
md: { className: "gap-6", length: "1.5rem" },
|
|
10
|
+
lg: { className: "gap-10", length: "2.5rem" }
|
|
11
|
+
};
|
|
12
|
+
var MIN_TRACK = "16rem";
|
|
13
|
+
var Grid = react.forwardRef(
|
|
14
|
+
({ children, cols = 3, gap = "md", responsive = true, className, style, ...props }, ref) => {
|
|
15
|
+
const cap = "calc((100% - (var(--fancy-grid-cols) - 1) * var(--fancy-grid-gap)) / var(--fancy-grid-cols))";
|
|
16
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
ref,
|
|
20
|
+
...props,
|
|
21
|
+
"data-react-fancy-grid": "",
|
|
22
|
+
"data-responsive": responsive ? "true" : "false",
|
|
23
|
+
className: chunkZU5Q77OT_cjs.cn("grid", GAP[gap].className, className),
|
|
24
|
+
style: {
|
|
25
|
+
...style,
|
|
26
|
+
["--fancy-grid-cols"]: String(cols),
|
|
27
|
+
["--fancy-grid-gap"]: GAP[gap].length,
|
|
28
|
+
gridTemplateColumns: responsive ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))` : "repeat(var(--fancy-grid-cols), minmax(0, 1fr))"
|
|
29
|
+
},
|
|
30
|
+
children
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
Grid.displayName = "Grid";
|
|
36
|
+
|
|
37
|
+
exports.Grid = Grid;
|
|
38
|
+
//# sourceMappingURL=chunk-7TGJFNZM.cjs.map
|
|
39
|
+
//# sourceMappingURL=chunk-7TGJFNZM.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Grid/Grid.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAUA,IAAM,GAAA,GAAM;AAAA,EACV,EAAA,EAAI,EAAE,SAAA,EAAW,OAAA,EAAS,QAAQ,SAAA,EAAU;AAAA,EAC5C,EAAA,EAAI,EAAE,SAAA,EAAW,OAAA,EAAS,QAAQ,QAAA,EAAS;AAAA,EAC3C,EAAA,EAAI,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,QAAA;AACrC,CAAA;AAGA,IAAM,SAAA,GAAY,OAAA;AAyBX,IAAM,IAAA,GAAOA,gBAAA;AAAA,EAClB,CAAC,EAAE,QAAA,EAAU,IAAA,GAAO,GAAG,GAAA,GAAM,IAAA,EAAM,UAAA,GAAa,IAAA,EAAM,SAAA,EAAW,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAI1F,IAAA,MAAM,GAAA,GACJ,8FAAA;AAEF,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,uBAAA,EAAsB,EAAA;AAAA,QACtB,iBAAA,EAAiB,aAAa,MAAA,GAAS,OAAA;AAAA,QACvC,WAAWC,oBAAA,CAAG,MAAA,EAAQ,IAAI,GAAG,CAAA,CAAE,WAAW,SAAS,CAAA;AAAA,QACnD,KAAA,EAAO;AAAA,UACL,GAAG,KAAA;AAAA,UACH,CAAC,mBAA6B,GAAG,MAAA,CAAO,IAAI,CAAA;AAAA,UAC5C,CAAC,kBAA4B,GAAG,GAAA,CAAI,GAAG,CAAA,CAAE,MAAA;AAAA,UACzC,qBAAqB,UAAA,GACjB,CAAA,sCAAA,EAAyC,SAAS,CAAA,EAAA,EAAK,GAAG,CAAA,SAAA,CAAA,GAC1D;AAAA,SACN;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-7TGJFNZM.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { GridProps } from \"./Grid.types\";\n\n/**\n * Gutter, as both the Tailwind class that draws it and the length the column\n * arithmetic needs. One map so the two cannot drift: if they disagree, the\n * track cap is computed against a gap the grid is not actually using, and\n * auto-fit quietly lands on the wrong column count.\n */\nconst GAP = {\n sm: { className: \"gap-3\", length: \"0.75rem\" },\n md: { className: \"gap-6\", length: \"1.5rem\" },\n lg: { className: \"gap-10\", length: \"2.5rem\" },\n} as const;\n\n/** Narrowest a column may get before the grid drops one. */\nconst MIN_TRACK = \"16rem\";\n\n/**\n * The modular grid.\n *\n * Column count goes through a custom property rather than a `grid-cols-N` class\n * because N is a prop: Tailwind cannot generate a class it never sees in source,\n * and every hand-rolled copy in the gallery worked around that differently. The\n * property also gives a design a single place to override the breakpoint\n * behaviour in CSS without fighting a utility.\n *\n * ## `cols` is a CEILING, not a fixed count\n *\n * The responsive template reads `--fancy-grid-cols`, so `cols` means \"this many\n * at most, fewer when narrow\". Until 5.23.0 it meant nothing at all while\n * `responsive` was on: the template was a fixed `repeat(auto-fit, minmax(min(\n * 100%, 16rem), 1fr))`, so a grid asked for 2 and a grid asked for 5 rendered\n * the same track list, and the only way to get a real column count was\n * `responsive={false}` — which then had no breakpoints at all. The property this\n * doc comment has always advertised was set and never read.\n *\n * The gutter is in the arithmetic because it has to be: N tracks each `100%/N`\n * wide plus N-1 gaps overflow the row, and `auto-fit` responds by fitting N-1.\n * An off-by-one that looks like a design decision.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n ({ children, cols = 3, gap = \"md\", responsive = true, className, style, ...props }, ref) => {\n // The largest a track may be: an even share of the row once the gutters are\n // paid for. `max()` against MIN_TRACK keeps the collapse; `min()` against\n // 100% stops a single column overflowing a narrow viewport.\n const cap =\n \"calc((100% - (var(--fancy-grid-cols) - 1) * var(--fancy-grid-gap)) / var(--fancy-grid-cols))\";\n\n return (\n <div\n ref={ref}\n {...props}\n data-react-fancy-grid=\"\"\n data-responsive={responsive ? \"true\" : \"false\"}\n className={cn(\"grid\", GAP[gap].className, className)}\n style={{\n ...style,\n [\"--fancy-grid-cols\" as string]: String(cols),\n [\"--fancy-grid-gap\" as string]: GAP[gap].length,\n gridTemplateColumns: responsive\n ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))`\n : \"repeat(var(--fancy-grid-cols), minmax(0, 1fr))\",\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nGrid.displayName = \"Grid\";\n"]}
|
|
@@ -6,6 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
|
|
7
7
|
function Field({
|
|
8
8
|
label,
|
|
9
|
+
labelHidden,
|
|
10
|
+
labelId,
|
|
9
11
|
description,
|
|
10
12
|
error,
|
|
11
13
|
required,
|
|
@@ -20,9 +22,12 @@ function Field({
|
|
|
20
22
|
"label",
|
|
21
23
|
{
|
|
22
24
|
htmlFor,
|
|
25
|
+
id: labelId,
|
|
23
26
|
className: chunkZU5Q77OT_cjs.cn(
|
|
24
27
|
"font-medium text-zinc-700 dark:text-zinc-100",
|
|
25
|
-
chunkYLGTDBB2_cjs.labelSizeClasses[size]
|
|
28
|
+
chunkYLGTDBB2_cjs.labelSizeClasses[size],
|
|
29
|
+
// Out of the layout, still in the accessibility tree.
|
|
30
|
+
labelHidden && "sr-only"
|
|
26
31
|
),
|
|
27
32
|
children: [
|
|
28
33
|
label,
|
|
@@ -37,5 +42,5 @@ function Field({
|
|
|
37
42
|
}
|
|
38
43
|
|
|
39
44
|
exports.Field = Field;
|
|
40
|
-
//# sourceMappingURL=chunk-
|
|
41
|
-
//# sourceMappingURL=chunk-
|
|
45
|
+
//# sourceMappingURL=chunk-BBOIFV27.cjs.map
|
|
46
|
+
//# sourceMappingURL=chunk-BBOIFV27.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/inputs/Field/Field.tsx"],"names":["jsxs","cn","labelSizeClasses","jsx"],"mappings":";;;;;;AAIO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,wBAAA,EAAuB,IAAG,SAAA,EAAWC,oBAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,IAAA,KAAA,oBACCD,eAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,SAAA,EAAWC,oBAAA;AAAA,UACT,8CAAA;AAAA,UACAC,mCAAiB,IAAI,CAAA;AAAA;AAAA,UAErB,WAAA,IAAe;AAAA,SACjB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UACA,QAAA,oBAAYC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAsB,QAAA,EAAA,GAAA,EAAC;AAAA;AAAA;AAAA,KACtD;AAAA,IAED,QAAA;AAAA,IACA,eAAe,CAAC,KAAA,mCACd,GAAA,EAAA,EAAE,SAAA,EAAU,4CACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,IAED,KAAA,oBAASA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,wBAAwB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACvD,CAAA;AAEJ","file":"chunk-BBOIFV27.cjs","sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { labelSizeClasses } from \"../inputs.utils\";\nimport type { FieldProps } from \"./Field.types\";\n\nexport function Field({\n label,\n labelHidden,\n labelId,\n description,\n error,\n required,\n htmlFor,\n size = \"md\",\n children,\n className,\n ...rest\n}: FieldProps) {\n return (\n <div {...rest} data-react-fancy-field=\"\" className={cn(\"flex flex-col gap-2\", className)}>\n {label && (\n <label\n htmlFor={htmlFor}\n id={labelId}\n className={cn(\n \"font-medium text-zinc-700 dark:text-zinc-100\",\n labelSizeClasses[size],\n // Out of the layout, still in the accessibility tree.\n labelHidden && \"sr-only\",\n )}\n >\n {label}\n {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n </label>\n )}\n {children}\n {description && !error && (\n <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n {description}\n </p>\n )}\n {error && <p className=\"text-xs text-red-500\">{error}</p>}\n </div>\n );\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var chunkXKDW6B7X_cjs = require('./chunk-XKDW6B7X.cjs');
|
|
4
|
-
var
|
|
4
|
+
var chunkBBOIFV27_cjs = require('./chunk-BBOIFV27.cjs');
|
|
5
5
|
var chunkYLGTDBB2_cjs = require('./chunk-YLGTDBB2.cjs');
|
|
6
6
|
var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
|
|
7
7
|
var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
|
|
@@ -22,6 +22,7 @@ function MultiSwitch({
|
|
|
22
22
|
dirty,
|
|
23
23
|
error,
|
|
24
24
|
label,
|
|
25
|
+
labelHidden,
|
|
25
26
|
description,
|
|
26
27
|
required,
|
|
27
28
|
disabled,
|
|
@@ -36,6 +37,8 @@ function MultiSwitch({
|
|
|
36
37
|
mode,
|
|
37
38
|
...rest
|
|
38
39
|
}) {
|
|
40
|
+
const reactId = react.useId();
|
|
41
|
+
const labelId = label ? `${id ?? reactId}-label` : void 0;
|
|
39
42
|
const resolvedOptions = list.map(chunkYLGTDBB2_cjs.resolveOption);
|
|
40
43
|
const fallback = defaultValue ?? resolvedOptions[0]?.value;
|
|
41
44
|
const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
|
|
@@ -72,6 +75,7 @@ function MultiSwitch({
|
|
|
72
75
|
"data-react-fancy-multi-switch": "",
|
|
73
76
|
role: "radiogroup",
|
|
74
77
|
id,
|
|
78
|
+
"aria-labelledby": labelId,
|
|
75
79
|
onBlur: (e) => {
|
|
76
80
|
if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
|
|
77
81
|
},
|
|
@@ -127,12 +131,25 @@ function MultiSwitch({
|
|
|
127
131
|
}
|
|
128
132
|
);
|
|
129
133
|
if (label || error || description) {
|
|
130
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
134
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
135
|
+
chunkBBOIFV27_cjs.Field,
|
|
136
|
+
{
|
|
137
|
+
label,
|
|
138
|
+
labelHidden,
|
|
139
|
+
labelId,
|
|
140
|
+
description,
|
|
141
|
+
error,
|
|
142
|
+
required,
|
|
143
|
+
htmlFor: id,
|
|
144
|
+
size,
|
|
145
|
+
children: control
|
|
146
|
+
}
|
|
147
|
+
);
|
|
131
148
|
}
|
|
132
149
|
return control;
|
|
133
150
|
}
|
|
134
151
|
MultiSwitch.displayName = "MultiSwitch";
|
|
135
152
|
|
|
136
153
|
exports.MultiSwitch = MultiSwitch;
|
|
137
|
-
//# sourceMappingURL=chunk-
|
|
138
|
-
//# sourceMappingURL=chunk-
|
|
154
|
+
//# sourceMappingURL=chunk-BJYTI2ID.cjs.map
|
|
155
|
+
//# sourceMappingURL=chunk-BJYTI2ID.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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-BJYTI2ID.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-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-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-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-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,6 +1,6 @@
|
|
|
1
1
|
import { InputWrapper } from './chunk-PWEZCMIY.js';
|
|
2
2
|
import { DisplayValue } from './chunk-KKWNKBKR.js';
|
|
3
|
-
import { Field } from './chunk-
|
|
3
|
+
import { Field } from './chunk-5MU6X3KO.js';
|
|
4
4
|
import { inputBaseClasses, inputSizeClasses, dirtyClasses, errorClasses } from './chunk-GFYSELJF.js';
|
|
5
5
|
import { useInlineEdit } from './chunk-OL53XYHF.js';
|
|
6
6
|
import { useFieldMode } from './chunk-NRXK42LO.js';
|
|
@@ -14,6 +14,7 @@ var Textarea = forwardRef(
|
|
|
14
14
|
dirty,
|
|
15
15
|
error,
|
|
16
16
|
label,
|
|
17
|
+
labelHidden,
|
|
17
18
|
description,
|
|
18
19
|
required,
|
|
19
20
|
disabled,
|
|
@@ -110,6 +111,7 @@ var Textarea = forwardRef(
|
|
|
110
111
|
Field,
|
|
111
112
|
{
|
|
112
113
|
label,
|
|
114
|
+
labelHidden,
|
|
113
115
|
description,
|
|
114
116
|
error,
|
|
115
117
|
required,
|
|
@@ -125,5 +127,5 @@ var Textarea = forwardRef(
|
|
|
125
127
|
Textarea.displayName = "Textarea";
|
|
126
128
|
|
|
127
129
|
export { Textarea };
|
|
128
|
-
//# sourceMappingURL=chunk-
|
|
129
|
-
//# sourceMappingURL=chunk-
|
|
130
|
+
//# sourceMappingURL=chunk-DEFGT75G.js.map
|
|
131
|
+
//# sourceMappingURL=chunk-DEFGT75G.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/inputs/Textarea/Textarea.tsx"],"names":[],"mappings":"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","file":"chunk-DEFGT75G.js","sourcesContent":["import { forwardRef, useEffect, useId, useRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { Field } from \"../Field\";\nimport { InputWrapper } from \"../InputWrapper\";\nimport {\n dirtyClasses,\n errorClasses,\n inputBaseClasses,\n inputSizeClasses,\n} from \"../inputs.utils\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport type { TextareaProps } from \"./Textarea.types\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n (\n {\n size = \"md\",\n dirty,\n error,\n label,\n labelHidden,\n description,\n required,\n disabled,\n className,\n id,\n autoResize,\n minRows = 3,\n maxRows,\n prefix,\n suffix,\n prefixPosition: _prefixPosition,\n suffixPosition: _suffixPosition,\n mode,\n onValueChange,\n onChange,\n value,\n defaultValue,\n ...props\n },\n ref,\n ) => {\n const autoId = useId();\n const textareaId = id ?? autoId;\n const internalRef = useRef<HTMLTextAreaElement | null>(null);\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n useEffect(() => {\n const el = internalRef.current;\n if (!autoResize || !el) return;\n el.style.height = \"auto\";\n const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;\n const minHeight = minRows * lineHeight;\n const maxHeight = maxRows ? maxRows * lineHeight : Infinity;\n el.style.height = `${Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)}px`;\n }, [autoResize, minRows, maxRows, value, defaultValue]);\n\n const textarea = !showControl ? (\n <DisplayValue\n size={size}\n className=\"whitespace-pre-wrap\"\n interactive={interactive}\n onActivate={enterEdit}\n >\n {(value ?? defaultValue) as string | undefined}\n </DisplayValue>\n ) : (\n <InputWrapper\n prefix={prefix}\n suffix={suffix}\n prefixPosition=\"outside\"\n suffixPosition=\"outside\"\n size={size}\n >\n <textarea\n data-react-fancy-textarea=\"\"\n ref={(node) => {\n internalRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n }}\n id={textareaId}\n disabled={disabled}\n required={required}\n rows={autoResize ? minRows : minRows}\n value={value}\n defaultValue={defaultValue}\n className={cn(\n inputBaseClasses,\n inputSizeClasses[size],\n dirtyClasses(dirty),\n errorClasses(error),\n \"w-full resize-y\",\n autoResize && \"resize-none overflow-hidden\",\n className,\n )}\n onChange={(e) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n }}\n {...props}\n autoFocus={interactive || props.autoFocus}\n onBlur={(e) => {\n props.onBlur?.(e);\n if (interactive) exitEdit();\n }}\n />\n </InputWrapper>\n );\n\n if (label || error || description) {\n return (\n <Field\n label={label}\n labelHidden={labelHidden}\n description={description}\n error={error}\n required={required}\n htmlFor={textareaId}\n size={size}\n >\n {textarea}\n </Field>\n );\n }\n\n return textarea;\n },\n);\n\nTextarea.displayName = \"Textarea\";\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Switch } from './chunk-QJKWBU3I.js';
|
|
2
|
-
import { DatePicker } from './chunk-
|
|
3
|
-
import { Input } from './chunk-
|
|
4
|
-
import { Select } from './chunk-
|
|
2
|
+
import { DatePicker } from './chunk-L2FPIFMN.js';
|
|
3
|
+
import { Input } from './chunk-JAAJJJKI.js';
|
|
4
|
+
import { Select } from './chunk-ZH3SPBVB.js';
|
|
5
5
|
import { Text } from './chunk-5RLP77KK.js';
|
|
6
|
-
import { Textarea } from './chunk-
|
|
6
|
+
import { Textarea } from './chunk-DEFGT75G.js';
|
|
7
7
|
import { DisplayValue } from './chunk-KKWNKBKR.js';
|
|
8
8
|
import { resolveOption } from './chunk-GFYSELJF.js';
|
|
9
9
|
import { ColorPicker } from './chunk-6PF5ENWM.js';
|
|
@@ -1337,5 +1337,5 @@ function buildItems({
|
|
|
1337
1337
|
}
|
|
1338
1338
|
|
|
1339
1339
|
export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches };
|
|
1340
|
-
//# sourceMappingURL=chunk-
|
|
1341
|
-
//# sourceMappingURL=chunk-
|
|
1340
|
+
//# sourceMappingURL=chunk-E2I4C5EA.js.map
|
|
1341
|
+
//# sourceMappingURL=chunk-E2I4C5EA.js.map
|