@mbao01/common 0.8.0 → 0.9.0

package/src/components/AnimatedList/AnimatedList.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "../../utilities";
+import type { AnimatedListProps } from "./types";
+
+const AnimatedList = ({
+  items,
+  className,
+  maxItems,
+  staggerDelay = 100,
+  ...props
+}: AnimatedListProps) => {
+  const visibleItems = maxItems ? items.slice(-maxItems) : items;
+
+  return (
+    <div className={cn("flex flex-col gap-2 overflow-hidden", className)} {...props}>
+      <AnimatePresence initial={false}>
+        {visibleItems.map((item, index) => (
+          <motion.div
+            key={item.id}
+            layout
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -20, scale: 0.95 }}
+            transition={{
+              duration: 0.3,
+              delay: index * (staggerDelay / 1000),
+              ease: [0.16, 1, 0.3, 1],
+            }}
+          >
+            {item.content}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+AnimatedList.displayName = "AnimatedList";
+
+export { AnimatedList };

package/src/components/AnimatedList/index.ts

@@ -0,0 +1,2 @@
+export { AnimatedList } from "./AnimatedList";
+export type { AnimatedListProps, AnimatedListItem } from "./types";

package/src/components/AnimatedList/types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type AnimatedListItem = {
+  id: string;
+  content: ReactNode;
+};
+
+export type AnimatedListProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Items to display */
+  items: AnimatedListItem[];
+  /** Maximum visible items */
+  maxItems?: number;
+  /** Delay between each item appearing (ms) */
+  staggerDelay?: number;
+};

package/src/components/Badge/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getBadgeClasses = cva("badge", {
+export const getBadgeClasses = cva("badge transition-colors duration-200", {
   variants: createVariants({
     variant: {
       accent: "badge-accent",

package/src/components/Banner/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getBannerClasses = cva("alert alert-vertical sm:alert-horizontal", {
+export const getBannerClasses = cva("alert alert-vertical sm:alert-horizontal shadow-sm", {
   variants: createVariants({
     variant: {
       info: "alert-info",

package/src/components/BorderBeam/BorderBeam.tsx

@@ -0,0 +1,41 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { BorderBeamProps } from "./types";
+
+const BorderBeam = ({
+  className,
+  size = 200,
+  duration = 4,
+  delay = 0,
+  colorFrom = "oklch(0.7 0.25 250)",
+  colorTo = "oklch(0.7 0.2 330)",
+  ...props
+}: BorderBeamProps) => {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent",
+        "[mask-clip:padding-box,border-box] [mask-composite:intersect]",
+        "[mask-image:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff)]",
+        "after:absolute after:aspect-square after:animate-border-beam",
+        "after:bg-[linear-gradient(var(--beam-color-from),var(--beam-color-to),transparent)]",
+        "after:[offset-path:rect(0_auto_auto_0_round_var(--beam-size))]",
+        className
+      )}
+      style={
+        {
+          "--beam-size": `${size}px`,
+          "--beam-color-from": colorFrom,
+          "--beam-color-to": colorTo,
+          "--tw-duration": `${duration}s`,
+          animationDelay: `${delay}s`,
+        } as CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+BorderBeam.displayName = "BorderBeam";
+
+export { BorderBeam };

package/src/components/BorderBeam/index.ts

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

package/src/components/BorderBeam/types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+
+export type BorderBeamProps = HTMLAttributes<HTMLDivElement> & {
+  /** Size of the beam in pixels */
+  size?: number;
+  /** Duration of the animation in seconds */
+  duration?: number;
+  /** Delay before animation starts in seconds */
+  delay?: number;
+  /** Start color of the beam gradient */
+  colorFrom?: string;
+  /** End color of the beam gradient */
+  colorTo?: string;
+};

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/components/ChartTooltip.tsx

@@ -83,7 +83,7 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
               (item as { fill: string }).fill;
 
             return (
-              <div key={item.dataKey} className={getChartTooltipItemClasses({ indicator })}>
+              <div key={item.graphicalItemId} className={getChartTooltipItemClasses({ indicator })}>
                 {formatter && item?.value !== undefined && item.name ? (
                   formatter(item.value, item.name, item, index, payload)
                 ) : (

package/src/components/Chart/stories/args/index.ts

@@ -91,7 +91,8 @@ export const lineChartArgs: ArgTypes = {
 type AreaArgKey = "area" | "areaChart" | "xAxis" | "yAxis";
 
 export type AreaChartProps = {
-  area: OmitSVGElement<AreaProps>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  area: OmitSVGElement<AreaProps<any, any>>;
   areaChart: CartesianChartProps;
 } & AxisProps;
 

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