@zentauri-ui/zentauri-components 1.4.5 → 1.4.7

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/hooks/index.ts

@@ -23,7 +23,10 @@ export {
   type UseDisclosureParams,
   type UseDisclosureResult,
 } from "./useDisclosure";
-export { useDocumentTitle, type UseDocumentTitleParams } from "./useDocumentTitle";
+export {
+  useDocumentTitle,
+  type UseDocumentTitleParams,
+} from "./useDocumentTitle";
 export { useHover } from "./useHover";
 export { useInView, type UseInViewParams } from "./useInView";
 export {
@@ -42,7 +45,10 @@ export {
 } from "./usePrefersColorScheme";
 export { usePrefersReducedMotion } from "./usePrefersReducedMotion";
 export { useResizeObserver, type ElementSize } from "./useResizeObserver";
-export { useSessionStorage, type UseSessionStorageResult } from "./useSessionStorage";
+export {
+  useSessionStorage,
+  type UseSessionStorageResult,
+} from "./useSessionStorage";
 export { useThrottledCallback } from "./useThrottledCallback";
 export { useToggle } from "./useToggle";
 export { useWindowSize, type WindowSize } from "./useWindowSize";

package/src/hooks/useClickOutside/useClickOutside.ts

@@ -4,10 +4,7 @@ import type { RefObject } from "react";
 import { Dispatch, SetStateAction, useEffect } from "react";
 
 /** DOM events that can represent an “outside” press for closing overlays. */
-export type ClickOutsideEventType =
-  | "mousedown"
-  | "pointerdown"
-  | "touchstart";
+export type ClickOutsideEventType = "mousedown" | "pointerdown" | "touchstart";
 
 export type UseClickOutsideParams = {
   /** Called with `false` when a qualifying event target is outside `ref.current`. */

package/src/hooks/useClipboard/useClipboard.test.ts

@@ -66,7 +66,9 @@ describe("useClipboard", () => {
       const ok = await result.current.copy("z");
       expect(ok).toBe(false);
     });
-    expect(result.current.error?.message).toBe("Clipboard API is not available");
+    expect(result.current.error?.message).toBe(
+      "Clipboard API is not available",
+    );
     expect(result.current.copied).toBe(false);
   });
 

package/src/hooks/useClipboard/useClipboard.ts

@@ -56,8 +56,7 @@ export function useClipboard(resetDelay = 2000): UseClipboardResult {
         }
         return true;
       } catch (cause) {
-        const err =
-          cause instanceof Error ? cause : new Error(String(cause));
+        const err = cause instanceof Error ? cause : new Error(String(cause));
         setError(err);
         return false;
       }

package/src/hooks/useDisclosure/useDisclosure.test.ts

@@ -48,8 +48,7 @@ describe("useDisclosure", () => {
   it("should be controlled when open prop is defined", () => {
     const onOpenChange = vi.fn();
     const { result, rerender } = renderHook(
-      ({ open }: { open: boolean }) =>
-        useDisclosure({ open, onOpenChange }),
+      ({ open }: { open: boolean }) => useDisclosure({ open, onOpenChange }),
       { initialProps: { open: false } },
     );
     expect(result.current.isOpen).toBe(false);

package/src/hooks/useDocumentTitle/useDocumentTitle.test.ts

@@ -6,9 +6,7 @@ import { useDocumentTitle } from "./useDocumentTitle";
 describe("useDocumentTitle", () => {
   it("should set document title from title prop", () => {
     document.title = "Original";
-    const { unmount } = renderHook(() =>
-      useDocumentTitle({ title: "Page A" }),
-    );
+    const { unmount } = renderHook(() => useDocumentTitle({ title: "Page A" }));
     expect(document.title).toBe("Page A");
     unmount();
     expect(document.title).toBe("Original");

package/src/hooks/useFocusManagement/useFocusManagement.test.tsx

@@ -42,4 +42,12 @@ describe("useFocusManagement", () => {
     fireEvent.keyDown(window, { key: "Escape" });
     expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
+
+  it("should return focus inside the overlay when focus moves outside without Tab", () => {
+    render(<Modal initialOpen />);
+    const outsideButton = screen.getByTestId("after");
+    outsideButton.focus();
+    expect(outsideButton).not.toHaveFocus();
+    expect(screen.getByRole("button", { name: "first" })).toHaveFocus();
+  });
 });