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

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -10,7 +10,7 @@ import { cn } from '../../../utils/cn.js';
 const ApprovalCard = ({ title, subtitle, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {
     const riskColor = approvalCardTheme.badgeColors[riskLevel];
     const riskIcon = riskLevel === "critical" || riskLevel === "high" ? (jsx(ExclamationTriangleIcon, { className: "" })) : (jsx(CheckCircleIcon, { className: "" }));
-    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Content, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "", children: title }), subtitle && (jsx("p", { className: "text-sm md:text-base text-[var(--color-text-secondary)]/80", children: subtitle }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-sm font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
+    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Body, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "", children: title }), subtitle && (jsx("p", { className: "text-sm md:text-base text-[var(--color-text-secondary)]/80", children: subtitle }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-sm font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
 };
 
 export { ApprovalCard };

package/dist/components/ai/MessageHistory/MessageHistory.js

@@ -3,6 +3,7 @@ import React__default, { useRef, useCallback, useEffect, useMemo } from 'react';
 import { messageHistoryTheme } from './MessageHistory.theme.js';
 import { Message } from '../../core/Message/Message.js';
 import '../../core/Message/TypeWriter.js';
+import '../../core/Message/MessageBody.js';
 import { cn } from '../../../utils/cn.js';
 
 /**

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

@@ -1,43 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import '../../forms/Input/Input.js';
-import '../../forms/Input/Input.theme.js';
-import '../../forms/Select/Select.js';
-import '../../forms/Select/Select.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { StopIcon } from '@heroicons/react/24/solid';
+import { promptInputTheme } from './PromptInput.theme.js';
+import { VoiceRecorder } from './VoiceRecorder.js';
+import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
 import { Textarea } from '../../forms/Textarea/Textarea.js';
 import '../../forms/Textarea/Textarea.theme.js';
-import '../../forms/FormLabel/FormLabel.js';
-import '../../forms/Radio/Radio.js';
-import '../../forms/Checkbox/Checkbox.js';
-import '../../forms/Switch/Switch.js';
-import '../../forms/DatePicker/DatePicker.js';
-import '../../forms/DatePicker/DatePicker.theme.js';
-import '../../forms/FileUpload/FileUpload.js';
-import '../../forms/TimePicker/TimePicker.js';
-import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import { cn } from '../../../utils/cn.js';
-import 'react-dom';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
-import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
 import '../../core/Dropdown/DropdownMenu.js';
@@ -45,96 +16,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Loader/Loader.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsContent.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import { StopIcon } from '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/SocialIcon/SocialIcon.js';
-import '../../forms/TimePicker/WheelColumn.js';
-import '../../forms/TimePicker/TimePicker.theme.js';
-import '../../forms/Slider/Slider.js';
-import '../../forms/Slider/Slider.theme.js';
-import '../../forms/Signature/Signature.js';
-import '../../forms/Signature/Signature.theme.js';
-import '../../forms/RichTextEditor/RichTextEditor.js';
-import '../../forms/RichTextEditor/RichTextEditor.theme.js';
-import '../../forms/InputOTP/InputOTP.js';
-import '../../forms/InputOTP/InputOTP.theme.js';
-import '../../forms/InputCreditCard/InputCreditCard.js';
-import '../../forms/InputCreditCard/InputCreditCard.theme.js';
-import '../../forms/InputAddress/InputAddress.js';
-import '../../forms/InputAddress/InputAddress.theme.js';
-import '../../forms/InputDate/InputDate.js';
-import '../../forms/InputCounter/InputCounter.js';
-import '../../forms/InputTag/InputTag.js';
-import '../../forms/InputTag/InputTag.theme.js';
-import '../../forms/Combobox/Combobox.js';
-import '../../forms/Combobox/Combobox.theme.js';
-import '../../forms/ColorPicker/ColorPicker.js';
-import '../../forms/ColorPicker/ColorPickerTrigger.js';
-import '../../forms/ColorPicker/ColorPickerContent.js';
-import '../../forms/ColorPicker/ColorPicker2DCanvas.js';
-import '../../forms/ColorPicker/ColorPickerSwatch.js';
-import '../../forms/ColorPicker/ColorPickerSliders.js';
-import '../../forms/ColorPicker/ColorPickerInput.js';
-import '../../forms/ColorPicker/ColorPickerFormatSelector.js';
-import '../../forms/ColorPicker/ColorPickerEyeDropper.js';
-import '../../forms/ColorPicker/ColorPickerPresets.js';
-import '../../forms/SelectableCard/SelectableCard.js';
-import '../../forms/TransferList/TransferList.js';
-import '../../forms/Mention/Mention.js';
-import '../../forms/Mention/Mention.theme.js';
-import '../../forms/CronInput/CronInput.js';
-import '../../forms/CronInput/CronInput.theme.js';
-import { promptInputTheme } from './PromptInput.theme.js';
-import { VoiceRecorder } from './VoiceRecorder.js';
-import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
+import { Button } from '../../core/Button/Button.js';
 
 /**
  * Default model options for the model selector

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

@@ -3,84 +3,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { motion } from 'motion/react';
 import { PlayIcon, PauseIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Dropdown/Dropdown.js';
-import '../../core/Dropdown/DropdownTrigger.js';
-import '../../core/Dropdown/DropdownMenu.js';
-import '../../core/Dropdown/DropdownItem.js';
-import '../../core/Dropdown/DropdownSection.js';
-import '../../core/Dropdown/DropdownSeparator.js';
-import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Loader/Loader.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsContent.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/SocialIcon/SocialIcon.js';
 
 /**
  * Format seconds into MM:SS display

package/dist/components/ai/StreamingResponse/StreamingResponse.js

@@ -3,6 +3,7 @@ import { useRef, useEffect } from 'react';
 import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
 import { Message } from '../../core/Message/Message.js';
 import { TypeWriter } from '../../core/Message/TypeWriter.js';
+import '../../core/Message/MessageBody.js';
 import { ErrorDisplay } from './ErrorDisplay.js';
 import { MarkdownRenderer } from './MarkdownRenderer.js';
 import { AnimatedText } from './AnimatedText.js';

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/ai/index.js

@@ -1,6 +1,7 @@
 export { Message } from '../core/Message/Message.js';
 export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
+import '../core/Message/MessageBody.js';
 export { MessageHistory } from './MessageHistory/MessageHistory.js';
 export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
 export { PromptInput } from './PromptInput/PromptInput.js';

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

@@ -7,5 +7,5 @@ export declare const Accordion: {
 } & {
     Item: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -3,7 +3,7 @@ import { useContext, createContext, useState, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { accordionTheme } from './Accordion.theme.js';
 import { AccordionTrigger } from './AccordionTrigger.js';
-import { AccordionContent } from './AccordionContent.js';
+import { AccordionBody } from './AccordionBody.js';
 import { AccordionItem } from './AccordionItem.js';
 
 // Create context for the main Accordion component
@@ -50,7 +50,7 @@ AccordionRoot.displayName = "Accordion";
 const Accordion = Object.assign(AccordionRoot, {
     Item: AccordionItem,
     Trigger: AccordionTrigger,
-    Content: AccordionContent,
+    Body: AccordionBody,
 });
 
 export { Accordion, useAccordionContext };

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

@@ -2,8 +2,8 @@ export interface AccordionTheme {
     baseStyle: string;
     baseStyleStacked: string;
     triggerStyle: string;
-    contentStyle: string;
-    contentInnerStyle: string;
+    bodyStyle: string;
+    bodyInnerStyle: string;
     itemStyle: string;
     itemStyleStacked: string;
 }

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

@@ -9,10 +9,10 @@ const accordionTheme = {
     itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)
     triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)]",
-    // Content styles (shared across variants)
-    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden",
-    // Content inner wrapper styles
-    contentInnerStyle: "p-4 pb-2.5 pt-0",
+    // Body styles (shared across variants)
+    bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden",
+    // Body inner wrapper styles
+    bodyInnerStyle: "p-4 pb-2.5 pt-0",
 };
 
 export { accordionTheme };

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

@@ -53,8 +53,8 @@ export interface AccordionContextValue {
     theme: AccordionThemeOverrides & {
         baseStyle: string;
         triggerStyle: string;
-        contentStyle: string;
-        contentInnerStyle: string;
+        bodyStyle: string;
+        bodyInnerStyle: string;
     };
 }
 /**
@@ -91,33 +91,32 @@ export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonEl
     children: React.ReactNode;
     className?: string;
     /**
-     * Optional leading icon rendered before children
+     * Override the default indicator (chevron) icon.
+     * Set to `null` to hide it entirely.
      */
-    iconStart?: React.ReactNode;
+    chevron?: React.ReactNode | null;
     /**
-     * Indicator icon rendered after children. Defaults to PlusIcon.
-     * Set to `null` to hide the indicator entirely.
+     * Rotation degrees applied to the chevron icon when open.
+     * Default: 45 (for PlusIcon). Use 180 for a chevron-down, 90 for a right-arrow, 0 for none.
      */
-    iconEnd?: React.ReactNode | null;
+    chevronRotation?: number;
     /**
-     * Rotation degrees applied to iconStart when open.
-     * Default: 0 (static, no rotation). Use 45 for a plus-to-X effect.
+     * Position of the chevron icon.
+     * - `"right"` (default): pushed to the far right after children.
+     * - `"left"`: appears before children.
+     * No effect when `chevron` is explicitly provided.
+     * @default "right"
      */
-    iconStartRotation?: number;
+    chevronPosition?: "left" | "right";
     /**
-     * Rotation degrees applied to iconEnd when open.
-     * Default: 45 (for PlusIcon). Use 180 for chevrons, 90 for right-arrows, 0 for none.
-     */
-    iconEndRotation?: number;
-    /**
-     * @deprecated Use `iconEndRotation` instead. Alias for `iconEndRotation`.
+     * @deprecated Use `chevronRotation` instead.
      */
     iconRotation?: number;
 }
 /**
- * Content props
+ * Body props
  */
-export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }
@@ -128,8 +127,8 @@ export interface AccordionThemeOverrides {
     baseStyle?: string;
     baseStyleStacked?: string;
     triggerStyle?: string;
-    contentStyle?: string;
-    contentInnerStyle?: string;
+    bodyStyle?: string;
+    bodyInnerStyle?: string;
     itemStyle?: string;
     itemStyleStacked?: string;
 }

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionBodyProps } from "./Accordion.types";
+export declare const AccordionBody: React.ForwardRefExoticComponent<AccordionBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Accordion/{AccordionContent.js → AccordionBody.js}

@@ -6,7 +6,7 @@ import { useAccordionItemContext } from './AccordionItem.js';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { accordionAnimations, accordionContentAnimations } from './Accordion.animations.js';
 
-const AccordionContent = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+const AccordionBody = React__default.forwardRef(({ children, className, ...rest }, ref) => {
     const { theme } = useAccordionContext();
     const { isOpen, contentId, triggerId } = useAccordionItemContext();
     const shouldReduceMotion = useReducedMotion();
@@ -14,8 +14,8 @@ const AccordionContent = React__default.forwardRef(({ children, className, ...re
     const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
     // Filter out conflicting props to avoid type issues
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, onTransitionEnd, onTransitionStart, ...safeProps } = rest;
-    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: theme === null || theme === void 0 ? void 0 : theme.contentStyle, "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: cn(theme === null || theme === void 0 ? void 0 : theme.contentInnerStyle, className), variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
+    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: theme === null || theme === void 0 ? void 0 : theme.bodyStyle, "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: cn(theme === null || theme === void 0 ? void 0 : theme.bodyInnerStyle, className), variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
 });
-AccordionContent.displayName = "AccordionContent";
+AccordionBody.displayName = "Accordion.Body";
 
-export { AccordionContent };
+export { AccordionBody };

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

@@ -9,7 +9,7 @@ const AccordionItemContext = createContext(undefined);
 const useAccordionItemContext = () => {
     const ctx = useContext(AccordionItemContext);
     if (!ctx)
-        throw new Error("Accordion.Trigger and Accordion.Content must be used within Accordion.Item");
+        throw new Error("Accordion.Trigger and Accordion.Body must be used within Accordion.Item");
     return ctx;
 };
 const AccordionItem = React__default.forwardRef(({ children, className, value, ...props }, ref) => {

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

@@ -7,17 +7,24 @@ 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, iconStart, iconEnd, iconStartRotation = 0, iconEndRotation, iconRotation, ...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 resolvedEndRotation = (_a = iconEndRotation !== null && iconEndRotation !== void 0 ? iconEndRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
-    const renderIcon = iconEnd === null
+    const resolvedChevronRotation = (_a = chevronRotation !== null && chevronRotation !== void 0 ? chevronRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
+    // Resolve the indicator icon
+    const defaultChevronIcon = jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
+    const resolvedChevron = chevron === null
         ? null
-        : iconEnd !== undefined
-            ? iconEnd
-            : jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
-    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: [iconStart && (iconStartRotation !== 0 ? (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(iconStartRotation), className: "flex items-center justify-center shrink-0", children: iconStart })) : (jsx("span", { className: "flex items-center justify-center shrink-0", children: iconStart }))), children, renderIcon && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedEndRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: renderIcon }))] }));
+        : chevron !== undefined
+            ? chevron
+            : chevronPosition === "left"
+                ? null // rendered in the left slot instead
+                : defaultChevronIcon;
+    // When chevronPosition="left", render the default animated chevron before children
+    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 }))] }));
 });
 AccordionTrigger.displayName = "AccordionTrigger";
 

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

@@ -1,4 +1,4 @@
 import { Accordion } from "./Accordion";
-import { AccordionProps, AccordionTriggerProps, AccordionContentProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
+import { AccordionProps, AccordionTriggerProps, AccordionBodyProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
 export { Accordion };
-export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionBodyProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };

package/dist/components/core/Alert/Alert.js

@@ -33,7 +33,11 @@ const Alert = React__default.forwardRef(({ variant = "default", color = "primary
         const IconComponent = defaultIcons[color];
         return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
     };
-    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })), subtitle && (jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
+    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
+                        ? jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })
+                        : title), subtitle && (typeof subtitle === 'string'
+                        ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })
+                        : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: alertNode });
     }

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

@@ -23,15 +23,15 @@ export interface AlertTheme {
         dismissible: string;
     };
 }
-export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Visual variant */
     variant?: AlertVariant;
     /** Semantic color */
     color?: AlertColor;
     /** The main title/message of the alert */
-    title?: string;
+    title?: ReactNode;
     /** Additional subtitle text */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /** Whether the alert can be dismissed */
     dismissible?: boolean;
     /**
@@ -45,7 +45,7 @@ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     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;
     /**