@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/core/Dropdown/DropdownItem.js

@@ -9,7 +9,7 @@ import { MenuItem } from '../MenuItem/MenuItem.js';
  * DropdownItem component - individual menu item for action menus.
  * Built on shared MenuItem, adds selection mode and Dropdown context integration.
  */
-const DropdownItem = React__default.forwardRef(({ itemKey, children, className, startContent, endContent, description, shortcut, isDisabled = false, isDanger = false, onAction, ...props }, ref) => {
+const DropdownItem = React__default.forwardRef(({ itemKey, children, className, startContent, endContent, subtitle, shortcut, isDisabled = false, isDanger = false, onAction, ...props }, ref) => {
     const { closeOnSelect, onOpenChange, disabledKeys, selectedKeys, selectionMode, onAction: contextOnAction, onSelectionChange, theme, } = useDropdownContext();
     // Check if item is disabled
     const disabled = isDisabled || disabledKeys.has(itemKey);
@@ -63,12 +63,12 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
     // Build end content: user's endContent OR selection checkmark
     const resolvedEndContent = endContent ||
         (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
-    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, description: description, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
+    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
             baseStyle: theme.itemBaseStyle,
             dangerStyle: theme.itemDangerStyle,
             focusStyle: theme.itemFocusStyle,
         }, ...props, children: children }));
 });
-DropdownItem.displayName = "DropdownItem";
+DropdownItem.displayName = "Dropdown.Item";
 
 export { DropdownItem };

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -41,7 +41,7 @@ const useDarkMode = () => {
  * DropdownMenu component - renders the menu with keyboard navigation
  */
 const DropdownMenu = React__default.forwardRef(({ children, className, animation = true, portal = true, horizontal = false, "aria-label": ariaLabel, ...props }, ref) => {
-    const { isOpen, onOpenChange, triggerRef, menuRef, placement, offset, theme, } = useDropdownContext();
+    const { isOpen, onOpenChange, triggerRef, menuRef, menuId, placement, offset, theme, } = useDropdownContext();
     // Detect dark mode for portal content
     const isDarkMode = useDarkMode();
     const isClient = useIsClient();
@@ -54,9 +54,10 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 4,
         autoWidth: false,
+        stickyTracking: true,
     });
     // Get all menu items (not separators or sections)
     const getMenuItems = useCallback(() => {
@@ -207,7 +208,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
-            }, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+            }, id: menuId, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : {
                     type: "spring",
@@ -220,6 +221,6 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     }
     return menuContent;
 });
-DropdownMenu.displayName = "DropdownMenu";
+DropdownMenu.displayName = "Dropdown.Menu";
 
 export { DropdownMenu };

package/dist/components/core/Dropdown/DropdownSection.js

@@ -8,8 +8,10 @@ import { useDropdownContext } from './DropdownContext.js';
  */
 const DropdownSection = React__default.forwardRef(({ children, className, title, showDivider = false, ...props }, ref) => {
     const { theme } = useDropdownContext();
-    return (jsxs(Fragment, { children: [showDivider && jsx("div", { className: theme.separatorStyle, role: "separator" }), jsxs("div", { ref: ref, role: "group", "aria-label": title, className: cn(theme.sectionStyle, className), ...props, children: [title && (jsx("div", { className: theme.sectionTitleStyle, role: "presentation", children: title })), children] })] }));
+    return (jsxs(Fragment, { children: [showDivider && jsx("div", { className: theme.separatorStyle, role: "separator" }), jsxs("div", { ref: ref, role: "group", "aria-label": typeof title === 'string' ? title : undefined, className: cn(theme.sectionStyle, className), ...props, children: [title && (typeof title === 'string'
+                        ? jsx("div", { className: theme.sectionTitleStyle, role: "presentation", children: title })
+                        : title), children] })] }));
 });
-DropdownSection.displayName = "DropdownSection";
+DropdownSection.displayName = "Dropdown.Section";
 
 export { DropdownSection };

package/dist/components/core/Dropdown/DropdownSeparator.js

@@ -10,6 +10,6 @@ const DropdownSeparator = React__default.forwardRef(({ className, ...props }, re
     const { theme } = useDropdownContext();
     return (jsx("div", { ref: ref, role: "separator", className: cn(theme.separatorStyle, className), ...props }));
 });
-DropdownSeparator.displayName = "DropdownSeparator";
+DropdownSeparator.displayName = "Dropdown.Separator";
 
 export { DropdownSeparator };

package/dist/components/core/Dropdown/DropdownTrigger.d.ts

@@ -1,9 +1,14 @@
 import React from "react";
 import { DropdownTriggerProps } from "./Dropdown.types";
+export interface TriggerChildProps {
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    ref?: React.Ref<HTMLElement>;
+}
 /**
  * DropdownTrigger component - wraps the trigger element
  */
 export declare const DropdownTrigger: {
-    ({ children, className }: DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    ({ children, className }: DropdownTriggerProps): React.ReactElement<TriggerChildProps, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };

package/dist/components/core/Dropdown/DropdownTrigger.js

@@ -6,16 +6,17 @@ import { useDropdownContext } from './DropdownContext.js';
  */
 const DropdownTrigger = ({ children, className }) => {
     var _a;
-    const { isOpen, onOpenChange, triggerRef } = useDropdownContext();
+    const { isOpen, onOpenChange, triggerRef, menuId } = useDropdownContext();
     const handleClick = useCallback(() => {
         onOpenChange(!isOpen);
     }, [isOpen, onOpenChange]);
+    const childElement = children;
     // Clone the child element and add our props
-    const trigger = React__default.cloneElement(children, {
+    const trigger = React__default.cloneElement(childElement, {
         ref: (el) => {
             triggerRef.current = el;
             // Preserve any existing ref from the child
-            const childRef = children.ref;
+            const childRef = childElement.ref;
             if (typeof childRef === "function") {
                 childRef(el);
             }
@@ -24,21 +25,22 @@ const DropdownTrigger = ({ children, className }) => {
             }
         },
         onClick: (e) => {
+            var _a;
             // Call our handler
             handleClick();
             // Preserve any existing onClick from the child
-            const childProps = children.props;
-            if (childProps === null || childProps === void 0 ? void 0 : childProps.onClick) {
-                childProps.onClick(e);
+            if ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onClick) {
+                childElement.props.onClick(e);
             }
         },
         "aria-expanded": isOpen,
         "aria-haspopup": "menu",
+        "aria-controls": isOpen ? menuId : undefined,
         "data-state": isOpen ? "open" : "closed",
-        className: className || ((_a = children.props) === null || _a === void 0 ? void 0 : _a.className),
+        className: className || ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className),
     });
     return trigger;
 };
-DropdownTrigger.displayName = "DropdownTrigger";
+DropdownTrigger.displayName = "Dropdown.Trigger";
 
 export { DropdownTrigger };

package/dist/components/core/Empty/Empty.js

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { emptyTheme } from './Empty.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Empty = React__default.forwardRef(({ title, description, image, imageAlt, icon, action, className, children, ...props }, ref) => {
+const Empty = React__default.forwardRef(({ title, subtitle, image, imageAlt, icon, action, className, children, ...props }, ref) => {
     // Fixed image and icon dimensions
     const imageDimensions = "size-32";
     const iconDimensions = "size-16";
@@ -11,7 +11,7 @@ const Empty = React__default.forwardRef(({ title, description, image, imageAlt,
     if (children) {
         return (jsx("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), description && (jsx("div", { className: emptyTheme.descriptionStyle, children: description }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
+    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: emptyTheme.subtitleStyle, children: subtitle }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
 });
 // Set display name for dev tools and Storybook
 Empty.displayName = "Empty";

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

@@ -4,7 +4,7 @@
 export interface EmptyTheme {
     baseStyle: string;
     titleStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
 }
 /**
  * Default theme for the Empty component

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

@@ -5,9 +5,9 @@ const emptyTheme = {
     // Base container styles - customizable spacing, colors, and layout
     baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
     // Title text styles - customizable typography and colors
-    titleStyle: "text-base font-medium text-[var(--color-text-primary)]",
-    // Description text styles - customizable typography and colors  
-    descriptionStyle: "text-base text-[var(--color-text-secondary)]/70",
+    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)]",
+    // Description text styles - customizable typography and colors
+    subtitleStyle: "text-base text-[var(--color-text-muted)]",
 };
 
 export { emptyTheme };

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

@@ -5,8 +5,8 @@ import React from "react";
 export interface EmptyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Primary title/heading text */
     title?: React.ReactNode;
-    /** Descriptive text explaining the empty state */
-    description?: React.ReactNode;
+    /** Subtitle text explaining the empty state */
+    subtitle?: React.ReactNode;
     /**
      * Optional image source for illustration
      * Note: If both image and icon are provided, image takes precedence

package/dist/components/core/FileTypeIcon/FileTypeIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FileTypeIconProps } from './FileTypeIcon.types';
+export declare const FileTypeIcon: React.ForwardRefExoticComponent<Omit<FileTypeIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/FileTypeIcon/FileTypeIcon.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { fileTypeIconTheme } from './FileTypeIcon.theme.js';
+import { fileTypes } from './fileTypes.js';
+
+const FileTypeIcon = React__default.forwardRef(({ type, size = 'md', colorMode = 'color', className, theme: customTheme, ...props }, ref) => {
+    var _a;
+    const fileType = fileTypes[type];
+    if (!fileType) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[FileTypeIcon]: Unknown type "${type}". Available types: ${Object.keys(fileTypes).join(', ')}`);
+        }
+        return null;
+    }
+    const theme = {
+        ...fileTypeIconTheme,
+        ...customTheme,
+        sizes: { ...fileTypeIconTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
+    };
+    const resolvedSize = typeof size === 'number' ? size : (_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : 24;
+    const strokeColor = colorMode === 'color' ? '#D5D7DA' : 'currentColor';
+    const strokeOpacity = colorMode === 'color' ? 1 : 0.3;
+    const badgeColor = colorMode === 'color' ? fileType.color : 'currentColor';
+    const labelText = fileType.label;
+    const badgeWidth = Math.round(labelText.length * 6 + 8);
+    const badgeX = 1;
+    const textX = badgeX + badgeWidth / 2;
+    return (jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", width: resolvedSize, height: resolvedSize, fill: "none", role: "img", "aria-label": `${fileType.label} file`, "data-type": type, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: [jsx("path", { d: "M11 0.75H27C27.1212 0.75 27.2375 0.798088 27.3232 0.883789L38.1162 11.6768C38.2019 11.7625 38.25 11.8788 38.25 12V36C38.25 37.7949 36.7949 39.25 35 39.25H11C9.20507 39.25 7.75 37.7949 7.75 36V4C7.75 2.20507 9.20508 0.75 11 0.75Z", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("path", { d: "M27 0.5V8C27 10.2091 28.7909 12 31 12H38.5", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("rect", { x: badgeX, y: 18, width: badgeWidth, height: 16, rx: 2, fill: badgeColor, opacity: colorMode === 'color' ? 1 : 0.15 }), jsx("text", { x: textX, y: 26, textAnchor: "middle", dominantBaseline: "central", fill: colorMode === 'color' ? 'white' : 'currentColor', fontSize: 9.5, fontWeight: 700, fontFamily: "Arial, Helvetica, sans-serif", letterSpacing: 0.3, children: labelText })] }));
+});
+FileTypeIcon.displayName = 'FileTypeIcon';
+
+export { FileTypeIcon };

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

@@ -0,0 +1,2 @@
+import { FileTypeIconTheme } from './FileTypeIcon.types';
+export declare const fileTypeIconTheme: FileTypeIconTheme;

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

@@ -0,0 +1,12 @@
+const fileTypeIconTheme = {
+    baseStyle: 'inline-block shrink-0',
+    sizes: {
+        xs: 16,
+        sm: 20,
+        md: 24,
+        lg: 32,
+        xl: 40,
+    },
+};
+
+export { fileTypeIconTheme };

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export type FileTypeName = 'pdf' | 'doc' | 'docx' | 'txt' | 'xls' | 'xlsx' | 'csv' | 'ppt' | 'mp3' | 'wav' | 'mp4' | 'mov' | 'jpg' | 'png' | 'svg' | 'gif' | 'zip' | 'rar';
+export type FileTypeIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FileTypeIconColorMode = 'color' | 'mono';
+export interface FileTypeIconTheme {
+    baseStyle: string;
+    sizes: Record<FileTypeIconSize, number>;
+}
+export interface FileTypeIconThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<FileTypeIconSize, number>>;
+}
+export interface FileTypeIconProps extends React.SVGProps<SVGSVGElement> {
+    type: FileTypeName;
+    size?: FileTypeIconSize | number;
+    colorMode?: FileTypeIconColorMode;
+    className?: string;
+    theme?: FileTypeIconThemeOverrides;
+}

package/dist/components/core/FileTypeIcon/fileTypes.d.ts

@@ -0,0 +1,7 @@
+import { FileTypeName } from './FileTypeIcon.types';
+export interface FileTypeData {
+    label: string;
+    color: string;
+    category: string;
+}
+export declare const fileTypes: Record<FileTypeName, FileTypeData>;

package/dist/components/core/FileTypeIcon/fileTypes.js

@@ -0,0 +1,30 @@
+const fileTypes = {
+    // PDF
+    pdf: { label: 'PDF', color: '#E5252A', category: 'pdf' },
+    // Documents
+    doc: { label: 'DOC', color: '#2B7CD3', category: 'document' },
+    docx: { label: 'DOCX', color: '#2B7CD3', category: 'document' },
+    txt: { label: 'TXT', color: '#4B5563', category: 'document' },
+    // Spreadsheets
+    xls: { label: 'XLS', color: '#1D6F42', category: 'spreadsheet' },
+    xlsx: { label: 'XLSX', color: '#1D6F42', category: 'spreadsheet' },
+    csv: { label: 'CSV', color: '#1D6F42', category: 'spreadsheet' },
+    // Presentations
+    ppt: { label: 'PPT', color: '#D04423', category: 'presentation' },
+    // Audio
+    mp3: { label: 'MP3', color: '#8B5CF6', category: 'audio' },
+    wav: { label: 'WAV', color: '#8B5CF6', category: 'audio' },
+    // Video
+    mp4: { label: 'MP4', color: '#7C3AED', category: 'video' },
+    mov: { label: 'MOV', color: '#7C3AED', category: 'video' },
+    // Images
+    jpg: { label: 'JPG', color: '#F59E0B', category: 'image' },
+    png: { label: 'PNG', color: '#F59E0B', category: 'image' },
+    svg: { label: 'SVG', color: '#F59E0B', category: 'image' },
+    gif: { label: 'GIF', color: '#F59E0B', category: 'image' },
+    // Archives
+    zip: { label: 'ZIP', color: '#CA8A04', category: 'archive' },
+    rar: { label: 'RAR', color: '#CA8A04', category: 'archive' },
+};
+
+export { fileTypes };

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

@@ -0,0 +1,2 @@
+export { FileTypeIcon } from './FileTypeIcon';
+export type { FileTypeIconProps, FileTypeName, FileTypeIconSize, FileTypeIconColorMode, FileTypeIconTheme, FileTypeIconThemeOverrides, } from './FileTypeIcon.types';

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

@@ -2,12 +2,12 @@
  * Default theme configuration for Kbd component
  */
 const kbdTheme = {
-    baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-[calc(var(--radius-base)*0.75)]  bg-neutral-100 border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
+    baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-background-secondary)] border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
     sizes: {
-        sm: 'text-xs px-1 py-0.5 min-w-[1.25rem]',
-        md: 'text-sm px-1.5 py-0.5 min-w-[1.5rem]',
+        sm: 'text-xs px-1 min-w-5 h-5',
+        md: 'text-sm px-1.5 min-w-6 h-6',
     },
-    separatorStyle: 'text-[var(--color-text-muted)] text-xs',
+    separatorStyle: 'text-[var(--color-text-muted)] text-sm',
 };
 
 export { kbdTheme };

package/dist/components/core/Link/Link.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { LinkProps } from "./Link.types";
-declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export { Link };

package/dist/components/core/Link/Link.js

@@ -4,7 +4,9 @@ import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from '../Button/Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, ...props }, ref) => {
+const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, 
+// Destructure motion-conflicting props to avoid type issues
+onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const color = "primary"; // Default to primary, can be overridden by className
     // A link is essentially a button with variant="link"
@@ -33,7 +35,7 @@ const Link = React__default.forwardRef(({ children, className = "", size = "inhe
         }, [shouldReduceMotion]);
     return (jsx(motion.a, { ref: ref, href: disabled ? undefined : href, className: cn(buttonTheme.baseStyle, themeClasses.colorClasses, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.stateClasses, 
         // Special case for link variant to have an underline
-        "underline underline-offset-4 rounded-none", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
+        "underline underline-offset-4 rounded-none font-semibold", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
 });
 Link.displayName = "Link";
 

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

@@ -1,11 +1,11 @@
-import { HTMLMotionProps } from "motion/react";
+import React from "react";
 import { ButtonSize } from "../Button";
 export type LinkSize = ButtonSize | "inherit";
 /**
  * Link component props
  * Extends standard anchor attributes.
  */
-export interface LinkProps extends Omit<HTMLMotionProps<"a">, 'color'> {
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     /**
      * The size of the link.
      * @default "inherit"

package/dist/components/core/MenuItem/MenuItem.js

@@ -9,7 +9,7 @@ import { menuItemTheme } from './MenuItem.theme.js';
  * Handles visual layout, base styling, keyboard activation, and focus tracking.
  * Context-specific behavior (selection, checked state) is handled by consumers.
  */
-const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, description, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
+const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const theme = {
         ...menuItemTheme,
@@ -26,7 +26,9 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
             handleClick();
         }
     }, [handleClick]);
-    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("kbd", { className: theme.shortcutStyle, children: shortcut }))] }), description && (jsx("div", { className: theme.descriptionStyle, children: description }))] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
+    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
+                        ? jsx("div", { className: theme.subtitleStyle, children: subtitle })
+                        : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
 });
 MenuItem.displayName = "MenuItem";
 

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

@@ -2,7 +2,6 @@ export interface MenuItemTheme {
     baseStyle: string;
     dangerStyle: string;
     focusStyle: string;
-    shortcutStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
 }
 export declare const menuItemTheme: MenuItemTheme;

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

@@ -1,27 +1,25 @@
 const menuItemTheme = {
     // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
-        "hover:bg-[var(--color-background-tertiary)] focus:bg-[var(--color-background-secondary)] " +
-        "data-[focused=true]:bg-[var(--color-background-tertiary)] " +
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-base font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
+        "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
+        "data-[focused=true]:bg-[var(--color-background-secondary)] " +
         "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
         "mb-px last-of-type:mb-0 " +
         "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none " +
         // Dark mode
-        "dark:text-[var(--color-text-primary)] " +
-        "dark:hover:bg-[var(--color-neutral-800)]/80 dark:focus:bg-[var(--color-neutral-800)] " +
-        "dark:data-[focused=true]:bg-[var(--color-neutral-800)] " +
+        " " +
+        " " +
+        "dark:data-[focused=true]:bg-[var(--color-background-secondary)] " +
         "dark:hover:bg-[var(--color-neutral-700)] " +
         "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
     // Danger item styling (e.g., Delete actions)
-    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white " +
-        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-white",
+    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
+        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
     // Focus visible styling for keyboard navigation
     focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
-    // Keyboard shortcut display
-    shortcutStyle: "text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5",
     // Description text below the label
-    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate",
 };
 
 export { menuItemTheme };

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

@@ -10,7 +10,7 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Icon or element at the end (right side) */
     endContent?: ReactNode;
     /** Secondary text below the label */
-    description?: string;
+    subtitle?: ReactNode;
     /** Keyboard shortcut display */
     shortcut?: ReactNode;
     /** Whether the item is disabled */

package/dist/components/core/Message/Message.d.ts

@@ -1,8 +1,18 @@
-import React from 'react';
-import { MessageProps } from './Message.types';
+import React from "react";
+import { MessageProps } from "./Message.types";
 export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> & {
     Avatar: React.ForwardRefExoticComponent<import("./MessageAvatar").MessageAvatarComponentProps & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<import("./MessageContent").MessageContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./MessageBody").MessageBodyProps & React.RefAttributes<HTMLDivElement>>;
     Actions: React.ForwardRefExoticComponent<import("./MessageActions").MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
     Timestamp: React.ForwardRefExoticComponent<import("./MessageTimestamp").MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<import("./MessageList.types").MessageListProps & React.RefAttributes<import("..").ScrollAreaRef>>;
+    Status: React.FC<import("./MessageStatusIndicator").MessageStatusIndicatorProps>;
+    SenderName: React.FC<import("./MessageSenderName").MessageSenderNameProps>;
+    File: React.FC<import("./MessageFile").MessageFileProps>;
+    Image: React.FC<import("./MessageImage").MessageImageProps>;
+    Audio: React.FC<import("./MessageAudio").MessageAudioProps>;
+    Link: React.FC<import("./MessageLink").MessageLinkProps>;
+    Reply: React.FC<import("./MessageReply").MessageReplyProps>;
+    Reactions: React.FC<import("./MessageReactions").MessageReactionsProps>;
+    DateDivider: React.FC<import("./MessageDateDivider").MessageDateDividerProps>;
 };