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

package/dist/components/core/Tabs/Tabs.animations.js

@@ -45,10 +45,10 @@ const getUnderlineTransition = (shouldReduceMotion) => {
     };
 };
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-const getTabsContentVariants = (shouldReduceMotion) => {
+const getTabsBodyVariants = (shouldReduceMotion) => {
     if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
         // Reduced motion: no animation variants
         return undefined;
@@ -81,4 +81,4 @@ const getTabsContentVariants = (shouldReduceMotion) => {
     };
 };
 
-export { getTabsContentVariants, getTabsTriggerVariants, getUnderlineTransition };
+export { getTabsBodyVariants, getTabsTriggerVariants, getUnderlineTransition };

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

@@ -3,5 +3,5 @@ import { TabsProps } from "./Tabs.types";
 export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
     List: React.ForwardRefExoticComponent<import("./Tabs.types").TabsListProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Tabs.types").TabsBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Tabs/Tabs.js

@@ -5,11 +5,11 @@ import { tabsTheme } from './Tabs.theme.js';
 import { TabsContext } from './TabsContext.js';
 import { TabsList } from './TabsList.js';
 import { TabsTrigger } from './TabsTrigger.js';
-import { TabsContent } from './TabsContent.js';
+import { TabsBody } from './TabsBody.js';
 
 /**
  * Tabs component for organizing content into separate views
- * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Body
  * Supports optional Framer Motion animations and comprehensive accessibility
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
@@ -84,7 +84,7 @@ TabsComponent.displayName = "Tabs";
 const Tabs = Object.assign(TabsComponent, {
     List: TabsList,
     Trigger: TabsTrigger,
-    Content: TabsContent,
+    Body: TabsBody,
 });
 
 export { Tabs };

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

@@ -7,7 +7,7 @@ export interface TabsTheme {
     listStyle: string;
     triggerStyle: string;
     triggerSizes: Record<TabsSize, string>;
-    contentStyle: string;
+    bodyStyle: string;
     underlineStyle: string;
 }
 /**

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

@@ -13,8 +13,8 @@ const tabsTheme = {
         sm: "px-2 py-1.5 text-base gap-1",
         md: "px-2 py-2 text-base gap-1",
     },
-    // TabsContent styles with proper CSS variables
-    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    // TabsBody styles with proper CSS variables
+    bodyStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     // Sliding underline styles
     underlineStyle: "absolute bottom-0 h-0.5 bg-[var(--color-primary)] transition-none",
 };

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

@@ -23,8 +23,8 @@ export type TabsOrientation = "horizontal";
  *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
  *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  *   </Tabs.List>
- *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
- *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ *   <Tabs.Body value="tab1">Content 1</Tabs.Body>
+ *   <Tabs.Body value="tab2">Content 2</Tabs.Body>
  * </Tabs>
  *
  * // Uncontrolled mode
@@ -46,7 +46,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     size?: TabsSize;
     /** Whether all tabs are disabled - individual triggers can also be disabled */
     disabled?: boolean;
-    /** Children components - typically Tabs.List and Tabs.Content components */
+    /** Children components - typically Tabs.List and Tabs.Body components */
     children?: React.ReactNode;
     /**
      * Force dark mode styling for the component. Use when placing the component
@@ -98,20 +98,20 @@ export interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement
     'aria-label'?: string;
 }
 /**
- * TabsContent component props - content panel for each tab
+ * TabsBody component props - content panel for each tab
  * @example
  * ```tsx
- * <Tabs.Content value="profile">
+ * <Tabs.Body value="profile">
  *   <UserProfile data={profileData} />
- * </Tabs.Content>
+ * </Tabs.Body>
  *
  * // Force mount content for performance or state preservation
- * <Tabs.Content value="settings" forceMount>
+ * <Tabs.Body value="settings" forceMount>
  *   <SettingsForm /> // Form state preserved when tab is inactive
- * </Tabs.Content>
+ * </Tabs.Body>
  * ```
  */
-export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabsBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The value that corresponds to a TabsTrigger value - determines when content is shown */
     value: string;
     /** Whether to keep content mounted in DOM when inactive (useful for preserving form state) */

package/dist/components/core/Tabs/TabsBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsBodyProps } from "./Tabs.types";
+/**
+ * TabsBody component displays content panels for tabs with directional fade animations
+ */
+export declare const TabsBody: React.ForwardRefExoticComponent<TabsBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Tabs/{TabsContent.js → TabsBody.js}

@@ -4,12 +4,12 @@ import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
-import { getTabsContentVariants } from './Tabs.animations.js';
+import { getTabsBodyVariants } from './Tabs.animations.js';
 
 /**
- * TabsContent component displays content panels for tabs with directional fade animations
+ * TabsBody component displays content panels for tabs with directional fade animations
  */
-const TabsContent = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
+const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
     const { value: selectedValue, orientation } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
@@ -18,10 +18,10 @@ const TabsContent = React__default.forwardRef(({ value, forceMount = false, chil
     const isSelected = value === selectedValue;
     const shouldRender = forceMount || isSelected;
     // Compute animation variants without a global cache (HMR-safe)
-    const contentVariants = useMemo(() => getTabsContentVariants(shouldDisableAnimations), [shouldDisableAnimations]);
+    const contentVariants = useMemo(() => getTabsBodyVariants(shouldDisableAnimations), [shouldDisableAnimations]);
     // For forceMount, we handle visibility differently to preserve DOM
     if (forceMount) {
-        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, !isSelected && "hidden", // Hide when not selected but force mounted
+        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
             className // User overrides take precedence
             ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
@@ -39,12 +39,12 @@ const TabsContent = React__default.forwardRef(({ value, forceMount = false, chil
         exit: "exit",
         variants: contentVariants,
     };
-    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, className // User overrides take precedence
+    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
             ), "data-state": "active", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
                 position: "relative",
             }, ...animationProps, ...props, children: children }, `content-${value}`)) }));
 });
-TabsContent.displayName = "TabsContent";
+TabsBody.displayName = "Tabs.Body";
 
-export { TabsContent };
+export { TabsBody };

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

@@ -1,6 +1,6 @@
 export { Tabs } from './Tabs';
 export { TabsList } from './TabsList';
 export { TabsTrigger } from './TabsTrigger';
-export { TabsContent } from './TabsContent';
+export { TabsBody } from './TabsBody';
 export { TabsContext, useTabsContext } from './TabsContext';
-export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsBodyProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';

package/dist/components/core/Toast/Toast.js

@@ -73,7 +73,11 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
     }, [stackingStyle.zIndex, index]);
     const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })), subtitle && (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (typeof title === 'string'
+                        ? jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })
+                        : title), subtitle && (typeof subtitle === 'string'
+                        ? jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })
+                        : subtitle), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: toastNode });
     }

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

@@ -1,13 +1,13 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from "react";
 /**
  * Toast visual variant
  */
-export type ToastVariant = 'default' | 'glass';
+export type ToastVariant = "default" | "glass";
 /**
  * Toast state (e.g., loading indicator)
  */
-export type ToastState = 'default' | 'loading';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastState = "default" | "loading";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export interface ToastAction {
     label: string;
     onClick: () => void;
@@ -42,15 +42,15 @@ export interface ToastData {
     id: string;
     variant?: ToastVariant;
     state?: ToastState;
-    title?: string;
-    subtitle?: string;
+    title?: ReactNode;
+    subtitle?: ReactNode;
     icon?: ReactNode;
     action?: ToastAction;
     duration?: number;
     dismissible?: boolean;
     onDismiss?: () => void;
 }
-export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Toast data */
     toast: ToastData;
     /** Custom class name */
@@ -93,7 +93,7 @@ export interface ToastProviderProps {
 }
 export interface ToastContextValue {
     toasts: ToastData[];
-    addToast: (toast: Omit<ToastData, 'id'>) => string;
+    addToast: (toast: Omit<ToastData, "id">) => string;
     removeToast: (id: string) => void;
     removeAllToasts: () => void;
 }
@@ -121,7 +121,7 @@ export interface UseToastReturn {
     info: (title: string, options?: UseToastOptions & {
         subtitle?: string;
     }) => string;
-    loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
+    loading: (title: string, options?: Omit<UseToastOptions, "state"> & {
         subtitle?: string;
     }) => string;
     dismiss: (id: string) => void;

package/dist/components/core/index.js

@@ -7,6 +7,7 @@ export { Badge } from './Badge/Badge.js';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.js';
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs/Breadcrumbs.theme.js';
 export { Button } from './Button/Button.js';
+export { getRippleAnimation, getRippleColorClass, useRipple } from './Button/Button.ripple.js';
 export { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
 export { ButtonGroupSeparator } from './ButtonGroup/ButtonGroupSeparator.js';
 export { ButtonGroupText } from './ButtonGroup/ButtonGroupText.js';
@@ -17,11 +18,13 @@ export { CalendarMini } from './Calendar/CalendarMini/CalendarMini.js';
 export { Card } from './Card/Card.js';
 export { CardStack } from './CardStack/CardStack.js';
 export { Carousel } from './Carousel/Carousel.js';
+export { CarouselBody } from './Carousel/CarouselBody.js';
 export { CommandPalette } from './CommandPalette/CommandPalette.js';
 export { commandPaletteTheme } from './CommandPalette/CommandPalette.theme.js';
 export { Separator } from './Separator/Separator.js';
 export { separatorTheme } from './Separator/Separator.theme.js';
 export { Drawer } from './Drawer/Drawer.js';
+export { DrawerBody } from './Drawer/DrawerBody.js';
 export { Dropdown } from './Dropdown/Dropdown.js';
 export { DropdownTrigger } from './Dropdown/DropdownTrigger.js';
 export { DropdownMenu } from './Dropdown/DropdownMenu.js';
@@ -40,6 +43,7 @@ export { PageHeading } from './PageHeading/PageHeading.js';
 export { Pagination } from './Pagination/Pagination.js';
 export { Popover } from './Popover/Popover.js';
 export { PopoverContext, usePopoverContext } from './Popover/PopoverContext.js';
+export { PopoverBody } from './Popover/PopoverBody.js';
 export { Progress } from './Progress/Progress.js';
 export { Rating } from './Rating/Rating.js';
 export { ScrollArea } from './ScrollArea/ScrollArea.js';
@@ -51,7 +55,7 @@ export { SlidingNumber } from './SlidingNumber/SlidingNumber.js';
 export { Tabs } from './Tabs/Tabs.js';
 export { TabsList } from './Tabs/TabsList.js';
 export { TabsTrigger } from './Tabs/TabsTrigger.js';
-export { TabsContent } from './Tabs/TabsContent.js';
+export { TabsBody } from './Tabs/TabsBody.js';
 export { TabsContext, useTabsContext } from './Tabs/TabsContext.js';
 export { Tooltip } from './Tooltip/Tooltip.js';
 export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
@@ -70,6 +74,7 @@ export { Message } from './Message/Message.js';
 export { messageTheme } from './Message/Message.theme.js';
 export { messageListTheme } from './Message/MessageList.theme.js';
 export { TypeWriter } from './Message/TypeWriter.js';
+export { MessageBody } from './Message/MessageBody.js';
 export { Empty } from './Empty/Empty.js';
 export { emptyTheme } from './Empty/Empty.theme.js';
 export { Masonry } from './Masonry/Masonry.js';
@@ -94,7 +99,7 @@ export { Pill } from './Pill/Pill.js';
 export { pillTheme } from './Pill/Pill.theme.js';
 export { SocialIcon } from './SocialIcon/SocialIcon.js';
 export { AnimatePresence } from 'motion/react';
-export { CardContent } from './Card/CardContent.js';
+export { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.js';
 export { CardHeader } from './Card/CardHeader.js';
 export { CardSubtitle } from './Card/CardSubtitle.js';

package/dist/components/data-display/Feed/Feed.js

@@ -52,9 +52,17 @@ const FeedItem = React__default.forwardRef(({ variant = "default", title, timest
         switch (variant) {
             case "default":
             case "icon":
-                return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && jsxs("span", { className: theme.titleStyle, children: [title, " "] }), children] }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+                return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && (typeof title === 'string'
+                                    ? jsxs("span", { className: theme.titleStyle, children: [title, " "] })
+                                    : title), children] }), timestamp && (typeof timestamp === 'string'
+                            ? jsx("p", { className: theme.timestampStyle, children: timestamp })
+                            : timestamp)] }));
             case "avatar":
-                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+                return (jsxs("div", { className: theme.contentStyle, children: [title && (typeof title === 'string'
+                            ? jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })
+                            : title), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && (typeof timestamp === 'string'
+                            ? jsx("p", { className: theme.timestampStyle, children: timestamp })
+                            : timestamp)] }));
             case "comment-input": {
                 const handleSubmit = () => {
                     const trimmed = inputValue.trim();

package/dist/components/data-display/Feed/Feed.types.d.ts

@@ -36,18 +36,18 @@ export interface FeedThemeOverrides {
     commentInputWrapperStyle?: string;
     commentInputFooterStyle?: string;
 }
-export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FeedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     children: ReactNode;
     theme?: FeedThemeOverrides;
     className?: string;
 }
-export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit"> {
+export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit" | "title"> {
     /** Visual variant of the feed item */
     variant?: FeedItemVariant;
     /** Name/label of the entity that performed the action */
-    title?: string;
+    title?: ReactNode;
     /** Timestamp label (e.g. "6d ago") */
-    timestamp?: string;
+    timestamp?: ReactNode;
     /** Icon element for the "icon" variant indicator */
     icon?: ReactNode;
     /** Avatar configuration for avatar/comment-input variants */

package/dist/components/data-display/GanttChart/GanttTaskContextMenu.js

@@ -11,7 +11,7 @@ const GanttTaskContextMenu = ({ task, children, }) => {
     if (readonly || (!onTaskUpdate && !onTaskDuplicate && !onTaskDelete)) {
         return jsx(Fragment, { children: children });
     }
-    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Content, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubContent, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
+    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Body, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubBody, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
 };
 
 export { GanttTaskContextMenu };

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -4,6 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChart.js';
 import { Segmented } from '../../core/Segmented/Segmented.js';
 import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 
 const ZOOM_OPTIONS = [

package/dist/components/data-display/KPI/KPI.js

@@ -32,7 +32,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
     }, [progress, barCount]);
     const barSize = kpiTheme.barSizes[size];
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] }))] }), formattedTrend && trendDirection && (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] }))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (typeof label === 'string' ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : label)] }), formattedTrend && trendDirection && (typeof formattedTrend === 'string' ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] })) : formattedTrend)] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                     const isFilled = i < filledBars;
                     const fadeDistance = filledBars - i;
                     const fillOpacity = isFilled && fadeDistance <= 3
@@ -43,7 +43,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
                                 ease: "easeOut",
                                 delay: i * 0.03,
                             } })) }, i));
-                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle }))] }));
+                }) })), subtitle && (typeof subtitle === 'string' ? (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle })) : subtitle)] }));
 });
 KPI.displayName = "KPI";
 

package/dist/components/data-display/KPI/KPI.types.d.ts

@@ -38,7 +38,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Label describing the metric (e.g. "Fund raised", "Total Revenue")
      */
-    label?: string;
+    label?: ReactNode;
     /**
      * Percentage change value (e.g. 20, -5.3). Determines trend direction & color.
      */
@@ -46,7 +46,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Custom trend label override (default: auto-formats as "+20%" or "-5.3%")
      */
-    trendLabel?: string;
+    trendLabel?: ReactNode;
     /**
      * Progress value from 0-100. Controls how many bars are filled.
      */
@@ -59,7 +59,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Subtitle text below the bars (e.g. "Compared to last month")
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Icon to display before the label.
      */

package/dist/components/data-display/Metric/Metric.js

@@ -11,9 +11,9 @@ const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue,
     const variantStyles = metricTheme.variants[variant];
     const variantColorStyles = metricTheme.variantColors[variant] || "";
     const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
-    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-base font-medium", trendDirection === "up"
+    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (typeof trendValue === 'string' ? (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-base font-medium", trendDirection === "up"
                                                 ? "text-[var(--color-success)]"
-                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] }))] }), subtitle && (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
+                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle })) : subtitle)] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
 });
 Metric.displayName = "Metric";
 

package/dist/components/data-display/Metric/Metric.types.d.ts

@@ -12,16 +12,16 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Label describing the metric
      */
-    label: string;
+    label: React.ReactNode;
     /**
      * Optional subtitle or secondary text
      */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /**
      * Trend value to display (e.g., "+10.34%", "-5.2%")
      * Also acts as boolean - if provided, trend badge is shown
      */
-    trendValue?: string;
+    trendValue?: React.ReactNode;
     /**
      * Trend direction - determines icon and color
      * @default 'up'

package/dist/components/data-display/Table/TableColumnManager.js

@@ -1,8 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
 import { Cog6ToothIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 
@@ -16,7 +18,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Content, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

package/dist/components/data-display/Table/TableFilter.js

@@ -8,6 +8,7 @@ import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
 import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 
@@ -206,7 +207,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return true;
         return f.value != null && f.value !== "";
     }).length;
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
                                                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"

package/dist/components/data-display/Table/TableSelectionHeader.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../core/Button/Button.js';
-import { cn } from '../../../utils/cn.js';
 import 'react';
+import { cn } from '../../../utils/cn.js';
 
 /**
  * Selection header that appears when rows are selected

package/dist/components/forms/Checkbox/Checkbox.js

@@ -57,7 +57,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
                                 ref(node);
                             else if (ref)
                                 ref.current = node;
-                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })), description && (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description }))] }))] }));
+                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

package/dist/components/forms/Checkbox/Checkbox.types.d.ts

@@ -21,8 +21,8 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElemen
     checked?: boolean;
     indeterminate?: boolean;
     onChange?: (checked: boolean, value: string) => void;
-    label?: string;
-    description?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
     state?: CheckboxState;
     size?: CheckboxSize;
     className?: string;
@@ -38,9 +38,9 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldS
     size?: CheckboxSize;
     state?: CheckboxState;
     orientation?: CheckboxGroupOrientation;
-    label?: string;
-    description?: string;
-    error?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
     required?: boolean;
     className?: string;
 }

package/dist/components/forms/Checkbox/CheckboxGroup.js

@@ -32,8 +32,8 @@ const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defau
         state,
     }), [groupName, currentValue, size, state]);
     const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
-    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })), description && (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
-                        checkboxTheme.groupHorizontalStyle), children: children }), error && (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error }))] }) }));
+    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : (label)), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })) : (description)), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error })) : (error))] }) }));
 });
 CheckboxGroup.displayName = "Checkbox.Group";
 

package/dist/components/forms/ColorPicker/ColorPicker.d.ts

@@ -14,7 +14,7 @@ export declare const useColorPicker: () => ColorPickerContextValue;
  */
 export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> & {
     Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
-    Content: React.FC<import("./ColorPicker.types").ColorPickerContentProps>;
+    Body: React.FC<import("./ColorPicker.types").ColorPickerBodyProps>;
     Canvas: React.FC<{
         className?: string;
     }>;