@zentauri-ui/zentauri-components 1.4.64 → 1.5.0

package/dist/ui/toast/variants.d.ts

@@ -2,7 +2,7 @@ export declare const toastViewportVariants: (props?: ({
     position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const toastRootVariants: (props?: ({
-    appearance?: "error" | "default" | "ghost" | "emerald" | "indigo" | "purple" | "pink" | "teal" | "yellow" | "orange" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "warning" | "info" | null | undefined;
+    appearance?: "default" | "emerald" | "violet" | "amber" | "gray" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "error" | "ghost" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "warning" | "info" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/ui/toggle/variants.d.ts

@@ -1,6 +1,6 @@
 export declare const toggleTrackVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    appearance?: "default" | "destructive" | "emerald" | "indigo" | "purple" | "pink" | "rose" | "teal" | "yellow" | "orange" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
+    appearance?: "default" | "emerald" | "rose" | "slate" | "gray" | "indigo" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "teal" | "yellow" | "destructive" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "neutral" | "zinc" | "stone" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const toggleThumbVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;

package/dist/ui/tooltip/variants.d.ts

@@ -1,5 +1,5 @@
 export declare const tooltipVariants: (props?: ({
-    variant?: "default" | "outline" | "ghost" | "glass" | "emerald" | "indigo" | "purple" | "pink" | "rose" | "sky" | "teal" | "yellow" | "orange" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "green" | null | undefined;
+    variant?: "default" | "outline" | "glass" | "sky" | "emerald" | "rose" | "indigo" | "green" | "orange" | "pink" | "purple" | "teal" | "yellow" | "ghost" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     width?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "fit" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/ui/typography/variants.d.ts

@@ -1,16 +1,16 @@
 /** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */
 export declare const typographyToneVariants: (props?: ({
-    tone?: "error" | "default" | "secondary" | "destructive" | "success" | "warning" | "info" | "muted" | "primary" | "accent" | "gradient-pink-violet" | "gradient-cyan-violet" | "gradient-cyan-blue" | "gradient-cyan-green" | "gradient-cyan-orange" | "gradient-cyan-red" | "gradient-cyan-purple" | "gradient-cyan-pink" | null | undefined;
+    tone?: "default" | "muted" | "gradient-cyan-violet" | "gradient-cyan-blue" | "error" | "secondary" | "destructive" | "success" | "warning" | "info" | "primary" | "accent" | "gradient-pink-violet" | "gradient-cyan-green" | "gradient-cyan-orange" | "gradient-cyan-red" | "gradient-cyan-purple" | "gradient-cyan-pink" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const headingLevelVariants: (props?: ({
-    level?: 1 | 2 | 3 | 4 | 6 | 5 | null | undefined;
+    level?: 1 | 2 | 4 | 6 | 5 | 3 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const textSizeVariants: (props?: ({
     size?: "base" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */
 export declare const unorderedListMarkerVariants: (props?: ({
-    marker?: "circle" | "none" | "disc" | null | undefined;
+    marker?: "none" | "circle" | "disc" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const orderedListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.4.64",
-  "description": "React + Tailwind UI kit with ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
+  "version": "1.5.0",
+  "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
-  "files": ["dist", "src/ui", "src/lib", "src/hooks", "cli"],
+  "files": [
+    "dist",
+    "src/ui",
+    "src/charts",
+    "src/lib",
+    "src/hooks",
+    "cli"
+  ],
   "sideEffects": false,
   "bin": {
     "zentauri-components": "cli/index.mjs",
@@ -23,6 +30,11 @@
       "import": "./dist/ui/*/animated.mjs",
       "require": "./dist/ui/*/animated.js"
     },
+    "./charts/*": {
+      "types": "./dist/charts/*/index.d.ts",
+      "import": "./dist/charts/*.mjs",
+      "require": "./dist/charts/*.js"
+    },
     "./hooks/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/hooks/utils.mjs",
@@ -45,17 +57,25 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "react": ">18",
-    "react-dom": ">18",
     "class-variance-authority": "*",
     "clsx": "*",
-    "tailwind-merge": "*",
     "framer-motion": "*",
-    "react-icons": "*"
+    "react": ">18",
+    "react-dom": ">18",
+    "react-icons": "*",
+    "recharts": "*",
+    "tailwind-merge": "*"
   },
   "peerDependenciesMeta": {
-    "framer-motion": { "optional": true },
-    "react-icons": { "optional": true }
+    "framer-motion": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@repo/typescript-config": "workspace:*",
@@ -66,8 +86,8 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "jsdom": "^26.1.0",
+    "tsup": "^8.5.1",
     "typescript": "^5",
-    "vitest": "^4.1.4",
-    "tsup": "^8.5.1"
+    "vitest": "^4.1.4"
   }
-}
+}

package/src/charts/area/Area.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Area, AreaChart as RechartsAreaChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { getSeriesFill, resolveColor } from "../shared/colors";
+import type { AreaChartProps } from "../shared/types";
+
+export function AreaChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  margin = defaultChartMargin,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  stacked = false,
+  style,
+  syncId,
+  xKey,
+  ...props
+}: AreaChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsAreaChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+                fill="#ffffff"
+                color="#ffffff"
+              />
+              <YAxis
+                width={40}
+                tickLine={false}
+                tickMargin={8}
+                axisLine={false}
+                fontSize={12}
+                fill="#ffffff"
+                color="#ffffff"
+              />
+            </>
+          }
+          showGrid={showGrid}
+          showLegend={showLegend}
+          showTooltip={showTooltip}
+          tooltipColor={tooltipColor}
+        />
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          const fill = getSeriesFill(item, index)
+          console.log(fill)
+          return (
+            <Area
+              key={item.dataKey}
+              type="monotone"
+              dataKey={item.dataKey}
+              name={item.name}
+              stackId={stacked ? (item.stackId ?? "stack") : item.stackId}
+              stroke={color.stroke}
+              fill={fill}
+              fillOpacity={1}
+              strokeWidth={2}
+            />
+          );
+        })}
+      </RechartsAreaChart>
+    </ChartFrame>
+  );
+}
+
+AreaChart.displayName = "AreaChart";

package/src/charts/area/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { AreaChart } from "./Area";
+export type { AreaChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/bar/Bar.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Bar, BarChart as RechartsBarChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { BarChartProps } from "../shared/types";
+
+export function BarChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  margin = defaultChartMargin,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  stacked = false,
+  style,
+  syncId,
+  xKey,
+  ...props
+}: BarChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsBarChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+              />
+              <YAxis
+                width={40}
+                tickLine={false}
+                tickMargin={8}
+                axisLine={false}
+                fontSize={12}
+              />
+            </>
+          }
+          showGrid={showGrid}
+          showLegend={showLegend}
+          showTooltip={showTooltip}
+          tooltipColor={tooltipColor}
+        />
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          return (
+            <Bar
+              key={item.dataKey}
+              dataKey={item.dataKey}
+              name={item.name}
+              stackId={stacked ? (item.stackId ?? "stack") : item.stackId}
+              fill={item.fill ?? color.stroke}
+              radius={[6, 6, 0, 0]}
+            />
+          );
+        })}
+      </RechartsBarChart>
+    </ChartFrame>
+  );
+}
+
+BarChart.displayName = "BarChart";

package/src/charts/bar/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { BarChart } from "./Bar";
+export type { BarChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/bubble/Bubble.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import {
+  Scatter,
+  ScatterChart as RechartsScatterChart,
+  XAxis,
+  YAxis,
+  ZAxis,
+  Bar,
+} from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { BubbleChartProps } from "../shared/types";
+
+export function BubbleChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  margin = defaultChartMargin,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  style,
+  syncId,
+  xKey,
+  ...props
+}: BubbleChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsScatterChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                type="number"
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+              />
+              <YAxis
+                dataKey="__chartY"
+                type="number"
+                width={40}
+                tickLine={false}
+                tickMargin={8}
+                axisLine={false}
+                fontSize={12}
+              />
+            </>
+          }
+          showGrid={showGrid}
+          showLegend={showLegend}
+          showTooltip={showTooltip}
+          tooltipColor={tooltipColor}
+        />
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          return (
+            <Scatter
+              key={item.dataKey}
+              data={data.map((entry) => ({
+                ...entry,
+                __chartY: entry[item.dataKey],
+                __chartZ: item.zKey ? entry[item.zKey] : undefined,
+              }))}
+              name={item.name}
+              fill={item.fill ?? color.stroke}
+            >
+              {data.map((_entry, cellIndex) => (
+                <Bar
+                  key={`${item.dataKey}-${cellIndex}`}
+                  fill={item.fill ?? color.stroke}
+                />
+              ))}
+            </Scatter>
+          );
+        })}
+        <ZAxis dataKey="__chartZ" range={[64, 720]} />
+      </RechartsScatterChart>
+    </ChartFrame>
+  );
+}
+
+BubbleChart.displayName = "BubbleChart";

package/src/charts/bubble/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { BubbleChart } from "./Bubble";
+export type { BubbleChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/line/Line.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Line, LineChart as RechartsLineChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartDecorators,
+  ChartFrame,
+  defaultChartMargin,
+} from "../shared/chart-frame";
+import { resolveColor } from "../shared/colors";
+import type { LineChartProps } from "../shared/types";
+
+export function LineChart<
+  TDatum extends Record<string, number | string | null | undefined>,
+>({
+  appearance,
+  className,
+  containerStyle,
+  data,
+  density,
+  emptyState = null,
+  height = 320,
+  margin = defaultChartMargin,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipColor = "#0f172a",
+  style,
+  syncId,
+  xKey,
+  strokeDasharray,
+  ...props
+}: LineChartProps<TDatum>) {
+  const hasData = data.length > 0 && series.length > 0;
+  const xAxisKey = String(xKey);
+
+  return (
+    <ChartFrame
+      appearance={appearance}
+      className={className}
+      containerStyle={containerStyle}
+      density={density}
+      emptyState={emptyState}
+      hasData={hasData}
+      height={height}
+      style={style}
+      {...props}
+    >
+      <RechartsLineChart data={data} margin={margin} syncId={syncId}>
+        <ChartDecorators
+          axis={
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                minTickGap={24}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                fontSize={12}
+              />
+              <YAxis
+                width={40}
+                tickLine={false}
+                tickMargin={8}
+                axisLine={false}
+                fontSize={12}
+              />
+            </>
+          }
+          showGrid={showGrid}
+          showLegend={showLegend}
+          showTooltip={showTooltip}
+          tooltipColor={tooltipColor}
+        />
+        {series.map((item, index) => {
+          const color = resolveColor(item.color, index);
+          return (
+            <Line
+              key={item.dataKey}
+              type="monotone"
+              dataKey={item.dataKey}
+              name={item.name}
+              stroke={color.stroke}
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 5 }}
+              strokeDasharray={strokeDasharray ?? undefined}
+            />
+          );
+        })}
+      </RechartsLineChart>
+    </ChartFrame>
+  );
+}
+
+LineChart.displayName = "LineChart";

package/src/charts/line/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { LineChart } from "./Line";
+export type { LineChartProps } from "../shared/types";
+export {
+  chartColorValues,
+  chartPalette,
+  chartVariants,
+} from "../shared/variants";

package/src/charts/shared/chart-frame.tsx

@@ -0,0 +1,107 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { CartesianGrid, Legend, ResponsiveContainer, Tooltip } from "recharts";
+
+import { cn } from "../../lib/utils";
+import { chartVariants } from "./variants";
+import { VariantProps } from "class-variance-authority";
+
+type ChartFrameProps = HTMLAttributes<HTMLDivElement> & {
+  appearance?: VariantProps<typeof chartVariants>["appearance"];
+  containerStyle?: CSSProperties;
+  density?: "compact" | "comfortable" | "spacious" | null;
+  emptyState?: ReactNode;
+  hasData: boolean;
+  height: number;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  style?: CSSProperties;
+  children: ReactNode;
+};
+
+export const defaultChartMargin = { top: 16, right: 16, bottom: 8, left: 0 };
+
+export function ChartFrame({
+  appearance,
+  children,
+  className,
+  containerStyle,
+  density,
+  emptyState = null,
+  hasData,
+  height,
+  style,
+  ...props
+}: ChartFrameProps) {
+  const chartStyle = {
+    "--chart-height": `${height}px`,
+    ...style,
+  } as CSSProperties;
+
+  if (!hasData) {
+    return (
+      <div
+        className={cn(chartVariants({ appearance, density }), className)}
+        style={chartStyle}
+        {...props}
+      >
+        <div className="flex h-full min-h-48 items-center justify-center text-sm text-slate-500">
+          {emptyState}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(chartVariants({ appearance, density }), className)}
+      style={chartStyle}
+      {...props}
+    >
+      <ResponsiveContainer
+        width="100%"
+        height="100%"
+        debounce={80}
+        style={containerStyle}
+      >
+        {children}
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export function ChartDecorators({
+  axis,
+  showGrid,
+  showLegend,
+  showTooltip,
+  tooltipColor = "#0f172a",
+}: {
+  axis: ReactNode;
+  showGrid: boolean;
+  showLegend: boolean;
+  showTooltip: boolean;
+  tooltipColor?: string;
+}) {
+  return (
+    <>
+      {showGrid ? (
+        <CartesianGrid
+          strokeDasharray="3 3"
+          stroke="currentColor"
+          opacity={0.16}
+        />
+      ) : null}
+      {axis}
+      {showTooltip ? (
+        <Tooltip
+          cursor={{ opacity: 0.12 }}
+          contentStyle={{ color: tooltipColor }}
+          labelStyle={{ color: tooltipColor }}
+          itemStyle={{ color: tooltipColor }}
+        />
+      ) : null}
+      {showLegend ? <Legend /> : null}
+    </>
+  );
+}