@mbao01/common 0.8.1 → 0.9.0

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

package/src/index.ts

@@ -29,12 +29,17 @@ export * from "./components/Spinner";
 
 /** data display */
 export * from "./components/Accordion";
+export * from "./components/ActivityFeed";
 export * from "./components/Alert";
+export * from "./components/Amount";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
 export * from "./components/Calendar";
+export * from "./components/CircularProgress";
 export * from "./components/Collapsible";
+export * from "./components/CountdownTimer";
+export * from "./components/DataList";
 export * from "./components/Description";
 export * from "./components/Dock";
 export * from "./components/Indicator";
@@ -44,15 +49,21 @@ export * from "./components/List";
 export * from "./components/Progress";
 export * from "./components/Resizable";
 export * from "./components/ScrollArea";
+export * from "./components/ComparisonBar";
 export * from "./components/Separator";
 export * from "./components/Sonner";
+export * from "./components/Sparkline";
 export * from "./components/Stack";
 export * from "./components/Stat";
+export * from "./components/StatCard";
 export * from "./components/Status";
 export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Text";
 export * from "./components/Timeline";
+export * from "./components/TrendBadge";
+export * from "./components/CalendarHeatmap";
+export * from "./components/Greeting";
 
 /** data input */
 export * from "./components/DatetimePicker";
@@ -72,9 +83,11 @@ export * from "./components/Chart";
 export * from "./components/Command";
 export * from "./components/Dialog";
 export * from "./components/HoverCard";
+export * from "./components/KPICard";
 export * from "./components/Popover";
 export * from "./components/Slot";
 export * from "./components/Widget";
+export * from "./components/WidgetShell";
 
 /** molecules */
 export * from "./components/Banner";
@@ -86,3 +99,25 @@ export * from "./components/Footer";
 export * from "./components/Header";
 export * from "./components/Panel";
 export * from "./components/Sheet";
+
+/** inline charts */
+export * from "./components/MiniAreaChart";
+export * from "./components/MiniBarChart";
+export * from "./components/MiniDonutChart";
+export * from "./components/MiniStackedBar";
+
+/** effects */
+export * from "./components/AnimatedCounter";
+export * from "./components/AnimatedGroup";
+export * from "./components/AnimatedList";
+export * from "./components/BorderBeam";
+export * from "./components/Confetti";
+export * from "./components/GlowCard";
+export * from "./components/GradientText";
+export * from "./components/Marquee";
+export * from "./components/Meteors";
+export * from "./components/NumberTicker";
+export * from "./components/Pulse";
+export * from "./components/ShinyButton";
+export * from "./components/SpotlightCard";
+export * from "./components/TextShimmer";