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

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
@@ -20,6 +22,8 @@ const badgeTheme = {
                 "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
             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)]",
+            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-[var(--color-warning-contrast)] ring-[var(--color-warning-300)] " +
@@ -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)]",
+                "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)] " +
-                "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
-                "dark:hover:bg-[var(--color-primary-500)]",
+                "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)] " +
-                "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
                 "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)]",
+                "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)] " +
-                "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
                 "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)]",
+                "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)] " +
-                "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
                 "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/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
  */
@@ -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)] " +

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import { SemanticColor } from '../../../utils/colorUtils';
 export type MetricSize = 'sm' | 'md' | 'lg';
-export type MetricColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type MetricColor = SemanticColor;
 export type MetricVariant = 'filled' | 'glass';
 export type TrendDirection = 'up' | 'down';
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/components/effects/CustomCursor/CustomCursor.theme.js

@@ -13,6 +13,7 @@ const customCursorTheme = {
         neutral: "bg-[var(--color-background-secondary)]",
         dark: "bg-[var(--color-text-primary)]",
         primary: "bg-[var(--color-primary)]",
+        secondary: "bg-[var(--color-secondary)]",
         success: "bg-[var(--color-success)]",
         warning: "bg-[var(--color-warning)]",
         danger: "bg-[var(--color-danger)]",
@@ -26,6 +27,7 @@ const customCursorTheme = {
         neutral: "text-[var(--color-background-secondary)]",
         dark: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)]",
+        secondary: "text-[var(--color-secondary)]",
         success: "text-[var(--color-success)]",
         warning: "text-[var(--color-warning)]",
         danger: "text-[var(--color-danger)]",

package/dist/components/effects/CustomCursor/CustomCursor.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { SpringOptions } from 'motion/react';
+import { SemanticColor } from '../../../utils/colorUtils';
 /**
  * Alignment positions for CustomCursorFollow relative to the main cursor
  */
@@ -11,7 +12,7 @@ export type CustomCursorSize = 'sm' | 'md' | 'lg';
 /**
  * Color variants for the custom cursor
  */
-export type CustomCursorColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export type CustomCursorColor = SemanticColor | 'dark';
 /**
  * Visual variants for the custom cursor
  */

package/dist/components/forms/Checkbox/Checkbox.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { CheckboxProps } from "./Checkbox.types";
-/**
- * Checkbox component for selecting one or more options
- */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> & {
+    Group: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+};

package/dist/components/forms/Checkbox/Checkbox.js

@@ -1,31 +1,52 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useId, useState, useRef, useEffect } from 'react';
 import { checkboxTheme } from './Checkbox.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
+import { useCheckboxGroupContext } from './CheckboxContext.js';
+import { CheckboxGroup } from './CheckboxGroup.js';
 
 /**
  * Checkbox component for selecting one or more options
  */
-const Checkbox = React__default.forwardRef(({ id, name, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state = "default", size = "md", className, ...restProps }, ref) => {
+const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
+    var _a, _b, _c, _d;
+    const autoId = useId();
+    const groupContext = useCheckboxGroupContext();
+    // Resolve props from group context or individual props
+    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
+    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
+    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
+    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
+    const isDisabled = state === "disabled";
+    // Determine checked state
+    const isInGroup = groupContext !== undefined;
     const [internalChecked, setInternalChecked] = useState(false);
+    let isChecked;
+    if (isInGroup) {
+        isChecked = groupContext.value.includes(value);
+    }
+    else if (controlledChecked !== undefined) {
+        isChecked = controlledChecked;
+    }
+    else {
+        isChecked = internalChecked;
+    }
     const inputRef = useRef(null);
-    // Determine if component is controlled or uncontrolled
-    const isControlled = controlledChecked !== undefined;
-    const isChecked = isControlled ? controlledChecked : internalChecked;
     // Set indeterminate property on the input element
     useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    // Derive state flags
-    const isDisabled = state === "disabled";
     const handleChange = (e) => {
         if (isDisabled)
             return;
-        if (!isControlled) {
+        if (isInGroup) {
+            groupContext.onChange(value, e.target.checked);
+        }
+        else if (controlledChecked === undefined) {
             setInternalChecked(e.target.checked);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
@@ -38,6 +59,9 @@ const Checkbox = React__default.forwardRef(({ id, name, value, checked: controll
                                 ref.current = node;
                         }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })), description && (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description }))] }))] }));
 });
-Checkbox.displayName = "Checkbox";
+CheckboxComponent.displayName = "Checkbox";
+const Checkbox = Object.assign(CheckboxComponent, {
+    Group: CheckboxGroup,
+});
 
 export { Checkbox };

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -35,6 +35,12 @@ const checkboxTheme = {
         sm: "size-5 mt-0.25",
         md: "size-6",
     },
+    // Group styles
+    groupStyle: "flex flex-col gap-1.5",
+    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
+    groupDescriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupErrorStyle: "text-sm text-[var(--color-danger)] mt-1.5",
+    groupItemsStyle: "flex flex-col gap-3",
 };
 
 export { checkboxTheme };

package/dist/components/forms/Checkbox/Checkbox.types.d.ts

@@ -7,12 +7,16 @@ export type CheckboxState = 'default' | 'disabled';
  * Size variants for the checkbox component
  */
 export type CheckboxSize = 'sm' | 'md';
+/**
+ * Orientation for Checkbox.Group layout
+ */
+export type CheckboxGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Checkbox component props
  */
 export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    id: string;
-    name: string;
+    id?: string;
+    name?: string;
     value: string;
     checked?: boolean;
     indeterminate?: boolean;
@@ -23,6 +27,23 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElemen
     size?: CheckboxSize;
     className?: string;
 }
+/**
+ * Checkbox.Group component props
+ */
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    name?: string;
+    size?: CheckboxSize;
+    state?: CheckboxState;
+    orientation?: CheckboxGroupOrientation;
+    label?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Checkbox theme configuration
  */
@@ -32,4 +53,9 @@ export interface CheckboxTheme {
     inputStyle: string;
     descriptionStyle: string;
     sizes: Record<CheckboxSize, string>;
+    groupStyle?: string;
+    groupHorizontalStyle?: string;
+    groupDescriptionStyle?: string;
+    groupErrorStyle?: string;
+    groupItemsStyle?: string;
 }

package/dist/components/forms/Checkbox/CheckboxContext.d.ts

@@ -0,0 +1,14 @@
+import type { CheckboxSize, CheckboxState } from "./Checkbox.types";
+export interface CheckboxGroupContextValue {
+    name: string;
+    value: string[];
+    onChange: (itemValue: string, checked: boolean) => void;
+    size: CheckboxSize;
+    state: CheckboxState;
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;
+/**
+ * Returns the group context, or undefined when used outside a Checkbox.Group.
+ * This allows standalone Checkbox usage without a Group wrapper.
+ */
+export declare function useCheckboxGroupContext(): CheckboxGroupContextValue | undefined;

package/dist/components/forms/Checkbox/CheckboxContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const CheckboxGroupContext = createContext(undefined);
+/**
+ * Returns the group context, or undefined when used outside a Checkbox.Group.
+ * This allows standalone Checkbox usage without a Group wrapper.
+ */
+function useCheckboxGroupContext() {
+    return useContext(CheckboxGroupContext);
+}
+
+export { CheckboxGroupContext, useCheckboxGroupContext };

package/dist/components/forms/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { CheckboxGroupProps } from "./Checkbox.types";
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;