@mbao01/common 0.8.0 → 0.9.0

package/src/components/Marquee/Marquee.tsx

@@ -0,0 +1,45 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { MarqueeProps } from "./types";
+
+const Marquee = ({
+  children,
+  className,
+  speed = 40,
+  direction = "left",
+  pauseOnHover = true,
+  gap = 16,
+  ...props
+}: MarqueeProps) => {
+  const animationDirection = direction === "left" ? "normal" : "reverse";
+
+  return (
+    <div
+      className={cn(
+        "group flex overflow-hidden [--gap:16px]",
+        pauseOnHover && "[&:hover_>_.marquee-track]:paused",
+        className
+      )}
+      style={{ "--gap": `${gap}px` } as CSSProperties}
+      {...props}
+    >
+      {[0, 1].map((i) => (
+        <div
+          key={i}
+          className="marquee-track flex shrink-0 animate-marquee items-center justify-around gap-[var(--gap)]"
+          style={{
+            animationDirection,
+            animationDuration: `${speed}s`,
+          }}
+          aria-hidden={i === 1 ? "true" : undefined}
+        >
+          {children}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+Marquee.displayName = "Marquee";
+
+export { Marquee };

package/src/components/Marquee/index.ts

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

package/src/components/Marquee/types.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type MarqueeProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  /** Speed in pixels per second */
+  speed?: number;
+  /** Direction of scroll */
+  direction?: "left" | "right";
+  /** Pause on hover */
+  pauseOnHover?: boolean;
+  /** Gap between repeated items */
+  gap?: number;
+};

package/src/components/Menu/Menubar/constants.ts

@@ -38,7 +38,7 @@ export const getMenubarClasses = cva(
 );
 
 export const getMenubarTriggerClasses = cva(
-  "flex cursor-default select-none items-center rounded-xs px-3 py-1 text-sm font-medium outline-hidden",
+  "flex cursor-default select-none items-center rounded-xs px-3 py-1 text-sm font-medium outline-hidden transition-colors duration-200",
   {
     variants: createVariants({
       variant: triggerVariant,
@@ -67,7 +67,7 @@ export const getMenubarSubContentClasses = cva(
 );
 
 export const getMenubarItemClasses = cva(
-  "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+  "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors duration-150 data-disabled:pointer-events-none data-disabled:opacity-50",
   {
     variants: createVariants({
       variant: itemVariant,

package/src/components/Menu/NavigationMenu/constants.ts

@@ -10,7 +10,7 @@ export const getNavigationMenuListClasses = cva(
 );
 
 export const getNavigationMenuTriggerClasses = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50",
   {
     variants: createVariants({
       variant: {
@@ -41,7 +41,7 @@ export const getNavigationMenuContentClasses = cva(
 );
 
 export const getNavigationMenuViewportClasses = cva(
-  "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-base-100 shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
+  "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-base-100 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
 );
 
 export const getNavigationMenuIndicatorClasses = cva(

package/src/components/Meteors/Meteors.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { MeteorsProps } from "./types";
+
+const Meteors = ({ className, count = 20, ...props }: MeteorsProps) => {
+  const meteors = useMemo(
+    () =>
+      Array.from({ length: count }, (_, i) => ({
+        id: i,
+        left: `${Math.floor(Math.random() * 100)}%`,
+        delay: `${Math.random() * 5}s`,
+        duration: `${Math.floor(Math.random() * 3 + 2)}s`,
+      })),
+    [count]
+  );
+
+  return (
+    <div className={cn("pointer-events-none absolute inset-0 overflow-hidden", className)} {...props}>
+      {meteors.map((meteor) => (
+        <span
+          key={meteor.id}
+          className="absolute top-0 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-full bg-base-content shadow-[0_0_0_1px_oklch(1_0_0/0.1),0_0_10px_oklch(1_0_0/0.2)]"
+          style={{
+            left: meteor.left,
+            animationDelay: meteor.delay,
+            animationDuration: meteor.duration,
+          }}
+        >
+          <span className="pointer-events-none absolute top-1/2 -z-10 h-px w-12 -translate-y-1/2 bg-gradient-to-r from-base-content/80 to-transparent" />
+        </span>
+      ))}
+    </div>
+  );
+};
+
+Meteors.displayName = "Meteors";
+
+export { Meteors };

package/src/components/Meteors/index.ts

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

package/src/components/Meteors/types.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+
+export type MeteorsProps = HTMLAttributes<HTMLDivElement> & {
+  /** Number of meteors to render */
+  count?: number;
+};

package/src/components/MiniAreaChart/MiniAreaChart.tsx

@@ -0,0 +1,68 @@
+import { useMemo } from "react";
+import type { MiniAreaChartProps } from "./types";
+import { cn } from "../../utilities";
+
+const MiniAreaChart = ({
+  data,
+  className,
+  width = 100,
+  height = 32,
+  color = "currentColor",
+  gradientOpacity = 0.15,
+  strokeWidth = 1.5,
+  ...props
+}: MiniAreaChartProps) => {
+  const { linePath, areaPath } = useMemo(() => {
+    if (data.length < 2) return { linePath: "", areaPath: "" };
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const pad = strokeWidth;
+
+    const points = data.map((v, i) => ({
+      x: pad + (i / (data.length - 1)) * (width - pad * 2),
+      y: pad + (height - pad * 2) - ((v - min) / range) * (height - pad * 2),
+    }));
+
+    const line = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+    const area = `${line} L ${points[points.length - 1].x} ${height} L ${points[0].x} ${height} Z`;
+
+    return { linePath: line, areaPath: area };
+  }, [data, width, height, strokeWidth]);
+  const randomId = useMemo(() => Math.random().toString(36).slice(2, 8), []);
+
+  if (data.length < 2) return null;
+
+  const gradientId = `mini-area-${randomId}`;
+
+  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"
+      >
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity={gradientOpacity} />
+            <stop offset="100%" stopColor={color} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <path d={areaPath} fill={`url(#${gradientId})`} />
+        <path
+          d={linePath}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};
+
+MiniAreaChart.displayName = "MiniAreaChart";
+
+export { MiniAreaChart };

package/src/components/MiniAreaChart/index.ts

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

package/src/components/MiniAreaChart/types.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "react";
+
+export type MiniAreaChartProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  /** Gradient opacity at the bottom */
+  gradientOpacity?: number;
+  strokeWidth?: number;
+};

package/src/components/MiniBarChart/MiniBarChart.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { MiniBarChartProps } from "./types";
+
+const MiniBarChart = ({
+  data,
+  className,
+  width = 80,
+  height = 32,
+  color = "currentColor",
+  highlightLast = false,
+  gap = 1,
+  ...props
+}: MiniBarChartProps) => {
+  const max = useMemo(() => Math.max(1, ...data), [data]);
+
+  if (data.length === 0) return null;
+
+  const barWidth = (width - (data.length - 1) * gap) / data.length;
+
+  return (
+    <div className={cn("inline-flex items-end", className)} {...props}>
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
+        {data.map((value, i) => {
+          const barHeight = (value / max) * (height - 2);
+          const x = i * (barWidth + gap);
+          const y = height - barHeight;
+          const isLast = i === data.length - 1;
+          return (
+            <rect
+              key={i}
+              x={x}
+              y={y}
+              width={Math.max(barWidth, 1)}
+              height={barHeight}
+              rx={1}
+              fill={color}
+              opacity={highlightLast && !isLast ? 0.4 : 1}
+            />
+          );
+        })}
+      </svg>
+    </div>
+  );
+};
+
+MiniBarChart.displayName = "MiniBarChart";
+
+export { MiniBarChart };

package/src/components/MiniBarChart/index.ts

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

package/src/components/MiniBarChart/types.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+
+export type MiniBarChartProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Array of numeric values */
+  data: number[];
+  /** Width in pixels */
+  width?: number;
+  /** Height in pixels */
+  height?: number;
+  /** Bar color */
+  color?: string;
+  /** Whether to highlight the last bar */
+  highlightLast?: boolean;
+  /** Gap between bars in pixels */
+  gap?: number;
+};

package/src/components/MiniDonutChart/MiniDonutChart.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { MiniDonutChartProps } 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 MiniDonutChart = ({
+  segments,
+  className,
+  size = 48,
+  thickness = 0.3,
+  label,
+  ...props
+}: MiniDonutChartProps) => {
+  const paths = useMemo(() => {
+    const total = segments.reduce((sum, s) => sum + s.value, 0);
+    if (total === 0) return [];
+
+    const cx = size / 2;
+    const cy = size / 2;
+    const outerR = size / 2 - 1;
+    const innerR = outerR * (1 - thickness);
+
+    let startAngle = -90;
+    return segments.map((seg, i) => {
+      const sweepAngle = (seg.value / total) * 360;
+      const endAngle = startAngle + sweepAngle;
+
+      const startRad = (startAngle * Math.PI) / 180;
+      const endRad = (endAngle * Math.PI) / 180;
+
+      const x1 = cx + outerR * Math.cos(startRad);
+      const y1 = cy + outerR * Math.sin(startRad);
+      const x2 = cx + outerR * Math.cos(endRad);
+      const y2 = cy + outerR * Math.sin(endRad);
+      const x3 = cx + innerR * Math.cos(endRad);
+      const y3 = cy + innerR * Math.sin(endRad);
+      const x4 = cx + innerR * Math.cos(startRad);
+      const y4 = cy + innerR * Math.sin(startRad);
+
+      const largeArc = sweepAngle > 180 ? 1 : 0;
+
+      const d = [
+        `M ${x1} ${y1}`,
+        `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}`,
+        `L ${x3} ${y3}`,
+        `A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4}`,
+        "Z",
+      ].join(" ");
+
+      startAngle = endAngle;
+
+      return {
+        d,
+        color: seg.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+        title: seg.label ? `${seg.label}: ${seg.value}` : undefined,
+      };
+    });
+  }, [segments, size, thickness]);
+
+  return (
+    <div className={cn("relative inline-flex items-center justify-center", className)} {...props}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
+        {paths.map((p, i) => (
+          <path key={i} d={p.d} fill={p.color}>
+            {p.title && <title>{p.title}</title>}
+          </path>
+        ))}
+      </svg>
+      {label && (
+        <span className="absolute inset-0 flex items-center justify-center text-[10px] font-semibold tabular-nums">
+          {label}
+        </span>
+      )}
+    </div>
+  );
+};
+
+MiniDonutChart.displayName = "MiniDonutChart";
+
+export { MiniDonutChart };

package/src/components/MiniDonutChart/index.ts

@@ -0,0 +1,2 @@
+export { MiniDonutChart } from "./MiniDonutChart";
+export type { MiniDonutChartProps, DonutSegment } from "./types";

package/src/components/MiniDonutChart/types.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type DonutSegment = {
+  value: number;
+  color?: string;
+  label?: string;
+};
+
+export type MiniDonutChartProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  segments: DonutSegment[];
+  /** Size in pixels */
+  size?: number;
+  /** Ring thickness as percentage of radius (0-1) */
+  thickness?: number;
+  /** Center label */
+  label?: ReactNode;
+};

package/src/components/MiniStackedBar/MiniStackedBar.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { MiniStackedBarProps } 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 MiniStackedBar = ({
+  segments,
+  className,
+  height = 8,
+  showLabels = false,
+  ...props
+}: MiniStackedBarProps) => {
+  const total = useMemo(() => segments.reduce((sum, s) => sum + s.value, 0), [segments]);
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)} {...props}>
+      <div className="flex w-full overflow-hidden rounded-full" style={{ height }}>
+        {segments.map((seg, i) => {
+          const pct = total > 0 ? (seg.value / total) * 100 : 0;
+          return (
+            <div
+              key={i}
+              className="transition-all duration-500"
+              style={{
+                width: `${pct}%`,
+                backgroundColor: seg.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+              }}
+              title={seg.label ? `${seg.label}: ${pct.toFixed(1)}%` : `${pct.toFixed(1)}%`}
+            />
+          );
+        })}
+      </div>
+      {showLabels && (
+        <div className="flex gap-3">
+          {segments.map((seg, i) => (
+            <div key={i} className="flex items-center gap-1">
+              <span
+                className="size-2 rounded-full"
+                style={{ backgroundColor: seg.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length] }}
+              />
+              <span className="text-[10px] text-base-content/60">
+                {seg.label ?? `${((seg.value / total) * 100).toFixed(0)}%`}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+MiniStackedBar.displayName = "MiniStackedBar";
+
+export { MiniStackedBar };

package/src/components/MiniStackedBar/index.ts

@@ -0,0 +1,2 @@
+export { MiniStackedBar } from "./MiniStackedBar";
+export type { MiniStackedBarProps, StackedSegment } from "./types";

package/src/components/MiniStackedBar/types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+
+export type StackedSegment = {
+  value: number;
+  color?: string;
+  label?: string;
+};
+
+export type MiniStackedBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  segments: StackedSegment[];
+  /** Height in pixels */
+  height?: number;
+  /** Whether to show percentage labels below */
+  showLabels?: boolean;
+};

package/src/components/NumberTicker/NumberTicker.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../utilities";
+import type { NumberTickerProps } from "./types";
+
+const NumberTicker = ({
+  value,
+  className,
+  duration = 2,
+  decimalPlaces = 0,
+  delay = 0,
+  ...props
+}: NumberTickerProps) => {
+  const [displayValue, setDisplayValue] = useState(0);
+  const [hasStarted, setHasStarted] = useState(false);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setHasStarted(true), delay * 1000);
+    return () => clearTimeout(timeout);
+  }, [delay]);
+
+  useEffect(() => {
+    if (!hasStarted) return;
+
+    const startTime = performance.now();
+    const durationMs = duration * 1000;
+
+    const tick = (now: number) => {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / durationMs, 1);
+      // Ease out cubic
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setDisplayValue(eased * value);
+
+      if (progress < 1) {
+        requestAnimationFrame(tick);
+      }
+    };
+
+    requestAnimationFrame(tick);
+  }, [value, duration, hasStarted]);
+
+  return (
+    <span
+      ref={ref}
+      className={cn("tabular-nums", className)}
+      {...props}
+    >
+      {displayValue.toFixed(decimalPlaces)}
+    </span>
+  );
+};
+
+NumberTicker.displayName = "NumberTicker";
+
+export { NumberTicker };

package/src/components/NumberTicker/index.ts

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

package/src/components/NumberTicker/types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+
+export type NumberTickerProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  /** The target number to count to */
+  value: number;
+  /** Duration of the animation in seconds */
+  duration?: number;
+  /** Decimal places to show */
+  decimalPlaces?: number;
+  /** Delay before animation starts in seconds */
+  delay?: number;
+};

package/src/components/Pagination/constants.ts

@@ -6,6 +6,6 @@ export const getPaginationContentClasses = cva("flex flex-row items-center gap-1
 
 export const getPaginationEllipsisClasses = cva("flex h-9 w-9 items-center justify-center");
 
-export const getPaginationNextClasses = cva("gap-1 px-3");
+export const getPaginationNextClasses = cva("gap-1 px-3 transition-colors duration-200");
 
-export const getPaginationPreviousClasses = cva("gap-1 px-3");
+export const getPaginationPreviousClasses = cva("gap-1 px-3 transition-colors duration-200");

package/src/components/Progress/constants.ts

@@ -21,7 +21,7 @@ export const getProgressClasses = cva("relative h-2 w-full overflow-hidden round
   },
 });
 
-export const getProgressIndicatorClasses = cva("h-full w-full flex-1 transition-all", {
+export const getProgressIndicatorClasses = cva("h-full w-full flex-1 rounded-full transition-all duration-500 ease-out", {
   variants: createVariants({
     variant: {
       accent: "bg-accent",

package/src/components/Pulse/Pulse.tsx

@@ -0,0 +1,26 @@
+import { cn } from "../../utilities";
+import { getPulseClasses, getPulseDotClasses, getPulseRingClasses } from "./constants";
+import type { PulseProps } from "./types";
+
+const Pulse = ({
+  variant = "success",
+  size = "sm",
+  animated = true,
+  label,
+  className,
+  ...props
+}: PulseProps) => {
+  return (
+    <span className={cn(getPulseClasses({ size }), className)} {...props}>
+      <span className="relative inline-flex">
+        {animated && <span className={getPulseRingClasses({ variant })} />}
+        <span className={getPulseDotClasses({ variant, size })} />
+      </span>
+      {label && <span className="text-base-content/70">{label}</span>}
+    </span>
+  );
+};
+
+Pulse.displayName = "Pulse";
+
+export { Pulse };