@mbao01/common 0.8.1 → 0.9.1

package/src/components/Sparkline/Sparkline.tsx

@@ -0,0 +1,108 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { SparklineProps } from "./types";
+
+const Sparkline = ({
+  data,
+  className,
+  width = 120,
+  height = 32,
+  color = "currentColor",
+  filled = false,
+  strokeWidth = 1.5,
+  animated = true,
+  ...props
+}: SparklineProps) => {
+  const path = useMemo(() => {
+    if (data.length < 2) return "";
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const padding = strokeWidth;
+    const plotWidth = width - padding * 2;
+    const plotHeight = height - padding * 2;
+
+    const points = data.map((value, i) => ({
+      x: padding + (i / (data.length - 1)) * plotWidth,
+      y: padding + plotHeight - ((value - min) / range) * plotHeight,
+    }));
+
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+  }, [data, width, height, strokeWidth]);
+
+  const areaPath = useMemo(() => {
+    if (!filled || !path) return "";
+    const padding = strokeWidth;
+    const firstX = padding;
+    const lastX = width - padding;
+    return `${path} L ${lastX} ${height - padding} L ${firstX} ${height - padding} Z`;
+  }, [filled, path, width, height, strokeWidth]);
+
+  const pathLength = useMemo(() => {
+    if (data.length < 2) return 0;
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const padding = strokeWidth;
+    const plotWidth = width - padding * 2;
+    const plotHeight = height - padding * 2;
+
+    let length = 0;
+    for (let i = 1; i < data.length; i++) {
+      const x1 = padding + ((i - 1) / (data.length - 1)) * plotWidth;
+      const y1 = padding + plotHeight - ((data[i - 1] - min) / range) * plotHeight;
+      const x2 = padding + (i / (data.length - 1)) * plotWidth;
+      const y2 = padding + plotHeight - ((data[i] - min) / range) * plotHeight;
+      length += Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    }
+    return Math.ceil(length);
+  }, [data, width, height, strokeWidth]);
+
+  if (data.length < 2) return null;
+
+  return (
+    <div className={cn("inline-flex items-center", className)} {...props}>
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        fill="none"
+        aria-hidden="true"
+      >
+        {filled && areaPath && (
+          <path
+            d={areaPath}
+            fill={color}
+            opacity={0.1}
+          />
+        )}
+        <path
+          d={path}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          {...(animated
+            ? {
+                strokeDasharray: pathLength,
+                strokeDashoffset: pathLength,
+                style: {
+                  animation: `sparkline-draw 1s ease-out forwards`,
+                },
+              }
+            : {})}
+        />
+        <style>{`
+          @keyframes sparkline-draw {
+            to { stroke-dashoffset: 0; }
+          }
+        `}</style>
+      </svg>
+    </div>
+  );
+};
+
+Sparkline.displayName = "Sparkline";
+
+export { Sparkline };

package/src/components/Sparkline/index.ts

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

package/src/components/Sparkline/types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+
+export type SparklineProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Array of numeric data points */
+  data: number[];
+  /** Width of the sparkline in pixels */
+  width?: number;
+  /** Height of the sparkline in pixels */
+  height?: number;
+  /** Stroke color (CSS color value) */
+  color?: string;
+  /** Whether to show a filled area under the line */
+  filled?: boolean;
+  /** Stroke width in pixels */
+  strokeWidth?: number;
+  /** Whether to animate the line drawing */
+  animated?: boolean;
+};

package/src/components/SpotlightCard/SpotlightCard.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import type { CSSProperties, MouseEvent } from "react";
+import { useCallback, useRef, useState } from "react";
+import type { SpotlightCardProps } from "./types";
+import { cn } from "../../utilities";
+
+const SpotlightCard = ({
+  children,
+  className,
+  spotlightColor = "oklch(0.7 0.15 250 / 0.15)",
+  spotlightSize = 400,
+  ...props
+}: SpotlightCardProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [, setIsHovered] = useState(false);
+
+  const handleMouseMove = useCallback((e: MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPosition({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "group relative overflow-hidden rounded-lg border bg-base-100 shadow-sm transition-shadow duration-300 hover:shadow-lg",
+        className
+      )}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      {...props}
+    >
+      <div
+        className="pointer-events-none absolute -inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={
+          {
+            background: `radial-gradient(${spotlightSize}px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
+          } as CSSProperties
+        }
+        aria-hidden="true"
+      />
+      <div className="relative">{children}</div>
+    </div>
+  );
+};
+
+SpotlightCard.displayName = "SpotlightCard";
+
+export { SpotlightCard };

package/src/components/SpotlightCard/index.ts

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

package/src/components/SpotlightCard/types.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+
+export type SpotlightCardProps = HTMLAttributes<HTMLDivElement> & {
+  /** Spotlight gradient color */
+  spotlightColor?: string;
+  /** Size of the spotlight in pixels */
+  spotlightSize?: number;
+};

package/src/components/Stat/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getStatsClasses = cva("stats", {
+export const getStatsClasses = cva("stats shadow-sm", {
   variants: createVariants({
     direction: {
       horizontal: "stats-horizontal",

package/src/components/StatCard/StatCard.tsx

@@ -0,0 +1,59 @@
+import { cn } from "../../utilities";
+import type { StatCardProps } from "./types";
+
+const StatCard = ({
+  icon,
+  title,
+  value,
+  description,
+  trend,
+  trendLabel,
+  className,
+  ...props
+}: StatCardProps) => {
+  const isPositive = trend?.startsWith("+");
+  const isNegative = trend?.startsWith("-");
+
+  return (
+    <div
+      className={cn(
+        "relative rounded-2xl border border-base-200 bg-base-100 px-6 pb-6 pt-10 shadow-sm",
+        icon && "pt-14",
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="absolute -top-5 left-6">
+          <div className="flex size-10 items-center justify-center rounded-full bg-base-100 shadow-md ring-1 ring-base-200">
+            {icon}
+          </div>
+        </div>
+      )}
+      <p className="text-sm text-base-content/60">{title}</p>
+      <p className="mt-2 text-3xl font-bold tracking-tight text-base-content">{value}</p>
+      {(trend || description) && (
+        <p className="mt-2 text-sm text-base-content/60">
+          {trend && (
+            <span
+              className={cn(
+                "font-medium",
+                isPositive && "text-success",
+                isNegative && "text-error"
+              )}
+            >
+              {trend}
+            </span>
+          )}
+          {trend && trendLabel && <span> </span>}
+          {trendLabel && <span>{trendLabel}</span>}
+          {!trend && !trendLabel && description}
+        </p>
+      )}
+    </div>
+  );
+};
+
+StatCard.displayName = "StatCard";
+
+export { StatCard };

package/src/components/StatCard/index.ts

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

package/src/components/StatCard/types.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type StatCardProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+  /** Icon element rendered in the lifted badge */
+  icon?: ReactNode;
+  /** Stat label / title */
+  title: ReactNode;
+  /** Main stat value */
+  value: ReactNode;
+  /** Description text below the value */
+  description?: ReactNode;
+  /** Trend value (e.g. "+9.8%") — colored green if positive, red if negative */
+  trend?: string;
+  /** Description shown next to the trend */
+  trendLabel?: string;
+};

package/src/components/Tabs/constants.ts

@@ -5,7 +5,7 @@ export const getTabsListClasses = cva(
 );
 
 export const getTabsTriggerClasses = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-base-100 data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-base-100 data-[state=active]:text-foreground data-[state=active]:shadow-sm"
 );
 
 export const getTabsContentClasses = cva(

package/src/components/TextShimmer/TextShimmer.tsx

@@ -0,0 +1,34 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { TextShimmerProps } from "./types";
+
+const TextShimmer = ({
+  children,
+  className,
+  duration = 2,
+  spread = 2,
+  ...props
+}: TextShimmerProps) => {
+  return (
+    <p
+      className={cn(
+        "animate-text-gradient bg-[length:250%_100%] bg-clip-text text-transparent",
+        "bg-[linear-gradient(90deg,var(--shimmer-from,currentColor)_0%,var(--shimmer-via,oklch(0.7_0.15_250))_50%,var(--shimmer-from,currentColor)_100%)]",
+        className
+      )}
+      style={
+        {
+          "--shimmer-spread": spread,
+          animationDuration: `${duration}s`,
+        } as CSSProperties
+      }
+      {...props}
+    >
+      {children}
+    </p>
+  );
+};
+
+TextShimmer.displayName = "TextShimmer";
+
+export { TextShimmer };

package/src/components/TextShimmer/index.ts

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

package/src/components/TextShimmer/types.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+
+export type TextShimmerProps = HTMLAttributes<HTMLParagraphElement> & {
+  /** Duration of the shimmer animation in seconds */
+  duration?: number;
+  /** Spread of the shimmer gradient (0-1) */
+  spread?: number;
+};

package/src/components/Timeline/constants.ts

@@ -31,7 +31,7 @@ export const getTimelineItemClasses = cva("grid items-center gap-x-2", {
 });
 
 export const getTimelineDotClasses = cva(
-  "timeline-dot col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border",
+  "timeline-dot col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border transition-all duration-200",
   {
     variants: createVariants({
       status: {

package/src/components/Toggle/constants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
 export const getToggleClasses = cva(
-  "transition-colors disabled:pointer-events-none disabled:opacity-50 data-[state=off]:btn-ghost",
+  "transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 data-[state=off]:btn-ghost",
   {
     variants: createVariants({
       link: {

package/src/components/Tooltip/constants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
 export const getTooltipContentClasses = cva(
-  "bg-base-200 text-base-content z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "bg-base-200 text-base-content z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
   {
     variants: createVariants({
       variant: {

package/src/components/TrendBadge/TrendBadge.tsx

@@ -0,0 +1,40 @@
+import { TrendingDownIcon, TrendingUpIcon, MinusIcon } from "lucide-react";
+import { cn } from "../../utilities";
+import { getTrendBadgeClasses, getTrendIconClasses } from "./constants";
+import type { TrendBadgeProps } from "./types";
+
+const TrendBadge = ({
+  value,
+  className,
+  decimalPlaces = 1,
+  showPercent = true,
+  showIcon = true,
+  size = "sm",
+  trend: trendOverride,
+  ...props
+}: TrendBadgeProps) => {
+  const trend = trendOverride ?? (value > 0 ? "up" : value < 0 ? "down" : "neutral");
+  const absValue = Math.abs(value).toFixed(decimalPlaces);
+  const prefix = trend === "up" ? "+" : trend === "down" ? "-" : "";
+
+  const Icon =
+    trend === "up" ? TrendingUpIcon : trend === "down" ? TrendingDownIcon : MinusIcon;
+
+  return (
+    <span
+      className={cn(getTrendBadgeClasses({ trend, size }), className)}
+      {...props}
+    >
+      {showIcon && <Icon className={getTrendIconClasses({ size })} />}
+      <span>
+        {prefix}
+        {absValue}
+        {showPercent && "%"}
+      </span>
+    </span>
+  );
+};
+
+TrendBadge.displayName = "TrendBadge";
+
+export { TrendBadge };

package/src/components/TrendBadge/constants.ts

@@ -0,0 +1,38 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getTrendBadgeClasses = cva(
+  "inline-flex items-center gap-1 font-medium tabular-nums transition-colors duration-200",
+  {
+    variants: createVariants({
+      trend: {
+        up: "text-success",
+        down: "text-error",
+        neutral: "text-base-content/60",
+      },
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    }),
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
+export const getTrendIconClasses = cva("", {
+  variants: createVariants({
+    size: {
+      xs: "size-3",
+      sm: "size-3.5",
+      md: "size-4",
+      lg: "size-5",
+    },
+  }),
+  defaultVariants: {
+    size: "sm",
+  },
+});

package/src/components/TrendBadge/index.ts

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

package/src/components/TrendBadge/types.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+
+export type TrendBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  /** The change value (positive = up, negative = down, zero = neutral) */
+  value: number;
+  /** Number of decimal places to display */
+  decimalPlaces?: number;
+  /** Whether to show the percentage sign */
+  showPercent?: boolean;
+  /** Whether to show the trend arrow icon */
+  showIcon?: boolean;
+  /** Size variant */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Override automatic trend direction */
+  trend?: "up" | "down" | "neutral";
+};

package/src/components/WidgetShell/WidgetShell.tsx

@@ -0,0 +1,101 @@
+import { AlertCircleIcon, InboxIcon, RefreshCwIcon } from "lucide-react";
+import { cn } from "../../utilities";
+import type { WidgetShellProps } from "./types";
+
+const WidgetShell = ({
+  state = "ready",
+  title,
+  description,
+  children,
+  className,
+  errorContent,
+  emptyContent,
+  skeletonLines = 3,
+  onRetry,
+  ...props
+}: WidgetShellProps) => {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-base-100 shadow-sm transition-shadow duration-300",
+        className
+      )}
+      {...props}
+    >
+      {(title || description) && (
+        <div className="border-b px-4 py-3">
+          {title && (
+            <h3 className="text-sm font-semibold">
+              {state === "loading" ? (
+                <span className="skeleton inline-block h-4 w-32 rounded" />
+              ) : (
+                title
+              )}
+            </h3>
+          )}
+          {description && (
+            <p className="mt-0.5 text-xs text-base-content/60">
+              {state === "loading" ? (
+                <span className="skeleton inline-block h-3 w-48 rounded" />
+              ) : (
+                description
+              )}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="p-4">
+        {state === "loading" && (
+          <div className="flex flex-col gap-3" role="status" aria-label="Loading">
+            {Array.from({ length: skeletonLines }, (_, i) => (
+              <span
+                key={i}
+                className="skeleton h-4 rounded"
+                style={{ width: `${100 - i * 15}%` }}
+              />
+            ))}
+          </div>
+        )}
+
+        {state === "error" &&
+          (errorContent ?? (
+            <div className="flex flex-col items-center justify-center gap-3 py-6 text-center">
+              <AlertCircleIcon className="size-8 text-error/60" />
+              <div>
+                <p className="text-sm font-medium">Something went wrong</p>
+                <p className="text-xs text-base-content/60">Failed to load data</p>
+              </div>
+              {onRetry && (
+                <button
+                  type="button"
+                  onClick={onRetry}
+                  className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors duration-200 hover:bg-base-200"
+                >
+                  <RefreshCwIcon className="size-3" />
+                  Retry
+                </button>
+              )}
+            </div>
+          ))}
+
+        {state === "empty" &&
+          (emptyContent ?? (
+            <div className="flex flex-col items-center justify-center gap-3 py-6 text-center">
+              <InboxIcon className="size-8 text-base-content/30" />
+              <div>
+                <p className="text-sm font-medium">No data</p>
+                <p className="text-xs text-base-content/60">Nothing to display yet</p>
+              </div>
+            </div>
+          ))}
+
+        {state === "ready" && children}
+      </div>
+    </div>
+  );
+};
+
+WidgetShell.displayName = "WidgetShell";
+
+export { WidgetShell };

package/src/components/WidgetShell/index.ts

@@ -0,0 +1,2 @@
+export { WidgetShell } from "./WidgetShell";
+export type { WidgetShellProps, WidgetShellState } from "./types";

package/src/components/WidgetShell/types.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type WidgetShellState = "loading" | "error" | "empty" | "ready";
+
+export type WidgetShellProps = HTMLAttributes<HTMLDivElement> & {
+  /** Current state of the widget */
+  state?: WidgetShellState;
+  /** Widget title */
+  title?: ReactNode;
+  /** Widget description */
+  description?: ReactNode;
+  /** Content to show when state is "ready" */
+  children: ReactNode;
+  /** Custom content for error state */
+  errorContent?: ReactNode;
+  /** Custom content for empty state */
+  emptyContent?: ReactNode;
+  /** Number of skeleton lines to show in loading state */
+  skeletonLines?: number;
+  /** Callback when retry is clicked in error state */
+  onRetry?: () => void;
+};