@mbao01/common 0.8.1 → 0.9.1

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/IconContainer/IconContainer.tsx

@@ -0,0 +1,44 @@
+import { cn } from "../../utilities";
+import { getIconContainerClasses, getIconRaisedContainerClasses } from "./constants";
+import { type IconContainerProps } from "./types";
+
+export const IconContainer = ({
+  variant,
+  size,
+  shape,
+  shadow,
+  outline,
+  soft,
+  raised,
+  className,
+  children,
+  ...props
+}: IconContainerProps) => {
+  const content = raised ? (
+    <div className={getIconRaisedContainerClasses({ size, variant, shadow, raised })}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+
+  return (
+    <div
+      className={cn(
+        getIconContainerClasses({
+          size,
+          soft,
+          shape,
+          variant,
+          outline,
+          raised,
+          shadow: raised ? "none" : shadow,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+};

package/src/components/IconContainer/constants.ts

@@ -0,0 +1,112 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+const variants = createVariants({
+  variant: {
+    accent: "bg-accent text-accent-content",
+    default: "bg-base-200 text-base-content",
+    error: "bg-error text-error-content",
+    ghost: "bg-ghost text-ghost-content",
+    info: "bg-info text-info-content",
+    neutral: "bg-neutral text-neutral-content",
+    primary: "bg-primary text-primary-content",
+    secondary: "bg-secondary text-secondary-content",
+    success: "bg-success text-success-content",
+    warning: "bg-warning text-warning-content",
+  },
+  size: {
+    xs: "size-6 text-xs",
+    sm: "size-8 text-sm",
+    md: "size-10 text-base",
+    lg: "size-12 text-lg",
+    xl: "size-16 text-2xl",
+  },
+  shape: {
+    circle: "rounded-full",
+    square: "rounded-none",
+    rounded: "rounded-lg",
+  },
+  shadow: {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+  },
+  outline: {
+    true: "bg-transparent ring-2 ring-offset-2 ring-offset-base-100",
+  },
+  soft: {
+    true: "",
+  },
+  raised: {
+    true: "ring-3 ring-base-200 bg-base-200 [&>div]:bg-base-100 [&>div]:size-[inherit] [&>div]:rounded-[inherit]",
+  },
+});
+
+export const getIconRaisedContainerClasses = cva(
+  "inline-flex items-center justify-center shrink-0 [&>svg]:size-[1em]",
+  {
+    variants: createVariants({
+      variant: {
+        accent: "bg-accent text-accent",
+        default: "bg-base-200 text-base",
+        error: "bg-error text-error",
+        ghost: "bg-ghost text-ghost",
+        info: "bg-info text-info",
+        neutral: "bg-neutral text-neutral",
+        primary: "bg-primary text-primary",
+        secondary: "bg-secondary text-secondary",
+        success: "bg-success text-success",
+        warning: "bg-warning text-warning",
+      },
+      size: variants.size,
+      shadow: variants.shadow,
+      raised: {
+        true: "",
+      },
+    }),
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shadow: "md",
+    },
+  }
+);
+
+export const getIconContainerClasses = cva(
+  "inline-flex items-center justify-center shrink-0 [&>svg]:size-[1em]",
+  {
+    variants,
+    compoundVariants: [
+      // soft: pastel bg with colored icon
+      { variant: "accent", soft: true, class: "bg-accent/10 text-accent" },
+      { variant: "default", soft: true, class: "bg-base-200/50 text-base-content" },
+      { variant: "error", soft: true, class: "bg-error/10 text-error" },
+      { variant: "ghost", soft: true, class: "bg-base-100 text-base-content" },
+      { variant: "info", soft: true, class: "bg-info/10 text-info" },
+      { variant: "neutral", soft: true, class: "bg-neutral/10 text-neutral" },
+      { variant: "primary", soft: true, class: "bg-primary/10 text-primary" },
+      { variant: "secondary", soft: true, class: "bg-secondary/10 text-secondary" },
+      { variant: "success", soft: true, class: "bg-success/10 text-success" },
+      { variant: "warning", soft: true, class: "bg-warning/10 text-warning" },
+      // outline: variant dictates ring color and icon color
+      { variant: "accent", outline: true, class: "ring-accent text-accent" },
+      { variant: "default", outline: true, class: "ring-base-300 text-base-content" },
+      { variant: "error", outline: true, class: "ring-error text-error" },
+      { variant: "ghost", outline: true, class: "ring-base-300 text-base-content" },
+      { variant: "info", outline: true, class: "ring-info text-info" },
+      { variant: "neutral", outline: true, class: "ring-neutral text-neutral" },
+      { variant: "primary", outline: true, class: "ring-primary text-primary" },
+      { variant: "secondary", outline: true, class: "ring-secondary text-secondary" },
+      { variant: "success", outline: true, class: "ring-success text-success" },
+      { variant: "warning", outline: true, class: "ring-warning text-warning" },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shape: "circle",
+      shadow: "md",
+    },
+  }
+);

package/src/components/IconContainer/index.ts

@@ -0,0 +1 @@
+export { IconContainer } from "./IconContainer";

package/src/components/IconContainer/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getIconContainerClasses } from "./constants";
+
+export type IconContainerProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getIconContainerClasses>;

package/src/components/KPICard/KPICard.tsx

@@ -0,0 +1,75 @@
+import type { KPICardProps } from "./types";
+import { cn } from "../../utilities";
+import { Skeleton } from "../Skeleton";
+import { TrendBadge } from "../TrendBadge";
+
+const KPICard = ({
+  title,
+  value,
+  change,
+  description,
+  chart,
+  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">
+          <Skeleton className="h-4 w-24 rounded" />
+          {icon && <Skeleton className="size-8 rounded-md" />}
+        </div>
+        <div className="mt-4 flex items-end justify-between gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Skeleton className="h-7 w-28 rounded" />
+            <Skeleton className="h-3.5 w-20 rounded" />
+          </div>
+          <Skeleton className="h-8 w-20 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "w-full @container/kpicard overflow-hidden 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="min-w-0 truncate text-sm font-medium text-base-content/60">{title}</span>
+        {icon && (
+          <div className="flex size-8 shrink-0 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="min-w-0 flex flex-col gap-1">
+          <span className="truncate 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="truncate text-xs text-base-content/50">{description}</span>
+            )}
+          </div>
+        </div>
+        {chart && <div className="shrink-0 @max-[160px]/kpicard:hidden">{chart}</div>}
+      </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,18 @@
+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;
+  /** Inline chart element (e.g. Sparkline, MiniBarChart, MiniAreaChart, MiniDonutChart, MiniStackedBar) */
+  chart?: ReactNode;
+  /** 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;
+};