@zentauri-ui/zentauri-components 1.4.63 → 1.4.70

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}
+    </>
+  );
+}

package/src/charts/shared/colors.ts

@@ -0,0 +1,31 @@
+import type { ChartColor, ChartSeries } from "./types";
+import { chartPalette } from "./variants";
+
+export function resolveColor(
+  color: ChartColor | string | undefined,
+  index: number,
+) {
+  if (color && color in chartPalette) {
+    return chartPalette[color as ChartColor];
+  }
+  if (color) {
+    return { stroke: color, fill: color };
+  }
+
+  const paletteValues = Object.values(chartPalette);
+  return paletteValues[index % paletteValues.length] ?? chartPalette.cyan;
+}
+
+export function getSeriesFill(
+  series: ChartSeries,
+  index: number,
+  opacity = 0.18,
+) {
+  const color = resolveColor(series.color, index);
+  return (
+    series.fill ??
+    `${color.fill}${Math.round(opacity * 255)
+      .toString(16)
+      .padStart(2, "0")}`
+  );
+}

package/src/charts/shared/types.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+
+import type { chartPalette, chartVariants } from "./variants";
+
+export type ChartType = "area" | "bar" | "bubble" | "line";
+
+export type ChartColor = keyof typeof chartPalette;
+
+export type ChartDatum = Record<string, number | string | null | undefined>;
+
+export type ChartMargin = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export type ChartSeries = {
+  dataKey: string;
+  name?: string;
+  color?: ChartColor | string;
+  textColor?: string;
+  fill?: string;
+  stackId?: string;
+  zKey?: string;
+};
+
+export type ChartSharedStatic = VariantProps<typeof chartVariants>;
+
+export type BaseChartProps<TDatum extends ChartDatum = ChartDatum> =
+  ChartSharedStatic &
+    Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+      data: TDatum[];
+      series: ChartSeries[];
+      xKey: keyof TDatum & string;
+      height?: number;
+      showGrid?: boolean;
+      showLegend?: boolean;
+      showTooltip?: boolean;
+      tooltipColor?: string;
+      stacked?: boolean;
+      syncId?: string;
+      margin?: ChartMargin;
+      emptyState?: ReactNode;
+      containerStyle?: CSSProperties;
+      strokeDasharray?: string;
+    };
+
+export type AreaChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type BarChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type LineChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;
+
+export type BubbleChartProps<TDatum extends ChartDatum = ChartDatum> =
+  BaseChartProps<TDatum>;

package/src/charts/shared/variants.ts

@@ -0,0 +1,87 @@
+import { cva } from "class-variance-authority";
+
+export const chartVariants = cva(
+  [
+    "relative w-full min-w-0 overflow-hidden rounded-xl",
+    "h-[var(--chart-height)] min-h-64 sm:min-h-72 md:min-h-80",
+    "[&_.recharts-default-tooltip]:rounded-lg [&_.recharts-default-tooltip]:border [&_.recharts-default-tooltip]:border-slate-200",
+    "[&_.recharts-default-tooltip]:bg-white/95 [&_.recharts-default-tooltip]:shadow-lg",
+    "[&_.recharts-default-tooltip]:text-slate-900",
+  ],
+  {
+    variants: {
+      appearance: {
+        default:
+          "bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        muted:
+          "bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        outline:
+          "border border-slate-200 bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        glass:
+          "border border-white/15 bg-white/10 text-slate-100 backdrop-blur-md [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        sky: "bg-sky-50 text-sky-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        emerald:
+          "bg-emerald-50 text-emerald-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        violet:
+          "bg-violet-50 text-violet-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        amber:
+          "bg-amber-50 text-amber-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        rose: "bg-rose-50 text-rose-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        slate:
+          "bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        gray: "bg-gray-50 text-gray-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        indigo:
+          "bg-indigo-50 text-indigo-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
+        "gradient-cyan-violet":
+          "bg-gradient-to-r from-cyan-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-emerald-violet":
+          "bg-gradient-to-r from-emerald-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-amber-rose":
+          "bg-gradient-to-r from-amber-500 to-rose-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-slate-gray":
+          "bg-gradient-to-r from-slate-500 to-gray-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-indigo-purple":
+          "bg-gradient-to-r from-indigo-500 to-purple-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-cyan-blue":
+          "bg-gradient-to-r from-cyan-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-emerald-blue":
+          "bg-gradient-to-r from-emerald-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+        "gradient-amber-blue":
+          "bg-gradient-to-r from-amber-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
+      },
+      density: {
+        compact: "p-2 sm:p-3",
+        comfortable: "p-3 sm:p-4",
+        spacious: "p-4 sm:p-5 md:p-6",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      density: "comfortable",
+    },
+  },
+);
+
+export const chartPalette = {
+  cyan: { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
+  emerald: { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
+  violet: { stroke: "#7c3aed", fill: "#c4b5fd", textColor: "#7c3aed" },
+  amber: { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
+  rose: { stroke: "#e11d48", fill: "#fda4af", textColor: "#e11d48" },
+  slate: { stroke: "#475569", fill: "#cbd5e1", textColor: "#475569" },
+  gray: { stroke: "#6b7280", fill: "#d1d5db", textColor: "#6b7280" },
+  white: { stroke: "#ffffff", fill: "#ffffff", textColor: "#ffffff" },
+  indigo: { stroke: "#6366f1", fill: "#c7d2fe", textColor: "#6366f1" },
+  "gradient-cyan-violet": { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
+  "gradient-emerald-violet": { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
+  "gradient-amber-rose": { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
+  "gradient-slate-gray": { stroke: "#475569", fill: "#cbd5e1", textColor: "#475569" },
+  "gradient-indigo-purple": { stroke: "#6366f1", fill: "#c7d2fe", textColor: "#6366f1" },
+  "gradient-cyan-blue": { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
+  "gradient-emerald-blue": { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
+  "gradient-amber-blue": { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
+} as const;
+
+export const chartColorValues = Object.keys(chartPalette) as Array<
+  keyof typeof chartPalette
+>;

package/src/ui/accordion/variants.ts

@@ -19,23 +19,23 @@ export const accordionVariants = cva("w-full", {
       emerald:
         "divide-y divide-emerald-600 rounded-xl border border-emerald-600",
       "gradient-blue":
-        "divide-y divide-gradient-to-r from-blue-600 to-purple-600 rounded-xl border border-gradient-to-r from-blue-600 to-purple-600",
+        "divide-y divide-blue-600 rounded-xl border border-blue-600",
       "gradient-green":
-        "divide-y divide-gradient-to-r from-green-600 to-lime-600 rounded-xl border border-gradient-to-r from-green-600 to-lime-600",
+        "divide-y divide-green-600 rounded-xl border border-green-600",
       "gradient-red":
-        "divide-y divide-gradient-to-r from-red-600 to-pink-600 rounded-xl border border-gradient-to-r from-red-600 to-pink-600",
+        "divide-y divide-red-600 rounded-xl border border-red-600",
       "gradient-yellow":
-        "divide-y divide-gradient-to-r from-yellow-600 to-orange-600 rounded-xl border border-gradient-to-r from-yellow-600 to-orange-600",
+        "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
       "gradient-purple":
-        "divide-y divide-gradient-to-r from-purple-600 to-pink-600 rounded-xl border border-gradient-to-r from-purple-600 to-pink-600",
+        "divide-y divide-purple-600 rounded-xl border border-purple-600",
       "gradient-teal":
-        "divide-y divide-gradient-to-r from-teal-600 to-cyan-600 rounded-xl border border-gradient-to-r from-teal-600 to-cyan-600",
+        "divide-y divide-teal-600 rounded-xl border border-teal-600",
       "gradient-indigo":
-        "divide-y divide-gradient-to-r from-indigo-600 to-purple-600 rounded-xl border border-gradient-to-r from-indigo-600 to-purple-600",
+        "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
       "gradient-pink":
-        "divide-y divide-gradient-to-r from-pink-600 to-rose-600 rounded-xl border border-gradient-to-r from-pink-600 to-rose-600",
+        "divide-y divide-pink-600 rounded-xl border border-pink-600",
       "gradient-orange":
-        "divide-y divide-gradient-to-r from-orange-600 to-red-600 rounded-xl border border-gradient-to-r from-orange-600 to-red-600",
+        "divide-y divide-orange-600 rounded-xl border border-orange-600",
     },
     size: {
       sm: "px-3 py-2 text-sm",