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

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

@@ -42,8 +42,10 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
     // Render individual breadcrumb item
     const renderItem = (item, index, isLast) => {
         const isCurrentPage = isLast || !item.href;
-        const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), item.label] }));
-        return (jsx("span", { className: "flex items-center text-base", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
+        const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), typeof item.label === 'string'
+                    ? jsx("span", { children: item.label })
+                    : item.label] }));
+        return (jsx("span", { className: "flex items-center text-base", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: itemContent })) }, `breadcrumb-${index}`));
     };
     // Render separator
     const renderSeparator = (index) => {
@@ -60,7 +62,9 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
                 window.location.href = selectedItem.href;
             }
         };
-        return (jsxs(Dropdown, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8, children: [jsx(Dropdown.Trigger, { children: jsx("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs`, children: "..." }) }), jsx(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items", children: hiddenItems.map((item, index) => (jsx(Dropdown.Item, { itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart, children: item.label }, `hidden-${index}`))) })] }, "ellipsis"));
+        return (jsxs(Dropdown, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8, children: [jsx(Dropdown.Trigger, { children: jsx("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs`, children: "..." }) }), jsx(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items", children: hiddenItems.map((item, index) => (jsx(Dropdown.Item, { itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart, children: typeof item.label === 'string'
+                            ? jsx("span", { children: item.label })
+                            : item.label }, `hidden-${index}`))) })] }, "ellipsis"));
     };
     // Build the breadcrumb elements
     const breadcrumbElements = [];

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

@@ -4,7 +4,7 @@ import React from "react";
  */
 export interface BreadcrumbItem {
     /** The display text for the breadcrumb item */
-    label: string;
+    label: React.ReactNode;
     /** Optional href for navigation. If not provided, item is treated as current page */
     href?: string;
     /** Optional icon to display at the start (before the label) */

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

@@ -59,13 +59,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 console.error("Error in button click handler:", error);
             }
         }
-    }, [
-        onClick,
-        isDisabled,
-        enableRipple,
-        shouldReduceMotion,
-        createRipple,
-    ]);
+    }, [onClick, isDisabled, enableRipple, shouldReduceMotion, createRipple]);
     // Compute theme classes (direct computation - faster than useMemo)
     const sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : resolvedVariant === "link" ? "link" : "default"]) || "";
     const colorClasses = ((_c = buttonTheme.variantColors[resolvedVariant]) === null || _c === void 0 ? void 0 : _c[resolvedColor]) || "";
@@ -112,7 +106,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     }, [buttonRef]);
     return (jsxs(motion.button, { ...restProps /* React drag events conflict with motion drag events */, ...animationProps, ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "link" &&
-                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 bg-gradient-to-b from-white/25 to-transparent border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
                 ripples.map((ripple) => {
                     const animation = getRippleAnimation(effect, ripple, rippleScale);
                     return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||

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

@@ -3,7 +3,7 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
         filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
@@ -124,19 +124,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "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: "p-0 text-base h-fit",
+            link: "font-semibold p-0 text-sm h-fit",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
+            default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-base h-fit",
+            link: "font-semibold p-0 text-base h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
+            default: "font-semibold min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-lg h-fit",
+            link: "font-semibold p-0 text-lg h-fit",
         },
     },
     // State styles

package/dist/components/core/Calendar/Calendar.js

@@ -224,8 +224,8 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
     // Generate year options - filter based on minDate/maxDate
     const currentDate = new Date();
     const defaultYearRange = {
-        start: currentDate.getFullYear() - 50,
-        end: currentDate.getFullYear() + 50,
+        start: currentDate.getFullYear() - 100,
+        end: currentDate.getFullYear(),
     };
     const actualYearRange = yearRange || defaultYearRange;
     const yearOptions = useMemo(() => {
@@ -239,7 +239,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             endYear = Math.min(endYear, maxDate.getFullYear());
         }
         const options = [];
-        for (let year = startYear; year <= endYear; year++) {
+        for (let year = endYear; year >= startYear; year--) {
             options.push({
                 id: year,
                 value: year.toString(),

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/Card/Card.d.ts

@@ -2,7 +2,7 @@ import { CardComponent } from './Card.types';
 import { CardHeader } from './CardHeader';
 import { CardTitle } from './CardTitle';
 import { CardSubtitle } from './CardSubtitle';
-import { CardContent } from './CardContent';
+import { CardBody } from './CardBody';
 import { CardFooter } from './CardFooter';
-export { CardHeader, CardTitle, CardSubtitle, CardContent, CardFooter };
+export { CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter };
 export declare const Card: CardComponent;

package/dist/components/core/Card/Card.js

@@ -5,7 +5,7 @@ import { cardTheme } from './Card.theme.js';
 import { CardHeader } from './CardHeader.js';
 import { CardTitle } from './CardTitle.js';
 import { CardSubtitle } from './CardSubtitle.js';
-import { CardContent } from './CardContent.js';
+import { CardBody } from './CardBody.js';
 import { CardFooter } from './CardFooter.js';
 
 const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
@@ -21,8 +21,8 @@ const Card = Object.assign(CardRoot, {
     Header: CardHeader,
     Title: CardTitle,
     Subtitle: CardSubtitle,
-    Content: CardContent,
+    Body: CardBody,
     Footer: CardFooter,
 });
 
-export { Card, CardContent, CardFooter, CardHeader, CardSubtitle, CardTitle };
+export { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle };

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

@@ -1,9 +1,9 @@
 const cardTheme = {
     baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)]",
-    headerStyle: "flex flex-col space-y-1.5 p-6",
+    headerStyle: "flex flex-col p-6",
     titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
-    contentStyle: "p-6 pt-0",
+    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1.5",
+    bodyStyle: "p-6 pt-0",
     footerStyle: "flex items-center p-6 pt-0",
 };
 

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

@@ -4,7 +4,7 @@ export interface CardTheme {
     headerStyle: string;
     titleStyle: string;
     subtitleStyle: string;
-    contentStyle: string;
+    bodyStyle: string;
     footerStyle: string;
 }
 export interface CardThemeOverrides {
@@ -12,7 +12,7 @@ export interface CardThemeOverrides {
     headerStyle?: string;
     titleStyle?: string;
     subtitleStyle?: string;
-    contentStyle?: string;
+    bodyStyle?: string;
     footerStyle?: string;
 }
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
@@ -41,13 +41,13 @@ export interface CardComponent extends ForwardRefExoticComponent<CardProps & Ref
     Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
     Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLDivElement>>;
     Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
     Footer: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
 }
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
-export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {

package/dist/components/core/Card/CardBody.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardBodyProps } from './Card.types';
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/CardBody.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(cardTheme.bodyStyle, className), ...props, children: children }));
+});
+CardBody.displayName = 'Card.Body';
+
+export { CardBody };

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

@@ -1,2 +1,2 @@
-export { Card, CardHeader, CardTitle, CardSubtitle, CardContent, CardFooter } from './Card';
-export type { CardProps, CardHeaderProps, CardTitleProps, CardSubtitleProps, CardContentProps, CardFooterProps, CardTheme, CardThemeOverrides } from './Card.types';
+export { Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardSubtitleProps, CardBodyProps, CardFooterProps, CardTheme, CardThemeOverrides } from './Card.types';

package/dist/components/core/Carousel/Carousel.js

@@ -3,18 +3,18 @@ import React__default, { useState, useEffect, useCallback, useMemo } from 'react
 import { cn } from '../../../utils/cn.js';
 import { carouselTheme } from './Carousel.theme.js';
 import { CarouselContext } from './CarouselContext.js';
-import { CarouselContent } from './CarouselContent.js';
+import { CarouselBody } from './CarouselBody.js';
 import { CarouselItem } from './CarouselItem.js';
 import { CarouselPrevious } from './CarouselPrevious.js';
 import { CarouselNext } from './CarouselNext.js';
 
 const CarouselRoot = React__default.forwardRef(({ orientation = 'horizontal', opts = {}, showControls = false, defaultIndex = 0, onSlideChange, className, children, ...rest }, ref) => {
     const { align = 'start', loop = false, slidesToScroll = 1, draggable = true, dragThreshold = 0.1, } = opts;
-    // Count total slides by looking for CarouselContent and its CarouselItem children
+    // Count total slides by looking for CarouselBody and its CarouselItem children
     const totalSlides = React__default.useMemo(() => {
         let count = 0;
         React__default.Children.forEach(children, (child) => {
-            if (React__default.isValidElement(child) && child.type === CarouselContent) {
+            if (React__default.isValidElement(child) && child.type === CarouselBody) {
                 const contentProps = child.props;
                 count = React__default.Children.count(contentProps.children);
             }
@@ -73,7 +73,7 @@ const CarouselRoot = React__default.forwardRef(({ orientation = 'horizontal', op
 CarouselRoot.displayName = 'Carousel';
 // Create compound component with sub-components
 const Carousel = Object.assign(CarouselRoot, {
-    Content: CarouselContent,
+    Body: CarouselBody,
     Item: CarouselItem,
     Previous: CarouselPrevious,
     Next: CarouselNext,

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

@@ -67,13 +67,13 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
      */
     className?: string;
     /**
-     * Children components (CarouselContent, CarouselPrevious, CarouselNext)
+     * Children components (CarouselBody, CarouselPrevious, CarouselNext)
      */
     children?: ReactNode;
 }
-export interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface CarouselBodyProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Custom class name for the content container
+     * Custom class name for the body container
      */
     className?: string;
     /**
@@ -106,7 +106,7 @@ export interface CarouselControlProps extends HTMLAttributes<HTMLButtonElement>
     'aria-label'?: string;
 }
 export interface CarouselComponent extends ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>> {
-    Content: ForwardRefExoticComponent<CarouselContentProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<CarouselBodyProps & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<CarouselItemProps & RefAttributes<HTMLDivElement>>;
     Previous: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;
     Next: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Carousel/CarouselBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselBodyProps } from './Carousel.types';
+declare const CarouselBody: React.ForwardRefExoticComponent<CarouselBodyProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselBody };

package/dist/components/core/Carousel/{CarouselContent.js → CarouselBody.js}

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import { useCarouselContext } from './CarouselContext.js';
 import { carouselTheme } from './Carousel.theme.js';
 
-const CarouselContent = React__default.forwardRef(({ className, children, ...props }, ref) => {
+const CarouselBody = React__default.forwardRef(({ className, children, ...props }, ref) => {
     const { currentIndex, orientation, opts, scrollPrev, scrollNext } = useCarouselContext();
     const shouldReduceMotion = useReducedMotion();
     const internalRef = React__default.useRef(null);
@@ -47,6 +47,6 @@ const CarouselContent = React__default.forwardRef(({ className, children, ...pro
                 });
             }) }) }));
 });
-CarouselContent.displayName = 'Carousel.Content';
+CarouselBody.displayName = 'Carousel.Body';
 
-export { CarouselContent };
+export { CarouselBody };

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

@@ -1,2 +1,3 @@
 export { Carousel } from './Carousel';
-export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';
+export { CarouselBody } from './CarouselBody';
+export type { CarouselProps, CarouselBodyProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';

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

@@ -5,11 +5,11 @@ export declare const ContextMenu: {
     displayName: string;
 } & {
     Trigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuTriggerProps & React.RefAttributes<HTMLElement>>;
-    Content: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuBodyProps & React.RefAttributes<HTMLDivElement>>;
     Item: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
     Sub: React.FC<import("./ContextMenu.types").ContextMenuSubProps>;
     SubTrigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
-    SubContent: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+    SubBody: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubBodyProps & React.RefAttributes<HTMLDivElement>>;
     Separator: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
     Label: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
 };