@mbao01/common 0.8.0 → 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.0",
+  "version": "0.9.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -45,25 +45,6 @@
   "sideEffects": [
     "*.css"
   ],
-  "scripts": {
-    "clean": "pnpx rimraf node_modules",
-    "dev": "storybook dev -p 6006",
-    "build": "tsc && vite build",
-    "build-storybook": "storybook build -o ../../docs/storybook/common",
-    "lint": "eslint --report-unused-disable-directives --max-warnings 30",
-    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
-    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "preview": "vite preview",
-    "prod": "pnpx http-server ../../docs/storybook/common --port 6006",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:ui": "vitest --ui",
-    "test:visual": "test-storybook --url http://127.0.0.1:6006",
-    "test:visual:coverage": "test-storybook --coverage --url http://127.0.0.1:6006",
-    "test:visual:ci": "test-storybook --ci --verbose --url http://127.0.0.1:6006",
-    "test:visual:watch": "test-storybook --watch --url http://127.0.0.1:6006",
-    "test:watch": "vitest"
-  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -99,64 +80,65 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.562.0",
-    "react-day-picker": "^9.13.0",
-    "react-dropzone": "^14.3.8",
-    "react-international-phone": "^4.6.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^0.577.0",
+    "react-day-picker": "^9.14.0",
+    "react-dropzone": "^14.4.1",
+    "react-international-phone": "^4.8.0",
     "react-otp-input": "^3.1.1",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "timescape": "^0.8.0",
     "universal-cookie": "^8.0.1",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@storybook/addon-a11y": "^10.1.11",
+    "@eslint/js": "^9.39.4",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
+    "@storybook/addon-a11y": "^10.2.19",
     "@storybook/addon-coverage": "^3.0.0",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-onboarding": "^10.1.11",
-    "@storybook/addon-themes": "^10.1.11",
-    "@storybook/react-vite": "^10.1.11",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-links": "^10.2.19",
+    "@storybook/addon-onboarding": "^10.2.19",
+    "@storybook/addon-themes": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@storybook/test-runner": "^0.24.2",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.52.0",
-    "@typescript-eslint/parser": "^8.52.0",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@types/jest-image-snapshot": "^6.4.1",
+    "@types/node": "^25.5.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vitejs/plugin-react": "^5.2.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "axe-playwright": "^2.2.2",
-    "daisyui": "^5.5.14",
-    "eslint": "^9.39.2",
+    "daisyui": "^5.5.19",
+    "eslint": "^9.39.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-storybook": "^10.2.19",
     "globals": "^16.5.0",
-    "jest-image-snapshot": "^6.5.1",
+    "jest-image-snapshot": "^6.5.2",
     "jsdom": "^27.4.0",
     "path": "^0.12.7",
-    "postcss": "^8.5.6",
-    "prettier": "^3.7.4",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-router-dom": "^7.12.0",
-    "recharts": "^3.6.0",
-    "storybook": "^10.1.11",
-    "tailwindcss": "^4.1.18",
+    "postcss": "^8.5.8",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "recharts": "^3.8.0",
+    "storybook": "^10.2.19",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.52.0",
+    "typescript-eslint": "^8.57.0",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +150,23 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "b6672fc3b616ea6c677396506190b821ae12c9d8"
-}
+  "scripts": {
+    "clean": "pnpx rimraf node_modules",
+    "dev": "storybook dev -p 6006",
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build -o ../../docs/storybook/common",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 30",
+    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "preview": "vite preview",
+    "prod": "pnpx http-server ../../docs/storybook/common --port 6006",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "test:visual": "test-storybook --url http://127.0.0.1:6006",
+    "test:visual:coverage": "test-storybook --coverage --url http://127.0.0.1:6006",
+    "test:visual:ci": "test-storybook --ci --verbose --url http://127.0.0.1:6006",
+    "test:visual:watch": "test-storybook --watch --url http://127.0.0.1:6006",
+    "test:watch": "vitest"
+  }
+}

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