@karakuri-ui/react 0.1.3 → 0.2.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/chart.js ADDED
@@ -0,0 +1,583 @@
1
+ "use strict";
2
+ "use client";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+
31
+ // src/components/ui/chart.tsx
32
+ var chart_exports = {};
33
+ __export(chart_exports, {
34
+ Chart: () => Chart,
35
+ ChartArea: () => ChartArea,
36
+ ChartBar: () => ChartBar,
37
+ ChartContainer: () => ChartContainer,
38
+ ChartLegend: () => ChartLegend,
39
+ ChartLegendContent: () => ChartLegendContent,
40
+ ChartLine: () => ChartLine,
41
+ ChartPie: () => ChartPie,
42
+ ChartStyle: () => ChartStyle,
43
+ ChartTooltip: () => ChartTooltip,
44
+ ChartTooltipContent: () => ChartTooltipContent,
45
+ ChartXAxis: () => ChartXAxis,
46
+ ChartYAxis: () => ChartYAxis,
47
+ useChart: () => useChart
48
+ });
49
+ module.exports = __toCommonJS(chart_exports);
50
+ var React = __toESM(require("react"));
51
+ var RechartsPrimitive = __toESM(require("recharts"));
52
+
53
+ // src/lib/utils.ts
54
+ var import_clsx = require("clsx");
55
+ var import_tailwind_merge = require("tailwind-merge");
56
+ function cn(...inputs) {
57
+ return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
58
+ }
59
+
60
+ // src/components/ui/chart.tsx
61
+ var THEMES = { light: "", dark: ".dark" };
62
+ var ChartContext = React.createContext(null);
63
+ function useChart() {
64
+ const context = React.useContext(ChartContext);
65
+ if (!context) {
66
+ throw new Error("useChart must be used within a <ChartContainer />");
67
+ }
68
+ return context;
69
+ }
70
+ function ChartContainer({
71
+ id,
72
+ className,
73
+ children,
74
+ config,
75
+ hoverFade = false,
76
+ ...props
77
+ }) {
78
+ const uniqueId = React.useId();
79
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
80
+ const [activeIndex, setActiveIndex] = React.useState(null);
81
+ const [activeDataKey, setActiveDataKey] = React.useState(null);
82
+ return /* @__PURE__ */ React.createElement(ChartContext.Provider, { value: { config, hoverFade, activeIndex, setActiveIndex, activeDataKey, setActiveDataKey } }, /* @__PURE__ */ React.createElement(
83
+ "div",
84
+ {
85
+ "data-slot": "chart",
86
+ "data-chart": chartId,
87
+ onMouseLeave: hoverFade ? () => {
88
+ setActiveIndex(null);
89
+ setActiveDataKey(null);
90
+ } : void 0,
91
+ className: cn(
92
+ "flex aspect-video w-full justify-center text-xs outline-none [&_*]:outline-none",
93
+ // Responsive axis tick font-size — consumed by ChartXAxis / ChartYAxis via var()
94
+ "[--chart-axis-fs:var(--font-size-2xs)] sm:[--chart-axis-fs:var(--font-size-xs)]",
95
+ // Recharts element overrides — use arbitrary properties for v3/v4 compat
96
+ "[&_.recharts-cartesian-axis-tick_text]:[fill:var(--color-text-muted)]",
97
+ "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:[stroke:var(--color-border)]",
98
+ "[&_.recharts-cartesian-grid_line]:[stroke-dasharray:3_3]",
99
+ "[&_.recharts-curve.recharts-tooltip-cursor]:[stroke:var(--color-border)]",
100
+ "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
101
+ "[&_.recharts-layer]:outline-none",
102
+ "[&_.recharts-polar-grid_[stroke='#ccc']]:[stroke:var(--color-border)]",
103
+ "[&_.recharts-radial-bar-background-sector]:[fill:var(--color-background-muted)]",
104
+ "[&_.recharts-rectangle.recharts-tooltip-cursor]:[fill:transparent]",
105
+ "[&_.recharts-reference-line_[stroke='#ccc']]:[stroke:var(--color-border)]",
106
+ "[&_.recharts-sector]:outline-none",
107
+ "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
108
+ "[&_.recharts-surface]:outline-none",
109
+ className
110
+ ),
111
+ ...props
112
+ },
113
+ /* @__PURE__ */ React.createElement(ChartStyle, { id: chartId, config }),
114
+ /* @__PURE__ */ React.createElement(RechartsPrimitive.ResponsiveContainer, null, children)
115
+ ));
116
+ }
117
+ var CHART_TOOLTIP_KEYFRAME = "@keyframes chart-tooltip-in{from{opacity:0}to{opacity:1}}";
118
+ var ChartStyle = ({ id, config }) => {
119
+ const colorConfig = Object.entries(config).filter(
120
+ ([, config2]) => config2.theme || config2.color
121
+ );
122
+ const colorCss = colorConfig.length ? Object.entries(THEMES).map(
123
+ ([theme, prefix]) => `
124
+ ${prefix} [data-chart=${id}] {
125
+ ${colorConfig.map(([key, itemConfig]) => {
126
+ const color = itemConfig.theme?.[theme] || itemConfig.color;
127
+ return color ? ` --color-${key}: ${color};` : null;
128
+ }).join("\n")}
129
+ }
130
+ `
131
+ ).join("\n") : "";
132
+ return /* @__PURE__ */ React.createElement(
133
+ "style",
134
+ {
135
+ dangerouslySetInnerHTML: {
136
+ __html: CHART_TOOLTIP_KEYFRAME + colorCss
137
+ }
138
+ }
139
+ );
140
+ };
141
+ var CHART_HOVER_FADE_OPACITY = 0.35;
142
+ var CHART_FADE_TRANSITION = { transition: "fill-opacity var(--duration-fast) ease-out, stroke-opacity var(--duration-fast) ease-out" };
143
+ var CHART_BAR_RADIUS_MAP = {
144
+ none: 0,
145
+ // --radius-none: 0px
146
+ sm: 2,
147
+ // --radius-sm: 2px
148
+ base: 4,
149
+ // --radius-base: 4px
150
+ md: 6,
151
+ // --radius-md: 6px
152
+ lg: 8
153
+ // --radius-lg: 8px
154
+ };
155
+ function ChartBar({
156
+ radius = "none",
157
+ layout = "vertical",
158
+ stackPosition = "top",
159
+ variant = "solid",
160
+ fill,
161
+ stackId,
162
+ ...props
163
+ }) {
164
+ const { hoverFade, activeIndex, setActiveIndex } = useChart();
165
+ const r = CHART_BAR_RADIUS_MAP[radius];
166
+ const isStacked = !!stackId || stackPosition === "bottom";
167
+ const appliedRadius = r === 0 ? 0 : variant === "outline" && !isStacked ? r : layout === "horizontal" && stackPosition === "bottom" ? 0 : layout === "horizontal" ? [0, r, r, 0] : stackPosition === "bottom" ? 0 : [r, r, 0, 0];
168
+ const outlineShape = React.useCallback((shapeProps) => {
169
+ const x = shapeProps.x ?? 0;
170
+ const y = shapeProps.y ?? 0;
171
+ const width = shapeProps.width ?? 0;
172
+ const height = shapeProps.height ?? 0;
173
+ if (!width || !height || width <= 0 || height <= 0) return /* @__PURE__ */ React.createElement("g", null);
174
+ const sw = 2;
175
+ const inset = sw / 2;
176
+ const rx = typeof appliedRadius === "number" ? Math.max(0, appliedRadius - inset) : 0;
177
+ const fadeMultiplier = hoverFade && activeIndex !== null && shapeProps.index !== activeIndex ? CHART_HOVER_FADE_OPACITY : 1;
178
+ return /* @__PURE__ */ React.createElement(
179
+ "rect",
180
+ {
181
+ x: x + inset,
182
+ y: y + inset,
183
+ width: Math.max(0, width - sw),
184
+ height: Math.max(0, height - sw),
185
+ rx,
186
+ fill,
187
+ fillOpacity: 0.4 * fadeMultiplier,
188
+ stroke: fill,
189
+ strokeOpacity: fadeMultiplier,
190
+ strokeWidth: sw,
191
+ style: hoverFade ? CHART_FADE_TRANSITION : void 0
192
+ }
193
+ );
194
+ }, [appliedRadius, fill, hoverFade, activeIndex]);
195
+ const solidHoverShape = React.useCallback((shapeProps) => {
196
+ const opacity = activeIndex === null ? 1 : shapeProps.index === activeIndex ? 1 : CHART_HOVER_FADE_OPACITY;
197
+ return /* @__PURE__ */ React.createElement(
198
+ RechartsPrimitive.Rectangle,
199
+ {
200
+ ...shapeProps,
201
+ fillOpacity: opacity,
202
+ style: CHART_FADE_TRANSITION
203
+ }
204
+ );
205
+ }, [activeIndex]);
206
+ const useOutline = variant === "outline" && !isStacked;
207
+ const needsHoverShape = hoverFade && variant === "solid" && !useOutline;
208
+ return /* @__PURE__ */ React.createElement(
209
+ RechartsPrimitive.Bar,
210
+ {
211
+ radius: appliedRadius,
212
+ fill,
213
+ stackId,
214
+ ...hoverFade && { isAnimationActive: false },
215
+ ...useOutline && { shape: outlineShape },
216
+ ...needsHoverShape && { shape: solidHoverShape },
217
+ ...hoverFade && { onMouseEnter: (_, index) => setActiveIndex(index) },
218
+ ...props
219
+ }
220
+ );
221
+ }
222
+ function ChartTooltip(props) {
223
+ return /* @__PURE__ */ React.createElement(RechartsPrimitive.Tooltip, { animationDuration: 0, ...props });
224
+ }
225
+ function ChartTooltipContent({
226
+ active,
227
+ payload,
228
+ className,
229
+ indicator = "dot",
230
+ hideLabel = false,
231
+ hideIndicator = false,
232
+ label,
233
+ labelFormatter,
234
+ labelClassName,
235
+ formatter,
236
+ color,
237
+ nameKey,
238
+ labelKey
239
+ }) {
240
+ const { config } = useChart();
241
+ const tooltipLabel = React.useMemo(() => {
242
+ if (hideLabel || !payload?.length) {
243
+ return null;
244
+ }
245
+ const [item] = payload;
246
+ const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
247
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
248
+ const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
249
+ if (labelFormatter) {
250
+ return /* @__PURE__ */ React.createElement("div", { className: cn("font-semibold", labelClassName) }, labelFormatter(value, payload));
251
+ }
252
+ if (!value) {
253
+ return null;
254
+ }
255
+ return /* @__PURE__ */ React.createElement("div", { className: cn("font-semibold", labelClassName) }, value);
256
+ }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
257
+ if (!active || !payload?.length) {
258
+ return null;
259
+ }
260
+ const nestLabel = payload.length === 1 && indicator !== "dot";
261
+ return /* @__PURE__ */ React.createElement(
262
+ "div",
263
+ {
264
+ className: cn(
265
+ "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1.5 text-xs shadow-xl",
266
+ className
267
+ ),
268
+ style: { animation: "chart-tooltip-in var(--duration-slow) ease-out" }
269
+ },
270
+ !nestLabel ? tooltipLabel : null,
271
+ /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, payload.filter((item) => item.type !== "none").map((item, index) => {
272
+ const key = `${nameKey || item.name || item.dataKey || "value"}`;
273
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
274
+ const indicatorColor = color || item.payload?.fill || item.color;
275
+ return /* @__PURE__ */ React.createElement(
276
+ "div",
277
+ {
278
+ key: item.dataKey,
279
+ className: cn(
280
+ "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-text-muted",
281
+ indicator === "dot" && "items-center"
282
+ )
283
+ },
284
+ formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ React.createElement(React.Fragment, null, itemConfig?.icon ? /* @__PURE__ */ React.createElement(itemConfig.icon, null) : !hideIndicator && /* @__PURE__ */ React.createElement(
285
+ "div",
286
+ {
287
+ className: cn(
288
+ "shrink-0 rounded-sm",
289
+ {
290
+ "h-2.5 w-2.5": indicator === "dot",
291
+ "w-1": indicator === "line",
292
+ "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
293
+ "my-0.5": nestLabel && indicator === "dashed"
294
+ }
295
+ ),
296
+ style: {
297
+ backgroundColor: indicator === "dashed" ? "transparent" : indicatorColor,
298
+ borderColor: indicatorColor
299
+ }
300
+ }
301
+ ), /* @__PURE__ */ React.createElement(
302
+ "div",
303
+ {
304
+ className: cn(
305
+ "flex flex-1 justify-between leading-none",
306
+ nestLabel ? "items-end" : "items-center"
307
+ )
308
+ },
309
+ /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, nestLabel ? tooltipLabel : null, /* @__PURE__ */ React.createElement("span", { className: "text-text-muted" }, itemConfig?.label || item.name)),
310
+ item.value && /* @__PURE__ */ React.createElement("span", { className: "font-mono font-semibold text-foreground tabular-nums" }, item.value.toLocaleString())
311
+ ))
312
+ );
313
+ }))
314
+ );
315
+ }
316
+ var ChartLegend = RechartsPrimitive.Legend;
317
+ function ChartLegendContent({
318
+ className,
319
+ hideIcon = false,
320
+ payload,
321
+ verticalAlign = "bottom",
322
+ align = "center",
323
+ layout = "horizontal",
324
+ nameKey
325
+ }) {
326
+ const { config } = useChart();
327
+ if (!payload?.length) {
328
+ return null;
329
+ }
330
+ const isVertical = layout === "vertical";
331
+ return /* @__PURE__ */ React.createElement(
332
+ "div",
333
+ {
334
+ className: cn(
335
+ "flex gap-4",
336
+ isVertical ? "flex-col items-start gap-1.5" : [
337
+ "items-center",
338
+ align === "left" ? "justify-start" : align === "right" ? "justify-end" : "justify-center",
339
+ verticalAlign === "top" ? "pb-3" : "pt-3"
340
+ ],
341
+ className
342
+ )
343
+ },
344
+ payload.filter((item) => item.type !== "none").map((item) => {
345
+ const key = `${nameKey || item.dataKey || "value"}`;
346
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
347
+ return /* @__PURE__ */ React.createElement(
348
+ "div",
349
+ {
350
+ key: item.value,
351
+ className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-text-muted"
352
+ },
353
+ itemConfig?.icon && !hideIcon ? /* @__PURE__ */ React.createElement(itemConfig.icon, null) : /* @__PURE__ */ React.createElement(
354
+ "div",
355
+ {
356
+ className: "h-2 w-2 shrink-0 rounded-sm",
357
+ style: {
358
+ backgroundColor: item.color
359
+ }
360
+ }
361
+ ),
362
+ /* @__PURE__ */ React.createElement("span", { className: "text-foreground" }, itemConfig?.label)
363
+ );
364
+ })
365
+ );
366
+ }
367
+ function getPayloadConfigFromPayload(config, payload, key) {
368
+ if (typeof payload !== "object" || payload === null) {
369
+ return void 0;
370
+ }
371
+ const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
372
+ let configLabelKey = key;
373
+ if (key in payload && typeof payload[key] === "string") {
374
+ configLabelKey = payload[key];
375
+ } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
376
+ configLabelKey = payloadPayload[key];
377
+ }
378
+ return configLabelKey in config ? config[configLabelKey] : config[key];
379
+ }
380
+ var CHART_AXIS_TICK_STYLE = { style: { fontSize: "var(--chart-axis-fs)", fill: "var(--color-text-subtle)" } };
381
+ var CHART_XAXIS_PADDING = { left: 16, right: 16 };
382
+ function ChartXAxis({ tick, padding, ...props }) {
383
+ return /* @__PURE__ */ React.createElement(RechartsPrimitive.XAxis, { tick: tick ?? CHART_AXIS_TICK_STYLE, padding: padding ?? CHART_XAXIS_PADDING, ...props });
384
+ }
385
+ function ChartYAxis({ tick, width = "auto", ...props }) {
386
+ return /* @__PURE__ */ React.createElement(RechartsPrimitive.YAxis, { tick: tick ?? CHART_AXIS_TICK_STYLE, width, ...props });
387
+ }
388
+ var CHART_LINE_DASH = "5 5";
389
+ var CHART_DOT_PROPS = { r: 3, strokeWidth: 2 };
390
+ var CHART_ACTIVE_DOT_PROPS = { r: 5, strokeWidth: 2 };
391
+ function ChartLine({
392
+ type = "monotone",
393
+ variant = "solid",
394
+ dot: showDot = true,
395
+ activeDot: showActiveDot = true,
396
+ stroke,
397
+ dataKey,
398
+ ...props
399
+ }) {
400
+ const { hoverFade, activeDataKey, setActiveDataKey } = useChart();
401
+ const isFaded = hoverFade && activeDataKey !== null && activeDataKey !== dataKey;
402
+ const opacity = isFaded ? CHART_HOVER_FADE_OPACITY : 1;
403
+ const dotProps = showDot ? variant === "dashed" ? { ...CHART_DOT_PROPS, strokeDasharray: "0" } : CHART_DOT_PROPS : false;
404
+ const activeDotProps = showActiveDot ? variant === "dashed" ? { ...CHART_ACTIVE_DOT_PROPS, strokeDasharray: "0" } : CHART_ACTIVE_DOT_PROPS : false;
405
+ return /* @__PURE__ */ React.createElement(
406
+ RechartsPrimitive.Line,
407
+ {
408
+ type,
409
+ dataKey,
410
+ stroke,
411
+ strokeWidth: 2,
412
+ strokeDasharray: variant === "dashed" ? CHART_LINE_DASH : void 0,
413
+ dot: dotProps,
414
+ activeDot: activeDotProps,
415
+ strokeOpacity: opacity,
416
+ ...hoverFade && { isAnimationActive: false },
417
+ ...hoverFade && { onMouseEnter: () => setActiveDataKey(dataKey) },
418
+ style: hoverFade ? { transition: "stroke-opacity var(--duration-fast) ease-out" } : void 0,
419
+ ...props
420
+ }
421
+ );
422
+ }
423
+ var CHART_AREA_DEFAULT_OPACITY = 0.4;
424
+ function ChartArea({
425
+ type = "monotone",
426
+ variant = "solid",
427
+ dot: showDot = true,
428
+ activeDot: showActiveDot = true,
429
+ fillOpacity = CHART_AREA_DEFAULT_OPACITY,
430
+ stroke,
431
+ fill,
432
+ dataKey,
433
+ ...props
434
+ }) {
435
+ const { hoverFade, activeDataKey, setActiveDataKey } = useChart();
436
+ const isFaded = hoverFade && activeDataKey !== null && activeDataKey !== dataKey;
437
+ const opacity = isFaded ? CHART_HOVER_FADE_OPACITY : 1;
438
+ const dotProps = showDot ? CHART_DOT_PROPS : false;
439
+ const activeDotProps = showActiveDot ? CHART_ACTIVE_DOT_PROPS : false;
440
+ const gradientId = `area-gradient-${String(dataKey)}`;
441
+ const effectiveFill = variant === "gradient" ? `url(#${gradientId})` : fill || stroke;
442
+ const effectiveFillOpacity = variant === "gradient" ? 1 : fillOpacity;
443
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, variant === "gradient" && /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React.createElement("stop", { offset: "5%", stopColor: fill || stroke, stopOpacity: 0.8 }), /* @__PURE__ */ React.createElement("stop", { offset: "95%", stopColor: fill || stroke, stopOpacity: 0 }))), /* @__PURE__ */ React.createElement(
444
+ RechartsPrimitive.Area,
445
+ {
446
+ type,
447
+ dataKey,
448
+ stroke,
449
+ fill: effectiveFill,
450
+ fillOpacity: effectiveFillOpacity * opacity,
451
+ strokeWidth: 2,
452
+ dot: dotProps,
453
+ activeDot: activeDotProps,
454
+ strokeOpacity: opacity,
455
+ ...hoverFade && { isAnimationActive: false },
456
+ ...hoverFade && { onMouseEnter: () => setActiveDataKey(dataKey) },
457
+ style: hoverFade ? { transition: "fill-opacity var(--duration-fast) ease-out, stroke-opacity var(--duration-fast) ease-out" } : void 0,
458
+ ...props
459
+ }
460
+ ));
461
+ }
462
+ var CHART_PIE_ACTIVE_OFFSET = 8;
463
+ var CHART_PIE_DONUT_INNER_RADIUS = 60;
464
+ var CHART_PIE_LABEL_RADIAL = 16;
465
+ var CHART_PIE_LABEL_HORIZ = 20;
466
+ var CHART_PIE_SKIP_ANGLE = 15;
467
+ function ChartPie({
468
+ variant = "pie",
469
+ label: labelMode = "none",
470
+ labelContent = "value",
471
+ activeShape: showActiveShape = true,
472
+ innerRadius,
473
+ paddingAngle = 0,
474
+ cornerRadius = 0,
475
+ startAngle = 90,
476
+ endAngle = -270,
477
+ ...props
478
+ }) {
479
+ const resolvedInnerRadius = innerRadius ?? (variant === "donut" ? CHART_PIE_DONUT_INNER_RADIUS : 0);
480
+ const activeShapeConfig = showActiveShape ? (props2) => /* @__PURE__ */ React.createElement(
481
+ RechartsPrimitive.Sector,
482
+ {
483
+ ...props2,
484
+ outerRadius: props2.outerRadius + CHART_PIE_ACTIVE_OFFSET
485
+ }
486
+ ) : void 0;
487
+ const getDisplayText = (entry) => labelContent === "percent" ? `${(entry.percent * 100).toFixed(0)}%` : entry.value;
488
+ const labelConfig = labelMode === "outside" ? (entry) => {
489
+ const RADIAN = Math.PI / 180;
490
+ const { cx, cy, midAngle, outerRadius, fill } = entry;
491
+ const sx = cx + outerRadius * Math.cos(-midAngle * RADIAN);
492
+ const sy = cy + outerRadius * Math.sin(-midAngle * RADIAN);
493
+ const mx = cx + (outerRadius + CHART_PIE_LABEL_RADIAL) * Math.cos(-midAngle * RADIAN);
494
+ const my = cy + (outerRadius + CHART_PIE_LABEL_RADIAL) * Math.sin(-midAngle * RADIAN);
495
+ const isRight = mx > cx;
496
+ const ex = mx + (isRight ? CHART_PIE_LABEL_HORIZ : -CHART_PIE_LABEL_HORIZ);
497
+ return /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
498
+ "polyline",
499
+ {
500
+ points: `${sx},${sy} ${mx},${my} ${ex},${my}`,
501
+ fill: "none",
502
+ stroke: fill,
503
+ strokeWidth: 1,
504
+ strokeOpacity: 0.5
505
+ }
506
+ ), /* @__PURE__ */ React.createElement(
507
+ "text",
508
+ {
509
+ x: ex + (isRight ? 4 : -4),
510
+ y: my,
511
+ textAnchor: isRight ? "start" : "end",
512
+ dominantBaseline: "central",
513
+ style: { fontSize: "var(--font-size-xs)", fill: "var(--color-text-muted)" }
514
+ },
515
+ getDisplayText(entry)
516
+ ));
517
+ } : labelMode === "inside" ? (entry) => {
518
+ const angle = Math.abs(entry.endAngle - entry.startAngle);
519
+ if (angle < CHART_PIE_SKIP_ANGLE) return null;
520
+ const RADIAN = Math.PI / 180;
521
+ const { cx, cy, innerRadius: ir, outerRadius: or, midAngle } = entry;
522
+ const ratio = ir > 0 ? 0.5 : 0.65;
523
+ const radius = ir + (or - ir) * ratio;
524
+ const x = cx + radius * Math.cos(-midAngle * RADIAN);
525
+ const y = cy + radius * Math.sin(-midAngle * RADIAN);
526
+ return /* @__PURE__ */ React.createElement(
527
+ "text",
528
+ {
529
+ x,
530
+ y,
531
+ textAnchor: "middle",
532
+ dominantBaseline: "central",
533
+ style: { fontSize: "var(--font-size-xs)", fill: "white", fontWeight: 600 }
534
+ },
535
+ getDisplayText(entry)
536
+ );
537
+ } : false;
538
+ return /* @__PURE__ */ React.createElement(
539
+ RechartsPrimitive.Pie,
540
+ {
541
+ innerRadius: resolvedInnerRadius,
542
+ paddingAngle,
543
+ cornerRadius,
544
+ startAngle,
545
+ endAngle,
546
+ label: labelConfig,
547
+ labelLine: false,
548
+ activeShape: activeShapeConfig,
549
+ ...props
550
+ }
551
+ );
552
+ }
553
+ var Chart = Object.assign(ChartContainer, {
554
+ Bar: ChartBar,
555
+ Line: ChartLine,
556
+ Area: ChartArea,
557
+ Pie: ChartPie,
558
+ Tooltip: ChartTooltip,
559
+ TooltipContent: ChartTooltipContent,
560
+ Legend: ChartLegend,
561
+ LegendContent: ChartLegendContent,
562
+ XAxis: ChartXAxis,
563
+ YAxis: ChartYAxis,
564
+ Style: ChartStyle
565
+ });
566
+ // Annotate the CommonJS export names for ESM import in node:
567
+ 0 && (module.exports = {
568
+ Chart,
569
+ ChartArea,
570
+ ChartBar,
571
+ ChartContainer,
572
+ ChartLegend,
573
+ ChartLegendContent,
574
+ ChartLine,
575
+ ChartPie,
576
+ ChartStyle,
577
+ ChartTooltip,
578
+ ChartTooltipContent,
579
+ ChartXAxis,
580
+ ChartYAxis,
581
+ useChart
582
+ });
583
+ //# sourceMappingURL=chart.js.map