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

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

@@ -8,11 +8,12 @@ import { Button } from '../Button/Button.js';
 const defaultIcons = {
     neutral: BellIcon,
     primary: InformationCircleIcon,
+    secondary: InformationCircleIcon,
     success: CheckCircleIcon,
     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 +33,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.theme.js

@@ -1,23 +1,19 @@
+import { semanticTextColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Alert component
  * Uses flat color organization matching Badge pattern
  */
 const alertTheme = {
     // Base styles applied to all alerts
-    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
+    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-base border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
     // Visual style variants (structure only, no colors)
     variants: {
         default: "",
         glass: "glass-effect",
     },
     // Icon color styles per color
-    iconColors: {
-        neutral: "text-[var(--color-text-primary)]",
-        primary: "text-[var(--color-primary)]",
-        success: "text-[var(--color-success)]",
-        warning: "text-[var(--color-warning)]",
-        danger: "text-[var(--color-danger)]",
-    },
+    iconColors: semanticTextColors,
     // State styles
     states: {
         dismissible: "pr-10",

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

@@ -1,8 +1,9 @@
 import { HTMLAttributes, ReactNode } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 /**
  * Alert semantic colors (intent)
  */
-export type AlertColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type AlertColor = SemanticColor;
 /**
  * Alert visual variant
  */
@@ -29,8 +30,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-base", 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/Avatar/Avatar.theme.js

@@ -6,11 +6,11 @@ const avatarTheme = {
     baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-semibold tracking-tighter rounded-[var(--avatar-radius)] ring-2 ring-[var(--color-primary)]/10 border border-[var(--border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 glass-effect",
     // Size variants using CSS variables
     sizes: {
-        xs: "size-[var(--avatar-size-xs)] text-[var(--avatar-text-xs)]",
-        sm: "size-[var(--avatar-size-sm)] text-[var(--avatar-text-sm)]",
-        md: "size-[var(--avatar-size-md)] text-[var(--avatar-text-md)]",
-        lg: "size-[var(--avatar-size-lg)] text-[var(--avatar-text-lg)]",
-        xl: "size-[var(--avatar-size-xl)] text-[var(--avatar-text-xl)]",
+        xs: "size-[var(--avatar-size-xs)] text-xs",
+        sm: "size-[var(--avatar-size-sm)] text-sm",
+        md: "size-[var(--avatar-size-md)] text-md",
+        lg: "size-[var(--avatar-size-lg)] text-lg",
+        xl: "size-[var(--avatar-size-xl)] text-xl",
     },
     // Status indicator styles
     statuses: {

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

@@ -11,7 +11,7 @@ const avatarGroupTheme = {
         loose: "-ml-2 z-10",
     },
     // Overflow avatar styles
-    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
+    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-base flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
 };
 
 export { avatarGroupTheme };

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

@@ -1,3 +1,5 @@
+import { semanticBgColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Badge component
  * Uses variant-first color organization for reliable dark mode and className overrides
@@ -18,20 +20,24 @@ const badgeTheme = {
         filled: {
             neutral: "bg-[var(--color-neutral-900)] text-white ring-[var(--color-border)] " +
                 "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
-            primary: "bg-[var(--color-primary)] text-white ring-[var(--color-primary-400)] " +
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-[var(--color-primary-400)] " +
                 "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
-            success: "bg-[var(--color-success-600)] text-white ring-[var(--color-success-300)] " +
+            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] ring-[var(--color-secondary-400)] " +
+                "dark:bg-[var(--color-secondary-600)] dark:ring-[var(--color-secondary-500)]",
+            success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] ring-[var(--color-success-300)] " +
                 "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
-            warning: "bg-[var(--color-warning)] text-white ring-[var(--color-warning-300)] " +
+            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] ring-[var(--color-warning-300)] " +
                 "dark:bg-[var(--color-warning-600)] dark:ring-[var(--color-warning-400)]",
-            danger: "bg-[var(--color-danger)] text-white ring-[var(--color-danger-400)] " +
+            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] ring-[var(--color-danger-400)] " +
                 "dark:bg-[var(--color-danger-600)] dark:ring-[var(--color-danger-400)]",
         },
         // 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)]",
+            secondary: "text-[var(--color-secondary)] border-[var(--color-border)] " +
+                "dark:text-[var(--color-secondary-400)]",
             success: "text-[var(--color-success)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-success-400)]",
             warning: "text-[var(--color-warning)] border-[var(--color-border)] " +
@@ -41,10 +47,12 @@ 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)]",
+            secondary: "bg-[var(--color-secondary-100)] text-[var(--color-secondary-700)] " +
+                "dark:bg-[var(--color-secondary-600)]/30 dark:text-[var(--color-secondary-400)]",
             success: "bg-[var(--color-success-100)] text-[var(--color-success-600)] " +
                 "dark:bg-[var(--color-success-600)]/30 dark:text-[var(--color-success-400)]",
             warning: "bg-[var(--color-warning-100)] text-[var(--color-warning-600)] " +
@@ -55,47 +63,43 @@ const badgeTheme = {
     },
     // Flat size structure (no nested objects)
     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",
+        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",
+    },
+    // 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)]",
+        ...semanticBgColors,
+        neutral: "bg-[var(--color-text-secondary)]",
     },
     // State styles
     states: {

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

@@ -1,8 +1,8 @@
-import { ReactNode, MouseEvent } from "react";
-import { HTMLMotionProps } from "motion/react";
+import React, { ReactNode, MouseEvent } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type BadgeVariant = "filled" | "outline" | "ghost";
-export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
-export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeColor = SemanticColor;
+export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -28,6 +28,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 +69,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 +80,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/Breadcrumbs/Breadcrumbs.js

@@ -43,7 +43,7 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
     const renderItem = (item, index, isLast) => {
         const isCurrentPage = isLast || !item.href;
         const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), item.label] }));
-        return (jsx("span", { className: "flex items-center text-sm", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
+        return (jsx("span", { className: "flex items-center text-base", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
     };
     // Render separator
     const renderSeparator = (index) => {

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

@@ -6,7 +6,7 @@ const buttonTheme = {
     baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
-        filled: "border",
+        filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
         ghost: "border-transparent",
         link: "bg-transparent border-transparent",
@@ -15,56 +15,53 @@ 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)]",
-            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 " +
+            neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
+                "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)]",
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "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 " +
+                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)]",
+            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] border-[var(--color-secondary)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-contrast)] dark:bg-[var(--color-secondary-600)] dark:border-[var(--color-secondary-600)]",
+            success: "bg-[var(--color-success)] text-[var(--color-success-contrast)] border-[var(--color-success)] " +
                 "focus-visible:outline-[var(--color-success-600)] " +
-                "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)] " +
-                "dark:hover:bg-[var(--color-success-600)]",
-            warning: "bg-[var(--color-warning)] text-white border-[var(--color-warning)] " +
-                "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
+                "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)]",
+            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] border-[var(--color-warning)] " +
                 "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)] " +
-                "dark:hover:bg-[var(--color-warning-500)]",
-            danger: "bg-[var(--color-danger)] text-white border-[var(--color-danger)] " +
-                "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)]",
+            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border-[var(--color-danger)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
-                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)] " +
-                "dark:hover:bg-[var(--color-danger-500)]",
+                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
             neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-100)] " +
                 "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 " +
+                "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)] dark:border-[var(--color-primary-400)] " +
                 "dark:hover:bg-[var(--color-primary-900)]/30",
+            secondary: "text-[var(--color-secondary-600)] border-[var(--color-secondary-600)] " +
+                "hover:bg-[var(--color-secondary-50)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)] dark:border-[var(--color-secondary-400)] " +
+                "dark:hover:bg-[var(--color-secondary-900)]/30",
             success: "text-[var(--color-success-600)] border-[var(--color-success-600)] " +
-                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/30 " +
+                "hover:bg-[var(--color-success-50)] " +
                 "focus-visible:outline-[var(--color-success-600)] " +
                 "dark:text-[var(--color-success-300)] dark:border-[var(--color-success-400)] " +
                 "dark:hover:bg-[var(--color-success-900)]/30",
             warning: "text-[var(--color-warning-600)] border-[var(--color-warning-600)] " +
-                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/30 " +
+                "hover:bg-[var(--color-warning-50)] " +
                 "focus-visible:outline-[var(--color-warning-600)] " +
                 "dark:text-[var(--color-warning-300)] dark:border-[var(--color-warning-400)] " +
                 "dark:hover:bg-[var(--color-warning-900)]/30",
             danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)] " +
-                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/30 " +
+                "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
                 "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
                 "dark:hover:bg-[var(--color-danger-900)]/30",
@@ -72,39 +69,47 @@ const buttonTheme = {
         // Ghost variant - subtle background tints
         ghost: {
             neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
-                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-200)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-900)] " +
                 "dark:hover:bg-[var(--color-neutral-800)]",
             primary: "text-[var(--color-primary-600)] bg-[var(--color-primary)]/10 " +
-                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/10 " +
+                "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)] dark:bg-[var(--color-primary-900)]/30 " +
                 "dark:hover:bg-[var(--color-primary-900)]/50",
+            secondary: "text-[var(--color-secondary-600)] bg-[var(--color-secondary)]/10 " +
+                "hover:bg-[var(--color-secondary-50)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)] dark:bg-[var(--color-secondary-900)]/30 " +
+                "dark:hover:bg-[var(--color-secondary-900)]/50",
             success: "text-[var(--color-success-600)] bg-[var(--color-success)]/10 " +
-                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
+                "hover:bg-[var(--color-success-50)] " +
                 "focus-visible:outline-[var(--color-success-600)] " +
                 "dark:text-[var(--color-success-300)] dark:bg-[var(--color-success-900)]/30 " +
                 "dark:hover:bg-[var(--color-success-900)]/50",
             warning: "text-[var(--color-warning-600)] bg-[var(--color-warning)]/10 " +
-                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
+                "hover:bg-[var(--color-warning-50)] " +
                 "focus-visible:outline-[var(--color-warning-600)] " +
                 "dark:text-[var(--color-warning-300)] dark:bg-[var(--color-warning-900)]/30 " +
                 "dark:hover:bg-[var(--color-warning-900)]/50",
             danger: "text-[var(--color-danger-600)] bg-[var(--color-danger)]/10 " +
-                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
                 "dark:text-[var(--color-danger-300)] dark:bg-[var(--color-danger-900)]/30 " +
                 "dark:hover:bg-[var(--color-danger-900)]/50",
         },
         // 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 " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)]",
+            secondary: "text-[var(--color-secondary-600)] underline-offset-4 hover:underline " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)]",
             success: "text-[var(--color-success-600)] underline-offset-4 hover:underline " +
                 "focus-visible:outline-[var(--color-success-600)] " +
                 "dark:text-[var(--color-success-300)]",
@@ -119,19 +124,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm md:text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-sm md:text-base h-fit",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm md:text-base",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-sm md:text-base h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base md:text-lg",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-base h-fit",
+            link: "p-0 text-base md:text-lg h-fit",
         },
     },
     // State styles

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 import { RippleEffectType } from "./Button.ripple";
+import { SemanticColor } from "../../../utils/colorUtils";
 /**
  * Button component props
  * @property {ButtonColor} color - The semantic color/intent of the button
@@ -14,7 +14,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 */
@@ -50,7 +50,7 @@ export interface ButtonProps extends HTMLMotionProps<"button"> {
      */
     darkMode?: boolean;
 }
-export type ButtonColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type ButtonColor = SemanticColor;
 export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "error" | "loading";

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

@@ -44,7 +44,7 @@ const buttonGroupTheme = {
         vertical: "h-px self-stretch",
     },
     // Text styles for ButtonGroupText component
-    textStyles: "px-3 py-2 text-sm text-[var(--color-text-primary)] flex items-center",
+    textStyles: "px-3 py-2 text-base text-[var(--color-text-primary)] flex items-center",
 };
 
 export { buttonGroupTheme };