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

package/dist/components/core/ContextMenu/ContextMenu.js

@@ -3,11 +3,11 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ContextMenuContext } from './ContextMenuContext.js';
 import { ContextMenuTrigger } from './ContextMenuTrigger.js';
-import { ContextMenuContent } from './ContextMenuContent.js';
+import { ContextMenuBody } from './ContextMenuBody.js';
 import { ContextMenuItem } from './ContextMenuItem.js';
 import { ContextMenuSub } from './ContextMenuSub.js';
 import { ContextMenuSubTrigger } from './ContextMenuSubTrigger.js';
-import { ContextMenuSubContent } from './ContextMenuSubContent.js';
+import { ContextMenuSubBody } from './ContextMenuSubBody.js';
 import { ContextMenuSeparator } from './ContextMenuSeparator.js';
 import { ContextMenuLabel } from './ContextMenuLabel.js';
 import { contextMenuTheme } from './ContextMenu.theme.js';
@@ -22,11 +22,11 @@ import { contextMenuTheme } from './ContextMenu.theme.js';
  *   <ContextMenu.Trigger>
  *     <div>Right click here</div>
  *   </ContextMenu.Trigger>
- *   <ContextMenu.Content>
+ *   <ContextMenu.Body>
  *     <ContextMenu.Item shortcut="⌘R">Reload</ContextMenu.Item>
  *     <ContextMenu.Separator />
  *     <ContextMenu.Item checked={true}>Show Bookmarks</ContextMenu.Item>
- *   </ContextMenu.Content>
+ *   </ContextMenu.Body>
  * </ContextMenu>
  * ```
  */
@@ -78,11 +78,11 @@ ContextMenuRoot.displayName = "ContextMenu";
 // Export as a unified component with sub-components
 const ContextMenu = Object.assign(ContextMenuRoot, {
     Trigger: ContextMenuTrigger,
-    Content: ContextMenuContent,
+    Body: ContextMenuBody,
     Item: ContextMenuItem,
     Sub: ContextMenuSub,
     SubTrigger: ContextMenuSubTrigger,
-    SubContent: ContextMenuSubContent,
+    SubBody: ContextMenuSubBody,
     Separator: ContextMenuSeparator,
     Label: ContextMenuLabel,
 });

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

@@ -26,7 +26,7 @@ export interface ContextMenuTriggerProps {
     className?: string;
     disabled?: boolean;
 }
-export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContextMenuBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
     animation?: boolean;
@@ -53,7 +53,7 @@ export interface ContextMenuSubTriggerProps extends React.HTMLAttributes<HTMLDiv
     className?: string;
     disabled?: boolean;
 }
-export interface ContextMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContextMenuSubBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
     animation?: boolean;

package/dist/components/core/ContextMenu/ContextMenuBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuBodyProps } from "./ContextMenu.types";
+/**
+ * ContextMenuBody - Renders the menu at cursor position with keyboard navigation
+ */
+export declare const ContextMenuBody: React.ForwardRefExoticComponent<ContextMenuBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/{ContextMenuContent.js → ContextMenuBody.js}

@@ -7,9 +7,9 @@ import { useContextMenuContext } from './ContextMenuContext.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**
- * ContextMenuContent - Renders the menu at cursor position with keyboard navigation
+ * ContextMenuBody - Renders the menu at cursor position with keyboard navigation
  */
-const ContextMenuContent = React__default.forwardRef(({ children, className, animation = true, "aria-label": ariaLabel, ...props }, ref) => {
+const ContextMenuBody = React__default.forwardRef(({ children, className, animation = true, "aria-label": ariaLabel, ...props }, ref) => {
     const { isOpen, onOpenChange, cursorPosition, contentRef, triggerRef, theme, } = useContextMenuContext();
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
@@ -192,6 +192,6 @@ const ContextMenuContent = React__default.forwardRef(({ children, className, ani
         ? createPortal(menuContent, document.body)
         : null;
 });
-ContextMenuContent.displayName = "ContextMenuContent";
+ContextMenuBody.displayName = "ContextMenu.Body";
 
-export { ContextMenuContent };
+export { ContextMenuBody };

package/dist/components/core/ContextMenu/ContextMenuSubBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubBodyProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSubBody - Submenu content positioned to the right of trigger
+ */
+export declare const ContextMenuSubBody: React.ForwardRefExoticComponent<ContextMenuSubBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/{ContextMenuSubContent.js → ContextMenuSubBody.js}

@@ -7,9 +7,9 @@ import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.j
 import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**
- * ContextMenuSubContent - Submenu content positioned to the right of trigger
+ * ContextMenuSubBody - Submenu content positioned to the right of trigger
  */
-const ContextMenuSubContent = React__default.forwardRef(({ children, className, animation = true, ...props }, ref) => {
+const ContextMenuSubBody = React__default.forwardRef(({ children, className, animation = true, ...props }, ref) => {
     const { theme } = useContextMenuContext();
     const { isOpen, triggerRef, onOpenChange } = useSubMenuContext();
     const shouldReduceMotion = useReducedMotion();
@@ -101,6 +101,6 @@ const ContextMenuSubContent = React__default.forwardRef(({ children, className,
         ? createPortal(submenuContent, document.body)
         : null;
 });
-ContextMenuSubContent.displayName = "ContextMenuSubContent";
+ContextMenuSubBody.displayName = "ContextMenu.SubBody";
 
-export { ContextMenuSubContent };
+export { ContextMenuSubBody };

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

@@ -1,4 +1,4 @@
 export { ContextMenu } from "./ContextMenu";
-export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuSubContentProps, ContextMenuSeparatorProps, ContextMenuLabelProps, ContextMenuThemeOverrides, } from "./ContextMenu.types";
+export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuBodyProps, ContextMenuItemProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuSubBodyProps, ContextMenuSeparatorProps, ContextMenuLabelProps, ContextMenuThemeOverrides, } from "./ContextMenu.types";
 export type { ContextMenuTheme } from "./ContextMenu.theme";
 export { contextMenuTheme } from "./ContextMenu.theme";

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

@@ -16,8 +16,8 @@ export declare const Drawer: {
         ({ children, className, ...props }: import("./Drawer.types").DrawerSubtitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Content: {
-        ({ children, className, ...props }: import("./Drawer.types").DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+    Body: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {

package/dist/components/core/Drawer/Drawer.js

@@ -8,7 +8,7 @@ import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.an
 import { DrawerHeader } from './DrawerHeader.js';
 import { DrawerTitle } from './DrawerTitle.js';
 import { DrawerSubtitle } from './DrawerSubtitle.js';
-import { DrawerContent } from './DrawerContent.js';
+import { DrawerBody } from './DrawerBody.js';
 import { DrawerFooter } from './DrawerFooter.js';
 
 // Create context for Drawer components
@@ -43,7 +43,18 @@ const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right"
         theme,
         titleId,
         subtitleId,
-    }), [isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, titleId, subtitleId]);
+    }), [
+        isOpen,
+        onClose,
+        position,
+        size,
+        closeOnOverlayClick,
+        closeOnEsc,
+        showCloseButton,
+        theme,
+        titleId,
+        subtitleId,
+    ]);
     // Detect if children contain a compound Drawer.Header
     const hasCompoundHeader = React__default.Children.toArray(children).some((child) => {
         var _a;
@@ -52,19 +63,27 @@ const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right"
     });
     // Auto-generate header when using prop shorthand (backward compat)
     const shouldAutoRenderHeader = !hasCompoundHeader && (title || showCloseButton);
-    // Get size variant based on position
+    // Detect whether size is a preset token or an arbitrary Tailwind class
+    const SIZE_TOKENS = ["sm", "md", "lg", "full"];
+    const isSizeToken = SIZE_TOKENS.includes(size);
+    // Get size variant based on position (only for preset tokens)
     const isHorizontal = position === "left" || position === "right";
-    const sizeVariant = isHorizontal
-        ? drawerSizeVariants.horizontal[size]
-        : drawerSizeVariants.vertical[size];
+    const sizeVariant = isSizeToken
+        ? isHorizontal
+            ? drawerSizeVariants.horizontal[size]
+            : drawerSizeVariants.vertical[size]
+        : size; // treat arbitrary string as a raw Tailwind class
     // Use different positioning for full-width/height drawers
     const positionVariant = size === "full"
         ? drawerPositionVariantsFullWidth[position]
         : drawerPositionVariantsWithMargin[position];
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, positionVariant, isSizeToken && size !== "full" && sizeVariant, !isSizeToken && sizeVariant, // raw Tailwind class
+        className), animations: {
             overlay: drawerOverlayAnimations,
             content: getDrawerContentAnimations(position),
-        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.inner, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title && jsx(DrawerTitle, { children: title }), subtitle && jsx(DrawerSubtitle, { children: subtitle })] })), children] }) }) }));
+        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.inner, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title &&
+                                (typeof title === "string" ? (jsx(DrawerTitle, { children: title })) : (title)), subtitle &&
+                                (typeof subtitle === "string" ? (jsx(DrawerSubtitle, { children: subtitle })) : (subtitle))] })), children] }) }) }));
 };
 DrawerRoot.displayName = "Drawer";
 // Attach compound subcomponents
@@ -72,7 +91,7 @@ const Drawer = Object.assign(DrawerRoot, {
     Header: DrawerHeader,
     Title: DrawerTitle,
     Subtitle: DrawerSubtitle,
-    Content: DrawerContent,
+    Body: DrawerBody,
     Footer: DrawerFooter,
 });
 

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

@@ -10,7 +10,7 @@ const drawerTheme = {
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
     title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
     subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
-    content: "flex-1 overflow-y-auto p-4",
+    body: "flex-1 overflow-y-auto p-4",
     footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
         "dark:border-[var(--color-border)]",
 };

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

@@ -1,6 +1,8 @@
 import React from "react";
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
-export type DrawerSize = "sm" | "md" | "lg" | "full";
+export type DrawerSizeToken = "sm" | "md" | "lg" | "full";
+/** Preset size token or any arbitrary Tailwind width/height class, e.g. `"w-80"`, `"w-[50vw]"` */
+export type DrawerSize = DrawerSizeToken | (string & {});
 export interface DrawerTheme {
     overlay: string;
     container: string;
@@ -9,7 +11,7 @@ export interface DrawerTheme {
     headerContent: string;
     title: string;
     subtitle: string;
-    content: string;
+    body: string;
     footer: string;
 }
 export interface DrawerThemeOverrides {
@@ -20,7 +22,7 @@ export interface DrawerThemeOverrides {
     headerContent?: string;
     title?: string;
     subtitle?: string;
-    content?: string;
+    body?: string;
     footer?: string;
 }
 export interface DrawerContextValue {
@@ -39,9 +41,9 @@ export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     isOpen: boolean;
     onClose: () => void;
     /** Title text displayed in the drawer header */
-    title?: string;
+    title?: React.ReactNode;
     /** Subtitle text displayed below the title */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** Icon displayed to the left of the title/description */
     icon?: React.ReactNode;
     position?: DrawerPosition;
@@ -75,7 +77,7 @@ export interface DrawerSubtitleProps extends React.HTMLAttributes<HTMLParagraphE
     children: React.ReactNode;
     className?: string;
 }
-export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }

package/dist/components/core/Drawer/DrawerBody.d.ts

@@ -0,0 +1,5 @@
+import { DrawerBodyProps } from "./Drawer.types";
+export declare const DrawerBody: {
+    ({ children, className, ...props }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Drawer/DrawerBody.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+const DrawerBody = ({ children, className, ...props }) => {
+    const { theme } = useDrawerContext();
+    return (jsx("div", { className: cn(theme.body, className), ...props, children: children }));
+};
+DrawerBody.displayName = "Drawer.Body";
+
+export { DrawerBody };

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

@@ -1,2 +1,3 @@
 export { Drawer } from "./Drawer";
-export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, DrawerContentProps, DrawerFooterProps, } from "./Drawer.types";
+export { DrawerBody } from "./DrawerBody";
+export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, DrawerBodyProps, DrawerFooterProps, } from "./Drawer.types";

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

@@ -59,16 +59,16 @@ export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElem
     className?: string;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    subtitle?: string;
+    subtitle?: ReactNode;
     shortcut?: ReactNode;
     isDisabled?: boolean;
     isDanger?: boolean;
     onAction?: () => void;
 }
-export interface DropdownSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DropdownSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     children: ReactNode;
     className?: string;
-    title?: string;
+    title?: ReactNode;
     showDivider?: boolean;
 }
 export interface DropdownSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {

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

@@ -8,7 +8,9 @@ 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";
 

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.js

@@ -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("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && jsx("div", { className: theme.subtitleStyle, children: subtitle })] }), 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.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/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 */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /** Keyboard shortcut display */
     shortcut?: ReactNode;
     /** Whether the item is disabled */

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

@@ -2,7 +2,7 @@ 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>>;

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

@@ -9,7 +9,7 @@ import { motion } from 'motion/react';
 import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { MessageContext } from './MessageContext.js';
 import { MessageAvatar } from './MessageAvatar.js';
-import { MessageContent } from './MessageContent.js';
+import { MessageBody } from './MessageBody.js';
 import { MessageActions } from './MessageActions.js';
 import { MessageTimestamp } from './MessageTimestamp.js';
 import { MessageList } from './MessageList.js';
@@ -100,13 +100,13 @@ 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
 const Message = Object.assign(MessageRoot, {
     Avatar: MessageAvatar,
-    Content: MessageContent,
+    Body: MessageBody,
     Actions: MessageActions,
     Timestamp: MessageTimestamp,
     List: MessageList,

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
@@ -47,7 +47,7 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     variant?: MessageVariant;
     /**
      * The message content (supports rich content, markdown, etc.)
-     * Note: Optional when using compound API with Message.Content
+     * Note: Optional when using compound API with Message.Body
      */
     content?: ReactNode;
     /**

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;
     /**