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

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

@@ -4,6 +4,7 @@ import { approvalCardTheme } from './ApprovalCard.theme.js';
 import { Card } from '../../core/Card/Card.js';
 import { Badge } from '../../core/Badge/Badge.js';
 import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { cn } from '../../../utils/cn.js';
 
 const ApprovalCard = ({ title, subtitle, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {

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

@@ -1,14 +1,43 @@
 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 { 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 '../../forms/Input/Input.js';
+import '../../forms/Input/Input.theme.js';
+import '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.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';
@@ -16,7 +45,96 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
-import { Button } from '../../core/Button/Button.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';
 
 /**
  * Default model options for the model selector

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

@@ -3,7 +3,84 @@ 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/core/Accordion/Accordion.animations.d.ts

@@ -1,8 +1,13 @@
-import { Variants } from 'motion/react';
+import type { Variants } from 'motion/react';
 /**
  * Accordion animation variants for smooth, staggered open/close transitions
  */
 export declare const accordionAnimations: Variants;
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+export declare const createTriggerIconVariants: (rotation: number) => Variants;
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */

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

@@ -19,6 +19,20 @@ const accordionAnimations = {
         }
     }
 };
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+const createTriggerIconVariants = (rotation) => ({
+    closed: {
+        rotate: 0,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+    open: {
+        rotate: rotation,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+});
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */
@@ -42,4 +56,4 @@ const accordionContentAnimations = {
     }
 };
 
-export { accordionAnimations, accordionContentAnimations };
+export { accordionAnimations, accordionContentAnimations, createTriggerIconVariants };

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

@@ -4,13 +4,13 @@ const accordionTheme = {
     // Base container styles for stacked variant (unified card)
     baseStyleStacked: "w-full border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
     // Item styles for separated variant (individual cards with spacing)
-    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0",
     // Item styles for stacked variant (shared borders, no spacing)
     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 justify-between 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)] [&[data-state=open]>svg]:rotate-180 cursor-pointer focus:outline-none transition-all flex justify-between",
+    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-[500px] accordion-content overflow-hidden",
+    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",
 };

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

@@ -54,6 +54,7 @@ export interface AccordionContextValue {
         baseStyle: string;
         triggerStyle: string;
         contentStyle: string;
+        contentInnerStyle: string;
     };
 }
 /**
@@ -89,6 +90,29 @@ export interface AccordionItemContextValue {
 export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
     className?: string;
+    /**
+     * Optional leading icon rendered before children
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Indicator icon rendered after children. Defaults to PlusIcon.
+     * Set to `null` to hide the indicator entirely.
+     */
+    iconEnd?: React.ReactNode | null;
+    /**
+     * Rotation degrees applied to iconStart when open.
+     * Default: 0 (static, no rotation). Use 45 for a plus-to-X effect.
+     */
+    iconStartRotation?: number;
+    /**
+     * 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`.
+     */
+    iconRotation?: number;
 }
 /**
  * Content props
@@ -105,6 +129,7 @@ export interface AccordionThemeOverrides {
     baseStyleStacked?: string;
     triggerStyle?: string;
     contentStyle?: string;
+    contentInnerStyle?: string;
     itemStyle?: string;
     itemStyleStacked?: string;
 }

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

@@ -14,7 +14,7 @@ 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: cn(theme === null || theme === void 0 ? void 0 : theme.contentStyle, className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: "p-4 pt-0", 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.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 }) })) }));
 });
 AccordionContent.displayName = "AccordionContent";
 

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

@@ -1,18 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 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, ...props }, ref) => {
+const AccordionTrigger = React__default.forwardRef(({ children, className, iconStart, iconEnd, iconStartRotation = 0, iconEndRotation, iconRotation, ...props }, ref) => {
+    var _a;
     const { theme } = useAccordionContext();
     const { isOpen, toggle, triggerId, contentId } = useAccordionItemContext();
-    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: [children, jsx(motion.div, { animate: { rotate: isOpen ? 45 : 0 }, transition: {
-                    duration: 0.2,
-                    ease: [0.4, 0.0, 0.2, 1]
-                }, className: "flex items-center justify-center", children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) })] }));
+    const resolvedEndRotation = (_a = iconEndRotation !== null && iconEndRotation !== void 0 ? iconEndRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
+    const renderIcon = iconEnd === 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 }))] }));
 });
 AccordionTrigger.displayName = "AccordionTrigger";
 

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

@@ -63,8 +63,8 @@ const badgeTheme = {
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: "text-xs md:text-sm px-1.5 py-0.5 gap-1",
-        md: "text-sm md:text-base px-2 py-0.5 gap-1",
+        sm: "text-sm px-1.5 py-0.5 gap-1",
+        md: "text-base px-2 py-0.5 gap-1",
     },
     // Border radius per size (using CSS variable)
     radiusSizes: {

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useCallback } from 'react';
+import React__default, { useCallback, useRef } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from './Button.theme.js';
 import { cn } from '../../../utils/cn.js';
@@ -18,7 +18,7 @@ const BUTTON_TAP_ANIMATION = {
         },
     },
 };
-const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, ...props }, ref) => {
+const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, ...restProps }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
@@ -33,18 +33,18 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     const resolvedVariant = variant || "filled";
     // Derived state flags (direct computation - faster than useMemo)
     const isLoading = state === "loading";
-    const isDisabled = state === "disabled" || state === "loading";
+    const isDisabled = state === "disabled" || state === "loading" || !!disabledProp;
     const isError = state === "error";
     // Dev-time a11y warning for iconOnly buttons without aria-label
     if (process.env.NODE_ENV !== "production") {
-        if (iconOnly && !props["aria-label"]) {
+        if (iconOnly && !ariaLabelProp) {
             // eslint-disable-next-line no-console
             console.warn("Button(iconOnly) requires 'aria-label' for accessibility.");
         }
     }
     // Safe onClick handler - respect both state="disabled" and disabled={true}
     const handleClick = useCallback((event) => {
-        if (isDisabled || props.disabled)
+        if (isDisabled)
             return;
         // Create ripple effect if enabled
         if (enableRipple && !shouldReduceMotion) {
@@ -62,7 +62,6 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     }, [
         onClick,
         isDisabled,
-        props.disabled,
         enableRipple,
         shouldReduceMotion,
         createRipple,
@@ -71,7 +70,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     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]) || "";
     const variantClasses = ((_d = buttonTheme.variantStyles) === null || _d === void 0 ? void 0 : _d[resolvedVariant]) || "";
-    const stateClasses = state === "disabled" || props.disabled
+    const stateClasses = isDisabled
         ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || ""
         : isError
             ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.error) || ""
@@ -80,7 +79,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 : "";
     const blockStyle = block ? buttonTheme.blockStyle : "";
     // Generate default aria-label for icon-only buttons if not provided (fallback only)
-    const ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
+    const ariaLabel = iconOnly && !ariaLabelProp ? "Button" : ariaLabelProp;
     // Determine animation props (user props will override due to spread order)
     const animationProps = shouldDisableAnimations
         ? {}
@@ -92,26 +91,30 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     const spinnerClassName = resolvedVariant === "filled" && color !== "neutral"
         ? "border-t-white border-l-white"
         : "";
-    // Merge refs - use ripple's buttonRef if ripple is enabled, otherwise use forwarded ref
-    const mergedRef = React__default.useCallback((node) => {
+    // Track the latest forwarded ref to avoid mergedRef recreation on inline callback refs
+    const forwardedRef = useRef(ref);
+    forwardedRef.current = ref;
+    // Merge refs - stable callback that won't cause DOM detach/attach cycles
+    const mergedRef = useCallback((node) => {
         // Set ripple's buttonRef
         if (buttonRef) {
             buttonRef.current = node;
         }
         // Set forwarded ref
-        if (typeof ref === "function") {
-            ref(node);
+        const fRef = forwardedRef.current;
+        if (typeof fRef === "function") {
+            fRef(node);
         }
-        else if (ref) {
-            ref.current =
+        else if (fRef) {
+            fRef.current =
                 node;
         }
-    }, [ref, buttonRef]);
-    return (jsxs(motion.button, { 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, "aria-describedby": undefined, onClick: handleClick, ...animationProps, ...props, children: [showReflection &&
+    }, [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  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 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 &&
                 ripples.map((ripple) => {
-                    const animation = getRippleAnimation(effect, ripple.layer || 1, rippleScale);
+                    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 ||
                             getRippleColorClass(resolvedVariant, resolvedColor)), style: {
                             top: ripple.y - 10,

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

@@ -12,6 +12,10 @@ export interface Ripple {
     x: number;
     y: number;
     layer?: number;
+    /** Pre-computed random scale factor for particle effect (0-1 range) */
+    randomScale?: number;
+    /** Pre-computed random duration offset for particle effect (0-1 range) */
+    randomDuration?: number;
 }
 export interface RippleConfig {
     /** Scale multiplier for ripple expansion (default: 10) */
@@ -53,7 +57,7 @@ export declare function getRippleColorClass(variant?: string, color?: string): s
 /**
  * Get animation properties for specific ripple effect and layer
  */
-export declare function getRippleAnimation(effect: RippleEffectType, layer: number, baseScale: number): {
+export declare function getRippleAnimation(effect: RippleEffectType, ripple: Ripple, baseScale: number): {
     initial: {
         scale: number;
         opacity: number;