@mbao01/common 0.8.0 → 0.9.0

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

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