@flikk/ui 1.0.0-beta.12 → 1.0.0-beta.13

package/dist/components/ai/StreamingResponse/StreamingResponse.types.d.ts

@@ -2,16 +2,16 @@
  * StreamingResponse Component Types
  * Type definitions for the StreamingResponse component
  */
-import type { ReactNode } from 'react';
-import type { SSEFormat, SSEParser } from '../../../utils/sseFormatParsers';
-import type { StreamingError, RetryConfig } from '../../../utils';
-import type { MessageRole } from '../../core/Message';
+import type { ReactNode } from "react";
+import type { SSEFormat, SSEParser } from "../../../utils/sseFormatParsers";
+import type { StreamingError, RetryConfig } from "../../../utils";
+import type { MessageRole } from "../../core/Message";
 /**
  * Avatar configuration for Message component
  */
 export interface MessageAvatarProps {
     src?: string;
-    alt: string;
+    name: string;
     fallback?: ReactNode;
 }
 /**
@@ -21,7 +21,7 @@ export interface MarkdownOptions {
     /** Allow HTML in markdown (default: false) */
     allowHtml?: boolean;
     /** Syntax highlighting theme (default: 'light') */
-    syntaxTheme?: 'light' | 'dark';
+    syntaxTheme?: "light" | "dark";
     /** Custom code block renderer */
     renderCodeBlock?: (code: string, language: string) => ReactNode;
 }
@@ -32,7 +32,7 @@ export interface StreamingResponseProps {
     /** The SSE endpoint URL */
     url: string;
     /** HTTP method (default: 'POST') */
-    method?: 'GET' | 'POST';
+    method?: "GET" | "POST";
     /** Request headers */
     headers?: Record<string, string>;
     /** Request body (for POST requests) */

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

@@ -92,7 +92,7 @@ export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonEl
     className?: string;
     /**
      * Override the default indicator (chevron) icon.
-     * Set to `null` to hide it entirely — equivalent to `showChevron={false}`.
+     * Set to `null` to hide it entirely.
      */
     chevron?: React.ReactNode | null;
     /**
@@ -108,12 +108,6 @@ export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonEl
      * @default "right"
      */
     chevronPosition?: "left" | "right";
-    /**
-     * Set to `false` to hide the chevron icon entirely.
-     * Equivalent to passing `chevron={null}`.
-     * @default true
-     */
-    showChevron?: boolean;
     /**
      * @deprecated Use `chevronRotation` instead.
      */

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

@@ -7,14 +7,14 @@ import { motion } from 'motion/react';
 import { PlusIcon } from '@heroicons/react/24/outline';
 import { createTriggerIconVariants } from './Accordion.animations.js';
 
-const AccordionTrigger = React__default.forwardRef(({ children, className, chevron, chevronRotation, iconRotation, chevronPosition = "right", showChevron = true, ...props }, ref) => {
+const AccordionTrigger = React__default.forwardRef(({ children, className, chevron, chevronRotation, iconRotation, chevronPosition = "right", ...props }, ref) => {
     var _a;
     const { theme } = useAccordionContext();
     const { isOpen, toggle, triggerId, contentId } = useAccordionItemContext();
     const resolvedChevronRotation = (_a = chevronRotation !== null && chevronRotation !== void 0 ? chevronRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
-    // Resolve the indicator icon, respecting showChevron and chevron overrides
+    // Resolve the indicator icon
     const defaultChevronIcon = jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
-    const resolvedChevron = !showChevron || chevron === null
+    const resolvedChevron = chevron === null
         ? null
         : chevron !== undefined
             ? chevron
@@ -22,9 +22,7 @@ const AccordionTrigger = React__default.forwardRef(({ children, className, chevr
                 ? null // rendered in the left slot instead
                 : defaultChevronIcon;
     // When chevronPosition="left", render the default animated chevron before children
-    const useDefaultOnLeft = showChevron && chevron === null
-        ? false
-        : showChevron && chevronPosition === "left" && chevron === undefined;
+    const useDefaultOnLeft = chevron !== null && chevronPosition === "left" && chevron === undefined;
     const animatedChevron = (rotation, extraClass) => (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(rotation), className: cn("flex items-center justify-center shrink-0", extraClass), children: defaultChevronIcon }));
     return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
 });

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

@@ -45,7 +45,7 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"
     showIcon?: boolean;
     /**
      * Avatar to display (takes precedence over icons)
-     * Example: avatar={<Avatar src="..." alt="User name" size="md" />}
+     * Example: avatar={<Avatar src="..." name="User name" size="md" />}
      */
     avatar?: ReactNode;
     /**

package/dist/components/core/Avatar/Avatar.js

@@ -4,12 +4,14 @@ import { cn } from '../../../utils/cn.js';
 import { avatarTheme } from './Avatar.theme.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
+import { UserIcon } from '@heroicons/react/24/solid';
 
-const Avatar = React__default.forwardRef(({ src, alt = "Avatar", // Default alt text for better accessibility
-size = "md", status = "none", fallback, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, ...props }, ref) => {
+const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, ...props }, ref) => {
     const [imageError, setImageError] = useState(false);
     const [retries, setRetries] = useState(0);
     const retryTimerRef = useRef(null);
+    // Normalize null to undefined for internal use
+    const resolvedName = name !== null && name !== void 0 ? name : undefined;
     // Clear timeout on unmount to prevent memory leaks
     useEffect(() => {
         return () => {
@@ -43,21 +45,23 @@ size = "md", status = "none", fallback, className, role, lazyLoad = true, retryC
     }, [retries, retryCount, retryDelay]);
     // Handle fallback content
     const getFallbackContent = () => {
+        // 1. Explicit fallback always wins
         if (fallback) {
             return fallback;
         }
-        // If no fallback provided and no alt text, use placeholder
-        if (alt === "Avatar") {
-            return jsx("span", { "aria-hidden": "true", children: "?" });
+        // 2. Generate initials from name
+        if (resolvedName) {
+            const maxInitials = size === "xs" ? 1 : initialsCount;
+            const initials = resolvedName
+                .split(" ")
+                .map((part) => part[0])
+                .slice(0, maxInitials)
+                .join("")
+                .toUpperCase();
+            return jsx("span", { "aria-hidden": "true", children: initials });
         }
-        // Use initials from alt text
-        const initials = alt
-            .split(" ")
-            .map((part) => part[0])
-            .slice(0, 1)
-            .join("")
-            .toUpperCase();
-        return jsx("span", { "aria-hidden": "true", children: initials });
+        // 3. Default placeholder icon
+        return jsx(UserIcon, { className: "w-1/2 h-1/2" });
     };
     // Determine status indicator size based on avatar size
     const getStatusSize = () => {
@@ -78,15 +82,15 @@ size = "md", status = "none", fallback, className, role, lazyLoad = true, retryC
     };
     // Create full accessibility label including context if provided
     const accessibilityLabel = contextualLabel
-        ? `${alt}${contextualLabel}`
-        : alt;
+        ? `${resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar"}${contextualLabel}`
+        : (resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar");
     // Determine appropriate ARIA role
     const ariaRole = role || (src ? undefined : "img");
     // Avatar content to potentially wrap in tooltip
-    const avatarContent = (jsxs("div", { ref: ref, className: cn("relative inline-flex avatar-wrapper", groupPosition), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [jsx("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: src && !imageError ? (jsx("img", { src: src, alt: alt, className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: "avatar-fallback", children: getFallbackContent() })) }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status }))] }));
+    const avatarContent = (jsxs("div", { ref: ref, className: cn("relative inline-flex avatar-wrapper", groupPosition), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [jsx("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: "avatar-fallback", children: getFallbackContent() })) }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status }))] }));
     // Conditionally wrap in tooltip
-    if (showTooltip && alt && alt !== "Avatar") {
-        return (jsx(Tooltip, { content: alt, placement: "top", children: avatarContent }));
+    if (showTooltip && resolvedName) {
+        return (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarContent }));
     }
     return avatarContent;
 });

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

@@ -3,7 +3,7 @@
  */
 const avatarTheme = {
     // Base styles for the avatar element
-    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-semibold tracking-tighter rounded-[var(--avatar-radius)] ring-2 ring-[var(--color-primary)]/10 border border-[var(--border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 glass-effect",
+    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     // Size variants using CSS variables
     sizes: {
         xs: "size-[var(--avatar-size-xs)] text-xs",

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

@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none';
+import { ReactNode } from "react";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "offline" | "busy" | "away" | "none";
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The source URL for the avatar image
      */
     src?: string;
     /**
-     * Alternative text for the avatar image.
-     * Should describe the person or entity represented by the avatar.
-     * @default "Avatar"
+     * The name of the person or entity represented by the avatar.
+     * Used to generate initials for the fallback and as alt text for the image.
+     * Accepts `null` for compatibility with nullable data sources.
      */
-    alt?: string;
+    name?: string | null;
     /**
      * The size of the avatar
      * @default "md"
@@ -23,7 +23,8 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     status?: AvatarStatus;
     /**
-     * Fallback content to display when image fails to load or no src is provided
+     * Fallback content to display when image fails to load or no src is provided.
+     * Overrides the default placeholder icon and auto-generated initials.
      */
     fallback?: ReactNode;
     /**

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

@@ -18,7 +18,7 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
         const directionClass = direction === "row-reverse" ? "flex-row-reverse" : "flex-row";
         const totalPeople = avatars.length;
         const groupDescription = avatars
-            .map((avatar) => avatar.alt || "User")
+            .map((avatar) => avatar.name || "User")
             .join(", ");
         return {
             visibleAvatars,
@@ -49,7 +49,7 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
                         // Ensure that groupPosition is not passed to avoid conflicts
                         groupPosition: undefined }) }, index));
             }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, enableAnimations &&
-                    "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount, children: overflowIndicator ? (overflowIndicator(overflowCount)) : (jsx(Avatar, { size: size, alt: `+${overflowCount} more`, fallback: jsxs("span", { children: ["+", overflowCount] }), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": `+ ${overflowCount} more users` })) }))] }));
+                    "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount, children: overflowIndicator ? (overflowIndicator(overflowCount)) : (jsx(Avatar, { size: size, name: `+${overflowCount} more`, fallback: jsxs("span", { children: ["+", overflowCount] }), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": `+ ${overflowCount} more users` })) }))] }));
 });
 // Set display name for dev tools and Storybook
 AvatarGroup.displayName = "AvatarGroup";

package/dist/components/core/Badge/Badge.js

@@ -164,14 +164,16 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             // Apply negative margin for overlap effect (scales with badge size)
             const avatarMargin = pill
                 ? {
-                    sm: "-ml-1.5", // Small pill: minimal overlap
-                    md: "-ml-1.5", // Medium pill: moderate overlap
+                    xs: "-ml-1",
+                    sm: "-ml-1.5",
+                    md: "-ml-1.5",
                 }[size]
                 : {
-                    sm: "-ml-1.5", // Small default: minimal overlap
-                    md: "-ml-1", // Medium default: less overlap (has border ring)
+                    xs: "-ml-1",
+                    sm: "-ml-1.5",
+                    md: "-ml-1",
                 }[size];
-            return (jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn((_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, "border-0", pill ? "rounded-full" : "rounded-md ring-0") }));
+            return (jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn((_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, "border-0", pill ? "rounded-full" : "rounded-md ring-0") }));
         }
         if (iconStart) {
             return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));

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

@@ -6,7 +6,7 @@ import { semanticBgColors } from '../../../utils/colorUtils.js';
  */
 const badgeTheme = {
     // Base styles applied to all badges
-    baseStyle: "inline-flex items-center font-semibold select-none whitespace-nowrap transition-all duration-300 h-fit",
+    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit",
     // Visual style variants (structure only, no colors)
     variants: {
         filled: "",
@@ -47,7 +47,7 @@ const badgeTheme = {
         },
         // Ghost variant - subtle background tints
         ghost: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-secondary)] " +
+            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
                 "dark:bg-[var(--color-neutral-900)]  ",
             primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
                 "dark:bg-[var(--color-primary-600)]/30 dark:text-[var(--color-primary-400)]",
@@ -63,36 +63,43 @@ const badgeTheme = {
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: "text-sm px-1.5 py-0.5 gap-1",
-        md: "text-base px-2 py-0.5 gap-1",
+        xs: "text-xs px-1 py-0 gap-1 font-medium",
+        sm: "text-sm px-1.5 py-0 gap-1 font-medium",
+        md: "text-sm px-2 py-0.25 gap-1 font-semibold",
     },
     // Border radius per size (using CSS variable)
     radiusSizes: {
+        xs: "rounded-[calc(var(--badge-radius)*0.5)]",
         sm: "rounded-[calc(var(--badge-radius)*0.75)]",
         md: "rounded-[var(--badge-radius)]",
     },
     // Additional padding for pill shape
     pillSizes: {
+        xs: "px-1.5",
         sm: "px-2",
         md: "px-2.5",
     },
     // Icon sizes
     iconSizes: {
+        xs: "size-2.5",
         sm: "size-3",
         md: "size-3.5",
     },
     // Avatar sizes (base sizes without negative margin)
     avatarSizes: {
+        xs: "size-3.5",
         sm: "size-4",
         md: "size-4",
     },
     // Dismiss button container sizes
     dismissButtonSizes: {
+        xs: "size-3",
         sm: "size-3.5",
         md: "size-4",
     },
     // Dismiss icon sizes (inside button)
     dismissIconSizes: {
+        xs: "size-2",
         sm: "size-2.5",
         md: "size-3",
     },

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

@@ -2,7 +2,7 @@ import React, { ReactNode, MouseEvent } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
 export type BadgeVariant = "filled" | "outline" | "ghost";
 export type BadgeColor = SemanticColor;
-export type BadgeSize = "sm" | "md";
+export type BadgeSize = "xs" | "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -122,7 +122,7 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
      */
     avatar?: {
         src?: string;
-        alt: string;
+        name: string;
         fallback?: ReactNode;
         initialsCount?: number;
     };

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

@@ -124,9 +124,9 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
+            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "font-semibold p-0 text-base h-fit",
+            link: "font-semibold p-0 text-sm h-fit",
         },
         md: {
             default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",

package/dist/components/core/Calendar/CalendarEvent/CalendarEvent.types.d.ts

@@ -1,7 +1,7 @@
-import { HTMLAttributes } from 'react';
-import { CalendarEventThemeOverrides } from './CalendarEvent.theme';
-import { CalendarEvent as CalendarEventType, GridConfig, EventPosition } from '../../../../utils';
-export type CalendarEventVariant = 'daily' | 'weekly' | 'monthly';
+import { HTMLAttributes } from "react";
+import { CalendarEventThemeOverrides } from "./CalendarEvent.theme";
+import { CalendarEvent as CalendarEventType, GridConfig, EventPosition } from "../../../../utils";
+export type CalendarEventVariant = "daily" | "weekly" | "monthly";
 export interface CalendarEventProps extends HTMLAttributes<HTMLDivElement> {
     variant?: CalendarEventVariant;
     event: CalendarEventType & {
@@ -9,7 +9,6 @@ export interface CalendarEventProps extends HTMLAttributes<HTMLDivElement> {
         attendees?: Array<{
             name: string;
             src: string;
-            alt: string;
             showTooltip?: boolean;
         }>;
     };
@@ -20,5 +19,5 @@ export interface CalendarEventProps extends HTMLAttributes<HTMLDivElement> {
     gridInterval?: number;
     startOffset?: number;
     theme?: CalendarEventThemeOverrides;
-    onEventClick?: (eventData: CalendarEventProps['event']) => void;
+    onEventClick?: (eventData: CalendarEventProps["event"]) => void;
 }

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/MenuItem/MenuItem.theme.js

@@ -1,6 +1,6 @@
 const menuItemTheme = {
     // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-2.5 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 " +
+    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)] " +

package/dist/components/core/Message/Message.js

@@ -100,7 +100,7 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     if (variant === "system") {
         return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-base", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
     }
-    return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
 });
 MessageRoot.displayName = "Message";
 // Attach compound components

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

@@ -6,12 +6,12 @@ const messageTheme = {
     // Shared base styles (apply to all variants)
     bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
     containerBaseStyle: "flex items-start gap-3 h-fit text-base",
-    timestampStyle: "text-sm text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
     // Variant-specific modifiers (only differences)
     variants: {
         sender: {
             containerModifier: "flex-row-reverse", // Reverse direction for right alignment
-            bubbleStyle: "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
+            bubbleStyle: "bg-[var(--color-neutral-900)] text-[var(--color-neutral-100)] " +
                 "rounded-tr-xs  " +
                 // Dark mode - slightly darker gradient for better contrast
                 " ",

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

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 /**
  * Message role types for AI conversations
  */
-export type MessageRole = 'user' | 'assistant' | 'system';
+export type MessageRole = "user" | "assistant" | "system";
 /**
  * Message variant types for chat UI
  */
-export type MessageVariant = 'sender' | 'receiver' | 'system';
+export type MessageVariant = "sender" | "receiver" | "system";
 /**
  * Avatar configuration for message sender
  */
@@ -16,9 +16,9 @@ export interface MessageAvatarProps {
      */
     src?: string;
     /**
-     * Alternative text for the avatar image
+     * The name for the avatar (used for initials and alt text)
      */
-    alt: string;
+    name: string;
     /**
      * Fallback content to display when image fails to load
      */
@@ -28,7 +28,7 @@ export interface MessageAvatarProps {
  * Message component props
  * Supports both props-based API and compound component API
  */
-export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * The role of the message sender (AI semantic naming)
      * Takes precedence over variant if both are provided

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
 export interface MessageAvatarComponentProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The source URL for the avatar image
      */
     src?: string;
     /**
-     * The name or alt text for the avatar
+     * The name for the avatar
      */
     name: string;
     /**