@mbao01/common 0.8.1 → 0.9.0

package/dist/types/index.d.ts

@@ -25,12 +25,17 @@ export * from './components/Image';
 export * from './components/Spinner';
 /** data display */
 export * from './components/Accordion';
+export * from './components/ActivityFeed';
 export * from './components/Alert';
+export * from './components/Amount';
 export * from './components/Avatar';
 export * from './components/Badge';
 export * from './components/Card';
 export * from './components/Calendar';
+export * from './components/CircularProgress';
 export * from './components/Collapsible';
+export * from './components/CountdownTimer';
+export * from './components/DataList';
 export * from './components/Description';
 export * from './components/Dock';
 export * from './components/Indicator';
@@ -40,15 +45,21 @@ export * from './components/List';
 export * from './components/Progress';
 export * from './components/Resizable';
 export * from './components/ScrollArea';
+export * from './components/ComparisonBar';
 export * from './components/Separator';
 export * from './components/Sonner';
+export * from './components/Sparkline';
 export * from './components/Stack';
 export * from './components/Stat';
+export * from './components/StatCard';
 export * from './components/Status';
 export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/Text';
 export * from './components/Timeline';
+export * from './components/TrendBadge';
+export * from './components/CalendarHeatmap';
+export * from './components/Greeting';
 /** data input */
 export * from './components/DatetimePicker';
 export * from './components/FileUploader';
@@ -65,9 +76,11 @@ export * from './components/Chart';
 export * from './components/Command';
 export * from './components/Dialog';
 export * from './components/HoverCard';
+export * from './components/KPICard';
 export * from './components/Popover';
 export * from './components/Slot';
 export * from './components/Widget';
+export * from './components/WidgetShell';
 /** molecules */
 export * from './components/Banner';
 export * from './components/Empty';
@@ -78,3 +91,23 @@ export * from './components/Footer';
 export * from './components/Header';
 export * from './components/Panel';
 export * from './components/Sheet';
+/** inline charts */
+export * from './components/MiniAreaChart';
+export * from './components/MiniBarChart';
+export * from './components/MiniDonutChart';
+export * from './components/MiniStackedBar';
+/** effects */
+export * from './components/AnimatedCounter';
+export * from './components/AnimatedGroup';
+export * from './components/AnimatedList';
+export * from './components/BorderBeam';
+export * from './components/Confetti';
+export * from './components/GlowCard';
+export * from './components/GradientText';
+export * from './components/Marquee';
+export * from './components/Meteors';
+export * from './components/NumberTicker';
+export * from './components/Pulse';
+export * from './components/ShinyButton';
+export * from './components/SpotlightCard';
+export * from './components/TextShimmer';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -80,6 +80,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.38.0",
     "lucide-react": "^0.577.0",
     "react-day-picker": "^9.14.0",
     "react-dropzone": "^14.4.1",

package/src/components/Accordion/constants.ts

@@ -3,7 +3,7 @@ import { cva } from "../../libs";
 export const getAccordionItemClasses = cva("border-b");
 
 export const getAccordionTriggerClasses = cva(
-  "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&:hover:not(:disabled)]:underline disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+  "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all duration-200 [&:hover:not(:disabled)]:underline disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
 );
 
 export const getAccordionContentClasses = cva(

package/src/components/ActivityFeed/ActivityFeed.tsx

@@ -0,0 +1,51 @@
+import { CircleIcon } from "lucide-react";
+import { cn } from "../../utilities";
+import {
+  getActivityFeedClasses,
+  getActivityItemClasses,
+  getActivityIconClasses,
+  getActivityLineClasses,
+  getActivityContentClasses,
+  getActivityTimestampClasses,
+} from "./constants";
+import type { ActivityFeedProps } from "./types";
+
+const ActivityFeed = ({
+  items,
+  className,
+  maxItems,
+  showLine = true,
+  ...props
+}: ActivityFeedProps) => {
+  const displayItems = maxItems ? items.slice(0, maxItems) : items;
+
+  return (
+    <div className={cn(getActivityFeedClasses(), className)} {...props}>
+      {displayItems.map((item, index) => {
+        const isLast = index === displayItems.length - 1;
+
+        return (
+          <div key={item.id} className={getActivityItemClasses()}>
+            <div className={getActivityIconClasses()}>
+              {item.icon ?? <CircleIcon className="size-3" />}
+            </div>
+            {showLine && !isLast && <div className={getActivityLineClasses()} />}
+            <div className={getActivityContentClasses()}>
+              <div className="flex items-start justify-between gap-2">
+                <div className="text-sm">{item.content}</div>
+                {item.meta && <div className="shrink-0">{item.meta}</div>}
+              </div>
+              {item.timestamp && (
+                <span className={getActivityTimestampClasses()}>{item.timestamp}</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ActivityFeed.displayName = "ActivityFeed";
+
+export { ActivityFeed };

package/src/components/ActivityFeed/constants.ts

@@ -0,0 +1,19 @@
+import { cva } from "../../libs";
+
+export const getActivityFeedClasses = cva("flex flex-col");
+
+export const getActivityItemClasses = cva(
+  "group relative flex gap-3 pb-4 last:pb-0 transition-colors duration-150"
+);
+
+export const getActivityIconClasses = cva(
+  "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border bg-base-100 text-base-content/60 transition-colors duration-200 group-hover:border-primary/30 group-hover:text-primary"
+);
+
+export const getActivityLineClasses = cva(
+  "absolute left-4 top-8 -bottom-0 w-px -translate-x-1/2 bg-base-300"
+);
+
+export const getActivityContentClasses = cva("flex min-w-0 flex-1 flex-col gap-0.5 pt-1");
+
+export const getActivityTimestampClasses = cva("text-xs text-base-content/50 tabular-nums");

package/src/components/ActivityFeed/index.ts

@@ -0,0 +1,2 @@
+export { ActivityFeed } from "./ActivityFeed";
+export type { ActivityFeedProps, ActivityItem } from "./types";

package/src/components/ActivityFeed/types.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type ActivityItem = {
+  /** Unique identifier */
+  id: string;
+  /** Icon or avatar to show */
+  icon?: ReactNode;
+  /** Main content/description */
+  content: ReactNode;
+  /** Timestamp or relative time label */
+  timestamp?: string;
+  /** Optional metadata (e.g. amount, status) */
+  meta?: ReactNode;
+};
+
+export type ActivityFeedProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** List of activity items to display */
+  items: ActivityItem[];
+  /** Maximum number of items to show */
+  maxItems?: number;
+  /** Whether to show the connecting line between items */
+  showLine?: boolean;
+};

package/src/components/Alert/constants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
 export const getAlertClasses = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-inherit",
+  "relative w-full rounded-lg border p-4 shadow-sm [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-inherit",
   {
     variants: createVariants({
       variant: {

package/src/components/AlertDialog/constants.ts

@@ -1,5 +1,5 @@
 import { cva } from "../../libs";
 
 export const getDialogCloseClasses = cva(
-  "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+  "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-all duration-200 hover:opacity-100 hover:rotate-90 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 );

package/src/components/Amount/Amount.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { AmountProps } from "./types";
+
+const Amount = ({
+  value,
+  className,
+  currency,
+  locale = "en-US",
+  notation = "standard",
+  minimumFractionDigits,
+  maximumFractionDigits,
+  signDisplay = "auto",
+  colored = false,
+  ...props
+}: AmountProps) => {
+  const formatted = useMemo(() => {
+    const options: Intl.NumberFormatOptions = {
+      notation,
+      signDisplay,
+      minimumFractionDigits,
+      maximumFractionDigits,
+    };
+
+    if (currency) {
+      options.style = "currency";
+      options.currency = currency;
+    }
+
+    return new Intl.NumberFormat(locale, options).format(value);
+  }, [value, currency, locale, notation, minimumFractionDigits, maximumFractionDigits, signDisplay]);
+
+  return (
+    <span
+      className={cn(
+        "tabular-nums",
+        colored && value > 0 && "text-success",
+        colored && value < 0 && "text-error",
+        className
+      )}
+      {...props}
+    >
+      {formatted}
+    </span>
+  );
+};
+
+Amount.displayName = "Amount";
+
+export { Amount };

package/src/components/Amount/index.ts

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

package/src/components/Amount/types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react";
+
+export type AmountProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  /** The numeric value to format */
+  value: number;
+  /** Currency code (e.g. "USD", "EUR", "GBP"). If provided, formats as currency */
+  currency?: string;
+  /** Locale for formatting (default: "en-US") */
+  locale?: string;
+  /** Notation style */
+  notation?: "standard" | "compact" | "scientific" | "engineering";
+  /** Minimum fraction digits */
+  minimumFractionDigits?: number;
+  /** Maximum fraction digits */
+  maximumFractionDigits?: number;
+  /** Whether to show sign for positive values */
+  signDisplay?: "auto" | "never" | "always" | "exceptZero";
+  /** Whether to apply trend coloring (green for positive, red for negative) */
+  colored?: boolean;
+};

package/src/components/AnimatedCounter/AnimatedCounter.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { AnimatedCounterProps } from "./types";
+import { cn } from "../../utilities";
+
+const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+const Digit = ({ digit, className }: { digit: string; className?: string }) => {
+  const numericDigit = parseInt(digit, 10);
+  const isNumber = !isNaN(numericDigit);
+
+  if (!isNumber) {
+    return <span className={className}>{digit}</span>;
+  }
+
+  return (
+    <span className={cn("relative inline-block h-[1em] w-[0.6em] overflow-hidden", className)}>
+      <span
+        className="absolute left-0 flex flex-col transition-transform duration-500 ease-out"
+        style={{ transform: `translateY(-${numericDigit * 10}%)` }}
+      >
+        {DIGITS.map((d) => (
+          <span key={d} className="flex h-[1em] items-center justify-center">
+            {d}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+};
+
+const AnimatedCounter = ({
+  value,
+  className,
+  prefix = "",
+  suffix = "",
+  decimalPlaces = 0,
+  separator = true,
+  ...props
+}: AnimatedCounterProps) => {
+  const [displayValue, setDisplayValue] = useState(value);
+  const prevValue = useRef(value);
+
+  useEffect(() => {
+    prevValue.current = displayValue;
+    setDisplayValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const formatted = separator
+    ? displayValue.toFixed(decimalPlaces).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+    : displayValue.toFixed(decimalPlaces);
+
+  const chars = `${prefix}${formatted}${suffix}`.split("");
+
+  return (
+    <span className={cn("inline-flex tabular-nums", className)} {...props}>
+      {chars.map((char, i) => (
+        <Digit key={`${i}-${char}`} digit={char} />
+      ))}
+    </span>
+  );
+};
+
+AnimatedCounter.displayName = "AnimatedCounter";
+
+export { AnimatedCounter };

package/src/components/AnimatedCounter/index.ts

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

package/src/components/AnimatedCounter/types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+
+export type AnimatedCounterProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  /** Target value to display */
+  value: number;
+  /** Prefix (e.g. "$") */
+  prefix?: string;
+  /** Suffix (e.g. "%") */
+  suffix?: string;
+  /** Number of decimal places */
+  decimalPlaces?: number;
+  /** Whether to include thousand separators */
+  separator?: boolean;
+};

package/src/components/AnimatedGroup/AnimatedGroup.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { Variant, Variants } from "framer-motion";
+import { Children } from "react";
+import { motion } from "framer-motion";
+import type { AnimatedGroupPreset, AnimatedGroupProps } from "./types";
+import { cn } from "../../utilities";
+
+const presetVariants: Record<
+  AnimatedGroupPreset,
+  { container: { hidden: Variant; visible: Variant }; item: { hidden: Variant; visible: Variant } }
+> = {
+  fade: {
+    container: { hidden: { opacity: 0 }, visible: { opacity: 1 } },
+    item: { hidden: { opacity: 0 }, visible: { opacity: 1 } },
+  },
+  slide: {
+    container: { hidden: {}, visible: {} },
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      visible: { opacity: 1, y: 0 },
+    },
+  },
+  scale: {
+    container: { hidden: {}, visible: {} },
+    item: {
+      hidden: { opacity: 0, scale: 0.8 },
+      visible: { opacity: 1, scale: 1 },
+    },
+  },
+  blur: {
+    container: { hidden: {}, visible: {} },
+    item: {
+      hidden: { opacity: 0, filter: "blur(4px)" },
+      visible: { opacity: 1, filter: "blur(0px)" },
+    },
+  },
+  "blur-slide": {
+    container: { hidden: {}, visible: {} },
+    item: {
+      hidden: { opacity: 0, filter: "blur(4px)", y: 12 },
+      visible: { opacity: 1, filter: "blur(0px)", y: 0 },
+    },
+  },
+};
+
+const AnimatedGroup = ({
+  children,
+  className,
+  preset = "fade",
+  variants: customVariants,
+  staggerDelay = 0.1,
+  transition,
+  ...props
+}: AnimatedGroupProps) => {
+  const variants = customVariants ?? presetVariants[preset];
+  const containerVariants = {
+    hidden: variants.container?.hidden ?? {},
+    visible: {
+      ...(variants.container?.visible as Record<string, unknown>),
+      transition: {
+        staggerChildren: staggerDelay,
+        ...transition,
+      },
+    },
+  } as Variants;
+
+  const itemVariants = {
+    hidden: variants.item?.hidden ?? { opacity: 0 },
+    visible: {
+      ...((variants.item?.visible as Record<string, unknown>) ?? { opacity: 1 }),
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.4, 0.25, 1],
+        ...transition,
+      },
+    },
+  } as Variants;
+
+  return (
+    <motion.div
+      className={cn(className)}
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      {...props}
+    >
+      {Children.map(children, (child) => (
+        <motion.div variants={itemVariants}>{child}</motion.div>
+      ))}
+    </motion.div>
+  );
+};
+
+AnimatedGroup.displayName = "AnimatedGroup";
+
+export { AnimatedGroup };

package/src/components/AnimatedGroup/index.ts

@@ -0,0 +1,2 @@
+export { AnimatedGroup } from "./AnimatedGroup";
+export type { AnimatedGroupPreset, AnimatedGroupProps } from "./types";

package/src/components/AnimatedGroup/types.ts

@@ -0,0 +1,21 @@
+import type { Transition, Variant } from "framer-motion";
+import type { HTMLAttributes } from "react";
+
+export type AnimatedGroupPreset = "fade" | "slide" | "scale" | "blur" | "blur-slide";
+
+export type AnimatedGroupProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"
+> & {
+  /** Animation preset */
+  preset?: AnimatedGroupPreset;
+  /** Custom framer-motion variants */
+  variants?: {
+    container?: { hidden?: Variant; visible?: Variant };
+    item?: { hidden?: Variant; visible?: Variant };
+  };
+  /** Stagger delay between children in seconds */
+  staggerDelay?: number;
+  /** Animation transition config */
+  transition?: Transition;
+};

package/src/components/AnimatedList/AnimatedList.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "../../utilities";
+import type { AnimatedListProps } from "./types";
+
+const AnimatedList = ({
+  items,
+  className,
+  maxItems,
+  staggerDelay = 100,
+  ...props
+}: AnimatedListProps) => {
+  const visibleItems = maxItems ? items.slice(-maxItems) : items;
+
+  return (
+    <div className={cn("flex flex-col gap-2 overflow-hidden", className)} {...props}>
+      <AnimatePresence initial={false}>
+        {visibleItems.map((item, index) => (
+          <motion.div
+            key={item.id}
+            layout
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -20, scale: 0.95 }}
+            transition={{
+              duration: 0.3,
+              delay: index * (staggerDelay / 1000),
+              ease: [0.16, 1, 0.3, 1],
+            }}
+          >
+            {item.content}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+AnimatedList.displayName = "AnimatedList";
+
+export { AnimatedList };

package/src/components/AnimatedList/index.ts

@@ -0,0 +1,2 @@
+export { AnimatedList } from "./AnimatedList";
+export type { AnimatedListProps, AnimatedListItem } from "./types";

package/src/components/AnimatedList/types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type AnimatedListItem = {
+  id: string;
+  content: ReactNode;
+};
+
+export type AnimatedListProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Items to display */
+  items: AnimatedListItem[];
+  /** Maximum visible items */
+  maxItems?: number;
+  /** Delay between each item appearing (ms) */
+  staggerDelay?: number;
+};

package/src/components/Badge/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getBadgeClasses = cva("badge", {
+export const getBadgeClasses = cva("badge transition-colors duration-200", {
   variants: createVariants({
     variant: {
       accent: "badge-accent",

package/src/components/Banner/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getBannerClasses = cva("alert alert-vertical sm:alert-horizontal", {
+export const getBannerClasses = cva("alert alert-vertical sm:alert-horizontal shadow-sm", {
   variants: createVariants({
     variant: {
       info: "alert-info",

package/src/components/BorderBeam/BorderBeam.tsx

@@ -0,0 +1,41 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { BorderBeamProps } from "./types";
+
+const BorderBeam = ({
+  className,
+  size = 200,
+  duration = 4,
+  delay = 0,
+  colorFrom = "oklch(0.7 0.25 250)",
+  colorTo = "oklch(0.7 0.2 330)",
+  ...props
+}: BorderBeamProps) => {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent",
+        "[mask-clip:padding-box,border-box] [mask-composite:intersect]",
+        "[mask-image:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff)]",
+        "after:absolute after:aspect-square after:animate-border-beam",
+        "after:bg-[linear-gradient(var(--beam-color-from),var(--beam-color-to),transparent)]",
+        "after:[offset-path:rect(0_auto_auto_0_round_var(--beam-size))]",
+        className
+      )}
+      style={
+        {
+          "--beam-size": `${size}px`,
+          "--beam-color-from": colorFrom,
+          "--beam-color-to": colorTo,
+          "--tw-duration": `${duration}s`,
+          animationDelay: `${delay}s`,
+        } as CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+BorderBeam.displayName = "BorderBeam";
+
+export { BorderBeam };

package/src/components/BorderBeam/index.ts

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

package/src/components/BorderBeam/types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+
+export type BorderBeamProps = HTMLAttributes<HTMLDivElement> & {
+  /** Size of the beam in pixels */
+  size?: number;
+  /** Duration of the animation in seconds */
+  duration?: number;
+  /** Delay before animation starts in seconds */
+  delay?: number;
+  /** Start color of the beam gradient */
+  colorFrom?: string;
+  /** End color of the beam gradient */
+  colorTo?: string;
+};