@fanvue/ui 3.21.0 → 3.21.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/dist/charts.d.ts +3 -3
- package/dist/cjs/components/Chart/ChartSeriesToggle.cjs +1 -2
- package/dist/cjs/components/Chart/ChartSeriesToggle.cjs.map +1 -1
- package/dist/components/Chart/ChartSeriesToggle.mjs +1 -2
- package/dist/components/Chart/ChartSeriesToggle.mjs.map +1 -1
- package/package.json +1 -1
package/dist/charts.d.ts
CHANGED
|
@@ -246,9 +246,9 @@ export declare interface ChartPieLegendProps extends React_2.HTMLAttributes<HTML
|
|
|
246
246
|
}
|
|
247
247
|
|
|
248
248
|
/**
|
|
249
|
-
* Renders a
|
|
250
|
-
* visible on a multi-series chart. Each
|
|
251
|
-
*
|
|
249
|
+
* Renders a wrapping row of toggleable {@link Chip}s that control which series
|
|
250
|
+
* are visible on a multi-series chart. Each chip sizes to its label, shows a
|
|
251
|
+
* series colour dot, and exposes its state through `aria-pressed`.
|
|
252
252
|
*
|
|
253
253
|
* @example
|
|
254
254
|
* ```tsx
|
|
@@ -33,11 +33,10 @@ const ChartSeriesToggle = React__namespace.forwardRef(
|
|
|
33
33
|
}
|
|
34
34
|
onValueChange(next);
|
|
35
35
|
};
|
|
36
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex flex-wrap gap-2", className), ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
37
|
Chip.Chip,
|
|
38
38
|
{
|
|
39
39
|
size: "32",
|
|
40
|
-
className: "justify-start",
|
|
41
40
|
selected: value.has(item.key),
|
|
42
41
|
onClick: () => toggle(item.key),
|
|
43
42
|
leftIcon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: item.color } }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Chip } from \"../Chip/Chip\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n /** Unique key matching the data series key and ChartConfig key. */\n key: string;\n /** Human-readable label. Pass translated string for i18n. */\n label: React.ReactNode;\n /** Series color (CSS value). Shown as indicator dot. */\n color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Available series that can be toggled. */\n items: ChartSeriesToggleItem[];\n /** Set of currently visible series keys. */\n value: Set<string>;\n /** Called when a series is toggled. Receives the updated Set. */\n onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a
|
|
1
|
+
{"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Chip } from \"../Chip/Chip\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n /** Unique key matching the data series key and ChartConfig key. */\n key: string;\n /** Human-readable label. Pass translated string for i18n. */\n label: React.ReactNode;\n /** Series color (CSS value). Shown as indicator dot. */\n color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Available series that can be toggled. */\n items: ChartSeriesToggleItem[];\n /** Set of currently visible series keys. */\n value: Set<string>;\n /** Called when a series is toggled. Receives the updated Set. */\n onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a wrapping row of toggleable {@link Chip}s that control which series\n * are visible on a multi-series chart. Each chip sizes to its label, shows a\n * series colour dot, and exposes its state through `aria-pressed`.\n *\n * @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n *\n * <ChartSeriesToggle\n * items={[\n * { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n * { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n * { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n * ]}\n * value={visible}\n * onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n ({ className, items, value, onValueChange, ...props }, ref) => {\n const toggle = (key: string) => {\n const next = new Set(value);\n if (next.has(key)) {\n next.delete(key);\n } else {\n next.add(key);\n }\n onValueChange(next);\n };\n\n return (\n <div ref={ref} className={cn(\"flex flex-wrap gap-2\", className)} {...props}>\n {items.map((item) => (\n <Chip\n key={item.key}\n size=\"32\"\n selected={value.has(item.key)}\n onClick={() => toggle(item.key)}\n leftIcon={\n <span className=\"size-2 rounded-full\" style={{ backgroundColor: item.color }} />\n }\n >\n {item.label}\n </Chip>\n ))}\n </div>\n );\n },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":["React","jsx","cn","Chip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4CO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,wBAAwB,SAAS,GAAI,GAAG,OAClE,UAAA,MAAM,IAAI,CAAC,SACVD,2BAAAA;AAAAA,MAACE,KAAAA;AAAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,UAAU,MAAM,IAAI,KAAK,GAAG;AAAA,QAC5B,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,QAC9B,UACEF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uBAAsB,OAAO,EAAE,iBAAiB,KAAK,MAAA,EAAM,CAAG;AAAA,QAG/E,UAAA,KAAK;AAAA,MAAA;AAAA,MARD,KAAK;AAAA,IAAA,CAUb,GACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;"}
|
|
@@ -14,11 +14,10 @@ const ChartSeriesToggle = React.forwardRef(
|
|
|
14
14
|
}
|
|
15
15
|
onValueChange(next);
|
|
16
16
|
};
|
|
17
|
-
return /* @__PURE__ */ jsx("div", { ref, className: cn("
|
|
17
|
+
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-wrap gap-2", className), ...props, children: items.map((item) => /* @__PURE__ */ jsx(
|
|
18
18
|
Chip,
|
|
19
19
|
{
|
|
20
20
|
size: "32",
|
|
21
|
-
className: "justify-start",
|
|
22
21
|
selected: value.has(item.key),
|
|
23
22
|
onClick: () => toggle(item.key),
|
|
24
23
|
leftIcon: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: item.color } }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartSeriesToggle.mjs","sources":["../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Chip } from \"../Chip/Chip\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n /** Unique key matching the data series key and ChartConfig key. */\n key: string;\n /** Human-readable label. Pass translated string for i18n. */\n label: React.ReactNode;\n /** Series color (CSS value). Shown as indicator dot. */\n color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Available series that can be toggled. */\n items: ChartSeriesToggleItem[];\n /** Set of currently visible series keys. */\n value: Set<string>;\n /** Called when a series is toggled. Receives the updated Set. */\n onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a
|
|
1
|
+
{"version":3,"file":"ChartSeriesToggle.mjs","sources":["../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Chip } from \"../Chip/Chip\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n /** Unique key matching the data series key and ChartConfig key. */\n key: string;\n /** Human-readable label. Pass translated string for i18n. */\n label: React.ReactNode;\n /** Series color (CSS value). Shown as indicator dot. */\n color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Available series that can be toggled. */\n items: ChartSeriesToggleItem[];\n /** Set of currently visible series keys. */\n value: Set<string>;\n /** Called when a series is toggled. Receives the updated Set. */\n onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a wrapping row of toggleable {@link Chip}s that control which series\n * are visible on a multi-series chart. Each chip sizes to its label, shows a\n * series colour dot, and exposes its state through `aria-pressed`.\n *\n * @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n *\n * <ChartSeriesToggle\n * items={[\n * { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n * { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n * { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n * ]}\n * value={visible}\n * onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n ({ className, items, value, onValueChange, ...props }, ref) => {\n const toggle = (key: string) => {\n const next = new Set(value);\n if (next.has(key)) {\n next.delete(key);\n } else {\n next.add(key);\n }\n onValueChange(next);\n };\n\n return (\n <div ref={ref} className={cn(\"flex flex-wrap gap-2\", className)} {...props}>\n {items.map((item) => (\n <Chip\n key={item.key}\n size=\"32\"\n selected={value.has(item.key)}\n onClick={() => toggle(item.key)}\n leftIcon={\n <span className=\"size-2 rounded-full\" style={{ backgroundColor: item.color }} />\n }\n >\n {item.label}\n </Chip>\n ))}\n </div>\n );\n },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":[],"mappings":";;;;;AA4CO,MAAM,oBAAoB,MAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,wBAAwB,SAAS,GAAI,GAAG,OAClE,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,UAAU,MAAM,IAAI,KAAK,GAAG;AAAA,QAC5B,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,QAC9B,UACE,oBAAC,QAAA,EAAK,WAAU,uBAAsB,OAAO,EAAE,iBAAiB,KAAK,MAAA,EAAM,CAAG;AAAA,QAG/E,UAAA,KAAK;AAAA,MAAA;AAAA,MARD,KAAK;AAAA,IAAA,CAUb,GACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;"}
|