@mbao01/common 0.8.1 → 0.9.0

package/src/components/Box/Box.tsx

@@ -4,11 +4,17 @@ import { getBoxClasses } from "./constants";
 import { type BoxProps } from "./types";
 
 export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
-  ({ className, display, position, overflow, children, ...props }, ref) => {
+  (
+    { className, style, display, position, overflow, rounded, padding, shadow, children, ...props },
+    ref
+  ) => {
     return (
       <div
         ref={ref}
-        className={cn(getBoxClasses({ display, position, overflow }), className)}
+        className={cn(
+          getBoxClasses({ style, display, position, overflow, rounded, padding, shadow }),
+          className
+        )}
         {...props}
       >
         {children}

package/src/components/Box/constants.ts

@@ -3,6 +3,18 @@ import { createVariants } from "../../utilities";
 
 export const getBoxClasses = cva("", {
   variants: createVariants({
+    style: {
+      default: "",
+      outlined: "border border-base-200",
+      bordered: "border-[4px] border-double border-base-200",
+      elevated: "border border-base-200 bg-base-100 shadow-md",
+      ghost: "bg-base-200/40",
+      gradient:
+        "relative border-0 bg-base-100 before:absolute before:inset-0 before:-z-10 before:-m-[2px] before:rounded-[inherit] before:bg-linear-to-br before:from-primary before:via-secondary before:to-accent",
+      strip: "border border-base-300 ring-1 ring-base-300 ring-offset-[2px] ring-offset-base-200",
+      glass: "border border-white/20 bg-white/10 shadow-lg backdrop-blur-md",
+      inset: "border border-base-200 bg-base-200/20 shadow-inner",
+    },
     display: {
       block: "block",
       inline: "inline",
@@ -30,5 +42,28 @@ export const getBoxClasses = cva("", {
       "x-hidden": "overflow-x-hidden",
       "y-hidden": "overflow-y-hidden",
     },
+    rounded: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      "2xl": "rounded-2xl",
+      full: "rounded-full",
+    },
+    padding: {
+      none: "p-0",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8",
+    },
+    shadow: {
+      none: "shadow-none",
+      sm: "shadow-sm",
+      md: "shadow-md",
+      lg: "shadow-lg",
+      xl: "shadow-xl",
+    },
   }),
 });

package/src/components/Button/constants.ts

@@ -1,66 +1,69 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getButtonClasses = cva("btn", {
-  variants: createVariants({
-    variant: {
-      accent: "btn-accent",
-      default: "btn-default",
-      error: "btn-error",
-      ghost: "btn-ghost",
-      info: "btn-info",
-      neutral: "btn-neutral",
-      primary: "btn-primary",
-      secondary: "btn-secondary",
-      success: "btn-success",
-      warning: "btn-warning",
-    },
-    outline: {
-      true: "btn-outline",
-    },
-    link: {
-      true: "btn-link",
-    },
-    rounded: {
-      xs: "rounded-xs",
-      sm: "rounded-sm",
-      md: "rounded-md",
-      lg: "rounded-lg",
-    },
-    wide: {
-      true: "btn-wide",
-    },
-    size: {
-      xs: "btn-xs",
-      sm: "btn-sm",
-      md: "btn-md",
-      lg: "btn-lg",
-    },
-    isLoading: {
-      true: "relative overflow-hidden",
-    },
-    disabled: {
-      true: "",
-    },
-  }),
-  compoundVariants: [
-    {
-      size: undefined,
-      className: "min-h-fit h-10",
-    },
-    {
-      rounded: undefined,
-      className: "rounded-md",
-    },
-    {
-      disabled: true,
-      isLoading: true,
-      className: "text-transparent",
-    },
-    {
-      variant: undefined,
-      outline: true,
-      className: "border-base-content/20",
-    },
-  ],
-});
+export const getButtonClasses = cva(
+  "btn transition-all duration-200 ease-out active:scale-[0.97]",
+  {
+    variants: createVariants({
+      variant: {
+        accent: "btn-accent shadow-sm hover:shadow-md hover:shadow-accent/20",
+        default: "btn-default shadow-sm hover:shadow-md",
+        error: "btn-error shadow-sm hover:shadow-md hover:shadow-error/20",
+        ghost: "btn-ghost hover:bg-base-200/80",
+        info: "btn-info shadow-sm hover:shadow-md hover:shadow-info/20",
+        neutral: "btn-neutral shadow-sm hover:shadow-md hover:shadow-neutral/20",
+        primary: "btn-primary shadow-sm hover:shadow-md hover:shadow-primary/25",
+        secondary: "btn-secondary shadow-sm hover:shadow-md hover:shadow-secondary/20",
+        success: "btn-success shadow-sm hover:shadow-md hover:shadow-success/20",
+        warning: "btn-warning shadow-sm hover:shadow-md hover:shadow-warning/20",
+      },
+      outline: {
+        true: "btn-outline",
+      },
+      link: {
+        true: "btn-link !shadow-none active:scale-100",
+      },
+      rounded: {
+        xs: "rounded-xs",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+      },
+      wide: {
+        true: "btn-wide",
+      },
+      size: {
+        xs: "btn-xs",
+        sm: "btn-sm",
+        md: "btn-md",
+        lg: "btn-lg",
+      },
+      isLoading: {
+        true: "relative overflow-hidden",
+      },
+      disabled: {
+        true: "",
+      },
+    }),
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+      {
+        rounded: undefined,
+        className: "rounded-md",
+      },
+      {
+        disabled: true,
+        isLoading: true,
+        className: "text-transparent",
+      },
+      {
+        variant: undefined,
+        outline: true,
+        className: "border-base-content/20",
+      },
+    ],
+  }
+);

package/src/components/CalendarHeatmap/CalendarHeatmap.tsx

@@ -0,0 +1,141 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { CalendarHeatmapProps } from "./types";
+
+const DEFAULT_COLORS: [string, string, string, string, string] = [
+  "oklch(0.9 0.02 250)",
+  "oklch(0.8 0.08 250)",
+  "oklch(0.7 0.12 250)",
+  "oklch(0.6 0.16 250)",
+  "oklch(0.5 0.2 250)",
+];
+
+const MONTH_LABELS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const DAY_LABELS = ["", "Mon", "", "Wed", "", "Fri", ""];
+
+const CalendarHeatmap = ({
+  data,
+  className,
+  startDate,
+  endDate,
+  colors = DEFAULT_COLORS,
+  cellSize = 12,
+  cellGap = 2,
+  showMonthLabels = true,
+  showDayLabels = true,
+  formatTooltip = (date, value) => `${date}: ${value}`,
+  ...props
+}: CalendarHeatmapProps) => {
+  const { weeks, monthPositions, maxValue } = useMemo(() => {
+    const end = endDate ?? new Date();
+    const start = startDate ?? new Date(end.getFullYear() - 1, end.getMonth(), end.getDate() + 1);
+
+    const dataMap = new Map(data.map((d) => [d.date, d.value]));
+    const max = Math.max(1, ...data.map((d) => d.value));
+
+    const weeksArr: { date: string; value: number; day: number }[][] = [];
+    const months: { label: string; x: number }[] = [];
+    let currentWeek: { date: string; value: number; day: number }[] = [];
+    let lastMonth = -1;
+
+    const cursor = new Date(start);
+    // Align to Sunday
+    while (cursor.getDay() !== 0) {
+      cursor.setDate(cursor.getDate() - 1);
+    }
+
+    while (cursor <= end) {
+      const dateStr = cursor.toISOString().split("T")[0];
+      const day = cursor.getDay();
+      const month = cursor.getMonth();
+
+      if (day === 0 && currentWeek.length > 0) {
+        weeksArr.push(currentWeek);
+        currentWeek = [];
+      }
+
+      if (month !== lastMonth) {
+        months.push({ label: MONTH_LABELS[month], x: weeksArr.length });
+        lastMonth = month;
+      }
+
+      currentWeek.push({
+        date: dateStr,
+        value: dataMap.get(dateStr) ?? 0,
+        day,
+      });
+
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    if (currentWeek.length > 0) weeksArr.push(currentWeek);
+
+    return { weeks: weeksArr, monthPositions: months, maxValue: max };
+  }, [data, startDate, endDate]);
+
+  const getColor = (value: number) => {
+    if (value === 0) return "oklch(0.95 0 0)";
+    const level = Math.min(4, Math.floor((value / maxValue) * 4));
+    return colors[level];
+  };
+
+  const labelWidth = showDayLabels ? 28 : 0;
+
+  return (
+    <div className={cn("inline-flex flex-col gap-1", className)} {...props}>
+      {showMonthLabels && (
+        <div className="flex" style={{ paddingLeft: labelWidth }}>
+          {monthPositions.map((m, i) => (
+            <span
+              key={i}
+              className="text-[10px] text-base-content/50"
+              style={{
+                position: "relative",
+                left: m.x * (cellSize + cellGap),
+                width: 0,
+                whiteSpace: "nowrap",
+              }}
+            >
+              {m.label}
+            </span>
+          ))}
+        </div>
+      )}
+      <div className="flex gap-0">
+        {showDayLabels && (
+          <div
+            className="flex flex-col justify-between shrink-0"
+            style={{ width: labelWidth, height: 7 * (cellSize + cellGap) - cellGap }}
+          >
+            {DAY_LABELS.map((label, i) => (
+              <span key={i} className="text-[10px] text-base-content/50 leading-none" style={{ height: cellSize }}>
+                {label}
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="flex" style={{ gap: cellGap }}>
+          {weeks.map((week, wi) => (
+            <div key={wi} className="flex flex-col" style={{ gap: cellGap }}>
+              {week.map((cell) => (
+                <div
+                  key={cell.date}
+                  className="rounded-[2px] transition-colors duration-150"
+                  style={{
+                    width: cellSize,
+                    height: cellSize,
+                    backgroundColor: getColor(cell.value),
+                  }}
+                  title={formatTooltip(cell.date, cell.value)}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CalendarHeatmap.displayName = "CalendarHeatmap";
+
+export { CalendarHeatmap };

package/src/components/CalendarHeatmap/index.ts

@@ -0,0 +1,2 @@
+export { CalendarHeatmap } from "./CalendarHeatmap";
+export type { CalendarHeatmapProps, HeatmapDataPoint } from "./types";

package/src/components/CalendarHeatmap/types.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "react";
+
+export type HeatmapDataPoint = {
+  date: string; // ISO date string (YYYY-MM-DD)
+  value: number;
+};
+
+export type CalendarHeatmapProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Data points with date and value */
+  data: HeatmapDataPoint[];
+  /** Start date (defaults to 1 year ago) */
+  startDate?: Date;
+  /** End date (defaults to today) */
+  endDate?: Date;
+  /** Color scale — array of 5 colors from low to high */
+  colors?: [string, string, string, string, string];
+  /** Cell size in pixels */
+  cellSize?: number;
+  /** Gap between cells in pixels */
+  cellGap?: number;
+  /** Whether to show month labels */
+  showMonthLabels?: boolean;
+  /** Whether to show day-of-week labels */
+  showDayLabels?: boolean;
+  /** Tooltip formatter */
+  formatTooltip?: (date: string, value: number) => string;
+};

package/src/components/Card/constants.ts

@@ -1,24 +1,27 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getCardClasses = cva("card", {
-  variants: createVariants({
-    border: {
-      solid: "card-border",
-      dash: "card-dash",
-    },
-    size: {
-      xs: "card-xs",
-      sm: "card-sm",
-      md: "card-md",
-      lg: "card-lg",
-      xl: "card-xl",
-    },
-    horizontal: {
-      true: "card-side",
-    },
-    overlay: {
-      true: "image-full",
-    },
-  }),
-});
+export const getCardClasses = cva(
+  "card transition-all duration-300 ease-out hover:shadow-lg",
+  {
+    variants: createVariants({
+      border: {
+        solid: "card-border",
+        dash: "card-dash",
+      },
+      size: {
+        xs: "card-xs",
+        sm: "card-sm",
+        md: "card-md",
+        lg: "card-lg",
+        xl: "card-xl",
+      },
+      horizontal: {
+        true: "card-side",
+      },
+      overlay: {
+        true: "image-full",
+      },
+    }),
+  }
+);

package/src/components/Carousel/constants.ts

@@ -26,7 +26,7 @@ export const getCarouselItemClasses = cva("min-w-0 shrink-0 grow-0 basis-full",
 });
 
 export const getCarouselNextClasses = cva(
-  "absolute h-8 w-8 rounded-full p-0 disabled:bg-transparent",
+  "absolute h-8 w-8 rounded-full p-0 transition-all duration-200 hover:scale-110 disabled:bg-transparent",
   {
     variants: createVariants({
       orientation: {
@@ -41,7 +41,7 @@ export const getCarouselNextClasses = cva(
 );
 
 export const getCarouselPreviousClasses = cva(
-  "absolute h-8 w-8 rounded-full p-0 disabled:bg-transparent",
+  "absolute h-8 w-8 rounded-full p-0 transition-all duration-200 hover:scale-110 disabled:bg-transparent",
   {
     variants: createVariants({
       orientation: {

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

@@ -154,3 +154,58 @@ export const WithLegendAreaChartExample = (props: Partial<AreaChartProps>) => {
     </Chart>
   );
 };
+
+/**
+ * Smooth gradient area chart — a single data series with a lush gradient fill,
+ * smooth natural curve, and a tooltip with a value callout. Matches the style
+ * of the "Total Sales" chart in premium dashboards.
+ */
+export const GradientAreaChartExample = (props: Partial<AreaChartProps>) => {
+  const chartConfig = {
+    value: {
+      label: "Revenue",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Chart config={chartConfig} className="h-[250px] w-full">
+      <AreaChart {...props.areaChart}>
+        <defs>
+          <linearGradient id="gradientFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--color-value)" stopOpacity={0.3} />
+            <stop offset="100%" stopColor="var(--color-value)" stopOpacity={0.02} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          {...props.xAxis}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(v: number) => `$${(v / 1000).toFixed(0)}k`}
+          {...props.yAxis}
+        />
+        <ChartTooltip
+          content={<ChartTooltipContent indicator="line" />}
+        />
+        <Area
+          dataKey="value"
+          type="natural"
+          fill="url(#gradientFill)"
+          stroke="var(--color-value)"
+          strokeWidth={2.5}
+          dot={false}
+          activeDot={{ r: 5, strokeWidth: 2, fill: "var(--color-value)" }}
+          {...props.area}
+        />
+      </AreaChart>
+    </Chart>
+  );
+};

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

@@ -419,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>
+  );
+};