@mbao01/common 0.8.1 → 0.9.0

package/src/components/Chart/stories/examples/LineChart.tsx

@@ -137,3 +137,114 @@ export const WithLegendLineChartExample = (props: LineChartProps) => {
     </Chart>
   );
 };
+
+/**
+ * Smooth curved line chart with gradient stroke and refined active dot.
+ * Shows a single data series with emphasis on the curve smoothness.
+ */
+export const SmoothLineChartExample = (props: LineChartProps) => {
+  const chartConfig = {
+    value: {
+      label: "Revenue",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <LineChart {...props.lineChart}>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.yAxis}
+        />
+        <ChartTooltip
+          content={<ChartTooltipContent indicator="dot" />}
+        />
+        <Line
+          dataKey="value"
+          type="natural"
+          stroke="var(--color-value)"
+          strokeWidth={2.5}
+          dot={false}
+          activeDot={{
+            r: 6,
+            strokeWidth: 2,
+            stroke: "var(--color-value)",
+            fill: "white",
+          }}
+          {...props.line}
+        />
+      </LineChart>
+    </Chart>
+  );
+};
+
+/**
+ * Multi-series comparison line chart with dashed reference line.
+ * Useful for budget vs actual, target vs performance comparisons.
+ */
+export const ComparisonLineChartExample = (props: LineChartProps) => {
+  const chartConfig = {
+    actual: {
+      label: "Actual",
+      color: "hsl(var(--chart-1))",
+    },
+    target: {
+      label: "Target",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <LineChart {...props.lineChart}>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(value: string) => value.slice(0, 3)}
+          {...props.xAxis}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(v: number) => `$${(v / 1000).toFixed(0)}k`}
+          {...props.yAxis}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Line
+          dataKey="target"
+          type="monotone"
+          stroke="var(--color-target)"
+          strokeWidth={2}
+          strokeDasharray="6 3"
+          dot={false}
+          {...props.line}
+        />
+        <Line
+          dataKey="actual"
+          type="monotone"
+          stroke="var(--color-actual)"
+          strokeWidth={2.5}
+          dot={false}
+          activeDot={{ r: 5, strokeWidth: 2, fill: "var(--color-actual)" }}
+          {...props.line}
+        />
+      </LineChart>
+    </Chart>
+  );
+};

package/src/components/Chart/stories/examples/PieChart.tsx

@@ -169,6 +169,61 @@ export const ActiveDonutPieChartExample = (props: Partial<PieChartProps>) => {
   );
 };
 
+/**
+ * Beautiful donut chart with a center metric label.
+ * Perfect for portfolio allocation, budget breakdown, etc.
+ */
+export const CenterLabelDonutExample = (props: Partial<PieChartProps>) => {
+  const chartConfig = {
+    allocation: {
+      label: "Allocation",
+    },
+    stocks: {
+      label: "Stocks",
+      color: "hsl(var(--chart-1))",
+    },
+    bonds: {
+      label: "Bonds",
+      color: "hsl(var(--chart-2))",
+    },
+    real_estate: {
+      label: "Real Estate",
+      color: "hsl(var(--chart-3))",
+    },
+    crypto: {
+      label: "Crypto",
+      color: "hsl(var(--chart-4))",
+    },
+    cash: {
+      label: "Cash",
+      color: "hsl(var(--chart-5))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <PieChart {...props.pieChart}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Pie
+          dataKey="value"
+          nameKey="category"
+          innerRadius={65}
+          outerRadius={90}
+          strokeWidth={3}
+          stroke="hsl(var(--b1, 0 0% 100%))"
+          paddingAngle={2}
+          cornerRadius={4}
+          {...props.pie}
+        />
+        <ChartLegend
+          content={<ChartLegendContent nameKey="category" />}
+          className="-translate-y-2 flex-wrap gap-2 *:basis-1/3 *:justify-center"
+        />
+      </PieChart>
+    </Chart>
+  );
+};
+
 export const StackedPieChartExample = (props: Partial<PieChartProps>) => {
   const desktopData = [
     { month: "january", desktop: 186, fill: "var(--color-january)" },

package/src/components/Chart/stories/examples/RadialChart.tsx

@@ -190,6 +190,71 @@ export const ShapeRadialChartExample = (props: Partial<RadialBarChartProps>) =>
   );
 };
 
+/**
+ * KPI gauge — a single-value radial chart with a large center metric
+ * and background track. Great for goal progress, budget usage, etc.
+ */
+export const KPIGaugeRadialChartExample = (props: Partial<RadialBarChartProps>) => {
+  const chartData = [{ name: "progress", value: 73, fill: "var(--color-progress)" }];
+  const chartConfig = {
+    progress: {
+      label: "Progress",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
+      <RadialBarChart
+        data={chartData}
+        startAngle={180}
+        endAngle={0}
+        innerRadius={80}
+        outerRadius={110}
+        barSize={14}
+        {...props.radialBarChart}
+      >
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className="first:fill-base-200 last:fill-base-100"
+          polarRadius={[86, 74]}
+        />
+        <RadialBar
+          dataKey="value"
+          cornerRadius={10}
+          fill="var(--color-progress)"
+          background={{ fill: "hsl(var(--b2, 0 0% 90%))" }}
+          {...props.radialBar}
+        />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                return (
+                  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                    <tspan
+                      x={viewBox.cx}
+                      y={(viewBox.cy ?? 0) - 12}
+                      className="fill-base-content text-4xl font-bold"
+                    >
+                      73%
+                    </tspan>
+                    <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 16} className="fill-base-content/60 text-sm">
+                      of target
+                    </tspan>
+                  </text>
+                );
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </Chart>
+  );
+};
+
 export const StackedRadialChartExample = (props: Partial<RadialBarChartProps>) => {
   const chartData = [{ month: "january", desktop: 1260, mobile: 570 }];
   const chartConfig = {

package/src/components/CircularProgress/CircularProgress.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import { getCircularProgressClasses, getCircularProgressLabelClasses } from "./constants";
+import type { CircularProgressProps } from "./types";
+
+const CircularProgress = ({
+  value,
+  className,
+  size,
+  thickness,
+  variant,
+  showLabel = true,
+  label,
+  preset = "md",
+  ...props
+}: CircularProgressProps) => {
+  const clampedValue = Math.max(0, Math.min(100, value));
+
+  const style: Record<string, string | number> = {
+    "--value": clampedValue,
+  };
+  if (size) style["--size"] = size;
+  if (thickness) style["--thickness"] = thickness;
+
+  return (
+    <div
+      className={cn(getCircularProgressClasses({ variant, preset }), className)}
+      style={style as CSSProperties}
+      role="progressbar"
+      aria-valuenow={clampedValue}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      {...props}
+    >
+      {showLabel && (
+        <span className={getCircularProgressLabelClasses()}>
+          {label ?? `${Math.round(clampedValue)}%`}
+        </span>
+      )}
+    </div>
+  );
+};
+
+CircularProgress.displayName = "CircularProgress";
+
+export { CircularProgress };

package/src/components/CircularProgress/constants.ts

@@ -0,0 +1,32 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getCircularProgressClasses = cva(
+  "radial-progress transition-all duration-500",
+  {
+    variants: createVariants({
+      variant: {
+        primary: "text-primary",
+        secondary: "text-secondary",
+        accent: "text-accent",
+        info: "text-info",
+        success: "text-success",
+        warning: "text-warning",
+        error: "text-error",
+        neutral: "text-neutral",
+      },
+      preset: {
+        xs: "[--size:2rem] [--thickness:2px] text-xs",
+        sm: "[--size:3rem] [--thickness:3px] text-xs",
+        md: "[--size:5rem] [--thickness:4px] text-sm",
+        lg: "[--size:7rem] [--thickness:5px] text-base",
+        xl: "[--size:9rem] [--thickness:6px] text-lg",
+      },
+    }),
+    defaultVariants: {
+      preset: "md",
+    },
+  }
+);
+
+export const getCircularProgressLabelClasses = cva("font-semibold tabular-nums");

package/src/components/CircularProgress/index.ts

@@ -0,0 +1,2 @@
+export { CircularProgress } from "./CircularProgress";
+export type { CircularProgressProps } from "./types";

package/src/components/CircularProgress/types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type CircularProgressProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Progress value from 0 to 100 */
+  value: number;
+  /** Size of the circle (CSS value) */
+  size?: string;
+  /** Thickness of the progress ring (CSS value) */
+  thickness?: string;
+  /** Color variant */
+  variant?: "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | "neutral";
+  /** Whether to show the value label */
+  showLabel?: boolean;
+  /** Custom label to display instead of percentage */
+  label?: ReactNode;
+  /** Size preset */
+  preset?: "xs" | "sm" | "md" | "lg" | "xl";
+};

package/src/components/Command/constants.ts

@@ -27,7 +27,7 @@ export const getCommandGroupClasses = cva(
 export const getCommandSeparatorClasses = cva("-mx-1 h-px bg-border");
 
 export const getCommandItemClasses = cva(
-  "relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors aria-selected:bg-base-300 aria-selected:text-base-content aria-disabled:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default"
+  "relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-all duration-150 aria-selected:bg-base-300 aria-selected:text-base-content aria-disabled:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default"
 );
 
 export const getCommandShortcutClasses = cva(

package/src/components/ComparisonBar/ComparisonBar.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import { getComparisonBarTrackClasses, getComparisonBarSegmentClasses } from "./constants";
+import type { ComparisonBarProps } from "./types";
+
+const DEFAULT_COLORS = [
+  "oklch(0.7 0.15 250)",
+  "oklch(0.7 0.15 150)",
+  "oklch(0.7 0.15 50)",
+  "oklch(0.7 0.15 330)",
+  "oklch(0.6 0.15 200)",
+];
+
+const ComparisonBar = ({
+  segments,
+  className,
+  showLabels = true,
+  showValues = false,
+  size = "md",
+  formatValue = (v) => v.toLocaleString(),
+  ...props
+}: ComparisonBarProps) => {
+  const total = useMemo(() => segments.reduce((sum, s) => sum + s.value, 0), [segments]);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)} {...props}>
+      <div className={getComparisonBarTrackClasses({ size })}>
+        {segments.map((segment, i) => {
+          const percentage = total > 0 ? (segment.value / total) * 100 : 0;
+          return (
+            <div
+              key={i}
+              className={getComparisonBarSegmentClasses()}
+              style={{
+                width: `${percentage}%`,
+                backgroundColor: segment.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+              }}
+              title={`${segment.label}: ${formatValue(segment.value)} (${percentage.toFixed(1)}%)`}
+            />
+          );
+        })}
+      </div>
+      {showLabels && (
+        <div className="flex flex-wrap gap-x-4 gap-y-1">
+          {segments.map((segment, i) => (
+            <div key={i} className="flex items-center gap-1.5">
+              <span
+                className="size-2.5 rounded-full"
+                style={{ backgroundColor: segment.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length] }}
+              />
+              <span className="text-xs text-base-content/60">{segment.label}</span>
+              {showValues && (
+                <span className="text-xs font-medium tabular-nums">{formatValue(segment.value)}</span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+ComparisonBar.displayName = "ComparisonBar";
+
+export { ComparisonBar };

package/src/components/ComparisonBar/constants.ts

@@ -0,0 +1,23 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getComparisonBarTrackClasses = cva(
+  "flex w-full overflow-hidden rounded-full bg-base-200",
+  {
+    variants: createVariants({
+      size: {
+        xs: "h-1.5",
+        sm: "h-2",
+        md: "h-3",
+        lg: "h-4",
+      },
+    }),
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const getComparisonBarSegmentClasses = cva(
+  "transition-all duration-500 ease-out first:rounded-l-full last:rounded-r-full"
+);

package/src/components/ComparisonBar/index.ts

@@ -0,0 +1,2 @@
+export { ComparisonBar } from "./ComparisonBar";
+export type { ComparisonBarProps, ComparisonBarSegment } from "./types";

package/src/components/ComparisonBar/types.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from "react";
+
+export type ComparisonBarSegment = {
+  /** Segment label */
+  label: string;
+  /** Segment value */
+  value: number;
+  /** Color (CSS color or Tailwind class) */
+  color?: string;
+};
+
+export type ComparisonBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Segments to display */
+  segments: ComparisonBarSegment[];
+  /** Whether to show labels */
+  showLabels?: boolean;
+  /** Whether to show values */
+  showValues?: boolean;
+  /** Height variant */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Format function for values */
+  formatValue?: (value: number) => string;
+};

package/src/components/Confetti/Confetti.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { ConfettiProps } from "./types";
+
+const DEFAULT_COLORS = [
+  "oklch(0.7 0.25 250)",
+  "oklch(0.7 0.2 330)",
+  "oklch(0.75 0.2 150)",
+  "oklch(0.8 0.15 60)",
+  "oklch(0.7 0.25 25)",
+  "oklch(0.7 0.15 200)",
+];
+
+const Confetti = ({
+  active = false,
+  count = 50,
+  duration = 3,
+  colors = DEFAULT_COLORS,
+}: ConfettiProps) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (active) {
+      setVisible(true);
+      const timer = setTimeout(() => setVisible(false), duration * 1000);
+      return () => clearTimeout(timer);
+    }
+    setVisible(false);
+  }, [active, duration]);
+
+  const pieces = useMemo(
+    () =>
+      Array.from({ length: count }, (_, i) => ({
+        id: i,
+        x: Math.random() * 100,
+        delay: Math.random() * 0.5,
+        duration: duration * 0.6 + Math.random() * duration * 0.4,
+        color: colors[i % colors.length],
+        size: 4 + Math.random() * 6,
+        rotation: Math.random() * 360,
+      })),
+    [count, duration, colors]
+  );
+
+  if (!visible) return null;
+
+  return (
+    <div className="pointer-events-none fixed inset-0 z-[100] overflow-hidden" aria-hidden="true">
+      {pieces.map((piece) => (
+        <div
+          key={piece.id}
+          className="absolute animate-confetti"
+          style={{
+            left: `${piece.x}%`,
+            top: "-5%",
+            width: piece.size,
+            height: piece.size * 0.6,
+            backgroundColor: piece.color,
+            borderRadius: "1px",
+            transform: `rotate(${piece.rotation}deg)`,
+            animationDelay: `${piece.delay}s`,
+            animationDuration: `${piece.duration}s`,
+          }}
+        />
+      ))}
+      <style>{`
+        @keyframes confetti-fall {
+          0% { transform: translateY(0) rotate(0deg); opacity: 1; }
+          100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
+        }
+        .animate-confetti {
+          animation: confetti-fall var(--tw-duration, 3s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+Confetti.displayName = "Confetti";
+
+export { Confetti };

package/src/components/Confetti/index.ts

@@ -0,0 +1,2 @@
+export { Confetti } from "./Confetti";
+export type { ConfettiProps } from "./types";

package/src/components/Confetti/types.ts

@@ -0,0 +1,20 @@
+export type ConfettiPiece = {
+  id: number;
+  x: number;
+  delay: number;
+  duration: number;
+  color: string;
+  size: number;
+  rotation: number;
+};
+
+export type ConfettiProps = {
+  /** Whether to show confetti */
+  active?: boolean;
+  /** Number of confetti pieces */
+  count?: number;
+  /** Duration in seconds */
+  duration?: number;
+  /** Custom colors */
+  colors?: string[];
+};

package/src/components/CountdownTimer/CountdownTimer.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { CountdownTimerProps } from "./types";
+import { cn } from "../../utilities";
+
+type TimeLeft = { days: number; hours: number; minutes: number; seconds: number };
+
+const unitClasses = {
+  sm: "text-[10px]",
+  md: "text-xs",
+  lg: "text-sm",
+} as const;
+
+const Unit = ({ value, unit, size }: { value: number; unit: string; size: "sm" | "md" | "lg" }) => (
+  <div className="flex flex-col items-center">
+    <span className="font-bold tabular-nums">{String(value).padStart(2, "0")}</span>
+    <span className={cn("text-base-content/50 uppercase tracking-wider", unitClasses[size])}>
+      {unit}
+    </span>
+  </div>
+);
+
+const Separator = () => <span className="self-start font-bold text-base-content/30 pt-0.5">:</span>;
+
+const CountdownTimer = ({
+  targetDate,
+  className,
+  label,
+  onComplete,
+  showSeconds = true,
+  size = "md",
+  ...props
+}: CountdownTimerProps) => {
+  const calcTimeLeft = useCallback((): TimeLeft => {
+    const diff = Math.max(0, targetDate.getTime() - Date.now());
+    return {
+      days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+      hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+      minutes: Math.floor((diff / (1000 * 60)) % 60),
+      seconds: Math.floor((diff / 1000) % 60),
+    };
+  }, [targetDate]);
+
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>(calcTimeLeft);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const tl = calcTimeLeft();
+      setTimeLeft(tl);
+      if (tl.days === 0 && tl.hours === 0 && tl.minutes === 0 && tl.seconds === 0) {
+        clearInterval(timer);
+        onComplete?.();
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [calcTimeLeft, onComplete]);
+
+  const sizeClasses = {
+    sm: "text-lg gap-1",
+    md: "text-2xl gap-2",
+    lg: "text-4xl gap-3",
+  };
+
+  return (
+    <div className={cn("flex flex-col items-center gap-1", className)} {...props}>
+      {label && <span className="text-sm text-base-content/60">{label}</span>}
+      <div className={cn("flex items-center", sizeClasses[size])}>
+        {timeLeft.days > 0 && (
+          <>
+            <Unit size={size} value={timeLeft.days} unit="days" />
+            <Separator />
+          </>
+        )}
+        <Unit size={size} value={timeLeft.hours} unit="hrs" />
+        <Separator />
+        <Unit size={size} value={timeLeft.minutes} unit="min" />
+        {showSeconds && (
+          <>
+            <Separator />
+            <Unit size={size} value={timeLeft.seconds} unit="sec" />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+CountdownTimer.displayName = "CountdownTimer";
+
+export { CountdownTimer };

package/src/components/CountdownTimer/index.ts

@@ -0,0 +1,2 @@
+export { CountdownTimer } from "./CountdownTimer";
+export type { CountdownTimerProps } from "./types";