@mbao01/common 0.8.1 → 0.9.0

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

package/src/components/Pulse/constants.ts

@@ -0,0 +1,55 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getPulseClasses = cva("inline-flex items-center gap-1.5", {
+  variants: createVariants({
+    size: {
+      xs: "text-[10px]",
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+    },
+  }),
+  defaultVariants: { size: "sm" },
+});
+
+export const getPulseDotClasses = cva("relative inline-flex rounded-full", {
+  variants: createVariants({
+    variant: {
+      success: "bg-success",
+      error: "bg-error",
+      warning: "bg-warning",
+      info: "bg-info",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      accent: "bg-accent",
+      neutral: "bg-neutral",
+    },
+    size: {
+      xs: "size-1.5",
+      sm: "size-2",
+      md: "size-2.5",
+      lg: "size-3",
+    },
+  }),
+  defaultVariants: { variant: "success", size: "sm" },
+});
+
+export const getPulseRingClasses = cva(
+  "absolute inset-0 rounded-full animate-ping opacity-75",
+  {
+    variants: createVariants({
+      variant: {
+        success: "bg-success",
+        error: "bg-error",
+        warning: "bg-warning",
+        info: "bg-info",
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        accent: "bg-accent",
+        neutral: "bg-neutral",
+      },
+    }),
+    defaultVariants: { variant: "success" },
+  }
+);

package/src/components/Pulse/index.ts

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

package/src/components/Pulse/types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+
+export type PulseProps = HTMLAttributes<HTMLSpanElement> & {
+  /** Color variant */
+  variant?: "success" | "error" | "warning" | "info" | "primary" | "secondary" | "accent" | "neutral";
+  /** Size variant */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Whether to animate */
+  animated?: boolean;
+  /** Optional label text */
+  label?: string;
+};

package/src/components/Resizable/constants.ts

@@ -6,7 +6,7 @@ export const getResizableClasses = cva(
 );
 
 export const getResizableHandleClasses = cva(
-  "relative flex w-px items-center justify-center border-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+  "relative flex w-px items-center justify-center border-primary transition-colors duration-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
   {
     variants: createVariants({
       bordered: {

package/src/components/Sheet/constants.ts

@@ -30,7 +30,7 @@ export const getSheetClasses = cva(
 );
 
 export const getSheetOverlayClasses = cva(
-  "fixed inset-0 z-40 bg-black/50 transition-opacity duration-300",
+  "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300",
   {
     variants: createVariants({
       open: {

package/src/components/ShinyButton/ShinyButton.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { HTMLMotionProps } from "framer-motion";
+import { motion } from "framer-motion";
+import type { ShinyButtonProps } from "./types";
+import { cn } from "../../utilities";
+
+const animationProps = {
+  initial: { "--x": "100%" },
+  animate: { "--x": "-100%" },
+  transition: {
+    repeat: Infinity,
+    repeatType: "loop" as const,
+    repeatDelay: 1,
+    type: "spring",
+    stiffness: 20,
+    damping: 15,
+    mass: 2,
+  },
+} satisfies HTMLMotionProps<"button">;
+
+const ShinyButton = ({ children, className, ...props }: ShinyButtonProps) => {
+  return (
+    <motion.button
+      {...animationProps}
+      className={cn(
+        "relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out",
+        "bg-[radial-gradient(circle_at_50%_0%,oklch(0.8_0.1_250/0.1)_0%,transparent_60%)]",
+        "hover:shadow-[0_0_20px_oklch(0.7_0.15_250/0.3)]",
+        "dark:bg-[radial-gradient(circle_at_50%_0%,oklch(0.8_0.15_250/0.15)_0%,transparent_60%)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="relative block size-full text-sm tracking-wide"
+        style={{
+          maskImage:
+            "linear-gradient(-75deg, oklch(1 0 0) calc(var(--x) + 20%), transparent calc(var(--x) + 30%), oklch(1 0 0) calc(var(--x) + 100%))",
+        }}
+      >
+        {children}
+      </span>
+      <span
+        style={{
+          mask: "linear-gradient(oklch(0 0 0), oklch(0 0 0)) content-box, linear-gradient(oklch(0 0 0), oklch(0 0 0))",
+          maskComposite: "exclude",
+        }}
+        className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,oklch(1_0_0/0.1)_calc(var(--x)+20%),oklch(1_0_0/0.5)_calc(var(--x)+25%),oklch(1_0_0/0.1)_calc(var(--x)+100%))] p-px"
+      />
+    </motion.button>
+  );
+};
+
+ShinyButton.displayName = "ShinyButton";
+
+export { ShinyButton };

package/src/components/ShinyButton/index.ts

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

package/src/components/ShinyButton/types.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export type ShinyButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"
+> & {
+  children: ReactNode;
+};

package/src/components/Skeleton/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getSkeletonClasses = cva("skeleton", {
+export const getSkeletonClasses = cva("skeleton animate-pulse", {
   variants: createVariants({
     animate: { pulse: "animate-pulse" },
     width: {

package/src/components/Sonner/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getToastClasses = cva("sonner group", {
+export const getToastClasses = cva("sonner group shadow-lg", {
   variants: createVariants({
     variant: {
       accent: "bg-accent text-accent-content border-accent",

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