@sero-ai/ui 0.4.0 → 0.4.2

package/dist/components/ui/accordion.js

@@ -30,7 +30,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-base font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -50,7 +50,7 @@ function AccordionContent({
     AccordionPrimitive.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
     }

package/dist/components/ui/alert-dialog.cjs

@@ -2,6 +2,7 @@
 var _jsxruntime = require('react/jsx-runtime');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 var _button = require('./button');
 function AlertDialog({
   ...props
@@ -16,7 +17,8 @@ function AlertDialogTrigger({
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", container, ...props });
 }
 function AlertDialogOverlay({
   className,
@@ -111,7 +113,7 @@ function AlertDialogDescription({
     _radixui.AlertDialog.Description,
     {
       "data-slot": "alert-dialog-description",
-      className: _utils.cn.call(void 0, "text-muted-foreground text-sm", className),
+      className: _utils.cn.call(void 0, "text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/alert-dialog.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 import { Button } from "./button";
 function AlertDialog({
   ...props
@@ -16,7 +17,8 @@ function AlertDialogTrigger({
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", container, ...props });
 }
 function AlertDialogOverlay({
   className,
@@ -111,7 +113,7 @@ function AlertDialogDescription({
     AlertDialogPrimitive.Description,
     {
       "data-slot": "alert-dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/alert.cjs

@@ -2,7 +2,7 @@
 var _classvarianceauthority = require('class-variance-authority');
 var _utils = require('../../lib/utils');
 const alertVariants = _classvarianceauthority.cva.call(void 0, 
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-lg border px-4 py-3 text-base grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
@@ -52,7 +52,7 @@ function AlertDescription({
     {
       "data-slot": "alert-description",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-base [&_p]:leading-relaxed",
         className
       ),
       ...props

package/dist/components/ui/alert.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-lg border px-4 py-3 text-base grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
@@ -52,7 +52,7 @@ function AlertDescription({
     {
       "data-slot": "alert-description",
       className: cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-base [&_p]:leading-relaxed",
         className
       ),
       ...props

package/dist/components/ui/avatar.cjs

@@ -41,7 +41,7 @@ function AvatarFallback({
     {
       "data-slot": "avatar-fallback",
       className: _utils.cn.call(void 0, 
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-base group-data-[size=sm]/avatar:text-xs",
         className
       ),
       ...props
@@ -86,7 +86,7 @@ function AvatarGroupCount({
     {
       "data-slot": "avatar-group-count",
       className: _utils.cn.call(void 0, 
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-base ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       ),
       ...props

package/dist/components/ui/avatar.js

@@ -41,7 +41,7 @@ function AvatarFallback({
     {
       "data-slot": "avatar-fallback",
       className: cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-base group-data-[size=sm]/avatar:text-xs",
         className
       ),
       ...props
@@ -86,7 +86,7 @@ function AvatarGroupCount({
     {
       "data-slot": "avatar-group-count",
       className: cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-base ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       ),
       ...props

package/dist/components/ui/breadcrumb.cjs

@@ -11,7 +11,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-base break-words sm:gap-2.5",
         className
       ),
       ...props

package/dist/components/ui/breadcrumb.js

@@ -11,7 +11,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-base break-words sm:gap-2.5",
         className
       ),
       ...props

package/dist/components/ui/button-group.cjs

@@ -43,7 +43,7 @@ function ButtonGroupText({
     Comp,
     {
       className: _utils.cn.call(void 0, 
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-base font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props

package/dist/components/ui/button-group.js

@@ -43,7 +43,7 @@ function ButtonGroupText({
     Comp,
     {
       className: cn(
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-base font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props

package/dist/components/ui/button.cjs

@@ -3,7 +3,7 @@ var _classvarianceauthority = require('class-variance-authority');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
 const buttonVariants = _classvarianceauthority.cva.call(void 0, 
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

package/dist/components/ui/button.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "../../lib/utils";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

package/dist/components/ui/calendar.cjs

@@ -63,7 +63,7 @@ function Calendar({
           defaultClassNames.month_caption
         ),
         dropdowns: _utils.cn.call(void 0, 
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "w-full flex items-center text-base font-medium justify-center h-(--cell-size) gap-1.5",
           defaultClassNames.dropdowns
         ),
         dropdown_root: _utils.cn.call(void 0, 
@@ -76,7 +76,7 @@ function Calendar({
         ),
         caption_label: _utils.cn.call(void 0, 
           "select-none font-medium",
-          captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          captionLayout === "label" ? "text-base" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-base h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",

package/dist/components/ui/calendar.js

@@ -63,7 +63,7 @@ function Calendar({
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "w-full flex items-center text-base font-medium justify-center h-(--cell-size) gap-1.5",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
@@ -76,7 +76,7 @@ function Calendar({
         ),
         caption_label: cn(
           "select-none font-medium",
-          captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          captionLayout === "label" ? "text-base" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-base h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",

package/dist/components/ui/card.cjs

@@ -41,7 +41,7 @@ function CardDescription({ className, ...props }) {
     "div",
     {
       "data-slot": "card-description",
-      className: _utils.cn.call(void 0, "text-muted-foreground text-sm", className),
+      className: _utils.cn.call(void 0, "text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/card.js

@@ -41,7 +41,7 @@ function CardDescription({ className, ...props }) {
     "div",
     {
       "data-slot": "card-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/carousel.cjs

@@ -63,7 +63,8 @@ function Carousel({
     api.on("reInit", onSelect);
     api.on("select", onSelect);
     return () => {
-      _optionalChain([api, 'optionalAccess', _5 => _5.off, 'call', _6 => _6("select", onSelect)]);
+      api.off("reInit", onSelect);
+      api.off("select", onSelect);
     };
   }, [api, onSelect]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -73,7 +74,7 @@ function Carousel({
         carouselRef,
         api,
         opts,
-        orientation: orientation || (_optionalChain([opts, 'optionalAccess', _7 => _7.axis]) === "y" ? "vertical" : "horizontal"),
+        orientation: orientation || (_optionalChain([opts, 'optionalAccess', _5 => _5.axis]) === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,

package/dist/components/ui/carousel.js

@@ -63,7 +63,8 @@ function Carousel({
     api.on("reInit", onSelect);
     api.on("select", onSelect);
     return () => {
-      api?.off("select", onSelect);
+      api.off("reInit", onSelect);
+      api.off("select", onSelect);
     };
   }, [api, onSelect]);
   return /* @__PURE__ */ jsx(

package/dist/components/ui/chart.cjs

@@ -1,11 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
 var _react = require('react'); var React = _interopRequireWildcard(_react);
 var _recharts = require('recharts'); var RechartsPrimitive = _interopRequireWildcard(_recharts);
 var _utils = require('../../lib/utils');
 const THEMES = { light: "", dark: ".dark" };
+const INITIAL_DIMENSION = { width: 320, height: 200 };
 const ChartContext = React.createContext(null);
 function useChart() {
-  const context = React.use(ChartContext);
+  const context = React.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -16,30 +18,37 @@ function ChartContainer({
   className,
   children,
   config,
+  initialDimension = INITIAL_DIMENSION,
   ...props
 }) {
   const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const chartId = `chart-${_nullishCoalesce(id, () => ( uniqueId.replace(/:/g, "")))}`;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       "data-slot": "chart",
       "data-chart": chartId,
       className: _utils.cn.call(void 0, 
-        "[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        "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-hidden [&_.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]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
         className
       ),
       ...props,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          RechartsPrimitive.ResponsiveContainer,
+          {
+            initialDimension,
+            children
+          }
+        )
       ]
     }
   ) });
 }
 const ChartStyle = ({ id, config }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme || config2.color
+    ([, config2]) => _nullishCoalesce(config2.theme, () => ( config2.color))
   );
   if (!colorConfig.length) {
     return null;
@@ -52,7 +61,7 @@ const ChartStyle = ({ id, config }) => {
           ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig.map(([key, itemConfig]) => {
-            const color = _optionalChain([itemConfig, 'access', _ => _.theme, 'optionalAccess', _2 => _2[theme]]) || itemConfig.color;
+            const color = _nullishCoalesce(_optionalChain([itemConfig, 'access', _ => _.theme, 'optionalAccess', _2 => _2[theme]]), () => ( itemConfig.color));
             return color ? `  --color-${key}: ${color};` : null;
           }).join("\n")}
 }
@@ -84,9 +93,9 @@ function ChartTooltipContent({
       return null;
     }
     const [item] = payload;
-    const key = `${labelKey || _optionalChain([item, 'optionalAccess', _4 => _4.dataKey]) || _optionalChain([item, 'optionalAccess', _5 => _5.name]) || "value"}`;
+    const key = `${_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(labelKey, () => ( _optionalChain([item, 'optionalAccess', _4 => _4.dataKey]))), () => ( _optionalChain([item, 'optionalAccess', _5 => _5.name]))), () => ( "value"))}`;
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
-    const value = !labelKey && typeof label === "string" ? _optionalChain([config, 'access', _6 => _6[label], 'optionalAccess', _7 => _7.label]) || label : _optionalChain([itemConfig, 'optionalAccess', _8 => _8.label]);
+    const value = !labelKey && typeof label === "string" ? _nullishCoalesce(_optionalChain([config, 'access', _6 => _6[label], 'optionalAccess', _7 => _7.label]), () => ( label)) : _optionalChain([itemConfig, 'optionalAccess', _8 => _8.label]);
     if (labelFormatter) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "font-medium", labelClassName), children: labelFormatter(value, payload) });
     }
@@ -111,30 +120,30 @@ function ChartTooltipContent({
     "div",
     {
       className: _utils.cn.call(void 0, 
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-32 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,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const key = `${_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(nameKey, () => ( item.name)), () => ( item.dataKey)), () => ( "value"))}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload.fill || item.color;
+          const indicatorColor = _nullishCoalesce(_nullishCoalesce(color, () => ( _optionalChain([item, 'access', _10 => _10.payload, 'optionalAccess', _11 => _11.fill]))), () => ( item.color));
           return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "div",
             {
               className: _utils.cn.call(void 0, 
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "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 && _optionalChain([item, 'optionalAccess', _10 => _10.value]) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-                _optionalChain([itemConfig, 'optionalAccess', _11 => _11.icon]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              children: formatter && _optionalChain([item, 'optionalAccess', _12 => _12.value]) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                _optionalChain([itemConfig, 'optionalAccess', _13 => _13.icon]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "div",
                   {
                     className: _utils.cn.call(void 0, 
                       "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
-                        "size-2.5": indicator === "dot",
+                        "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",
                         "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
                         "my-0.5": nestLabel && indicator === "dashed"
@@ -156,15 +165,15 @@ function ChartTooltipContent({
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground", children: _optionalChain([itemConfig, 'optionalAccess', _12 => _12.label]) || item.name })
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground", children: _nullishCoalesce(_optionalChain([itemConfig, 'optionalAccess', _14 => _14.label]), () => ( item.name)) })
                       ] }),
-                      item.value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                      item.value != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
                     ]
                   }
                 )
               ] })
             },
-            item.dataKey
+            index
           );
         }) })
       ]
@@ -180,7 +189,7 @@ function ChartLegendContent({
   nameKey
 }) {
   const { config } = useChart();
-  if (!_optionalChain([payload, 'optionalAccess', _13 => _13.length])) {
+  if (!_optionalChain([payload, 'optionalAccess', _15 => _15.length])) {
     return null;
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -191,29 +200,29 @@ function ChartLegendContent({
         verticalAlign === "top" ? "pb-3" : "pt-3",
         className
       ),
-      children: payload.filter((item) => item.type !== "none").map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`;
+      children: payload.filter((item) => item.type !== "none").map((item, index) => {
+        const key = `${_nullishCoalesce(_nullishCoalesce(nameKey, () => ( item.dataKey)), () => ( "value"))}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "div",
           {
             className: _utils.cn.call(void 0, 
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
             ),
             children: [
-              _optionalChain([itemConfig, 'optionalAccess', _14 => _14.icon]) && !hideIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, itemConfig.icon, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _optionalChain([itemConfig, 'optionalAccess', _16 => _16.icon]) && !hideIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, itemConfig.icon, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "div",
                 {
-                  className: "size-2 shrink-0 rounded-[2px]",
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
                   style: {
                     backgroundColor: item.color
                   }
                 }
               ),
-              _optionalChain([itemConfig, 'optionalAccess', _15 => _15.label])
+              _optionalChain([itemConfig, 'optionalAccess', _17 => _17.label])
             ]
           },
-          item.value
+          index
         );
       })
     }

package/dist/components/ui/chart.d.cts

@@ -1,26 +1,30 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
+import { TooltipValueType } from 'recharts';
 
 declare const THEMES: {
     readonly light: "";
     readonly dark: ".dark";
 };
-type ChartConfig = {
-    [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
-};
-declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+type TooltipNameType = number | string;
+type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
 }): react_jsx_runtime.JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
@@ -33,11 +37,11 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
-}): react_jsx_runtime.JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): react_jsx_runtime.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
     hideIcon?: boolean;
     nameKey?: string;
-}): react_jsx_runtime.JSX.Element | null;
+} & RechartsPrimitive.DefaultLegendContentProps): react_jsx_runtime.JSX.Element | null;
 
 export { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/components/ui/chart.d.ts

@@ -1,26 +1,30 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
+import { TooltipValueType } from 'recharts';
 
 declare const THEMES: {
     readonly light: "";
     readonly dark: ".dark";
 };
-type ChartConfig = {
-    [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
-};
-declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+type TooltipNameType = number | string;
+type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
 }): react_jsx_runtime.JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
@@ -33,11 +37,11 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
-}): react_jsx_runtime.JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): react_jsx_runtime.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
     hideIcon?: boolean;
     nameKey?: string;
-}): react_jsx_runtime.JSX.Element | null;
+} & RechartsPrimitive.DefaultLegendContentProps): react_jsx_runtime.JSX.Element | null;
 
 export { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };