@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

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

@@ -6,11 +6,16 @@ const badgeTheme = {
     // Base styles applied to all badges
     baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit w-fit tracking-tight font-medium border",
     // Visual style variants (structure only, no colors)
-    // All variants get `border` via baseStyle for consistent box sizing
+    // All variants keep the 1px `border` from baseStyle so every variant is the
+    // SAME height (variant must never change size). `filled` and `soft` make that
+    // border TRANSPARENT — the fill shows through it (bg is painted under the
+    // border), so they read as borderless while still occupying the 1px box.
+    // Only `outline` has a visible border. Do NOT use `border-none` — it drops the
+    // border box and makes the variant 2px shorter than the others.
     variants: {
         filled: "border-transparent",
         outline: "bg-transparent",
-        soft: "border-none",
+        soft: "border-transparent",
     },
     // Color styles organized PER VARIANT
     // This structure enables reliable dark: variants and className overrides
@@ -19,10 +24,12 @@ const badgeTheme = {
         filled: {
             neutral: "bg-[var(--color-neutral-900)] text-white " +
                 "dark:bg-[var(--color-neutral-700)]",
-            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] " +
-                "dark:bg-[var(--color-primary-600)]",
-            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] " +
-                "dark:bg-[var(--color-secondary-600)]",
+            // Background drives from the themed base var (mode-aware) so the
+            // auto-derived -contrast text always matches. Do NOT pin a fixed step
+            // (e.g. dark:bg-primary-600) — that decouples the fill from -contrast and
+            // breaks readability when a theme sets the dark base to a light step
+            // (e.g. a monochrome theme flips dark primary to near-white). See CLAUDE §3.
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]",
             success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] " +
                 "dark:bg-[var(--color-success-600)]",
             warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] " +
@@ -32,31 +39,28 @@ const badgeTheme = {
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] 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)] " +
-                "dark:text-[var(--color-warning-400)]",
-            danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
-                "dark:text-[var(--color-danger-400)]",
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " + "",
+            primary: "text-[var(--color-primary)] border-[var(--color-primary-600)] " +
+                "dark:text-[var(--color-primary-400)] dark:border-[var(--color-primary-400)]",
+            success: "text-[var(--color-success)] border-[var(--color-success-600)] " +
+                "dark:text-[var(--color-success-400)] dark:border-[var(--color-success-400)]",
+            warning: "text-[var(--color-warning)] border-[var(--color-warning-600)] " +
+                "dark:text-[var(--color-warning-400)] dark:border-[var(--color-warning-400)]",
+            danger: "text-[var(--color-danger)] border-[var(--color-danger-600)] " +
+                "dark:text-[var(--color-danger-400)] dark:border-[var(--color-danger-400)]",
         },
-        // Soft variant - subtle background tints (Preline-style: 800 text, 500/20 dark bg)
+        // Soft variant - subtle background tints, NO visible border (the transparent
+        // 1px border from `variants.soft` only reserves height; the fill shows through it).
         soft: {
-            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-text-primary)]/10 " +
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] " +
                 "dark:bg-[var(--color-neutral-900)]",
-            primary: "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] border-[var(--color-primary)]/20 " +
+            primary: "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] " +
                 "dark:bg-[var(--color-primary-400)]/20 dark:text-[var(--color-primary-300)]",
-            secondary: "bg-[var(--color-secondary-50)] text-[var(--color-secondary-700)] border-[var(--color-secondary)]/10 " +
-                "dark:bg-[var(--color-secondary-400)]/20 dark:text-[var(--color-secondary-400)]",
-            success: "bg-[var(--color-success-100)]/70 text-[var(--color-success-700)] border-[var(--color-success)]/20 " +
+            success: "bg-[var(--color-success-100)]/70 text-[var(--color-success-700)] " +
                 "dark:bg-[var(--color-success-400)]/20 dark:text-[var(--color-success-400)]",
-            warning: "bg-[var(--color-warning-50)] text-[var(--color-warning-700)] border-[var(--color-warning)]/20 " +
+            warning: "bg-[var(--color-warning-50)] text-[var(--color-warning-700)] " +
                 "dark:bg-[var(--color-warning-400)]/20 dark:text-[var(--color-warning-400)]",
-            danger: "bg-[var(--color-danger-50)] text-[var(--color-danger-700)] border-[var(--color-danger)]/20 " +
+            danger: "bg-[var(--color-danger-50)] text-[var(--color-danger-700)] " +
                 "dark:bg-[var(--color-danger-400)]/20 dark:text-[var(--color-danger-400)]",
         },
     },
@@ -81,16 +85,16 @@ const badgeTheme = {
         sm: "size-4",
         md: "size-5",
     },
-    // Dismiss icon sizes (button sizes itself from icon + padding)
+    // Dismiss icon sizes — match the text-xs cap (both badge sizes use text-xs) so
+    // the dismiss button never grows taller than the text and stretches the badge.
     dismissSizes: {
         sm: "size-3",
-        md: "size-4",
+        md: "size-3",
     },
     // Dot inherits text color via currentColor — works across all variants/colors
     dotColors: {
         neutral: "bg-current",
         primary: "bg-current",
-        secondary: "bg-current",
         success: "bg-current",
         warning: "bg-current",
         danger: "bg-current",

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

@@ -1,5 +1,6 @@
 import React, { ReactNode, MouseEvent } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
+import type { MeshPaletteName } from "../../effects/MeshGradient";
 export type BadgeVariant = "filled" | "outline" | "soft";
 export type BadgeColor = SemanticColor;
 export type BadgeSize = "sm" | "md";
@@ -82,7 +83,7 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
     variant?: BadgeVariant;
     /**
      * The semantic color of the badge (primary, success, danger, etc.)
-     * @default 'default'
+     * @default 'primary'
      */
     color?: BadgeColor;
     /**
@@ -115,6 +116,16 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
         name: string;
         fallback?: ReactNode;
         initialsCount?: number;
+        /**
+         * Render a deterministic mesh-gradient as the avatar background (initials
+         * overlay on top). Pass `true` to seed from `name`, or a string seed.
+         * Useful for imageless person chips.
+         */
+        gradient?: boolean | string;
+        /** Curated gradient palette (overridden by `gradientColors`). */
+        gradientVariant?: MeshPaletteName;
+        /** Raw gradient color override; wins over `gradientVariant`. */
+        gradientColors?: string[];
     };
     /**
      * Whether the badge is dismissible (shows close button)

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -45,8 +46,13 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
                 : item.label] }));
     // Render individual breadcrumb item wrapped in its own <li>
     const renderItem = (item, index, isLast) => {
-        const isCurrentPage = isLast || !item.href;
-        return (jsxs("li", { className: "flex items-center", children: [isCurrentPage ? (jsx("span", { className: cn("flex items-center text-sm", theme.current), "aria-current": "page", children: renderItemContent(item) })) : (jsx("a", { href: item.href, className: cn("flex items-center text-sm", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: renderItemContent(item) })), !isLast && (jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }))] }, `breadcrumb-${index}`));
+        // aria-current="page" must identify a single current page: only the
+        // last crumb qualifies, regardless of whether an earlier crumb has an href.
+        const isCurrentPage = isLast;
+        // An earlier crumb without an href still isn't the current page — render
+        // it as plain (non-interactive, non-current) text rather than a dead link.
+        const isPlainText = !isCurrentPage && !item.href;
+        return (jsxs("li", { className: "flex items-center", children: [isCurrentPage ? (jsx("span", { className: cn("flex items-center text-sm", theme.current), "aria-current": "page", children: renderItemContent(item) })) : isPlainText ? (jsx("span", { className: cn("flex items-center text-sm", theme.current), children: renderItemContent(item) })) : (jsx("a", { href: item.href, className: cn("flex items-center text-sm", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: renderItemContent(item) })), !isLast && (jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }))] }, `breadcrumb-${index}`));
     };
     // Render ellipsis with dropdown wrapped in its own <li>
     const renderEllipsis = (separatorIndex) => {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useCallback, useRef } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -19,7 +20,7 @@ const BUTTON_TAP_ANIMATION = {
     },
 };
 const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
     // Initialize ripple hook
@@ -34,7 +35,6 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     // Derived state flags (direct computation - faster than useMemo)
     const isLoading = state === "loading";
     const isDisabled = state === "disabled" || state === "loading" || !!disabledProp;
-    const isError = state === "error";
     // Dev-time a11y warning for iconOnly buttons without aria-label
     if (process.env.NODE_ENV !== "production") {
         if (iconOnly && !ariaLabelProp) {
@@ -61,16 +61,16 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
         }
     }, [onClick, isDisabled, enableRipple, shouldReduceMotion, createRipple]);
     // Compute theme classes (direct computation - faster than useMemo)
-    const sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : resolvedVariant === "link" ? "link" : "default"]) || "";
+    const sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : "default"]) || "";
     const colorClasses = ((_c = buttonTheme.variantColors[resolvedVariant]) === null || _c === void 0 ? void 0 : _c[resolvedColor]) || "";
     const variantClasses = ((_d = buttonTheme.variantStyles) === null || _d === void 0 ? void 0 : _d[resolvedVariant]) || "";
-    const stateClasses = isDisabled
-        ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || ""
-        : isError
-            ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.error) || ""
-            : isLoading
-                ? ((_g = buttonTheme.states) === null || _g === void 0 ? void 0 : _g.loading) || ""
-                : "";
+    // Loading is checked before disabled so a loading button keeps its color
+    // (the disabled treatment would desaturate/dim the spinner — the PER bug).
+    const stateClasses = isLoading
+        ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.loading) || ""
+        : isDisabled
+            ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || ""
+            : "";
     const blockStyle = block ? buttonTheme.blockStyle : "";
     // Generate default aria-label for icon-only buttons if not provided (fallback only)
     const ariaLabel = iconOnly && !ariaLabelProp ? "Button" : ariaLabelProp;
@@ -81,10 +81,17 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
             whileTap: !isDisabled ? "tap" : undefined,
             variants: BUTTON_TAP_ANIMATION,
         };
-    // Spinner color - ensure contrast on filled buttons
-    const spinnerClassName = resolvedVariant === "filled" && color !== "neutral"
-        ? "border-t-white border-l-white"
-        : "";
+    // Spinner inherits the button's text color (the `-contrast` token on filled
+    // variants, the semantic color on outline/soft/ghost) so it always contrasts
+    // across colors, dark mode, and brand overrides — no hardcoded white.
+    const spinnerClassName = "border-current border-t-transparent";
+    // Let an explicit consumer-provided `data-state` win over Button's own
+    // default. `data-state` isn't a typed prop, so a value the consumer
+    // passes (e.g. a toolbar button tracking active/inactive) flows through
+    // `restProps` untyped — read it out here and render `data-state` a
+    // single time below, instead of spreading `restProps` and then
+    // unconditionally overwriting it with `state`.
+    const consumerDataState = restProps["data-state"];
     // Track the latest forwarded ref to avoid mergedRef recreation on inline callback refs
     const forwardedRef = useRef(ref);
     forwardedRef.current = ref;
@@ -104,10 +111,9 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 node;
         }
     }, [buttonRef]);
-    return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
-                resolvedVariant !== "link" &&
+    return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": consumerDataState !== null && consumerDataState !== void 0 ? consumerDataState : state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "ghost" &&
-                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/50 rounded-t-[calc(var(--button-radius)-1.25px)] blur-[0.25px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "pointer-events-none absolute inset-px border-t-[0.5px] border-white/50 rounded-[inherit] blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
                 ripples.map((ripple) => {
                     const animation = getRippleAnimation(effect, ripple, rippleScale);
                     return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||

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

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 /**
@@ -124,10 +125,6 @@ function getRippleColorClass(variant, color) {
     switch (color) {
         case "primary":
             return "bg-[var(--color-primary)]/20";
-        case "success":
-            return "bg-[var(--color-success)]/20";
-        case "warning":
-            return "bg-[var(--color-warning)]/20";
         case "danger":
             return "bg-[var(--color-danger)]/20";
         case "neutral":

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

@@ -11,12 +11,10 @@ export interface ButtonTheme {
         outline: Record<ButtonColor, string>;
         soft: Record<ButtonColor, string>;
         ghost: Record<ButtonColor, string>;
-        link: Record<ButtonColor, string>;
     };
     sizes: Record<ButtonSize, {
         default: string;
         iconOnly: string;
-        link: string;
     }>;
     states: Partial<Record<ButtonState, string>>;
     blockStyle: string;

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

@@ -10,7 +10,6 @@ const buttonTheme = {
         outline: "bg-transparent border",
         soft: "border-transparent",
         ghost: "bg-transparent border-transparent",
-        link: "bg-transparent border-transparent",
     },
     // Color styles organized BY VARIANT for reliable dark: prefixes
     variantColors: {
@@ -22,49 +21,25 @@ const buttonTheme = {
             primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary)] 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)]",
-            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)]",
             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)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " +
                 "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)] " +
+            primary: "text-[var(--color-text-primary)] border-[var(--color-primary-600)]/30 " +
+                "hover:bg-[var(--color-primary-100)] " +
                 "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)] " +
-                "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)] " +
-                "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)] " +
+                "dark:border-[var(--color-primary-400)]/30 " +
+                "dark:hover:bg-[var(--color-primary)]/10",
+            danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)]/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:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)]/30 " +
                 "dark:hover:bg-[var(--color-danger-900)]/30",
         },
         // Soft variant - subtle background tints
@@ -78,23 +53,8 @@ const buttonTheme = {
                 "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)] " +
-                "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)] " +
-                "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 " +
+                "dark:hover:bg-[var(--color-primary)]/10",
+            danger: "text-[var(--color-danger-500)] bg-[var(--color-danger)]/10 " +
                 "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 " +
@@ -109,70 +69,34 @@ const buttonTheme = {
             primary: "text-[var(--color-primary-600)] " +
                 "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-900)]/30",
-            secondary: "text-[var(--color-secondary-600)] " +
-                "hover:bg-[var(--color-secondary-50)] " +
-                "focus-visible:outline-[var(--color-secondary-600)] " +
-                "dark:text-[var(--color-secondary-300)] dark:hover:bg-[var(--color-secondary-900)]/30",
-            success: "text-[var(--color-success-600)] " +
-                "hover:bg-[var(--color-success-50)] " +
-                "focus-visible:outline-[var(--color-success-600)] " +
-                "dark:text-[var(--color-success-300)] dark:hover:bg-[var(--color-success-900)]/30",
-            warning: "text-[var(--color-warning-600)] " +
-                "hover:bg-[var(--color-warning-50)] " +
-                "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:text-[var(--color-warning-300)] dark:hover:bg-[var(--color-warning-900)]/30",
+                "dark:text-[var(--color-primary-200)] dark:hover:bg-[var(--color-primary)]/10",
             danger: "text-[var(--color-danger-600)] " +
                 "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
                 "dark:text-[var(--color-danger-300)] dark:hover:bg-[var(--color-danger-900)]/30",
         },
-        // Link variant - text-only with per-color styles
-        link: {
-            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)]",
-            warning: "text-[var(--color-warning-600)] underline-offset-4 hover:underline " +
-                "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:text-[var(--color-warning-300)]",
-            danger: "text-[var(--color-danger-600)] underline-offset-4 hover:underline " +
-                "focus-visible:outline-[var(--color-danger-600)] " +
-                "dark:text-[var(--color-danger-300)]",
-        },
     },
     // Size variants
     sizes: {
         sm: {
-            default: "font-medium min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
-            iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "font-semibold p-0 text-sm h-fit",
+            // Tighten the corner radius at sm so a short button doesn't read as a pill
+            // (overrides baseStyle's rounded-[var(--button-radius)] via twMerge).
+            default: "font-medium min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm rounded-[calc(var(--button-radius)*0.75)]",
+            iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)] rounded-[calc(var(--button-radius)*0.75)]",
         },
         md: {
             default: "font-medium min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "font-semibold p-0 text-sm h-fit",
         },
         lg: {
             default: "font-medium min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "font-medium p-0 text-base h-fit",
         },
     },
     // State styles
     states: {
-        disabled: "opacity-50 cursor-not-allowed pointer-events-none saturate-0",
-        error: "ring-2 ring-[var(--color-danger-500)]",
-        loading: "cursor-not-allowed",
-        // default state has no additional classes
+        disabled: "opacity-60 cursor-not-allowed pointer-events-none saturate-0",
+        loading: "cursor-wait pointer-events-none",
     },
     // Block style
     blockStyle: "w-full",

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

@@ -1,12 +1,11 @@
 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
  * @property {ButtonVariant} variant - The visual style variant of the button
  * @property {ButtonSize} size - The size of the button
- * @property {ButtonState} state - The state of the button (normal, disabled, error)
+ * @property {ButtonState} state - The state of the button (default, loading, disabled)
  * @property {boolean} iconOnly - Whether the button should display as icon-only (square padding)
  * @property {boolean} block - Whether the button should be full width
  * @property {boolean} enableRipple - Whether to enable ripple effect on click
@@ -21,7 +20,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     variant?: ButtonVariant;
     /** The size of the button */
     size?: ButtonSize;
-    /** The state of the button (normal, disabled, error) */
+    /** The state of the button (default, loading, disabled) */
     state?: ButtonState;
     /** Whether the button should display as icon-only (square padding) */
     iconOnly?: boolean;
@@ -50,7 +49,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     darkMode?: boolean;
 }
-export type ButtonColor = SemanticColor;
-export type ButtonVariant = "filled" | "outline" | "soft" | "ghost" | "link";
+export type ButtonColor = "neutral" | "primary" | "danger";
+export type ButtonVariant = "filled" | "outline" | "soft" | "ghost";
 export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonState = "default" | "disabled" | "error" | "loading";
+export type ButtonState = "default" | "disabled" | "loading";

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Animation variants for Calendar component
  */