flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -3,20 +3,22 @@ export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
 export interface ModalTheme {
     overlay: string;
     container: string;
-    content: string;
     header: string;
+    headerContent: string;
+    title: string;
+    description: string;
     body: string;
     footer: string;
-    closeButton: string;
 }
 export interface ModalThemeOverrides {
     overlay?: string;
     container?: string;
-    content?: string;
     header?: string;
+    headerContent?: string;
+    title?: string;
+    description?: string;
     body?: string;
     footer?: string;
-    closeButton?: string;
 }
 export interface ModalContextValue {
     isOpen: boolean;
@@ -26,8 +28,10 @@ export interface ModalContextValue {
     closeOnEsc: boolean;
     showCloseButton: boolean;
     theme: ModalTheme;
+    isBodyScrollable: boolean;
+    setIsBodyScrollable: (scrollable: boolean) => void;
 }
-export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose' | 'onAnimationStart' | 'onDragStart'> {
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClose" | "onAnimationStart" | "onDragStart" | "onDrag" | "onDragEnd"> {
     isOpen: boolean;
     onClose: () => void;
     size?: ModalSize;
@@ -40,6 +44,7 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 }
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    icon?: React.ReactNode;
     showCloseButton?: boolean;
     className?: string;
 }
@@ -51,3 +56,11 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }
+export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ModalDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    className?: string;
+}

package/dist/components/core/Modal/ModalBody.js

@@ -1,12 +1,39 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
+import React__default, { useRef, useCallback, useLayoutEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 
-var ModalBody = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var theme = useModalContext().theme;
-    return (React__default.createElement("div", __assign({ className: cn(theme.body, className) }, props), children));
+const ModalBody = ({ children, className, ...props }) => {
+    const { theme, setIsBodyScrollable } = useModalContext();
+    const bodyRef = useRef(null);
+    // Function to check if content is scrollable
+    const checkScrollable = useCallback(() => {
+        if (bodyRef.current) {
+            const { scrollHeight, clientHeight } = bodyRef.current;
+            setIsBodyScrollable(scrollHeight > clientHeight);
+        }
+    }, [setIsBodyScrollable]);
+    // Check scrollable state on layout changes
+    useLayoutEffect(() => {
+        checkScrollable();
+    }, [checkScrollable, children]);
+    // Set up resize observer to monitor content changes
+    useLayoutEffect(() => {
+        const element = bodyRef.current;
+        if (!element)
+            return;
+        // Initial check
+        checkScrollable();
+        // Create ResizeObserver to watch for content changes
+        const resizeObserver = new ResizeObserver(checkScrollable);
+        resizeObserver.observe(element);
+        // Also listen for window resize events
+        window.addEventListener('resize', checkScrollable);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', checkScrollable);
+        };
+    }, [checkScrollable]);
+    return (React__default.createElement("div", { ref: bodyRef, className: cn(theme.body, className), ...props }, children));
 };
 ModalBody.displayName = "Modal.Body";
 

package/dist/components/core/Modal/ModalDescription.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ModalDescriptionProps } from "./Modal.types";
+export declare const ModalDescription: {
+    ({ children, className, ...props }: ModalDescriptionProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalDescription.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalDescription = ({ children, className, ...props }) => {
+    const { theme } = useModalContext();
+    return (React__default.createElement("p", { className: cn(theme.description, className), ...props }, children));
+};
+ModalDescription.displayName = "Modal.Description";
+
+export { ModalDescription };

package/dist/components/core/Modal/ModalFooter.js

@@ -1,12 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 
-var ModalFooter = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var theme = useModalContext().theme;
-    return (React__default.createElement("div", __assign({ className: cn(theme.footer, className) }, props), children));
+const ModalFooter = ({ children, className, ...props }) => {
+    const { theme, isBodyScrollable } = useModalContext();
+    return (React__default.createElement("div", { className: cn(theme.footer, isBodyScrollable && "border-border", className), ...props }, children));
 };
 ModalFooter.displayName = "Modal.Footer";
 

package/dist/components/core/Modal/ModalHeader.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ModalHeaderProps } from "./Modal.types";
 export declare const ModalHeader: {
-    ({ children, showCloseButton, className, ...props }: ModalHeaderProps): React.JSX.Element;
+    ({ children, icon, showCloseButton, className, ...props }: ModalHeaderProps): React.JSX.Element;
     displayName: string;
 };

package/dist/components/core/Modal/ModalHeader.js

@@ -1,17 +1,19 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
+import { Button } from '../Button/Button.js';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
-var ModalHeader = function (_a) {
-    var children = _a.children, showCloseButton = _a.showCloseButton, className = _a.className, props = __rest(_a, ["children", "showCloseButton", "className"]);
-    var _b = useModalContext(), onClose = _b.onClose, contextShowCloseButton = _b.showCloseButton, theme = _b.theme;
-    var shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (React__default.createElement("div", __assign({ className: cn(theme.header, className) }, props),
-        React__default.createElement("div", { className: "flex-1" }, children),
-        shouldShowCloseButton && (React__default.createElement("button", { type: "button", onClick: onClose, className: cn(theme.closeButton), "aria-label": "Close modal" },
-            React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                React__default.createElement("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))))));
+const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {
+    const { onClose, showCloseButton: contextShowCloseButton, theme, isBodyScrollable, } = useModalContext();
+    const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
+    return (React__default.createElement("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props },
+        React__default.createElement("div", { className: cn(theme.headerContent) },
+            icon && (React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]" }, icon)),
+            React__default.createElement("div", { className: "flex-1" }, children)),
+        shouldShowCloseButton && (React__default.createElement("div", { className: "" },
+            React__default.createElement(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full" },
+                React__default.createElement(XMarkIcon, { className: "size-5" }))))));
 };
 ModalHeader.displayName = "Modal.Header";
 

package/dist/components/core/Modal/ModalTitle.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ModalTitleProps } from "./Modal.types";
+export declare const ModalTitle: {
+    ({ children, className, ...props }: ModalTitleProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalTitle.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalTitle = ({ children, className, ...props }) => {
+    const { theme } = useModalContext();
+    return (React__default.createElement("div", { className: cn(theme.title, className), ...props }, children));
+};
+ModalTitle.displayName = "Modal.Title";
+
+export { ModalTitle };

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

@@ -1,2 +1,2 @@
-export { default as Modal } from "./Modal";
-export * from "./Modal.types";
+export { Modal } from "./Modal";
+export type { ModalProps, ModalSize, ModalThemeOverrides } from "./Modal.types";

package/dist/components/core/NavItem/NavItem.js

@@ -0,0 +1,132 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { navItemTheme } from './NavItem.theme.js';
+import { useSidebarContext } from '../Sidebar/SidebarContext.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+import { Badge } from '../Badge/Badge.js';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+
+const NavItem = React__default.forwardRef(({ children, startContent: propStartContent, endContent: propEndContent, icon, // Legacy
+badge, // Legacy
+description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu = false, expanded = false, onToggleExpanded, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a, _b;
+    const sidebarContext = useSidebarContext();
+    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    const isInSidebar = !!sidebarContext;
+    // Map legacy props
+    const startContent = propStartContent || icon;
+    const actualIsDisabled = propIsDisabled || disabled;
+    // Construct end content
+    let endContent = propEndContent;
+    if (!endContent && badge) {
+        endContent = (React__default.createElement(Badge, { color: "neutral", variant: "ghost", size: "sm" }, badge));
+    }
+    if (!endContent && hasSubmenu) {
+        endContent = (React__default.createElement(ChevronDownIcon, { className: cn("size-4 transition-transform duration-300", expanded && "rotate-180") }));
+    }
+    const theme = {
+        ...navItemTheme,
+        ...customTheme,
+        states: {
+            ...navItemTheme.states,
+            ...customTheme.states,
+        },
+        iconStates: {
+            ...navItemTheme.iconStates,
+            ...customTheme.iconStates,
+        },
+        levels: {
+            ...navItemTheme.levels,
+            ...customTheme.levels,
+        },
+        collapsed: {
+            ...navItemTheme.collapsed,
+            ...customTheme.collapsed,
+        },
+        danger: customTheme.danger ||
+            navItemTheme.danger ||
+            "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
+    };
+    // Handle click events
+    const handleClick = (e) => {
+        if (actualIsDisabled) {
+            e.preventDefault();
+            return;
+        }
+        if (hasSubmenu && onToggleExpanded) {
+            e.preventDefault();
+            onToggleExpanded();
+            return;
+        }
+        if (onClick) {
+            e.preventDefault();
+            onClick();
+            return;
+        }
+        // If href is provided, let the default navigation happen
+    };
+    const isActive = active;
+    // Get state classes
+    const getStateClasses = () => {
+        if (actualIsDisabled)
+            return theme.states.disabled;
+        if (isActive)
+            return theme.states.active;
+        return theme.states.default;
+    };
+    // Danger overrides
+    const dangerClasses = isDanger ? theme.danger : "";
+    // Build container classes
+    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isInSidebar && collapsed && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, className);
+    // Get icon state classes
+    const getIconStateClasses = () => {
+        var _a, _b, _c;
+        if (actualIsDisabled)
+            return (_a = theme.iconStates) === null || _a === void 0 ? void 0 : _a.disabled;
+        if (isActive)
+            return (_b = theme.iconStates) === null || _b === void 0 ? void 0 : _b.active;
+        return (_c = theme.iconStates) === null || _c === void 0 ? void 0 : _c.default;
+    };
+    // Build icon classes
+    const iconClasses = cn(isInSidebar && collapsed ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
+    const textClasses = cn(theme.text);
+    // Content component
+    const content = (React__default.createElement("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? expanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleClick(e);
+            }
+        }, ...props },
+        startContent && (React__default.createElement("div", { className: cn("flex items-center justify-center flex-shrink-0"
+            // Icon size is handled by icon classes
+            ) }, React__default.isValidElement(startContent)
+            ? React__default.cloneElement(startContent, {
+                className: cn(iconClasses, startContent.props.className),
+            })
+            : startContent)),
+        (!isInSidebar || !collapsed) && (React__default.createElement("div", { className: "flex-1 min-w-0" },
+            React__default.createElement("div", { className: "flex items-center justify-between gap-2" },
+                React__default.createElement("span", { className: cn("truncate", textClasses) }, children),
+                shortcut && (React__default.createElement("kbd", { className: "hidden group-hover:inline-block text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5" }, shortcut))),
+            description && (React__default.createElement("div", { className: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate" }, description)))),
+        endContent && (!isInSidebar || !collapsed) && (React__default.createElement("div", { className: "flex items-center justify-center flex-shrink-0" }, endContent)),
+        isInSidebar && collapsed && (React__default.createElement("span", { className: "sr-only" }, children))));
+    // Wrap with link if href is provided
+    if (href && !actualIsDisabled) {
+        const LinkContent = (React__default.createElement("a", { href: href, className: "block group" }, content));
+        // Show tooltip in collapsed sidebar mode
+        if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
+            return (React__default.createElement(Tooltip, { content: children, placement: "right" }, LinkContent));
+        }
+        return LinkContent;
+    }
+    // Show tooltip in collapsed sidebar mode
+    if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
+        return (React__default.createElement(Tooltip, { content: children, placement: "right" }, content));
+    }
+    return content;
+});
+NavItem.displayName = "NavItem";
+
+export { NavItem };

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

@@ -0,0 +1,27 @@
+const navItemTheme = {
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-lg outline-none group",
+    icon: "size-4 text-[var(--color-text-secondary)]",
+    text: "flex-1 min-w-0 truncate",
+    states: {
+        default: "text-[var(--color-text-primary)] hover:bg-neutral-100",
+        active: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold",
+        disabled: "opacity-60 cursor-not-allowed pointer-events-none text-[var(--color-text-placeholder)]",
+        hover: "hover:bg-neutral-100",
+    },
+    iconStates: {
+        default: "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]",
+        active: "text-[var(--color-primary)]",
+        disabled: "opacity-60",
+    },
+    levels: {
+        0: "",
+        1: "pl-6",
+        2: "pl-10",
+    },
+    collapsed: {
+        container: "!gap-0 justify-center p-2 aspect-square",
+        icon: "size-5",
+    },
+};
+
+export { navItemTheme };

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

@@ -0,0 +1,168 @@
+import { ReactNode } from "react";
+export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the navigation item
+     */
+    children: ReactNode;
+    /**
+     * Start content (icon), replaces `icon`
+     */
+    startContent?: ReactNode;
+    /**
+     * End content (badge/arrow), replaces `badge`
+     */
+    endContent?: ReactNode;
+    /**
+     * Description text below the title
+     */
+    description?: ReactNode;
+    /**
+     * Keyboard shortcut (optional)
+     */
+    shortcut?: string;
+    /**
+     * Legacy icon prop (mapped to startContent)
+     * @deprecated Use startContent instead
+     */
+    icon?: ReactNode;
+    /**
+     * Legacy badge prop (mapped to endContent)
+     * @deprecated Use endContent instead
+     */
+    badge?: string | number;
+    /**
+     * Link href (for navigation)
+     */
+    href?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Whether the item is currently active
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Alias for isDisabled
+     * @deprecated Use isDisabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item represents a danger action
+     */
+    isDanger?: boolean;
+    /**
+     * Whether the item has a submenu
+     * @default false
+     */
+    hasSubmenu?: boolean;
+    /**
+     * Whether the submenu is expanded (for multi-level navigation)
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Callback when submenu is toggled
+     */
+    onToggleExpanded?: () => void;
+    /**
+     * Nesting level for indentation (0, 1, 2)
+     * @default 0
+     */
+    level?: number;
+    /**
+     * Whether to show tooltip when in collapsed sidebar mode
+     * @default true
+     */
+    showTooltipWhenCollapsed?: boolean;
+    /**
+     * Custom theme overrides
+     */
+    theme?: NavItemThemeOverrides;
+}
+export interface NavItemTheme {
+    baseStyle: string;
+    icon: string;
+    text: string;
+    states: {
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    };
+    iconStates?: {
+        default?: string;
+        active?: string;
+        disabled?: string;
+        hover?: string;
+    };
+    levels: {
+        0: string;
+        1: string;
+        2: string;
+    };
+    collapsed: {
+        container: string;
+        icon: string;
+    };
+}
+export interface NavItemThemeOverrides {
+    baseStyle?: string;
+    icon?: string;
+    text?: string;
+    states?: Partial<{
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    }>;
+    iconStates?: Partial<{
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    }>;
+    levels?: Partial<{
+        0: string;
+        1: string;
+        2: string;
+    }>;
+    collapsed?: Partial<{
+        container: string;
+        icon: string;
+    }>;
+    danger?: string;
+}
+export interface NavItemTheme {
+    baseStyle: string;
+    icon: string;
+    text: string;
+    states: {
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    };
+    iconStates?: {
+        default?: string;
+        active?: string;
+        disabled?: string;
+        hover?: string;
+    };
+    levels: {
+        0: string;
+        1: string;
+        2: string;
+    };
+    collapsed: {
+        container: string;
+        icon: string;
+    };
+    danger?: string;
+}

package/dist/components/core/Notification/Notification.js

@@ -0,0 +1,106 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { notificationTheme } from './Notification.theme.js';
+import { XMarkIcon } from '@heroicons/react/24/solid';
+import '../Accordion/Accordion.js';
+import '../AlertDialog/AlertDialog.js';
+import '../Avatar/Avatar.js';
+import '../AvatarGroup/AvatarGroup.js';
+import '../Badge/Badge.js';
+import '../Breadcrumbs/Breadcrumbs.js';
+import '../Breadcrumbs/Breadcrumbs.theme.js';
+import { Button } from '../Button/Button.js';
+import '../ButtonGroup/ButtonGroup.js';
+import '../ButtonGroup/ButtonGroupSeparator.js';
+import '../ButtonGroup/ButtonGroupText.js';
+import 'motion/react';
+import '@heroicons/react/24/outline';
+import '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
+import '../Calendar/CalendarMini/CalendarMini.js';
+import '../Card/Card.js';
+import '../CardStack/CardStack.js';
+import '../Carousel/Carousel.js';
+import '../Kbd/Kbd.js';
+import '../../effects/Overlay/Overlay.js';
+import '../Divider/Divider.js';
+import '../Drawer/Drawer.js';
+import '../Dropdown/Dropdown.js';
+import '../Dropdown/DropdownTrigger.js';
+import '../Dropdown/DropdownMenu.js';
+import '../Dropdown/DropdownItem.js';
+import '../Dropdown/DropdownSection.js';
+import '../Dropdown/DropdownSeparator.js';
+import '../Link/Link.js';
+import '../Loader/Loader.js';
+import '../Modal/Modal.js';
+import '../Pagination/Pagination.js';
+import '../Popover/Popover.js';
+import '../Popover/PopoverContext.js';
+import '../ProgressiveBlur/ProgressiveBlur.js';
+import '../Segmented/Segmented.js';
+import '../Skeleton/Skeleton.js';
+import '../SlidingNumber/SlidingNumber.js';
+import '../Stepper/Stepper.js';
+import '../Tabs/Tabs.js';
+import '../Tabs/TabsList.js';
+import '../Tabs/TabsTrigger.js';
+import '../Tabs/TabsContent.js';
+import '../Tabs/TabsContext.js';
+import '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+import '../Tree/Tree.js';
+import '../Alert/Alert.js';
+import '../Toast/Toast.js';
+import '../Toast/ToastProvider.js';
+import '../Message/Message.js';
+import '../Message/TypeWriter.js';
+import '../Empty/Empty.js';
+import '../Table/index.js';
+import '../DragDrop/DragDrop.js';
+import '../Sortable/Sortable.js';
+import '../NavItem/NavItem.js';
+import '../Sidebar/Sidebar.js';
+import '../Sidebar/SidebarHeader.js';
+import '../Sidebar/SidebarContent.js';
+import '../Sidebar/SidebarFooter.js';
+import '../Sidebar/SidebarNav.js';
+import '../Sidebar/SidebarNavGroup.js';
+import '../Sidebar/SidebarToggle.js';
+import '../Sidebar/SidebarContext.js';
+
+const Notification = React__default.forwardRef(({ variant = 'filled', color = 'primary', title, description, avatar, icon, actions, onDismiss, className, children, ...props }, ref) => {
+    var _a, _b;
+    const handleDismiss = () => {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    const colorTheme = ((_a = notificationTheme.colors) === null || _a === void 0 ? void 0 : _a[color]) || notificationTheme.colors.primary;
+    const renderIconOrAvatar = () => {
+        if (avatar) {
+            return (React__default.createElement("div", { className: "flex-shrink-0 w-10 h-10 rounded-full" }, avatar));
+        }
+        // icon={null} means hide icon completely
+        if (icon === null) {
+            return null;
+        }
+        // Use custom icon if provided, otherwise use color's default icon
+        const IconToRender = icon || colorTheme.defaultIcon;
+        return (React__default.createElement("div", { className: "flex-shrink-0 w-6 h-6 mt-1" }, React__default.isValidElement(IconToRender)
+            ? IconToRender
+            : React__default.createElement(IconToRender, {
+                className: cn("w-6 h-6", colorTheme.iconColor)
+            })));
+    };
+    return (React__default.createElement("div", { ref: ref, className: cn(notificationTheme.baseStyle, ((_b = notificationTheme.variants) === null || _b === void 0 ? void 0 : _b[variant]) || "", colorTheme.containerStyle, className), role: "alert", ...props },
+        renderIconOrAvatar(),
+        React__default.createElement("div", { className: `flex-1 min-w-0 ${onDismiss ? 'mr-5' : ''}` },
+            React__default.createElement("div", { className: cn("font-semibold", colorTheme.titleColor) }, title),
+            description && (React__default.createElement("div", { className: "text-[var(--color-text-secondary)]/90 mt-1" }, description)),
+            children && (React__default.createElement("div", { className: "mt-2" }, children)),
+            actions && (React__default.createElement("div", { className: "flex items-center gap-2 mt-6" }, actions))),
+        onDismiss && (React__default.createElement(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" },
+            React__default.createElement(XMarkIcon, { className: "size-4" })))));
+});
+Notification.displayName = 'Notification';
+
+export { Notification };

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

@@ -0,0 +1,16 @@
+import { NotificationVariant, NotificationColor } from './Notification.types';
+/**
+ * Color-specific theme with icon colors, title colors, and container styles
+ */
+export interface NotificationColorTheme {
+    containerStyle: string;
+    iconColor: string;
+    titleColor: string;
+    defaultIcon: React.ComponentType<any>;
+}
+export interface NotificationTheme {
+    baseStyle: string;
+    variants: Record<NotificationVariant, string>;
+    colors: Record<NotificationColor, NotificationColorTheme>;
+}
+export declare const notificationTheme: NotificationTheme;