@sero-ai/ui 0.4.1 → 0.4.2

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 };

package/dist/components/ui/chart.js

@@ -1,11 +1,13 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "../../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-${id ?? uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "chart",
       "data-chart": chartId,
       className: cn(
-        "[&_.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__ */ jsx(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ jsx(
+          RechartsPrimitive.ResponsiveContainer,
+          {
+            initialDimension,
+            children
+          }
+        )
       ]
     }
   ) });
 }
 const ChartStyle = ({ id, config }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme || config2.color
+    ([, config2]) => 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 = itemConfig.theme?.[theme] || itemConfig.color;
+            const color = itemConfig.theme?.[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 || item?.dataKey || item?.name || "value"}`;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
-    const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+    const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
     if (labelFormatter) {
       return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
     }
@@ -111,20 +120,20 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "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__ */ jsx("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 = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload.fill || item.color;
+          const indicatorColor = color ?? item.payload?.fill ?? item.color;
           return /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "[&>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 && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -134,7 +143,7 @@ function ChartTooltipContent({
                     className: cn(
                       "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__ */ jsxs("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })
                       ] }),
-                      item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                      item.value != null && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
                     ]
                   }
                 )
               ] })
             },
-            item.dataKey
+            index
           );
         }) })
       ]
@@ -191,20 +200,20 @@ 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 = `${nameKey ?? item.dataKey ?? "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         return /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "[&>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: [
               itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "size-2 shrink-0 rounded-[2px]",
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
                   style: {
                     backgroundColor: item.color
                   }
@@ -213,7 +222,7 @@ function ChartLegendContent({
               itemConfig?.label
             ]
           },
-          item.value
+          index
         );
       })
     }

package/dist/components/ui/combobox.cjs

@@ -4,6 +4,7 @@ var _react = require('react'); var React = _interopRequireWildcard(_react);
 var _react2 = require('@base-ui/react');
 var _lucidereact = require('lucide-react');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 var _button = require('./button');
 
 
@@ -94,7 +95,8 @@ function ComboboxContent({
   anchor,
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.Combobox.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.Combobox.Portal, { container, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Combobox.Positioner,
     {
       side,
@@ -141,7 +143,7 @@ function ComboboxItem({
     {
       "data-slot": "combobox-item",
       className: _utils.cn.call(void 0, 
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -178,7 +180,7 @@ function ComboboxLabel({
     {
       "data-slot": "combobox-label",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
+        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-base",
         className
       ),
       ...props
@@ -194,7 +196,7 @@ function ComboboxEmpty({ className, ...props }) {
     {
       "data-slot": "combobox-empty",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "text-muted-foreground hidden w-full justify-center py-2 text-center text-base group-data-empty/combobox-content:flex",
         className
       ),
       ...props
@@ -223,7 +225,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: _utils.cn.call(void 0, 
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props