@mbao01/common 0.8.0 → 0.9.0

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

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import {
   Bar,
   BarChart,
@@ -166,12 +167,14 @@ export const BarChartExample = (props: Partial<BarChartProps>) => {
             <ChartTooltipContent
               className="w-[150px]"
               nameKey="views"
-              labelFormatter={(value: string) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                });
+              labelFormatter={(value: ReactNode) => {
+                return typeof value === "string"
+                  ? new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  : value;
               }}
             />
           }
@@ -416,3 +419,98 @@ export const NegativeBarChartExample = (props: Partial<BarChartProps>) => {
     </Chart>
   );
 };
+
+/**
+ * Rounded pill-shaped bar chart — thick bars with fully rounded tops,
+ * inspired by modern dashboard UIs. One bar per day of week with
+ * the active/current day highlighted.
+ */
+export const RoundedBarChartExample = (props: Partial<BarChartProps>) => {
+  const chartConfig = {
+    visitors: {
+      label: "Visitors",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[200px] w-full">
+      <BarChart
+        accessibilityLayer
+        barCategoryGap="25%"
+        {...props.barChart}
+      >
+        <XAxis
+          dataKey="day"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis hide {...props.yAxis} />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Bar dataKey="visitors" radius={[999, 999, 999, 999]} barSize={28} {...props.bar}>
+          {(props.barChart as { data: { day: string; visitors: number; active?: boolean }[] })?.data?.map(
+            (entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={entry.active ? "var(--color-visitors)" : "var(--color-visitors)"}
+                fillOpacity={entry.active ? 1 : 0.2}
+              />
+            )
+          )}
+        </Bar>
+      </BarChart>
+    </Chart>
+  );
+};
+
+/**
+ * Grouped rounded bar chart — side-by-side bars with rounded tops
+ * for comparing two data series.
+ */
+export const GroupedRoundedBarChartExample = (props: Partial<BarChartProps>) => {
+  const chartConfig = {
+    income: {
+      label: "Income",
+      color: "hsl(var(--chart-1))",
+    },
+    expenses: {
+      label: "Expenses",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <BarChart accessibilityLayer barCategoryGap="20%" {...props.barChart}>
+        <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} {...props.yAxis} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar
+          dataKey="income"
+          fill="var(--color-income)"
+          radius={[6, 6, 0, 0]}
+          barSize={18}
+          {...props.bar}
+        />
+        <Bar
+          dataKey="expenses"
+          fill="var(--color-expenses)"
+          radius={[6, 6, 0, 0]}
+          barSize={18}
+          {...props.bar}
+        />
+      </BarChart>
+    </Chart>
+  );
+};

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/Chart/types.ts

@@ -30,7 +30,7 @@ export type ChartStyleProps = {
 };
 
 export type ChartTooltipContentProps = Partial<
-  TooltipContentProps<number | string | (number | string)[], string>
+  TooltipContentProps<number | string | readonly (number | string)[], number | string>
 > &
   ComponentProps<"div"> & {
     hideLabel?: boolean;

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