@flikk/ui 1.0.0-beta.6 → 1.0.0-beta.8

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

@@ -1,43 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import '../../forms/Input/Input.js';
-import '../../forms/Input/Input.theme.js';
-import '../../forms/Select/Select.js';
-import '../../forms/Select/Select.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { CloudArrowUpIcon, 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';
-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, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import { cn } from '../../../utils/cn.js';
-import 'react-dom';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
-import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
 import '../../core/Dropdown/DropdownMenu.js';
@@ -45,94 +13,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Loader/Loader.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsContent.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@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 { Button } from '../../core/Button/Button.js';
 
 /**
  * Default model options for the model selector
@@ -574,7 +455,7 @@ className, textareaClassName, footerClassName, theme = {},
                     e.target.value = "";
                 }, 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));
+                            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-[var(--color-danger-contrast)] 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("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,

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

@@ -8,6 +8,7 @@ import { Button } from '../Button/Button.js';
 const defaultIcons = {
     neutral: BellIcon,
     primary: InformationCircleIcon,
+    secondary: InformationCircleIcon,
     success: CheckCircleIcon,
     warning: ExclamationTriangleIcon,
     danger: XCircleIcon,

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

@@ -1,3 +1,5 @@
+import { semanticTextColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Alert component
  * Uses flat color organization matching Badge pattern
@@ -11,13 +13,7 @@ const alertTheme = {
         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
  */

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,13 +20,15 @@ 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
@@ -32,6 +36,8 @@ const badgeTheme = {
             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)] " +
@@ -45,6 +51,8 @@ const badgeTheme = {
                 "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)] " +
@@ -90,11 +98,8 @@ const badgeTheme = {
     },
     // Dot indicator colors (simple, no dark mode needed - inherits from parent)
     dotColors: {
+        ...semanticBgColors,
         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,6 +1,7 @@
 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 BadgeColor = SemanticColor;
 export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component

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",
@@ -16,54 +16,52 @@ const buttonTheme = {
         // Filled variant - solid backgrounds
         filled: {
             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 " +
+                "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: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 " +
+                "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: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",
@@ -71,27 +69,32 @@ 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",
@@ -104,6 +107,9 @@ const buttonTheme = {
             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)]",

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { RippleEffectType } from "./Button.ripple";
+import { SemanticColor } from "../../../utils/colorUtils";
 /**
  * Button component props
  * @property {ButtonColor} color - The semantic color/intent of the button
@@ -49,7 +50,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     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/Calendar/Calendar.theme.js

@@ -26,7 +26,7 @@ const calendarTheme = {
         // Hover state
         "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
         // Selected state
-        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white " +
+        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-[var(--color-primary-contrast)] " +
         "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
         // Today indicator
         "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
@@ -38,8 +38,8 @@ const calendarTheme = {
         "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
         "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
         // Range mode states
-        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white " +
-        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white " +
+        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-[var(--color-primary-contrast)] " +
+        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-[var(--color-primary-contrast)] " +
         "data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)] " +
         "dark:data-[in-range=true]:bg-[var(--color-primary-900)]/50 dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
         // Focus offset for dark mode

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

@@ -18,7 +18,7 @@ const commandPaletteTheme = {
     commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
         "hover:bg-[var(--color-primary)] " +
         "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
-        "data-[highlighted=true]:text-white " +
+        "data-[highlighted=true]:text-[var(--color-primary-contrast)] " +
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
         // Dark mode - adjust hover state
         "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +

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

@@ -13,8 +13,8 @@ const menuItemTheme = {
         "dark:hover:bg-[var(--color-neutral-700)] " +
         "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
     // Danger item styling (e.g., Delete actions)
-    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white " +
-        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-white",
+    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
+        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
     // Focus visible styling for keyboard navigation
     focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",

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

@@ -13,7 +13,7 @@ const offlineIndicatorTheme = {
         toast: "px-3 py-2 rounded-[var(--radius-base)] shadow-real-lg",
     },
     offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
-    online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-white",
+    online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
     icon: "size-4 flex-shrink-0",
     message: "text-xs font-medium",
     queueCount: "text-xs opacity-80 ml-1",

package/dist/components/core/Popover/PopoverContent.js

@@ -61,6 +61,8 @@ const PopoverContent = React__default.forwardRef(({ children, className, animati
         placement: placement,
         offset: offset || 8,
         autoWidth: true,
+        onClose: () => { if (!preventClose)
+            onOpenChange(false); },
     });
     // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
     useClickOutside(localRef, (e) => {

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

@@ -1,3 +1,5 @@
+import { semanticBgColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Progress component
  */
@@ -11,7 +13,7 @@ const progressTheme = {
     // Label text styles
     labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
     // Inside label styles (when label is positioned inside the bar)
-    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-white tabular-nums",
+    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--color-primary-contrast)] tabular-nums",
     // Size variants for track height
     sizes: {
         sm: "h-1.5",
@@ -20,11 +22,12 @@ const progressTheme = {
     },
     // Color variants for the fill
     colors: {
-        neutral: "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-500)]",
-        primary: "bg-[var(--color-primary)] dark:bg-[var(--color-primary-400)]",
-        success: "bg-[var(--color-success)] dark:bg-[var(--color-success-400)]",
-        warning: "bg-[var(--color-warning)] dark:bg-[var(--color-warning-400)]",
-        danger: "bg-[var(--color-danger)] dark:bg-[var(--color-danger-400)]",
+        neutral: semanticBgColors.neutral + " dark:bg-[var(--color-neutral-500)]",
+        primary: semanticBgColors.primary + " dark:bg-[var(--color-primary-400)]",
+        secondary: semanticBgColors.secondary + " dark:bg-[var(--color-secondary-400)]",
+        success: semanticBgColors.success + " dark:bg-[var(--color-success-400)]",
+        warning: semanticBgColors.warning + " dark:bg-[var(--color-warning-400)]",
+        danger: semanticBgColors.danger + " dark:bg-[var(--color-danger-400)]",
     },
     // Indeterminate animation styles
     indeterminateStyle: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type ProgressSize = "sm" | "md" | "lg";
-export type ProgressColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type ProgressColor = SemanticColor;
 export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
 /**
  * Theme configuration for Progress component

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

@@ -1,3 +1,5 @@
+import { semanticSpinnerColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme for the Spinner component
  */
@@ -12,12 +14,8 @@ const spinnerTheme = {
     },
     // Color variants
     colors: {
-        neutral: "border-[var(--color-border)] border-t-transparent",
+        ...semanticSpinnerColors,
         dark: "border-[var(--color-background-quinary)] border-t-transparent",
-        primary: "border-[var(--color-primary)] border-t-transparent",
-        success: "border-[var(--color-success)] border-t-transparent",
-        warning: "border-[var(--color-warning)] border-t-transparent",
-        danger: "border-[var(--color-danger)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

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

@@ -21,8 +21,9 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     theme?: SpinnerThemeOverrides;
 }
+import { SemanticColor } from "../../../utils/colorUtils";
 export type SpinnerSize = "sm" | "md" | "lg";
-export type SpinnerColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export type SpinnerColor = SemanticColor | "dark";
 export interface SpinnerThemeOverrides {
     baseStyle?: string;
     sizes?: Partial<Record<SpinnerSize, string>>;

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

@@ -1,3 +1,5 @@
+import { semanticBgColors } from '../../../utils/colorUtils.js';
+
 const kpiTheme = {
     baseStyle: "flex flex-col gap-3",
     valueSizes: {
@@ -20,10 +22,7 @@ const kpiTheme = {
         lg: "text-base",
     },
     barFilledColors: {
-        primary: "bg-[var(--color-primary)]",
-        success: "bg-[var(--color-success)]",
-        warning: "bg-[var(--color-warning)]",
-        danger: "bg-[var(--color-danger)]",
+        ...semanticBgColors,
         neutral: "bg-[var(--color-text-secondary)]",
     },
     barEmptyColor: "bg-[var(--color-background-tertiary)]",

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

@@ -1,6 +1,7 @@
 import { ReactNode, HTMLAttributes } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type KPISize = "sm" | "md" | "lg";
-export type KPIColor = "primary" | "success" | "warning" | "danger" | "neutral";
+export type KPIColor = SemanticColor;
 export interface KPITheme {
     baseStyle: string;
     valueSizes: Record<KPISize, string>;

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

@@ -22,6 +22,8 @@ const metricTheme = {
                 "dark:bg-[var(--color-background-secondary)]",
             primary: "bg-white text-[var(--color-primary)] border border-[var(--color-border)] " +
                 "dark:bg-[var(--color-background-secondary)]",
+            secondary: "bg-white text-[var(--color-secondary)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)]",
             success: "bg-white text-[var(--color-success)] border border-[var(--color-border)] " +
                 "dark:bg-[var(--color-background-secondary)]",
             warning: "bg-white text-[var(--color-warning)] border border-[var(--color-border)] " +
@@ -33,6 +35,8 @@ const metricTheme = {
             neutral: "glass-effect-1 !ring-0 text-[var(--color-text-primary)]",
             primary: "glass-effect-2 !ring-0 shadow-lg shadow-blue-500/10 text-[var(--color-primary)] " +
                 "dark:text-[var(--color-primary-400)]",
+            secondary: "glass-effect-2 !ring-0 shadow-lg shadow-gray-500/10 text-[var(--color-secondary)] " +
+                "dark:text-[var(--color-secondary-400)]",
             success: "glass-effect-2 !ring-0 shadow-lg shadow-green-500/10 text-[var(--color-success)] " +
                 "dark:text-[var(--color-success-400)]",
             warning: "glass-effect-2 !ring-0 shadow-lg shadow-yellow-500/10 text-[var(--color-warning)] " +