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

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

@@ -512,7 +512,7 @@ className, textareaClassName, footerClassName, theme = {},
         return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: buttonColor, onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, showReflection: buttonVariant === "filled" ? false : undefined, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: submitButtonIcon }, "submit") }) }));
     };
     // ========== Render ==========
-    return (jsxs("div", { className: cn("min-w-xl mx-auto", className), ...props, children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes.join(","), multiple: true, onChange: (e) => {
+    return (jsxs("div", { className: cn("w-full mx-auto", className), ...props, children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes.join(","), multiple: true, onChange: (e) => {
                     if (e.target.files)
                         processFiles(e.target.files);
                     e.target.value = "";

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

@@ -170,7 +170,7 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
             setRecordingState("recording");
         }
     }, [recordingState, clearTimer, startTimer]);
-    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "ghost", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
+    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "soft", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
                             ? { opacity: [1, 0.3, 1] }
                             : { opacity: 0.5 }, transition: recordingState === "recording"
                             ? { duration: 1.2, repeat: Infinity, ease: "easeInOut" }

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -1,5 +1,5 @@
 const promptSuggestionTheme = {
-    baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 rounded-full " +
+    baseStyle: "inline-flex items-center gap-2 py-1 px-3 rounded-full " +
         "bg-white dark:bg-[var(--color-background)] " +
         "border border-[var(--color-border)] " +
         "text-base font-medium text-[var(--color-text-primary)] " +

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/charts/FunnelChart/FunnelChart.js

@@ -430,7 +430,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
                 }), orientation === "vertical" &&
                 showConversionRate &&
                 stages.map((stage, index) => {
@@ -448,7 +448,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
                 }), showSummary && summaryPosition !== "none" && stages.length > 1 && (jsxs(motion.div, { className: cn("absolute bg-[var(--color-background)] rounded-lg shadow-sm border border-[var(--color-border)] px-3 py-2 pointer-events-none", getSummaryPositionClasses(summaryPosition)), ...(animate
                     ? {
                         variants: summaryVariants,

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

@@ -90,9 +90,9 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                 ...(_c = badgeTheme.variantColors) === null || _c === void 0 ? void 0 : _c.outline,
                 ...(_d = customTheme.variantColors) === null || _d === void 0 ? void 0 : _d.outline,
             },
-            ghost: {
-                ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.ghost,
-                ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.ghost,
+            soft: {
+                ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.soft,
+                ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.soft,
             },
         },
         sizes: {
@@ -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,12 +6,12 @@ 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: "",
         outline: "bg-transparent border",
-        ghost: "ring-transparent border-0",
+        soft: "ring-transparent border-0",
     },
     // Color styles organized PER VARIANT
     // This structure enables reliable dark: variants and className overrides
@@ -45,9 +45,9 @@ const badgeTheme = {
             danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-danger-400)]",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-secondary)] " +
+        // Soft variant - subtle background tints
+        soft: {
+            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-semibold",
+        sm: "text-sm px-1.5 py-0 gap-1 font-semibold",
+        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

@@ -1,8 +1,8 @@
 import React, { ReactNode, MouseEvent } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
-export type BadgeVariant = "filled" | "outline" | "ghost";
+export type BadgeVariant = "filled" | "outline" | "soft";
 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.ripple.js

@@ -120,7 +120,7 @@ function getRippleColorClass(variant, color) {
     if (variant === "filled") {
         return "bg-white/30";
     }
-    // For outline/ghost buttons, use color-matched ripple
+    // For outline/soft buttons, use color-matched ripple
     switch (color) {
         case "primary":
             return "bg-[var(--color-primary)]/20";

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

@@ -9,7 +9,7 @@ export interface ButtonTheme {
     variantColors: {
         filled: Record<ButtonColor, string>;
         outline: Record<ButtonColor, string>;
-        ghost: Record<ButtonColor, string>;
+        soft: Record<ButtonColor, string>;
         link: Record<ButtonColor, string>;
     };
     sizes: Record<ButtonSize, {

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

@@ -8,7 +8,7 @@ const buttonTheme = {
     variantStyles: {
         filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
-        ghost: "border-transparent",
+        soft: "border-transparent",
         link: "bg-transparent border-transparent",
     },
     // Color styles organized BY VARIANT for reliable dark: prefixes
@@ -66,8 +66,8 @@ const buttonTheme = {
                 "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
                 "dark:hover:bg-[var(--color-danger-900)]/30",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
+        // Soft variant - subtle background tints
+        soft: {
             neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
                 "hover:bg-[var(--color-neutral-200)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
@@ -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/Button/Button.types.d.ts

@@ -51,6 +51,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     darkMode?: boolean;
 }
 export type ButtonColor = SemanticColor;
-export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
+export type ButtonVariant = "filled" | "outline" | "soft" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "error" | "loading";

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/Calendar/CalendarMini/CalendarMini.js

@@ -195,7 +195,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
     };
     const MonthRow = enableAnimations ? motion.div : "div";
     const DateItem = enableAnimations ? motion.button : "button";
-    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
+    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
                                     maskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                     WebkitMaskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                 }, children: jsx("div", { ref: monthScrollRef, className: cn(mergedTheme.monthRowStyle), role: "tablist", "aria-label": "Month selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(MonthRow, { custom: direction, ...(enableAnimations && {
@@ -243,7 +243,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
                                             }), children: [jsx("div", { className: "text-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
-                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
+                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";
 

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

@@ -8,7 +8,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, } = useDrawerContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
 };
 DrawerHeader.displayName = "Drawer.Header";
 

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 };