eai-frontend-components 2.0.18 → 2.0.19
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/index.d.ts +4 -4
- package/dist/index.esm.js +35 -56
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +35 -56
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -382,22 +382,21 @@ const CarouselNext = React__namespace.forwardRef(({ className, variant = "outlin
|
|
|
382
382
|
});
|
|
383
383
|
CarouselNext.displayName = "CarouselNext";
|
|
384
384
|
|
|
385
|
-
|
|
386
|
-
const THEMES = { light: "", dark: ".dark" };
|
|
385
|
+
const THEMES = { light: '', dark: '.dark' };
|
|
387
386
|
const ChartContext = React__namespace.createContext(null);
|
|
388
387
|
function useChart() {
|
|
389
388
|
const context = React__namespace.useContext(ChartContext);
|
|
390
389
|
if (!context) {
|
|
391
|
-
throw new Error(
|
|
390
|
+
throw new Error('useChart must be used within a <ChartContainer />');
|
|
392
391
|
}
|
|
393
392
|
return context;
|
|
394
393
|
}
|
|
395
394
|
const ChartContainer = React__namespace.forwardRef(({ id, className, children, config, ...props }, ref) => {
|
|
396
395
|
const uniqueId = React__namespace.useId();
|
|
397
|
-
const chartId = `chart-${id || uniqueId.replace(/:/g,
|
|
396
|
+
const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
|
|
398
397
|
return (jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: jsxRuntime.jsxs("div", { "data-chart": chartId, ref: ref, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className), ...props, children: [jsxRuntime.jsx(ChartStyle, { id: chartId, config: config }), jsxRuntime.jsx(RechartsPrimitive__namespace.ResponsiveContainer, { children: children })] }) }));
|
|
399
398
|
});
|
|
400
|
-
ChartContainer.displayName =
|
|
399
|
+
ChartContainer.displayName = 'Chart';
|
|
401
400
|
const ChartStyle = ({ id, config }) => {
|
|
402
401
|
const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
|
|
403
402
|
if (!colorConfig.length) {
|
|
@@ -411,103 +410,83 @@ const ChartStyle = ({ id, config }) => {
|
|
|
411
410
|
${prefix} [data-chart=${id}] {
|
|
412
411
|
${colorConfig
|
|
413
412
|
.map(([key, itemConfig]) => {
|
|
414
|
-
const color = itemConfig.theme?.[theme] ||
|
|
415
|
-
itemConfig.color;
|
|
413
|
+
const color = itemConfig.theme?.[theme] || itemConfig.color;
|
|
416
414
|
return color ? ` --color-${key}: ${color};` : null;
|
|
417
415
|
})
|
|
418
|
-
.join(
|
|
416
|
+
.join('\n')}
|
|
419
417
|
}
|
|
420
418
|
`)
|
|
421
|
-
.join(
|
|
419
|
+
.join('\n'),
|
|
422
420
|
} }));
|
|
423
421
|
};
|
|
424
422
|
const ChartTooltip = RechartsPrimitive__namespace.Tooltip;
|
|
425
|
-
const ChartTooltipContent = React__namespace.forwardRef(({ active, payload, className, indicator =
|
|
423
|
+
const ChartTooltipContent = React__namespace.forwardRef(({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
|
|
426
424
|
const { config } = useChart();
|
|
427
425
|
const tooltipLabel = React__namespace.useMemo(() => {
|
|
428
426
|
if (hideLabel || !payload?.length) {
|
|
429
427
|
return null;
|
|
430
428
|
}
|
|
431
429
|
const [item] = payload;
|
|
432
|
-
const key = `${labelKey || item.dataKey || item.name ||
|
|
430
|
+
const key = `${labelKey || item.dataKey || item.name || 'value'}`;
|
|
433
431
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
434
|
-
const value = !labelKey && typeof label ===
|
|
435
|
-
? config[label]?.label || label
|
|
436
|
-
: itemConfig?.label;
|
|
432
|
+
const value = !labelKey && typeof label === 'string' ? config[label]?.label || label : itemConfig?.label;
|
|
437
433
|
if (labelFormatter) {
|
|
438
|
-
return
|
|
434
|
+
return jsxRuntime.jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, payload) });
|
|
439
435
|
}
|
|
440
436
|
if (!value) {
|
|
441
437
|
return null;
|
|
442
438
|
}
|
|
443
|
-
return jsxRuntime.jsx("div", { className: cn(
|
|
444
|
-
}, [
|
|
445
|
-
label,
|
|
446
|
-
labelFormatter,
|
|
447
|
-
payload,
|
|
448
|
-
hideLabel,
|
|
449
|
-
labelClassName,
|
|
450
|
-
config,
|
|
451
|
-
labelKey,
|
|
452
|
-
]);
|
|
439
|
+
return jsxRuntime.jsx("div", { className: cn('font-medium', labelClassName), children: value });
|
|
440
|
+
}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
|
|
453
441
|
if (!active || !payload?.length) {
|
|
454
442
|
return null;
|
|
455
443
|
}
|
|
456
|
-
const nestLabel = payload.length === 1 && indicator !==
|
|
457
|
-
return (jsxRuntime.jsxs("div", { ref: ref, className: cn(
|
|
458
|
-
const key = `${nameKey || item.name || item.dataKey ||
|
|
444
|
+
const nestLabel = payload.length === 1 && indicator !== 'dot';
|
|
445
|
+
return (jsxRuntime.jsxs("div", { ref: ref, className: cn('grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl', className), children: [!nestLabel ? tooltipLabel : null, jsxRuntime.jsx("div", { className: 'grid gap-1.5', children: payload.map((item, index) => {
|
|
446
|
+
const key = `${nameKey || item.name || item.dataKey || 'value'}`;
|
|
459
447
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
460
448
|
const indicatorColor = color || item.payload.fill || item.color;
|
|
461
|
-
return (jsxRuntime.jsx("div", { className: cn(
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
449
|
+
return (jsxRuntime.jsx("div", { className: cn('flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [itemConfig?.icon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (!hideIndicator && (jsxRuntime.jsx("div", { className: cn('shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', {
|
|
450
|
+
'h-2.5 w-2.5': indicator === 'dot',
|
|
451
|
+
'w-1': indicator === 'line',
|
|
452
|
+
'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
|
|
453
|
+
'my-0.5': nestLabel && indicator === 'dashed',
|
|
466
454
|
}), style: {
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
} }))), jsxRuntime.jsxs("div", { className: cn(
|
|
455
|
+
'--color-bg': indicatorColor,
|
|
456
|
+
'--color-border': indicatorColor,
|
|
457
|
+
} }))), jsxRuntime.jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [jsxRuntime.jsxs("div", { className: 'grid gap-1.5', children: [nestLabel ? tooltipLabel : null, jsxRuntime.jsx("span", { className: 'text-muted-foreground', children: itemConfig?.label || item.name })] }), item.value && (jsxRuntime.jsx("span", { className: 'font-mono font-medium tabular-nums text-foreground', children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
|
|
470
458
|
}) })] }));
|
|
471
459
|
});
|
|
472
|
-
ChartTooltipContent.displayName =
|
|
460
|
+
ChartTooltipContent.displayName = 'ChartTooltip';
|
|
473
461
|
const ChartLegend = RechartsPrimitive__namespace.Legend;
|
|
474
|
-
const ChartLegendContent = React__namespace.forwardRef(({ className, hideIcon = false, payload, verticalAlign =
|
|
462
|
+
const ChartLegendContent = React__namespace.forwardRef(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
|
|
475
463
|
const { config } = useChart();
|
|
476
464
|
if (!payload?.length) {
|
|
477
465
|
return null;
|
|
478
466
|
}
|
|
479
|
-
return (jsxRuntime.jsx("div", { ref: ref, className: cn(
|
|
480
|
-
const key = `${nameKey || item.dataKey ||
|
|
467
|
+
return (jsxRuntime.jsx("div", { ref: ref, className: cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: payload.map((item) => {
|
|
468
|
+
const key = `${nameKey || item.dataKey || 'value'}`;
|
|
481
469
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
482
|
-
return (jsxRuntime.jsxs("div", { className: cn(
|
|
470
|
+
return (jsxRuntime.jsxs("div", { className: cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'), children: [itemConfig?.icon && !hideIcon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (jsxRuntime.jsx("div", { className: 'h-2 w-2 shrink-0 rounded-[2px]', style: {
|
|
483
471
|
backgroundColor: item.color,
|
|
484
472
|
} })), itemConfig?.label] }, item.value));
|
|
485
473
|
}) }));
|
|
486
474
|
});
|
|
487
|
-
ChartLegendContent.displayName =
|
|
475
|
+
ChartLegendContent.displayName = 'ChartLegend';
|
|
488
476
|
// Helper to extract item config from a payload.
|
|
489
477
|
function getPayloadConfigFromPayload(config, payload, key) {
|
|
490
|
-
if (typeof payload !==
|
|
478
|
+
if (typeof payload !== 'object' || payload === null) {
|
|
491
479
|
return undefined;
|
|
492
480
|
}
|
|
493
|
-
const payloadPayload =
|
|
494
|
-
typeof payload.payload === "object" &&
|
|
495
|
-
payload.payload !== null
|
|
496
|
-
? payload.payload
|
|
497
|
-
: undefined;
|
|
481
|
+
const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;
|
|
498
482
|
let configLabelKey = key;
|
|
499
|
-
if (key in payload &&
|
|
500
|
-
typeof payload[key] === "string") {
|
|
483
|
+
if (key in payload && typeof payload[key] === 'string') {
|
|
501
484
|
configLabelKey = payload[key];
|
|
502
485
|
}
|
|
503
|
-
else if (payloadPayload &&
|
|
504
|
-
key in payloadPayload &&
|
|
505
|
-
typeof payloadPayload[key] === "string") {
|
|
486
|
+
else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === 'string') {
|
|
506
487
|
configLabelKey = payloadPayload[key];
|
|
507
488
|
}
|
|
508
|
-
return configLabelKey in config
|
|
509
|
-
? config[configLabelKey]
|
|
510
|
-
: config[key];
|
|
489
|
+
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
511
490
|
}
|
|
512
491
|
|
|
513
492
|
const Checkbox = React__namespace.forwardRef(({ className, value, ...props }, ref) => (jsxRuntime.jsx(CheckboxPrimitive__namespace.Root, { ref: ref, checked: !!value, className: cn('peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-primary data-[state=checked]:text-primary-foreground', className), ...props, children: jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: cn('flex items-center justify-center text-current'), children: jsxRuntime.jsx(lucideReact.Check, { className: 'h-4 w-4' }) }) })));
|