flikkui 0.2.0-beta.10 → 0.2.0-beta.12

package/README.md

@@ -1,224 +1,13 @@
 # Flikkui
 
-A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete `className` override support.
+A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion.
 
 ## Installation
 
 ```bash
 npm install flikkui
-# or
-yarn add flikkui
 ```
 
-## Setup
-
-The quickest way to get started is with the CLI init command. It auto-detects your project type (Next.js, Vite, Remix, CRA), installs peer dependencies, and injects the CSS import into your entry file:
-
-```bash
-npx flikkui init
-```
-
-Options:
-
-| Flag | Description |
-|------|-------------|
-| `--tailwind`, `-t` | Set up Tailwind CSS integration (adds preset and content paths) |
-| `--yes`, `-y` | Skip prompts and use defaults |
-| `--skip-install` | Skip installing dependencies (prints manual command instead) |
-
-### Manual Setup
-
-If you prefer to set things up yourself:
-
-1. Install peer dependencies:
-
-```bash
-npm install react react-dom tailwindcss motion clsx tailwind-merge @heroicons/react
-# or
-yarn add react react-dom tailwindcss motion clsx tailwind-merge @heroicons/react
-```
-
-2. Import styles in your main app file:
-
-```tsx
-import 'flikkui/styles.css'
-```
-
-## Basic Usage
-
-```tsx
-import { Button } from 'flikkui'
-
-function App() {
-  return <Button variant="filled" color="primary">Click me</Button>
-}
-```
-
-### Subpath Imports
-
-Import from specific categories to optimize bundle size:
-
-```tsx
-import { Button, Badge, Accordion } from 'flikkui/core'
-import { Input, Select, Checkbox } from 'flikkui/forms'
-import { AreaChart, BarChart } from 'flikkui/charts'
-import { GlassEffect } from 'flikkui/effects'
-```
-
-## Customizing the Theme
-
-Flikkui uses CSS variables for all theming. Override any variable in your own CSS to customize colors, spacing, border radius, and more.
-
-### Colors
-
-Override semantic color palettes by redefining the CSS variables after importing the library styles:
-
-```css
-:root {
-  /* Change the primary color to green */
-  --color-primary-50: oklch(0.982 0.018 155.826);
-  --color-primary-100: oklch(0.962 0.044 156.743);
-  --color-primary-200: oklch(0.925 0.084 155.995);
-  --color-primary-300: oklch(0.871 0.15 154.449);
-  --color-primary-400: oklch(0.792 0.209 151.711);
-  --color-primary-500: oklch(0.723 0.219 149.579);
-  --color-primary-600: oklch(0.627 0.194 149.214);
-  --color-primary-700: oklch(0.527 0.154 150.069);
-  --color-primary-800: oklch(0.448 0.119 151.328);
-  --color-primary-900: oklch(0.393 0.095 152.535);
-  --color-primary-950: oklch(0.266 0.065 152.934);
-
-  --color-primary: var(--color-primary-600);
-}
-```
-
-Available color palettes: `primary`, `danger`, `success`, `warning`. Each has shades from `50` to `950`.
-
-### Text Colors
-
-```css
-:root {
-  --color-text-primary: var(--color-neutral-950);
-  --color-text-secondary: var(--color-neutral-800);
-  --color-text-placeholder: var(--color-neutral-600);
-  --color-text-muted: var(--color-neutral-500);
-  --color-text-disabled: var(--color-neutral-400);
-  --color-text-inverse: var(--color-neutral-50);
-}
-```
-
-### Backgrounds & Borders
-
-```css
-:root {
-  --color-background: oklch(98.5% 0.002 247.839);
-  --color-background-secondary: oklch(95% 0.002 247.839);
-  --color-background-tertiary: oklch(90% 0.002 247.839);
-  --color-background-quaternary: oklch(85% 0.002 247.839);
-  --color-background-quinary: oklch(80% 0.002 247.839);
-  --color-background-disabled: var(--color-neutral-100);
-  --color-border: oklch(92.2% 0 0);
-}
-```
-
-### Border Radius System
-
-All border radii derive from a single `--radius-base` token. Change it once to update the entire UI:
-
-```css
-:root {
-  --radius-base: 0.5rem; /* 8px - change this to update all radii */
-
-  /* Forms & Controls (1x base) */
-  --form-radius: var(--radius-base);
-  --button-radius: var(--form-radius);
-  --badge-radius: var(--form-radius);
-  --nav-item-radius: var(--radius-base);
-
-  /* Overlays (1.5x base) */
-  --dropdown-radius: calc(var(--radius-base) * 1.5);
-  --tooltip-radius: var(--radius-base);
-  --popover-radius: calc(var(--radius-base) * 1.5);
-
-  /* Feedback surfaces */
-  --alert-radius: calc(var(--radius-base) * 1.5);
-  --toast-radius: calc(var(--radius-base) * 2);
-  --drawer-radius: calc(var(--radius-base) * 2);
-
-  /* Surfaces (3x base) */
-  --card-radius: calc(var(--radius-base) * 3);
-  --modal-radius: calc(var(--radius-base) * 3);
-
-  /* Special shapes */
-  --segmented-radius: 99px;
-  --avatar-radius: 50%;
-}
-```
-
-### Form Elements
-
-Control sizing, padding, and border radius for all form components:
-
-```css
-:root {
-  /* Heights */
-  --form-min-h-sm: 2rem;
-  --form-min-h-md: 2.5rem;
-  --form-min-h-lg: 3rem;
-
-  /* Horizontal padding */
-  --form-px-sm: 0.75rem;
-  --form-px-md: 0.875rem;
-  --form-px-lg: 1rem;
-
-  /* Vertical padding */
-  --form-py-sm: 0.5rem;
-  --form-py-md: 0.625rem;
-  --form-py-lg: 0.75rem;
-
-  /* Font sizes */
-  --form-text-sm: 0.75rem;
-  --form-text-md: 0.875rem;
-  --form-text-lg: 1rem;
-}
-```
-
-Button, badge, segmented, and other component variables inherit from these form defaults but can be overridden individually (e.g. `--button-radius`, `--badge-radius`, `--button-px-*`).
-
-### Dark Mode
-
-Add the `dark` class to your `<html>` or any parent container. All components adapt automatically:
-
-```html
-<html class="dark">
-  <!-- dark mode active -->
-</html>
-```
-
-The library ships with sensible dark mode defaults. To customize dark mode colors, override variables inside `.dark`:
-
-```css
-.dark {
-  --color-background: oklch(14.5% 0 0);
-  --color-border: oklch(30% 0 0);
-  --color-primary: var(--color-primary-400);
-  --color-text-primary: var(--color-neutral-50);
-  --color-text-secondary: var(--color-neutral-400);
-}
-```
-
-### Full Variable Reference
-
-See [`src/styles/theme.css`](src/styles/theme.css) for the complete list of available CSS variables.
-
-## Documentation
-
-This package is currently in beta. Full documentation coming soon.
-
 ## License
 
-MIT License - see LICENSE file for details.
-
----
-
-Built by Espranza Innovations
+MIT

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -1,15 +1,15 @@
 const codeBlockTheme = {
     baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-background)]",
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
-    headerLeft: "flex items-center gap-2 min-w-0 flex-1",
+    headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
-    filename: "text-sm font-medium text-[var(--color-text-primary)] font-mono truncate",
+    filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
     languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
     lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
-    highlightedLine: "bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] -mx-4 px-4",
-    diffAddition: "bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] -mx-4 px-4",
-    diffDeletion: "bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] -mx-4 px-4",
+    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-neutral-400/5 dark:border-l-neutral-200",
+    diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
+    diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
     copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     copySuccess: "text-[var(--color-success)]",
 };

package/dist/components/ai/PromptInput/PromptInput.js

@@ -77,7 +77,6 @@ import '../../core/Alert/Alert.js';
 import '../../core/Toast/Toast.js';
 import '../../core/Toast/ToastProvider.js';
 import '@heroicons/react/24/solid';
-import '../../core/Notification/Notification.js';
 import '../../core/Spinner/Spinner.js';
 import '../../core/Message/Message.js';
 import '../../core/Message/TypeWriter.js';
@@ -117,8 +116,6 @@ import '../../forms/InputAddress/InputAddress.js';
 import '../../forms/InputAddress/InputAddress.theme.js';
 import '../../forms/InputDate/InputDate.js';
 import '../../forms/InputCounter/InputCounter.js';
-import '../../forms/StepperForm/StepperForm.js';
-import '../../forms/StepperForm/StepperForm.types.js';
 import '../../forms/InputTag/InputTag.js';
 import '../../forms/InputTag/InputTag.theme.js';
 import '../../forms/Combobox/Combobox.js';

package/dist/components/ai/PromptInput/PromptInput.theme.js

@@ -1,5 +1,5 @@
 const promptInputTheme = {
-    baseStyle: "rounded-[var(--card-radius)] border-[1px] border-[var(--color-border)] flex flex-col gap-2 shadow-real-md p-4 outline-2 outline-[var(--color-border)]/30 bg-[var(--color-background-secondary)] ",
+    baseStyle: "rounded-[var(--card-radius)] border-[1px] border-[var(--color-border)] flex flex-col gap-2 shadow-real-md p-4 outline-2 outline-[var(--color-border)]/30 bg-white dark:bg-[var(--color-background-secondary)] ",
     textareaStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-200 ease-in-out",
     footerStyle: "flex justify-between items-end",
     actionsStyle: "flex gap-1",

package/dist/components/ai/index.d.ts

@@ -1,5 +1,3 @@
-export { ChatInterface, chatInterfaceTheme, useChatInterfaceContext, } from "./ChatInterface";
-export type { ChatInterfaceProps, ChatInterfaceContextValue, ChatInterfaceTheme, ChatInterfaceThemeOverrides, } from "./ChatInterface";
 export { Message, messageTheme } from "../core/Message";
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
 export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
@@ -19,5 +17,3 @@ export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeO
 export { ApprovalCard } from "./ApprovalCard";
 export type { ApprovalCardProps, ApprovalRiskLevel, ApprovalMode, } from "./ApprovalCard";
 export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";
-export { ArtifactContainer, artifactContainerTheme, getHandlePillVariants, getPaneCollapseTransition, getCanvasTabContentVariants, getBorderGlowVariants, getTabUnderlineTransition, } from "./ArtifactContainer";
-export type { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps, ArtifactContainerCanvasTabProps, ArtifactContainerTheme, SplitDirection, CollapsedPane, } from "./ArtifactContainer";

package/dist/components/ai/index.js

@@ -1,6 +1,3 @@
-export { ChatInterface } from './ChatInterface/ChatInterface.js';
-export { chatInterfaceTheme } from './ChatInterface/ChatInterface.theme.js';
-export { useChatInterfaceContext } from './ChatInterface/ChatInterface.types.js';
 export { Message } from '../core/Message/Message.js';
 export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
@@ -26,6 +23,3 @@ export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
 export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
 export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';
-export { ArtifactContainer } from './ArtifactContainer/ArtifactContainer.js';
-export { artifactContainerTheme } from './ArtifactContainer/ArtifactContainer.theme.js';
-export { getBorderGlowVariants, getCanvasTabContentVariants, getHandlePillVariants, getPaneCollapseTransition, getTabUnderlineTransition } from './ArtifactContainer/ArtifactContainer.animations.js';

package/dist/components/core/Accordion/Accordion.theme.js

@@ -4,7 +4,7 @@ const accordionTheme = {
     // Base container styles for stacked variant (unified card)
     baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
     // Item styles for separated variant (individual cards with spacing)
-    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-background)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
     // Item styles for stacked variant (shared borders, no spacing)
     itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)

package/dist/components/core/Alert/Alert.js

@@ -2,24 +2,37 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { alertTheme } from './Alert.theme.js';
-import { XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { XMarkIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
 import { Button } from '../Button/Button.js';
 
-const colorIcons = {
-    neutral: InformationCircleIcon,
+const defaultIcons = {
+    neutral: BellIcon,
     primary: InformationCircleIcon,
     success: CheckCircleIcon,
     warning: ExclamationTriangleIcon,
     danger: XCircleIcon,
 };
-const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, description, dismissible = false, icon, showIcon = true, onDismiss, className, theme: customTheme = {}, children, darkMode = false, ...props }, ref) => {
-    var _a, _b, _c, _d;
-    const IconComponent = colorIcons[color];
+const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, description, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
+    var _a;
+    const iconColor = (_a = alertTheme.iconColors[color]) !== null && _a !== void 0 ? _a : alertTheme.iconColors.primary;
+    const showDismiss = dismissible === true || (dismissible !== false && !!onDismiss);
     const handleDismiss = () => {
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     };
-    const hasContent = title || description || children;
-    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, (_a = alertTheme.variants) === null || _a === void 0 ? void 0 : _a[variant], ((_b = alertTheme.colors) === null || _b === void 0 ? void 0 : _b[color]) || "", customTheme.baseStyle, (_c = customTheme.variants) === null || _c === void 0 ? void 0 : _c[variant], (_d = customTheme.colors) === null || _d === void 0 ? void 0 : _d[color], className), role: "alert", ...props, children: [showIcon && (jsx("div", { className: "flex-shrink-0 size-5 mt-0.5", children: icon || jsx(IconComponent, { className: "size-5" }) })), hasContent && (jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("div", { className: "font-semibold text-sm", children: title }), description && (jsx("div", { className: "text-sm mt-0.5 text-[var(--color-text-secondary)]", children: description })), children && jsx("div", { className: "mt-1", children: children })] })), dismissible && (jsx(Button, { variant: "link", color: "primary", size: "sm", iconOnly: true, onClick: handleDismiss, className: "absolute top-2 right-2 flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity cursor-pointer", children: jsx(XMarkIcon, { className: "size-4" }) }))] }));
+    const renderIconOrAvatar = () => {
+        if (avatar) {
+            return (jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full", "aria-hidden": "true", children: avatar }));
+        }
+        if (icon === null || !showIcon) {
+            return null;
+        }
+        if (React__default.isValidElement(icon)) {
+            return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: icon }));
+        }
+        const IconComponent = defaultIcons[color];
+        return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
+    };
+    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })), description && (jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: description })), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: alertNode });
     }

package/dist/components/core/Alert/Alert.theme.d.ts

@@ -1,2 +1,6 @@
 import { AlertTheme } from "./Alert.types";
+/**
+ * Default theme configuration for Alert component
+ * Uses flat color organization matching Badge pattern
+ */
 export declare const alertTheme: AlertTheme;

package/dist/components/core/Alert/Alert.theme.js

@@ -1,18 +1,26 @@
+/**
+ * Default theme configuration for Alert component
+ * Uses flat color organization matching Badge pattern
+ */
 const alertTheme = {
-    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm bg-white border border-[var(--color-border)] dark:bg-[var(--color-background-secondary)] shadow-lg",
+    // Base styles applied to all alerts
+    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
+    // Visual style variants (structure only, no colors)
     variants: {
-        default: "border border-[var(--color-border)]",
+        default: "",
         glass: "glass-effect",
     },
-    /**
-     * Semantic colors with ring and background styling
-     */
-    colors: {
+    // Icon color styles per color
+    iconColors: {
         neutral: "text-[var(--color-text-primary)]",
-        primary: "text-[var(--color-primary-700)] dark:text-[var(--color-primary-400)]",
-        success: "text-[var(--color-success-700)] dark:text-[var(--color-success-400)]",
-        warning: "text-[var(--color-warning-700)] dark:text-[var(--color-warning-400)]",
-        danger: "text-[var(--color-danger-700)] dark:text-[var(--color-danger-400)]",
+        primary: "text-[var(--color-primary)]",
+        success: "text-[var(--color-success)]",
+        warning: "text-[var(--color-warning)]",
+        danger: "text-[var(--color-danger)]",
+    },
+    // State styles
+    states: {
+        dismissible: "pr-10",
     },
 };
 

package/dist/components/core/Alert/Alert.types.d.ts

@@ -7,20 +7,25 @@ export type AlertColor = "neutral" | "primary" | "success" | "warning" | "danger
  * Alert visual variant
  */
 export type AlertVariant = "default" | "glass";
+/**
+ * Theme configuration for Alert component
+ */
 export interface AlertTheme {
+    /** Base styles applied to all alerts */
     baseStyle: string;
+    /** Visual style variants (structure only, no colors) */
     variants: Record<AlertVariant, string>;
-    colors: Record<AlertColor, string>;
-}
-export interface AlertThemeOverrides {
-    baseStyle?: string;
-    variants?: Partial<Record<AlertVariant, string>>;
-    colors?: Partial<Record<AlertColor, string>>;
+    /** Icon color styles per color */
+    iconColors: Record<AlertColor, string>;
+    /** State styles */
+    states: {
+        dismissible: string;
+    };
 }
 export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-    /** Visual variant (default, glass) */
+    /** Visual variant */
     variant?: AlertVariant;
-    /** Semantic color (neutral, primary, success, warning, danger) */
+    /** Semantic color */
     color?: AlertColor;
     /** The main title/message of the alert */
     title?: string;
@@ -28,21 +33,33 @@ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     description?: string;
     /** Whether the alert can be dismissed */
     dismissible?: boolean;
-    /** Custom icon for the alert */
-    icon?: ReactNode;
+    /**
+     * Custom icon for the alert
+     * - Provide custom icon: overrides the default variant icon
+     * - Set to null: hides icon completely
+     * - Leave undefined: shows default variant icon
+     */
+    icon?: ReactNode | null;
     /** Whether to show the default icon for the variant */
     showIcon?: boolean;
+    /**
+     * Avatar to display (takes precedence over icons)
+     * Example: avatar={<Avatar src="..." alt="User name" size="md" />}
+     */
+    avatar?: ReactNode;
+    /**
+     * Action buttons as ReactNode
+     * Example: actions={<><Button>Cancel</Button><Button variant="filled">Save</Button></>}
+     */
+    actions?: ReactNode;
     /** Callback when the alert is dismissed */
     onDismiss?: () => void;
     /** Custom class name */
     className?: string;
-    /** Theme overrides */
-    theme?: AlertThemeOverrides;
     /** Children content */
     children?: ReactNode;
     /**
-     * Enable dark mode styling. When true, applies the `dark` class so components
-     * use light colors for visibility.
+     * Enable dark mode styling.
      * @default false
      */
     darkMode?: boolean;

package/dist/components/core/Alert/index.d.ts

@@ -1,3 +1,3 @@
 export { Alert } from './Alert';
-export type { AlertProps, AlertVariant, AlertTheme, AlertThemeOverrides } from './Alert.types';
+export type { AlertProps, AlertVariant, AlertColor, AlertTheme } from './Alert.types';
 export { alertTheme } from './Alert.theme';

package/dist/components/core/AvatarGroup/AvatarGroup.animations.js

@@ -8,10 +8,10 @@
 const getAvatarGroupVariants = (shouldReduceMotion = false, enableAnimations = true) => {
     if (shouldReduceMotion || !enableAnimations) {
         return {
-            initial: { scale: 1, opacity: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
-            hover: { scale: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
-            notHovered: { scale: 1, opacity: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
-            default: { scale: 1, opacity: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
+            initial: { scale: 1, opacity: 1, x: 0, y: 0, rotate: 0 },
+            hover: { scale: 1, x: 0, y: 0, rotate: 0 },
+            notHovered: { scale: 1, opacity: 1, x: 0, y: 0, rotate: 0 },
+            default: { scale: 1, opacity: 1, x: 0, y: 0, rotate: 0 },
         };
     }
     return {
@@ -22,15 +22,13 @@ const getAvatarGroupVariants = (shouldReduceMotion = false, enableAnimations = t
             y: 0,
             rotate: 0,
             filter: "saturate(1)",
-            zIndex: 10,
         },
         hover: {
-            scale: 1.05,
-            y: -2,
+            scale: 1.02,
+            y: -1,
             rotate: 0,
             opacity: 1,
             filter: "saturate(1)",
-            zIndex: 50,
             transition: {
                 type: "spring",
                 stiffness: 400,
@@ -38,34 +36,11 @@ const getAvatarGroupVariants = (shouldReduceMotion = false, enableAnimations = t
                 mass: 0.8,
             },
         },
-        notHovered: (custom) => {
-            const { index, hoveredIndex, direction } = custom;
-            if (hoveredIndex === null)
-                return {};
-            // Calculate relative position
-            const isBefore = index < hoveredIndex;
-            const isRowReverse = direction === "row-reverse";
-            // Fan rotation: tilt away from the focused item
-            // If before: tilt left (-deg). If after: tilt right (+deg).
-            const rotateAmount = 15;
-            let rotation = 0;
-            let xOffset = 0;
-            if (!isRowReverse) {
-                rotation = isBefore ? -rotateAmount : rotateAmount;
-                // Slight nudge to separate just a tiny bit without claiming space
-                xOffset = isBefore ? -2 : 2;
-            }
-            else {
-                rotation = isBefore ? rotateAmount : -rotateAmount;
-                xOffset = isBefore ? 2 : -2;
-            }
+        notHovered: () => {
             return {
-                scale: 0.85,
-                y: 4, // Sink slightly
-                x: xOffset,
-                rotate: rotation,
-                filter: "saturate(0)", // Black and white, no blur
-                zIndex: 5, // Lower z-index for non-hovered items
+                scale: 0.95,
+                y: 2,
+                filter: "saturate(0)",
                 transition: {
                     type: "spring",
                     stiffness: 300,
@@ -80,7 +55,6 @@ const getAvatarGroupVariants = (shouldReduceMotion = false, enableAnimations = t
             y: 0,
             rotate: 0,
             filter: "saturate(1)",
-            zIndex: 10,
             transition: {
                 type: "spring",
                 stiffness: 300,

package/dist/components/core/AvatarGroup/AvatarGroup.js

@@ -15,9 +15,6 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
         const visibleAvatars = avatars.slice(0, max);
         const overflowCount = avatars.length > max ? avatars.length - max : 0;
         const spacingClass = avatarGroupTheme.spacingStyles[spacing];
-        const spacingHoverClass = enableAnimations
-            ? avatarGroupTheme.spacingHoverStyles[spacing]
-            : "";
         const directionClass = direction === "row-reverse" ? "flex-row-reverse" : "flex-row";
         const totalPeople = avatars.length;
         const groupDescription = avatars
@@ -27,13 +24,12 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
             visibleAvatars,
             overflowCount,
             spacingClass,
-            spacingHoverClass,
             directionClass,
             totalPeople,
             groupDescription,
         };
-    }, [avatars, max, spacing, direction, enableAnimations]);
-    const { visibleAvatars, overflowCount, spacingClass, spacingHoverClass, directionClass, totalPeople, groupDescription, } = memoizedData;
+    }, [avatars, max, spacing, direction]);
+    const { visibleAvatars, overflowCount, spacingClass, directionClass, totalPeople, groupDescription, } = memoizedData;
     return (jsxs("div", { ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className), role: "group", "aria-label": ariaLabel, "aria-description": `Contains ${totalPeople} users: ${groupDescription}`, "data-size": size, "data-spacing": spacing, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: () => enableAnimations && setHoveredIndex(null), ...props, children: [visibleAvatars.map((avatarProps, index) => {
                 // Create contextual label for individual avatars in a group
                 const position = index + 1;
@@ -41,12 +37,6 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
                 const MotionDiv = enableAnimations ? motion.div : "div";
                 const motionProps = enableAnimations
                     ? {
-                        custom: {
-                            index,
-                            hoveredIndex,
-                            direction,
-                            totalPeople: visibleAvatars.length,
-                        },
                         variants: getAvatarGroupVariants(shouldReduceMotion, enableAnimations),
                         animate: getAnimationState(index, hoveredIndex, enableAnimations),
                         onHoverStart: () => setHoveredIndex(index),
@@ -55,9 +45,7 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
                     : {};
                 return (jsx(MotionDiv, { className: cn(
                     // First avatar doesn't need negative margin
-                    index > 0 ? spacingClass : "z-10", 
-                    // Apply hover z-index only when animations enabled
-                    index > 0 && spacingHoverClass), "data-position": position, "data-index": index, ...motionProps, children: jsx(Avatar, { size: size, ...avatarProps, contextualLabel: contextLabel, 
+                    index > 0 ? spacingClass : "z-10"), "data-position": position, "data-index": index, ...motionProps, children: jsx(Avatar, { size: size, ...avatarProps, contextualLabel: contextLabel, 
                         // Ensure that groupPosition is not passed to avoid conflicts
                         groupPosition: undefined }) }, index));
             }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, enableAnimations &&

package/dist/components/core/AvatarGroup/AvatarGroup.theme.d.ts

@@ -5,7 +5,6 @@ import { AvatarGroupSpacing } from "./AvatarGroup.types";
 interface AvatarGroupTheme {
     baseStyle: string;
     spacingStyles: Record<AvatarGroupSpacing, string>;
-    spacingHoverStyles: Record<AvatarGroupSpacing, string>;
     overflowAvatarStyle: string;
 }
 /**

package/dist/components/core/AvatarGroup/AvatarGroup.theme.js

@@ -10,12 +10,6 @@ const avatarGroupTheme = {
         normal: "-ml-3 z-10",
         loose: "-ml-2 z-10",
     },
-    // Hover z-index effects - applied separately when animations enabled
-    spacingHoverStyles: {
-        tight: "hover:z-20",
-        normal: "hover:z-20",
-        loose: "hover:z-20",
-    },
     // Overflow avatar styles
     overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
 };