@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -6,10 +6,10 @@ import { Badge } from '../../core/Badge/Badge.js';
 import { Button } from '../../core/Button/Button.js';
 import { cn } from '../../../utils/cn.js';
 
-const ApprovalCard = ({ title, description, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {
+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: "text-base", children: title }), description && (jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: description }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs 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.Content, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "text-base", children: title }), subtitle && (jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: subtitle }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs 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/ApprovalCard/ApprovalCard.types.d.ts

@@ -7,9 +7,9 @@ export interface ApprovalCardProps {
      */
     title: string;
     /**
-     * Description or context for the user
+     * Subtitle or context for the user
      */
-    description?: string;
+    subtitle?: string;
     /**
      * Risk level determining visual severity
      * @default "medium"

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

@@ -1,7 +1,8 @@
 import { jsxs, jsx } 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 { DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { CloudArrowUpIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import { promptInputTheme } from './PromptInput.theme.js';
 import { Textarea } from '../../forms/Textarea/Textarea.js';
 import '../../forms/Textarea/Textarea.theme.js';
@@ -47,25 +48,31 @@ const PromptInput = React__default.forwardRef(({
 // Value control
 value, defaultValue = "", onChange, 
 // Textarea props
-placeholder = "How may I assist you today?", maxLength, minHeight = "48px", maxHeight = "120px", rows, 
+placeholder = "How may I assist you today?", maxLength, minHeight: minHeightProp, maxHeight = "120px", rows, 
 // State
 state = "default", disabled = false, helperText, showCharCount = false, 
 // Model selection
 selectedModel: controlledModel, defaultSelectedModel, models = DEFAULT_MODELS, onModelChange, 
 // Event handlers
 onSubmit, onAttachmentClick, onVoiceClick, onSettingsClick, onKeyDown, 
+// Dropzone
+enableDropzone = true, dropzoneText = "Drop files here to add to chat", 
 // Multimodal attachments
 attachments: controlledAttachments, onAttachmentsChange, acceptedFileTypes = ["image/*", "application/pdf"], maxFileSize = 10 * 1024 * 1024, maxAttachments = 10, compressImages = true, maxImageDimension = 1024, imageQuality = 0.8, onAttachmentError, 
 // Button visibility
 showAttachmentButton = true, showVoiceButton = true, showSettingsButton = true, showModelSelector = true, 
 // Submit button
 submitButtonLabel = "Submit prompt", submitButtonIcon = (jsx(ArrowRightIcon, { className: "size-4", strokeWidth: 2.5 })), submitShortcut, 
+// Variant
+variant = "default", 
 // Styling
 className, textareaClassName, footerClassName, theme = {}, 
 // Accessibility
 "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, id: propId, ...props }, ref) => {
-    // ========== State Management ==========
     var _a, _b;
+    // Derive minHeight: simple variant defaults to a compact single-line height
+    const minHeight = minHeightProp !== null && minHeightProp !== void 0 ? minHeightProp : (variant === "simple" ? "32px" : "48px");
+    // ========== State Management ==========
     // Internal state for uncontrolled mode
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [internalAttachments, setInternalAttachments] = useState([]);
@@ -76,6 +83,8 @@ className, textareaClassName, footerClassName, theme = {},
     const internalTextareaRef = useRef(null);
     const textareaRef = ref || internalTextareaRef;
     const fileInputRef = useRef(null);
+    const dragCounterRef = useRef(0);
+    const [isDragOver, setIsDragOver] = useState(false);
     const uniqueId = useId();
     // Determine if component is controlled
     const isControlled = value !== undefined;
@@ -315,6 +324,36 @@ className, textareaClassName, footerClassName, theme = {},
             processFiles(files);
         }
     }, [processFiles]);
+    // ========== Drag & Drop Handlers ==========
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current++;
+        if (dragCounterRef.current === 1 && !isDisabled && enableDropzone) {
+            setIsDragOver(true);
+        }
+    }, [isDisabled, enableDropzone]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current--;
+        if (dragCounterRef.current === 0) {
+            setIsDragOver(false);
+        }
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setIsDragOver(false);
+        if (!isDisabled && e.dataTransfer.files.length > 0) {
+            processFiles(e.dataTransfer.files);
+        }
+    }, [isDisabled, processFiles]);
     /**
      * Remove attachment
      */
@@ -402,6 +441,7 @@ className, textareaClassName, footerClassName, theme = {},
         footerStyle: theme.footerStyle || promptInputTheme.footerStyle,
         actionsStyle: theme.actionsStyle || promptInputTheme.actionsStyle,
         submitButtonStyle: theme.submitButtonStyle || promptInputTheme.submitButtonStyle,
+        dropzoneStyle: theme.dropzoneStyle || promptInputTheme.dropzoneStyle,
         stateStyle: ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || promptInputTheme.states[state],
     };
     // ========== Character Count ==========
@@ -413,13 +453,13 @@ className, textareaClassName, footerClassName, theme = {},
                     if (e.target.files)
                         processFiles(e.target.files);
                     e.target.value = "";
-                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn(mergedTheme.baseStyle, mergedTheme.stateStyle), children: [jsx("div", { className: "flex items-start gap-2", children: jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, textareaClassName), style: {
-                                minHeight,
-                                maxHeight,
-                            } }) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
+                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: mergedTheme.dropzoneStyle, children: [jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)]" }), jsx("p", { className: "text-sm font-medium text-[var(--color-primary)]", children: dropzoneText })] })) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
                             var _a;
                             return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-white flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
-                        }) })), jsxs("div", { className: cn(mergedTheme.footerStyle, footerClassName), children: [jsxs("div", { className: mergedTheme.actionsStyle, children: [showAttachmentButton && (jsxs(Dropdown, { selectionMode: "none", children: [jsx(Dropdown.Trigger, { children: jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", "aria-label": "Add attachment", disabled: isDisabled, children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) }) }), jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { itemKey: "upload-image", onAction: () => {
+                        }) })), jsxs("div", { className: cn("flex gap-2", variant === "simple" ? "items-end" : "items-start"), children: [jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, variant === "simple" && "!w-auto flex-1 min-w-0 justify-center", textareaClassName), style: {
+                                    minHeight,
+                                    maxHeight,
+                                } }), variant === "simple" && (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, "shrink-0"), size: "md", variant: "filled", color: "neutral", onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, showReflection: false, children: submitButtonIcon }))] }), variant !== "simple" && (jsxs("div", { className: cn(mergedTheme.footerStyle, footerClassName), children: [jsxs("div", { className: mergedTheme.actionsStyle, children: [showAttachmentButton && (jsxs(Dropdown, { selectionMode: "none", children: [jsx(Dropdown.Trigger, { children: jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", "aria-label": "Add attachment", disabled: isDisabled, children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) }) }), jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { itemKey: "upload-image", onAction: () => {
                                                             // Set accept to images only and trigger file input
                                                             if (fileInputRef.current) {
                                                                 fileInputRef.current.accept = "image/*";
@@ -433,11 +473,12 @@ className, textareaClassName, footerClassName, theme = {},
                                                         }, children: "Add Link" }, "add-link"), jsx(Dropdown.Item, { itemKey: "upload-pdf", onAction: () => {
                                                             // Set accept to PDF and trigger file input
                                                             if (fileInputRef.current) {
-                                                                fileInputRef.current.accept = "application/pdf,.pdf";
+                                                                fileInputRef.current.accept =
+                                                                    "application/pdf,.pdf";
                                                                 fileInputRef.current.click();
                                                             }
                                                             onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
-                                                        }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", onClick: onVoiceClick, "aria-label": "Voice input", disabled: isDisabled, children: [jsx(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }), " Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled ? [controlledModel] : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(ChevronDownIcon, { className: "size-3 opacity-80", strokeWidth: 2 })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsxs(Dropdown.Item, { itemKey: model.key, children: [model.icon && (jsx("span", { className: "mr-2", children: model.icon })), model.label] }, model.key))) })] }))] }), jsx("div", { children: jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle), size: "sm", variant: "outline", color: "neutral", onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, children: submitButtonIcon }) })] })] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-xs", isInvalid
+                                                        }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", onClick: onVoiceClick, "aria-label": "Voice input", disabled: isDisabled, children: [jsx(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }), " Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled ? [controlledModel] : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(ChevronDownIcon, { className: "size-3 opacity-80", strokeWidth: 2 })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsxs(Dropdown.Item, { itemKey: model.key, children: [model.icon && (jsx("span", { className: "mr-2", children: model.icon })), model.label] }, model.key))) })] }))] }), jsx("div", { children: jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle), size: "sm", variant: "outline", color: "neutral", onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, children: submitButtonIcon }) })] }))] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-xs", isInvalid
                     ? "text-[var(--color-danger)]"
                     : "text-[var(--color-text-muted)]"), role: isInvalid ? "alert" : undefined, "aria-live": isInvalid ? "polite" : undefined, children: displayHelperText }))] }));
 });

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

@@ -4,6 +4,7 @@ const promptInputTheme = {
     footerStyle: "flex justify-between items-end",
     actionsStyle: "flex gap-1",
     submitButtonStyle: "rounded-full",
+    dropzoneStyle: "absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 rounded-[var(--card-radius)] border-2 border-dashed border-[var(--color-primary)] bg-[var(--color-primary-200)]/80 backdrop-blur-sm dark:bg-[var(--color-primary-900)]/80",
     states: {
         default: "",
         disabled: "opacity-50 cursor-not-allowed",

package/dist/components/ai/PromptInput/PromptInput.types.d.ts

@@ -154,6 +154,23 @@ export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     submitButtonIcon?: React.ReactNode;
     /** Visual indicator for keyboard shortcut (not functional) */
     submitShortcut?: string;
+    /**
+     * Enable drag-and-drop file attachment
+     * @default true
+     */
+    enableDropzone?: boolean;
+    /**
+     * Text displayed in the dropzone overlay
+     * @default "Drop files here to add to chat"
+     */
+    dropzoneText?: string;
+    /**
+     * Layout variant
+     * - "default": stacked layout with footer toolbar below textarea
+     * - "simple": inline layout with submit button next to textarea, no footer
+     * @default "default"
+     */
+    variant?: "default" | "simple";
     /** Additional class name for the container (highest priority) */
     className?: string;
     /** Additional class name for the textarea element */
@@ -203,6 +220,8 @@ export interface PromptInputThemeOverrides {
     actionsStyle?: string;
     /** Style for the submit button */
     submitButtonStyle?: string;
+    /** Style for the dropzone overlay */
+    dropzoneStyle?: string;
     /** State-specific styles */
     states?: Partial<Record<PromptInputState, string>>;
 }
@@ -215,5 +234,6 @@ export interface PromptInputTheme {
     footerStyle: string;
     actionsStyle: string;
     submitButtonStyle: string;
+    dropzoneStyle: string;
     states: Record<PromptInputState, string>;
 }

package/dist/components/charts/DonutChart/DonutChart.types.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 /**
  * Color configuration for the donut chart
  */
@@ -41,7 +40,7 @@ export interface DonutChartThemeOverrides {
 /**
  * DonutChart component props
  */
-export interface DonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+export interface DonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Visual variant for the donut chart (solid or segmented)
      * @default "solid"

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.types.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 /**
  * Data segment for the multi-segment donut chart
  */
@@ -52,7 +51,7 @@ export interface MultiSegmentDonutChartThemeOverrides {
 /**
  * MultiSegmentDonutChart component props
  */
-export interface MultiSegmentDonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+export interface MultiSegmentDonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Array of data segments to display
      * Each segment should have value and percentage

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

@@ -1,8 +1,8 @@
 const accordionTheme = {
     // Base container styles for separated variant (default)
-    baseStyle: "w-full max-w-xl",
+    baseStyle: "w-full",
     // Base container styles for stacked variant (unified card)
-    baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
+    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",
     // Item styles for stacked variant (shared borders, no spacing)

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

@@ -12,7 +12,7 @@ const defaultIcons = {
     warning: ExclamationTriangleIcon,
     danger: XCircleIcon,
 };
-const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, description, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
+const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
     var _a;
     const iconColor = (_a = alertTheme.iconColors[color]) !== null && _a !== void 0 ? _a : alertTheme.iconColors.primary;
     const showDismiss = dismissible === true || (dismissible !== false && !!onDismiss);
@@ -32,7 +32,7 @@ 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 })), description && (jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: description })), 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 && (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 }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: alertNode });
     }

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

@@ -29,8 +29,8 @@ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     color?: AlertColor;
     /** The main title/message of the alert */
     title?: string;
-    /** Additional description text */
-    description?: string;
+    /** Additional subtitle text */
+    subtitle?: string;
     /** Whether the alert can be dismissed */
     dismissible?: boolean;
     /**

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

@@ -1,5 +1,5 @@
 import { AlertDialogProps } from "./AlertDialog.types";
 export declare const AlertDialog: {
-    ({ trigger, icon, title, description, footer, className, }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, icon, title, subtitle, footer, className, }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/core/AlertDialog/AlertDialog.js

@@ -3,14 +3,14 @@ import { useState, isValidElement, cloneElement } from 'react';
 import { Modal } from '../Modal/Modal.js';
 import { cn } from '../../../utils/cn.js';
 
-const AlertDialog = ({ trigger, icon, title, description, footer, className, }) => {
+const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleOpen = () => setIsOpen(true);
     const handleClose = () => setIsOpen(false);
     const triggerElement = isValidElement(trigger)
         ? cloneElement(trigger, { onClick: handleOpen })
         : null;
-    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-sm", children: description }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
+    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-sm", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";
 

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

@@ -6,8 +6,8 @@ export interface AlertDialogProps {
     icon?: React.ReactNode;
     /** The title of the dialog. */
     title: React.ReactNode;
-    /** The main content/description of the dialog. */
-    description: React.ReactNode;
+    /** The main content/subtitle of the dialog. */
+    subtitle: React.ReactNode;
     /**
      * A render prop for the footer, which receives a `close` function.
      * Use this to render action buttons.

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

@@ -11,4 +11,4 @@ import { BadgeProps } from "./Badge.types";
  * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
  * ```
  */
-export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Badge: React.NamedExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -32,7 +32,7 @@ const getShouldAnimate = () => {
  * ```
  */
 const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, selectable = false, selected = false, onSelect, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, darkMode = false, ...props }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     // State management
     const [isVisible, setIsVisible] = useState(true);
     const [isSelected, setIsSelected] = useState(selected);
@@ -103,6 +103,10 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.pillSizes,
             ...customTheme.pillSizes,
         },
+        radiusSizes: {
+            ...badgeTheme.radiusSizes,
+            ...customTheme.radiusSizes,
+        },
         iconSizes: {
             ...badgeTheme.iconSizes,
             ...customTheme.iconSizes,
@@ -134,11 +138,11 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     const sizeStyle = ((_k = theme.sizes) === null || _k === void 0 ? void 0 : _k[size]) || "";
     const shapeStyle = pill
         ? "rounded-full"
-        : "rounded-[var(--badge-radius)]";
-    const dotColorStyle = ((_l = theme.dotColors) === null || _l === void 0 ? void 0 : _l[color]) || "";
+        : ((_l = theme.radiusSizes) === null || _l === void 0 ? void 0 : _l[size]) || "rounded-[var(--badge-radius)]";
+    const dotColorStyle = ((_m = theme.dotColors) === null || _m === void 0 ? void 0 : _m[color]) || "";
     // Build base styles with all states
     const isInteractive = selectable || dismissible;
-    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_m = theme.pillSizes) === null || _m === void 0 ? void 0 : _m[size]), isInteractive && "cursor-pointer", disabled && ((_o = theme.states) === null || _o === void 0 ? void 0 : _o.disabled), darkMode && "dark", className);
+    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_o = theme.pillSizes) === null || _o === void 0 ? void 0 : _o[size]), isInteractive && "cursor-pointer", disabled && ((_p = theme.states) === null || _p === void 0 ? void 0 : _p.disabled), darkMode && "dark", className);
     // Create data attributes for styling hooks
     const dataAttributes = {
         "data-variant": variant,
@@ -162,17 +166,15 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                 ? {
                     sm: "-ml-1.5", // Small pill: minimal overlap
                     md: "-ml-1.5", // Medium pill: moderate overlap
-                    lg: "-ml-2", // Large pill: more overlap
                 }[size]
                 : {
                     sm: "-ml-1.5", // Small default: minimal overlap
                     md: "-ml-1", // Medium default: less overlap (has border ring)
-                    lg: "-ml-1.5", // Large default: moderate overlap
                 }[size];
             return (jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn((_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, "border-0", pill ? "rounded-full" : "rounded-md ring-0") }));
         }
         if (iconStart) {
-            return (jsx("span", { className: cn("flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
         }
         if (withDot) {
             if (shouldAnimate) {
@@ -192,7 +194,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_p = theme.dismissButtonSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissIconSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true" }) }))] })) : null;
+                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_q = theme.dismissButtonSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_r = theme.dismissIconSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-hidden": "true" }) }))] })) : null;
     }
     return (jsx(AnimatePresence, { mode: "wait", children: isVisible && (jsxs(motion.span, { ref: ref, className: baseStyles, onClick: handleClick, role: selectable ? "button" : undefined, tabIndex: selectable && !disabled ? 0 : undefined, "aria-pressed": selectable ? isSelected : undefined, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", whileTap: selectable && !disabled ? { scale: 0.98 } : undefined, ...dataAttributes, ...props, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
                         ? {
@@ -200,7 +202,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_r = theme.dismissButtonSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_s = theme.dismissIconSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-hidden": "true" }) }))] })) }));
+                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_s = theme.dismissButtonSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_t = theme.dismissIconSizes) === null || _t === void 0 ? void 0 : _t[size]), "aria-hidden": "true" }) }))] })) }));
 }));
 Badge.displayName = "Badge";
 

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

@@ -29,7 +29,7 @@ const badgeTheme = {
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " + "",
+            neutral: "text-[var(--color-text-secondary)] border-[var(--color-border)] " + "",
             primary: "text-[var(--color-primary)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-primary-400)]",
             success: "text-[var(--color-success)] border-[var(--color-border)] " +
@@ -41,8 +41,8 @@ const badgeTheme = {
         },
         // Ghost variant - subtle background tints
         ghost: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
-                "dark:bg-[var(--color-neutral-900)] dark:text-[var(--color-text-primary)]",
+            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-secondary)] " +
+                "dark:bg-[var(--color-neutral-900)]  ",
             primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
                 "dark:bg-[var(--color-primary-600)]/30 dark:text-[var(--color-primary-400)]",
             success: "bg-[var(--color-success-100)] text-[var(--color-success-600)] " +
@@ -57,45 +57,44 @@ const badgeTheme = {
     sizes: {
         sm: "text-xs px-1.5 py-0.5 gap-1",
         md: "text-sm px-2 py-0.5 gap-1",
-        lg: "text-sm px-2.5 py-1 gap-1",
+    },
+    // Border radius per size (using CSS variable)
+    radiusSizes: {
+        sm: "rounded-[calc(var(--badge-radius)*0.75)]",
+        md: "rounded-[var(--badge-radius)]",
     },
     // Additional padding for pill shape
     pillSizes: {
         sm: "px-2",
         md: "px-2.5",
-        lg: "px-3",
     },
     // Icon sizes
     iconSizes: {
         sm: "size-3",
         md: "size-3.5",
-        lg: "size-4",
     },
     // Avatar sizes (base sizes without negative margin)
     avatarSizes: {
         sm: "size-4",
         md: "size-4",
-        lg: "size-5",
     },
     // Dismiss button container sizes
     dismissButtonSizes: {
         sm: "size-3.5",
         md: "size-4",
-        lg: "size-4.5",
     },
     // Dismiss icon sizes (inside button)
     dismissIconSizes: {
         sm: "size-2.5",
         md: "size-3",
-        lg: "size-3.5",
     },
     // Dot indicator colors (simple, no dark mode needed - inherits from parent)
     dotColors: {
-        neutral: "bg-[var(--color-text-primary)]",
-        primary: "bg-[var(--color-primary-50)] dark:bg-[var(--color-primary-300)]",
-        success: "bg-[var(--color-success-50)] dark:bg-[var(--color-success-300)]",
-        warning: "bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-300)]",
-        danger: "bg-[var(--color-danger-50)] dark:bg-[var(--color-danger-300)]",
+        neutral: "bg-[var(--color-text-secondary)]",
+        primary: "bg-[var(--color-primary)]",
+        success: "bg-[var(--color-success)]",
+        warning: "bg-[var(--color-warning)]",
+        danger: "bg-[var(--color-danger)]",
     },
     // State styles
     states: {

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

@@ -1,8 +1,7 @@
-import { ReactNode, MouseEvent } from "react";
-import { HTMLMotionProps } from "motion/react";
+import React, { ReactNode, MouseEvent } from "react";
 export type BadgeVariant = "filled" | "outline" | "ghost";
 export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
-export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -28,6 +27,10 @@ export interface BadgeTheme {
      * Additional padding for pill-shaped badges
      */
     pillSizes: Record<BadgeSize, string>;
+    /**
+     * Border radius per badge size
+     */
+    radiusSizes: Record<BadgeSize, string>;
     /**
      * Icon sizes for each badge size
      */
@@ -65,6 +68,7 @@ export interface BadgeThemeOverrides {
     variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
+    radiusSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
     dismissButtonSizes?: Partial<Record<BadgeSize, string>>;
@@ -75,7 +79,7 @@ export interface BadgeThemeOverrides {
         hover: string;
     }>;
 }
-export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "inputMode" | "autoCapitalize" | "autoCorrect" | "autoComplete"> {
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onSelect" | "inputMode"> {
     /**
      * The content to be displayed inside the badge
      */

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { ButtonProps } from "./Button.types";
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

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

@@ -15,15 +15,15 @@ const buttonTheme = {
     variantColors: {
         // Filled variant - solid backgrounds
         filled: {
-            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
-                "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
-                "dark:hover:bg-[var(--color-neutral-600)]",
+            neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-800)] hover:ring-2 hover:ring-[var(--color-neutral-900)]/20 " +
+                "focus-visible:outline-[var(--color-neutral-800)] " +
+                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
+                "dark:hover:bg-[var(--color-neutral-300)]",
             primary: "bg-[var(--color-primary)] text-white border-[var(--color-primary)] " +
                 "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
+                "dark:text-white dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
                 "dark:hover:bg-[var(--color-primary-500)]",
             success: "bg-[var(--color-success)] text-white border-[var(--color-success)] " +
                 "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
@@ -46,8 +46,7 @@ const buttonTheme = {
             neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
                 "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-border)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
-                "dark:hover:bg-[var(--color-neutral-800)]",
+                "dark:hover:bg-[var(--color-background-secondary)]",
             primary: "text-[var(--color-primary-600)] border-[var(--color-primary-600)] " +
                 "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/30 " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
@@ -99,7 +98,7 @@ const buttonTheme = {
         },
         // Link variant - text-only with per-color styles
         link: {
-            neutral: "text-[var(--color-text-primary)] underline-offset-4 hover:underline " +
+            neutral: "text-[var(--color-text-secondary)] underline-offset-4 hover:underline hover:text-[var(--color-text-primary)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:text-[var(--color-text-primary)]",
             primary: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 import { RippleEffectType } from "./Button.ripple";
 /**
  * Button component props
@@ -14,7 +13,7 @@ import { RippleEffectType } from "./Button.ripple";
  * @property {string} rippleClassName - Custom class name for ripple styling
  * @property {number} rippleScale - Scale multiplier for ripple expansion (default: 10)
  */
-export interface ButtonProps extends HTMLMotionProps<"button"> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** The semantic color/intent of the button */
     color?: ButtonColor;
     /** The visual style variant of the button */