@mbao01/common 0.8.1 → 0.9.0

package/src/components/Form/NativeSelect/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getNativeSelectClasses = cva("select", {
+export const getNativeSelectClasses = cva("select transition-all duration-200", {
   variants: createVariants({
     nativeOptions: {
       true: "appearance-none",

package/src/components/Form/Radio/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getRadioClasses = cva("radio", {
+export const getRadioClasses = cva("radio transition-all duration-200", {
   variants: createVariants({
     variant: {
       primary: "radio-primary",

package/src/components/Form/Select/constants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
 export const getSelectTriggerClasses = cva(
-  "select flex items-center justify-between rounded-md text-sm text-left disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-100",
+  "select flex items-center justify-between rounded-md text-sm text-left disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200",
   {
     variants: createVariants({
       variant: {

package/src/components/Form/Slider/constants.ts

@@ -58,7 +58,7 @@ export const getSliderClasses = cva("absolute h-full", {
 });
 
 export const getSliderThumbClasses = cva(
-  "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-all duration-200 hover:scale-110 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: createVariants({
       variant: {

package/src/components/Form/Switch/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getSwitchClasses = cva("toggle", {
+export const getSwitchClasses = cva("toggle transition-all duration-200", {
   variants: createVariants({
     variant: {
       primary: "toggle-primary",

package/src/components/Form/Textarea/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getTextareaClasses = cva("textarea rounded-md transition-all duration-100", {
+export const getTextareaClasses = cva("textarea rounded-md transition-all duration-200", {
   variants: createVariants({
     variant: {
       default: "bg-transparent",

package/src/components/GlowCard/GlowCard.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { GlowCardProps } from "./types";
+
+const GlowCard = ({
+  children,
+  className,
+  gradientFrom = "oklch(0.7 0.25 250)",
+  gradientVia = "oklch(0.7 0.2 330)",
+  gradientTo = "oklch(0.7 0.25 150)",
+  ...props
+}: GlowCardProps) => {
+  return (
+    <div
+      className={cn(
+        "group relative rounded-xl p-px transition-shadow duration-500",
+        className
+      )}
+      {...props}
+    >
+      <div
+        className="absolute -inset-px rounded-xl opacity-50 blur-sm transition-opacity duration-500 group-hover:opacity-100"
+        style={
+          {
+            background: `linear-gradient(135deg, ${gradientFrom}, ${gradientVia}, ${gradientTo})`,
+          } as CSSProperties
+        }
+        aria-hidden="true"
+      />
+      <div
+        className="absolute -inset-px rounded-xl opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+        style={
+          {
+            background: `linear-gradient(135deg, ${gradientFrom}, ${gradientVia}, ${gradientTo})`,
+          } as CSSProperties
+        }
+        aria-hidden="true"
+      />
+      <div className="relative rounded-xl bg-base-100 p-6">{children}</div>
+    </div>
+  );
+};
+
+GlowCard.displayName = "GlowCard";
+
+export { GlowCard };

package/src/components/GlowCard/index.ts

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

package/src/components/GlowCard/types.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type GlowCardProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  /** Gradient colors for the glow border */
+  gradientFrom?: string;
+  gradientVia?: string;
+  gradientTo?: string;
+};

package/src/components/GradientText/GradientText.tsx

@@ -0,0 +1,36 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { GradientTextProps } from "./types";
+
+const GradientText = ({
+  children,
+  className,
+  from = "oklch(0.7 0.25 250)",
+  via,
+  to = "oklch(0.7 0.2 330)",
+  angle = 135,
+  animated = false,
+  ...props
+}: GradientTextProps) => {
+  const gradient = via
+    ? `linear-gradient(${angle}deg, ${from}, ${via}, ${to})`
+    : `linear-gradient(${angle}deg, ${from}, ${to})`;
+
+  return (
+    <span
+      className={cn(
+        "bg-clip-text text-transparent",
+        animated && "animate-gradient bg-[length:300%_100%]",
+        className
+      )}
+      style={{ backgroundImage: gradient } as CSSProperties}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+GradientText.displayName = "GradientText";
+
+export { GradientText };

package/src/components/GradientText/index.ts

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

package/src/components/GradientText/types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type GradientTextProps = HTMLAttributes<HTMLSpanElement> & {
+  children: ReactNode;
+  /** Gradient start color */
+  from?: string;
+  /** Gradient middle color */
+  via?: string;
+  /** Gradient end color */
+  to?: string;
+  /** Gradient direction in degrees */
+  angle?: number;
+  /** Whether to animate the gradient */
+  animated?: boolean;
+};

package/src/components/Greeting/Greeting.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { GreetingProps } from "./types";
+
+const getTimeGreeting = () => {
+  const hour = new Date().getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 17) return "Good afternoon";
+  return "Good evening";
+};
+
+const Greeting = ({
+  name,
+  className,
+  subtitle,
+  greeting: customGreeting,
+  ...props
+}: GreetingProps) => {
+  const greeting = useMemo(() => customGreeting ?? getTimeGreeting(), [customGreeting]);
+
+  const dateStr = useMemo(
+    () =>
+      new Date().toLocaleDateString("en-US", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      }),
+    []
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)} {...props}>
+      <h1 className="text-2xl font-bold tracking-tight">
+        {greeting}, {name}
+      </h1>
+      <p className="text-sm text-base-content/60">
+        {subtitle ?? dateStr}
+      </p>
+    </div>
+  );
+};
+
+Greeting.displayName = "Greeting";
+
+export { Greeting };

package/src/components/Greeting/index.ts

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

package/src/components/Greeting/types.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+
+export type GreetingProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** User's name */
+  name: string;
+  /** Optional subtitle/context line */
+  subtitle?: string;
+  /** Custom greeting override (bypasses time-based greeting) */
+  greeting?: string;
+};

package/src/components/KPICard/KPICard.tsx

@@ -0,0 +1,85 @@
+import { cn } from "../../utilities";
+import { Sparkline } from "../Sparkline";
+import { TrendBadge } from "../TrendBadge";
+import type { KPICardProps } from "./types";
+
+const KPICard = ({
+  title,
+  value,
+  change,
+  description,
+  sparklineData,
+  sparklineColor,
+  sparklineFilled = true,
+  icon,
+  loading = false,
+  className,
+  ...props
+}: KPICardProps) => {
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          "rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-between">
+          <span className="skeleton h-4 w-24 rounded" />
+          {icon && <span className="skeleton size-8 rounded-md" />}
+        </div>
+        <div className="mt-3 flex items-end justify-between gap-4">
+          <div className="flex flex-col gap-1.5">
+            <span className="skeleton h-7 w-28 rounded" />
+            <span className="skeleton h-3.5 w-20 rounded" />
+          </div>
+          <span className="skeleton h-8 w-20 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-base-content/60">{title}</span>
+        {icon && (
+          <div className="flex size-8 items-center justify-center rounded-md bg-base-200/50 text-base-content/60">
+            {icon}
+          </div>
+        )}
+      </div>
+      <div className="mt-3 flex items-end justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <span className="text-2xl font-bold tracking-tight">{value}</span>
+          <div className="flex items-center gap-2">
+            {change !== undefined && <TrendBadge value={change} size="xs" />}
+            {description && (
+              <span className="text-xs text-base-content/50">{description}</span>
+            )}
+          </div>
+        </div>
+        {sparklineData && sparklineData.length >= 2 && (
+          <Sparkline
+            data={sparklineData}
+            color={sparklineColor ?? (change !== undefined && change >= 0 ? "oklch(0.7 0.2 150)" : "oklch(0.65 0.25 25)")}
+            filled={sparklineFilled}
+            width={80}
+            height={32}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+KPICard.displayName = "KPICard";
+
+export { KPICard };

package/src/components/KPICard/index.ts

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

package/src/components/KPICard/types.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
+  /** Card title/label */
+  title: string;
+  /** Primary value to display */
+  value: ReactNode;
+  /** Trend change percentage */
+  change?: number;
+  /** Description text below value */
+  description?: string;
+  /** Sparkline data points */
+  sparklineData?: number[];
+  /** Sparkline color */
+  sparklineColor?: string;
+  /** Whether sparkline is filled */
+  sparklineFilled?: boolean;
+  /** Icon to show in the card */
+  icon?: ReactNode;
+  /** Loading state */
+  loading?: boolean;
+};

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