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

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

@@ -4,16 +4,22 @@
  * Record<Size, string> per sub-element, CSS variables for all theming.
  */
 const metricTheme = {
-    // Base container (shared across all variants). Radius + overflow + resting
-    // surface come from the Card shell Metric renders into (see Metric.tsx).
-    baseStyle: "transition-colors duration-200",
+    // Base container (shared across all variants). Overflow + resting surface
+    // come from the Card shell Metric renders into (see Metric.tsx), but Metric
+    // is a compact stat tile, not a freeform Card — it overrides the shell's
+    // --card-radius with its own --metric-radius (same "rounded-[...]" utility
+    // group, so this wins via source order) rather than inheriting Card's
+    // radius verbatim.
+    baseStyle: "transition-colors duration-200 rounded-[var(--metric-radius)]",
     // Visual style variants — container surface + structure.
     // `filled` adds nothing: it inherits the Card shell's --color-surface-raised.
     // `ghost` clears that fill (`!` beats Card's bg utility regardless of
-    // source order) so it sits transparent.
+    // source order) and cancels the Card shell's elevation shadow (`shadow-none`
+    // is registered in the same tailwind-merge `shadow` group as `shadow-surface-*`
+    // in cn.ts, so it reliably overrides it) so it sits fully flush/flat.
     variants: {
         filled: "",
-        ghost: "!bg-transparent overflow-visible",
+        ghost: "!bg-transparent overflow-visible shadow-none",
     },
     // Icon chip base per variant — classes shared across all colors of that variant
     iconContainerVariants: {
@@ -22,14 +28,18 @@ const metricTheme = {
     },
     // Icon tint per semantic color — shared by every variant (the one thing color drives)
     iconColors: {
-        neutral: "text-[var(--color-text-primary)]",
+        mono: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
         success: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
         warning: "text-[var(--color-warning)] dark:text-[var(--color-warning-400)]",
         danger: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
     // Size variants — one Record<Size, string> per sub-element
-    contentPaddingSizes: { sm: "p-3", md: "p-4", lg: "p-5" },
+    contentPaddingSizes: {
+        sm: "p-[var(--metric-content-p-sm)]",
+        md: "p-[var(--metric-content-p-md)]",
+        lg: "p-[var(--metric-content-p-lg)]",
+    },
     iconContainerSizes: { sm: "size-8", md: "size-10", lg: "size-12" },
     // Heights mirror iconContainerSizes — with an icon, the label box spans the
     // chip's height and centers its text against it (mb-3 spacing is dropped;
@@ -40,7 +50,14 @@ const metricTheme = {
         md: "text-sm font-medium tracking-tight",
         lg: "text-sm font-medium tracking-tight",
     },
-    valueSizes: { sm: "text-xl", md: "text-3xl", lg: "text-3xl" },
+    // text-[length:...] (not bare text-[var(...)]) is required — Tailwind's
+    // arbitrary text-[...] syntax is ambiguous between color/font-size and a
+    // bare var() resolves to color, silently no-oping the size change.
+    valueSizes: {
+        sm: "text-[length:var(--metric-value-size-sm)] leading-[1.4]",
+        md: "text-[length:var(--metric-value-size-md)] leading-[1.2]",
+        lg: "text-[length:var(--metric-value-size-lg)] leading-[1.2]",
+    },
     subtitleSizes: { sm: "text-xs mt-1", md: "text-xs mt-0.5", lg: "text-sm mt-1" },
     // Common element styles
     labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-2",

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

@@ -12,7 +12,7 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Label describing the metric
      */
-    label: React.ReactNode;
+    label?: React.ReactNode;
     /**
      * Optional subtitle or secondary text
      */

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

@@ -11,19 +11,19 @@ const tableTheme = {
     // border, or by the pagination footer's `border-t` when pagination is shown.
     // `bordered` is a full grid and keeps its closing edge.
     variants: {
-        default: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+        default: "border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
             "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
-            "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
+        striped: "border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
+            "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-mono-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-mono-800)] " +
             "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
             "[&_td]:border-b [&_td]:border-r [&_th]:border-b [&_th]:border-r " +
             "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
-            "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
+            "dark:[&_td]:border-[var(--color-mono-700)] dark:[&_th]:border-[var(--color-mono-700)] " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+        compact: "border-[var(--color-border)] dark:border-[var(--color-mono-700)] " +
             "[&>tbody>tr:last-child>td]:border-b-0 " +
             "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
     },
@@ -61,7 +61,7 @@ const tableTheme = {
     // Row styles — hover and layout only (borders moved to cells)
     // Light: neutral-50 hover | Dark: neutral-800 hover
     rowStyle: "group transition-all duration-300 relative " +
-        "hover:bg-[var(--color-neutral-50)] " +
+        "hover:bg-[var(--color-mono-50)] " +
         "dark:hover:bg-[var(--color-surface-hover)]",
     // Selected row styles — background is applied per-cell (in TableCell) so that
     // sticky/frozen columns repaint correctly. The row only carries the left indicator.
@@ -72,8 +72,8 @@ const tableTheme = {
     frozenColumnStyle: "sticky left-0 z-10",
     lastFrozenColumnStyle: "sticky right-0 z-10",
     frozenHeaderStyle: "sticky top-0 z-20 " +
-        "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
-        "dark:shadow-[var(--color-neutral-900)]/50",
+        "shadow-lg shadow-[var(--color-mono-200)]/50 " +
+        "dark:shadow-[var(--color-mono-900)]/50",
     // Utility controls - Column manager button
     // Surface-like control; surface/border/hover tokens flip automatically between light/dark
     columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +

package/dist/components/data-display/Table/TableActions.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
+import { DotsThree } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
@@ -10,7 +11,6 @@ import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
 import { Button } from '../../core/Button/Button.js';
-import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
 
 /**
  * TableActions component with smart display logic
@@ -50,7 +50,7 @@ const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
         });
     };
     const renderOverflowMenu = () => {
-        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "neutral", variant: "ghost", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(EllipsisHorizontalIcon, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
+        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "mono", variant: "ghost", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(DotsThree, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
                         const Icon = action.icon;
                         return (jsx(Dropdown.Item, { itemKey: action.id, isDanger: action.variant === "danger", startContent: jsx(Icon, { className: "size-4" }), children: action.label }, action.id));
                     }) })] }));

package/dist/components/data-display/Table/TableActionsMenu.js

@@ -19,7 +19,7 @@ const TableActionsMenu = ({ actions, row, onClose, className, }) => {
             var _a;
             const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
             const Icon = action.icon;
-            return (jsxs(Button, { variant: "ghost", color: action.variant === 'danger' ? 'danger' : 'neutral', size: "sm", onClick: () => handleActionClick(action), disabled: isDisabled, className: "w-full justify-start gap-3", role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
+            return (jsxs(Button, { variant: "ghost", color: action.variant === 'danger' ? 'danger' : 'mono', size: "sm", onClick: () => handleActionClick(action), disabled: isDisabled, className: "w-full justify-start gap-3", role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
         }) }));
 };
 

package/dist/components/data-display/Table/TableColumnManager.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
 import '../../core/Popover/PopoverBody.js';
-import { Cog6ToothIcon } from '@heroicons/react/24/outline';
+import { Gear } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
 import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
@@ -19,7 +19,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Gear, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "mono", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

package/dist/components/data-display/Table/TableDeclarative.js

@@ -4,7 +4,7 @@ import React__default, { useContext } from 'react';
 import { TableContext } from './TableContext.js';
 import { cn } from '../../../utils/cn.js';
 import { alignmentClasses } from './Table.utils.js';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/16/solid';
+import { CaretUp, CaretDown } from '@phosphor-icons/react';
 
 /**
  * Declarative Table Header component
@@ -58,8 +58,8 @@ const HeaderCellComponent = ({ children, isFrozen = false, isLastFrozen = false,
                 'justify-end': align === 'right',
                 'justify-center': align === 'center',
             }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc'
-                        ? jsx(ChevronUpIcon, { className: "size-3.5" })
-                        : jsx(ChevronDownIcon, { className: "size-3.5" }) }))] }) }));
+                        ? jsx(CaretUp, { className: "size-3.5" })
+                        : jsx(CaretDown, { className: "size-3.5" }) }))] }) }));
 };
 HeaderCellComponent.displayName = 'Table.HeaderCell';
 const HeaderCell = React__default.memo(HeaderCellComponent);

package/dist/components/data-display/Table/TableFilter.js

@@ -11,7 +11,7 @@ import '../../forms/Select/Select.theme.js';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
 import '../../core/Popover/PopoverBody.js';
-import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Funnel, X, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 
 /**
@@ -214,7 +214,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return true;
         return f.value != null && f.value !== "";
     }).length;
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-surface-sunken)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(Funnel, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-surface-sunken)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
                                                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
@@ -222,8 +222,8 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
                                 const selectedColumn = getSelectedColumn(filter.columnId);
                                 const resolvedType = getResolvedFilterType(selectedColumn);
                                 const operatorOptions = getOperatorsForFilterType(resolvedType);
-                                return (jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: operatorOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(FilterValueInput, { filter: filter, column: selectedColumn, filterType: resolvedType, onValueChange: (value) => handleFilterValueChange(filter.id, value) }), jsx(Button, { color: "neutral", variant: "ghost", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter", className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2.5 }) })] }, filter.id));
-                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Link, { color: "neutral", size: "sm", onClick: handleAddFilter, children: [jsx(PlusIcon, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Link, { color: "neutral", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
+                                return (jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: operatorOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(FilterValueInput, { filter: filter, column: selectedColumn, filterType: resolvedType, onValueChange: (value) => handleFilterValueChange(filter.id, value) }), jsx(Button, { color: "mono", variant: "ghost", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter", className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", children: jsx(X, { className: "size-4", weight: "bold" }) })] }, filter.id));
+                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Link, { color: "mono", size: "sm", onClick: handleAddFilter, children: [jsx(Plus, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Link, { color: "mono", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
 }
 
 export { TableFilter };

package/dist/components/data-display/Table/TableHeader.js

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { TableCell } from './TableCell.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { getRowId, UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/16/solid';
+import { CaretUp, CaretDown } from '@phosphor-icons/react';
 
 function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, theme, data = [], rowKey, }) {
     const handleSort = useCallback((columnId) => {
@@ -51,8 +51,8 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                     const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                     const isSortable = column.sortable && onSortChange;
                     return (jsx(TableCell, { column: column, row: null, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, sortDirection: currentSort === null || currentSort === void 0 ? void 0 : currentSort.direction, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc'
-                                        ? jsx(ChevronUpIcon, { className: "size-3.5" })
-                                        : jsx(ChevronDownIcon, { className: "size-3.5" }) }))] })) : (column.header) }, column.id));
+                                        ? jsx(CaretUp, { className: "size-3.5" })
+                                        : jsx(CaretDown, { className: "size-3.5" }) }))] })) : (column.header) }, column.id));
                 })] }) }));
 }
 const TableHeader = TableHeaderComponent;

package/dist/components/data-display/Table/TableRow.js

@@ -6,7 +6,7 @@ import { TableCell } from './TableCell.js';
 import { Button } from '../../core/Button/Button.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Radio } from '../../forms/Radio/Radio.js';
-import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Minus, Plus } from '@phosphor-icons/react';
 import { UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
 import { cn } from '../../../utils/cn.js';
 import { tableExpandAnimations, tableExpandContentAnimations } from './Table.animations.js';
@@ -31,7 +31,7 @@ function TableRowComponent({ row, rowId, columns, onRowClick, expandedRowRender,
                             accessor: () => "",
                             width: UTILITY_COLUMN_WIDTH,
                         }, row: row, rowId: rowId, isSelected: isSelected, theme: theme, children: jsxs("div", { className: "flex items-center gap-2", children: [selectable &&
-                                    (selectionType === "checkbox" ? (jsx(Checkbox, { id: `table-checkbox-${rowId}`, name: `table-selection-${rowId}`, value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), onClick: (e) => e.stopPropagation(), "aria-label": "Select row" })) : (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(Radio, { id: `table-radio-${rowId}`, name: "table-selection", value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), "aria-label": "Select row" }) }))), expandedRowRender && (jsx(Button, { color: "neutral", variant: "outline", size: "sm", iconOnly: true, onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row", children: isExpanded ? (jsx(MinusIcon, { className: "size-4", strokeWidth: 2 })) : (jsx(PlusIcon, { className: "size-4", strokeWidth: 2 })) }))] }) })), columns.map((column, index) => (jsx(TableCell, { column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, isSelected: isSelected, theme: theme }, column.id)))] }), jsx(AnimatePresence, { initial: false, children: isExpanded && expandedRowRender && (jsx(motion.tr, { initial: "collapsed", animate: "expanded", exit: "collapsed", children: jsx("td", { colSpan: colSpan, className: "p-0 border-b border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: jsx(motion.div, { variants: tableExpandAnimations, style: { overflow: "hidden" }, children: jsx(motion.div, { variants: tableExpandContentAnimations, children: expandedRowRender(row) }) }) }) }, `${rowId}-expanded`)) })] }));
+                                    (selectionType === "checkbox" ? (jsx(Checkbox, { id: `table-checkbox-${rowId}`, name: `table-selection-${rowId}`, value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), onClick: (e) => e.stopPropagation(), "aria-label": "Select row" })) : (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(Radio, { id: `table-radio-${rowId}`, name: "table-selection", value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), "aria-label": "Select row" }) }))), expandedRowRender && (jsx(Button, { color: "mono", variant: "ghost", size: "sm", iconOnly: true, className: "size-6 min-h-0 p-1", onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row", children: isExpanded ? (jsx(Minus, { className: "size-4", weight: "bold" })) : (jsx(Plus, { className: "size-4", weight: "bold" })) }))] }) })), columns.map((column, index) => (jsx(TableCell, { column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, isSelected: isSelected, theme: theme }, column.id)))] }), jsx(AnimatePresence, { initial: false, children: isExpanded && expandedRowRender && (jsx(motion.tr, { initial: "collapsed", animate: "expanded", exit: "collapsed", children: jsx("td", { colSpan: colSpan, className: "!p-0 border-b border-[var(--color-border)] dark:border-[var(--color-mono-700)]", children: jsx(motion.div, { variants: tableExpandAnimations, style: { overflow: "hidden" }, children: jsx(motion.div, { variants: tableExpandContentAnimations, children: expandedRowRender(row) }) }) }) }, `${rowId}-expanded`)) })] }));
 }
 TableRowComponent.displayName = "TableRow";
 const TableRow = React__default.memo(TableRowComponent);

package/dist/components/data-display/Table/TableSelectionHeader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
 import 'react';
 import { Link } from '../../core/Link/Link.js';
@@ -16,8 +16,8 @@ const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkAct
     return (jsxs("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-surface-raised)] z-10", className), children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-[var(--color-text-muted)] text-base border-r border-[var(--color-border)] pr-3", children: selectedCount === totalCount
                             ? `All ${selectedCount} selected`
                             : `${selectedCount} selected` }), bulkActions.length > 0 && (jsx("div", { className: "flex items-center gap-2", children: bulkActions.map((action) => {
-                            return (jsx(Button, { color: "neutral", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm", children: action.label }, action.id));
-                        }) }))] }), jsxs(Link, { color: "primary", onClick: onClearSelection, "aria-label": "Clear selection", children: [jsx(XMarkIcon, { className: "size-4" }), "Clear"] })] }));
+                            return (jsx(Button, { color: "mono", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm", children: action.label }, action.id));
+                        }) }))] }), jsxs(Link, { color: "primary", onClick: onClearSelection, "aria-label": "Clear selection", children: [jsx(X, { className: "size-4" }), "Clear"] })] }));
 };
 
 export { TableSelectionHeader };

package/dist/components/data-display/Timeline/TimelineMarker.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { CheckIcon } from '@heroicons/react/24/solid';
+import { Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useTimelineContext } from './TimelineContext.js';
 import { useTimelineItemContext } from './TimelineItem.js';
@@ -24,7 +24,7 @@ const TimelineMarker = React__default.forwardRef(({ icon, className, ...props },
         if (icon)
             return icon;
         if (status === "completed") {
-            return jsx(CheckIcon, { className: "w-4 h-4" });
+            return jsx(Check, { className: "w-4 h-4" });
         }
         if (status === "active") {
             return (jsx("span", { className: "w-2 h-2 rounded-full bg-[var(--color-primary)]" }));

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMotionValue, AnimatePresence, motion, useReducedMotion, useSpring } from 'motion/react';
-import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
+import { PaperPlaneTilt } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { customCursorVariants, reducedMotionSpringConfig, defaultSpringConfig } from './CustomCursor.animations.js';
@@ -150,7 +150,7 @@ const CustomCursor = React.forwardRef(({ children, size = "md", color = "primary
         y.set(cursorPos.y);
     }, [cursorPos, x, y]);
     // Default content based on shape
-    const defaultContent = shape === "arrow" ? (jsx(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
+    const defaultContent = shape === "arrow" ? (jsx(PaperPlaneTilt, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
     return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorRef, "data-slot": "custom-cursor", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorStyle, customCursorTheme.sizes[size], customCursorTheme.colors[color], customCursorTheme.variants[variant], customCursorTheme.shapes[shape], className), style: { top: y, left: x, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: children || defaultContent })) }));
 });
 CustomCursor.displayName = "CustomCursor";

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

@@ -10,7 +10,7 @@ const customCursorTheme = {
         user: "flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl",
     },
     cursorFollowColors: {
-        neutral: "bg-[var(--color-background-secondary)]",
+        mono: "bg-[var(--color-background-secondary)]",
         dark: "bg-[var(--color-text-primary)]",
         primary: "bg-[var(--color-primary)]",
         success: "bg-[var(--color-success)]",
@@ -23,7 +23,7 @@ const customCursorTheme = {
         lg: "w-10 h-10",
     },
     colors: {
-        neutral: "text-[var(--color-background-secondary)]",
+        mono: "text-[var(--color-background-secondary)]",
         dark: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)]",
         success: "text-[var(--color-success)]",

package/dist/components/effects/DotPattern/DotPattern.js

@@ -12,6 +12,12 @@ function buildMaskImage(direction, fadeSize) {
     if (direction === "radial") {
         return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
     }
+    if (direction === "center") {
+        // Inverse of "radial": dots fade OUT in the center and stay solid toward
+        // the edges (a vignette that keeps the content area behind it clear).
+        // Larger fadeSize = larger clear zone in the middle.
+        return `radial-gradient(ellipse at center, transparent ${stop}%, black 100%)`;
+    }
     const directionMap = {
         top: "to top",
         bottom: "to bottom",

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

@@ -1,6 +1,6 @@
 import React from "react";
 /** Direction for the fade gradient mask */
-export type DotPatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
+export type DotPatternFadeDirection = "radial" | "center" | "top" | "bottom" | "left" | "right";
 export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Distance between dots in pixels (center to center).
@@ -25,7 +25,9 @@ export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
     fade?: boolean;
     /**
      * Direction of the fade gradient.
-     * - "radial" fades from center outward
+     * - "radial" fades the edges out (solid center, transparent edges)
+     * - "center" fades the center out (transparent center, solid edges — a
+     *   vignette that keeps content-area behind it clear)
      * - "top" | "bottom" | "left" | "right" fades toward that edge
      * @default "radial"
      */

package/dist/components/effects/MeshGradient/MeshGradient.utils.d.ts

@@ -78,6 +78,6 @@ export declare const generateMarble: (seed: string, colors: string[], count: num
  * mis-reads dark tiles like a teal base with a cream accent.) Pass `threshold`
  * to bias toward light text on more mid-tones (see `contrastTone`). Map the
  * result to the theme-stable neutral tokens at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`.
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`.
  */
 export declare const getMeshTextTone: (seed: string, colors: string[], count: number, threshold?: number) => ContrastTone;

package/dist/components/effects/MeshGradient/MeshGradient.utils.js

@@ -102,7 +102,7 @@ const generateMarble = (seed, colors, count) => {
  * mis-reads dark tiles like a teal base with a cream accent.) Pass `threshold`
  * to bias toward light text on more mid-tones (see `contrastTone`). Map the
  * result to the theme-stable neutral tokens at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`.
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`.
  */
 const getMeshTextTone = (seed, colors, count, threshold) => {
     const { base } = generateMarble(seed, colors, count);

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

@@ -8,6 +8,7 @@ import { cn } from '../../../utils/cn.js';
 import { useCheckboxGroupContext } from './CheckboxContext.js';
 import { CheckboxGroup } from './CheckboxGroup.js';
 import { reducedMotionVariants, indeterminateVariants, checkmarkVariants } from './Checkbox.animations.js';
+import { CHECK_RIPPLE_MOTION } from '../../core/shared/interaction.animations.js';
 
 /**
  * Checkbox component for selecting one or more options
@@ -75,7 +76,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
                                 ref(node);
                             else if (ref)
                                 ref.current = node;
-                        }, type: "checkbox", ...restProps, id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": !isInGroup && isInvalid ? true : undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-[var(--color-primary-contrast)]", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[visualState], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
+                        }, type: "checkbox", ...restProps, id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": !isInGroup && isInvalid ? true : undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsx(AnimatePresence, { initial: false, children: isChecked && !shouldReduceMotion && (jsx(motion.div, { ...CHECK_RIPPLE_MOTION, className: "absolute inset-0 rounded-[var(--checkbox-radius)] bg-[var(--color-primary)]/40 pointer-events-none z-0" }, "ripple")) }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-[var(--color-primary-contrast)]", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[visualState], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

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

@@ -23,8 +23,8 @@ const checkboxTheme = {
         "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
-        "dark:disabled:bg-[var(--color-neutral-800)] dark:disabled:border-[var(--color-neutral-600)] " +
-        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+        "dark:disabled:bg-[var(--color-mono-800)] dark:disabled:border-[var(--color-mono-600)] " +
+        "dark:data-[state=disabled]:bg-[var(--color-mono-700)] dark:data-[state=disabled]:border-[var(--color-mono-600)]",
     // Invalid is message-led: the control stays neutral (mirrors Radio). The group's
     // required asterisk + error message carry the error (see CheckboxGroup). `data-state=invalid`
     // is still emitted on the input as an unstyled consumer/test hook.

package/dist/components/forms/ColorPicker/ColorPickerEyeDropper.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { EyeDropperIcon } from '@heroicons/react/20/solid';
+import { Eyedropper } from '@phosphor-icons/react';
 import { useContext, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
@@ -44,7 +44,7 @@ const ColorPickerEyeDropper = ({ className, ...props }) => {
     if (!supportsEyeDropper) {
         return null;
     }
-    return (jsx(Button, { size: "sm", variant: "outline", color: "neutral", iconOnly: true, onClick: handleEyeDropper, disabled: disabled, "aria-label": "Pick color from screen", title: "Pick color from screen", className: cn(theme.eyedropperButtonStyle, className), children: jsx(EyeDropperIcon, { className: "size-4" }) }));
+    return (jsx(Button, { size: "sm", variant: "outline", color: "mono", iconOnly: true, onClick: handleEyeDropper, disabled: disabled, "aria-label": "Pick color from screen", title: "Pick color from screen", className: cn(theme.eyedropperButtonStyle, className), children: jsx(Eyedropper, { className: "size-4" }) }));
 };
 ColorPickerEyeDropper.displayName = 'ColorPickerEyeDropper';
 

package/dist/components/forms/ColorPicker/ColorPickerGradient.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TrashIcon, PlusIcon, ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
+import { Trash, Plus, ClipboardText } from '@phosphor-icons/react';
 import { useContext, useState, useRef, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
@@ -180,7 +180,7 @@ const ColorPickerGradient = ({ className, ...props }) => {
                             const remaining = gradient.stops.filter(s => s.id !== selectedStop.id);
                             if (remaining[0])
                                 selectStop(remaining[0].id);
-                        }, "aria-label": "Remove color stop", children: jsx(TrashIcon, { className: "size-4" }) })), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: () => addGradientStop(50), "aria-label": "Add color stop", children: jsx(PlusIcon, { className: "size-4" }) })] })), jsxs("div", { className: "flex items-center gap-2 border border-[var(--color-border)] rounded-lg px-3 py-2", children: [jsx("code", { className: "flex-1 text-xs font-mono text-[var(--color-text-secondary)] truncate", children: outputCSS }), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: handleCopy, "aria-label": "Copy gradient CSS", title: copied ? 'Copied!' : 'Copy CSS', children: copied ? (jsx(ClipboardDocumentCheckIcon, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardDocumentIcon, { className: "size-4" })) })] })] }));
+                        }, "aria-label": "Remove color stop", children: jsx(Trash, { className: "size-4" }) })), jsx(Button, { variant: "ghost", size: "sm", color: "mono", iconOnly: true, onClick: () => addGradientStop(50), "aria-label": "Add color stop", children: jsx(Plus, { className: "size-4" }) })] })), jsxs("div", { className: "flex items-center gap-2 border border-[var(--color-border)] rounded-lg px-3 py-2", children: [jsx("code", { className: "flex-1 text-xs font-mono text-[var(--color-text-secondary)] truncate", children: outputCSS }), jsx(Button, { variant: "ghost", size: "sm", color: "mono", iconOnly: true, onClick: handleCopy, "aria-label": "Copy gradient CSS", title: copied ? 'Copied!' : 'Copy CSS', children: copied ? (jsx(ClipboardText, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardText, { className: "size-4" })) })] })] }));
 };
 ColorPickerGradient.displayName = 'ColorPickerGradient';
 

package/dist/components/forms/ColorPicker/ColorPickerHeader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { XMarkIcon } from '@heroicons/react/20/solid';
+import { X } from '@phosphor-icons/react';
 import { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ColorPickerContext } from './ColorPickerContext.js';
@@ -25,7 +25,7 @@ const ColorPickerHeader = ({ modes = ['solid'], activeMode: activeModeFromProp,
     };
     return (jsxs("div", { className: cn('flex items-center justify-between border-b border-[var(--color-border)] -mx-4 -mt-4 px-4', className), ...props, children: [jsx("div", { className: "flex items-center gap-4", children: modes.map((mode) => (jsxs("button", { type: "button", onClick: () => handleModeChange(mode), className: cn('py-3 text-sm font-medium transition-colors relative cursor-pointer', activeMode === mode
                         ? 'text-[var(--color-primary)]'
-                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]'), "aria-selected": activeMode === mode, role: "tab", children: [modeLabels[mode], activeMode === mode && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)] rounded-full" }))] }, mode))) }), showClose && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-background-secondary)] cursor-pointer", "aria-label": "Close color picker", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
+                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]'), "aria-selected": activeMode === mode, role: "tab", children: [modeLabels[mode], activeMode === mode && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)] rounded-full" }))] }, mode))) }), showClose && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-background-secondary)] cursor-pointer", "aria-label": "Close color picker", children: jsx(X, { className: "size-5" }) }))] }));
 };
 ColorPickerHeader.displayName = 'ColorPickerHeader';
 

package/dist/components/forms/ColorPicker/ColorPickerImage.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ArrowUpTrayIcon, XMarkIcon } from '@heroicons/react/20/solid';
+import { UploadSimple, X } from '@phosphor-icons/react';
 import { useContext, useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
@@ -141,14 +141,14 @@ const ColorPickerImage = ({ className, ...props }) => {
             /* Upload dropzone */
             jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: cn('flex flex-col items-center justify-center gap-2 h-[200px] rounded-xl border-2 border-dashed cursor-pointer transition-colors', isDragOver
                     ? 'border-[var(--color-primary)] bg-[var(--color-primary-50)]'
-                    : 'border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-background-secondary)]'), children: [jsx(ArrowUpTrayIcon, { className: "size-8 text-[var(--color-text-muted)]" }), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: "Click or drag an image" }), jsx("div", { className: "text-xs text-[var(--color-text-placeholder)]", children: "PNG, JPG, SVG, WebP" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", "aria-label": "Upload image" })] })) : (
+                    : 'border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-background-secondary)]'), children: [jsx(UploadSimple, { className: "size-8 text-[var(--color-text-muted)]" }), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: "Click or drag an image" }), jsx("div", { className: "text-xs text-[var(--color-text-placeholder)]", children: "PNG, JPG, SVG, WebP" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", "aria-label": "Upload image" })] })) : (
             /* Canvas with color picking */
             jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "relative inline-block rounded-xl overflow-hidden ring-1 ring-inset ring-black/5", children: [jsx("canvas", { ref: canvasRef, onClick: handleCanvasClick, className: "cursor-crosshair block" }), cursorPos && (jsx("div", { className: "absolute w-5 h-5 border-2 border-white rounded-full pointer-events-none", style: {
                                     left: `${cursorPos.x}%`,
                                     top: `${cursorPos.y}%`,
                                     transform: 'translate(-50%, -50%)',
                                     boxShadow: '0 0 0 1.5px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.15)',
-                                }, children: pickedColor && (jsx("div", { className: "absolute inset-1 rounded-full", style: { backgroundColor: pickedColor } })) }))] }), jsxs("div", { className: "flex items-center justify-between", children: [pickedColor && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "size-5 rounded-full border border-[var(--color-border)]", style: { backgroundColor: pickedColor } }), jsx("span", { className: "text-xs font-mono text-[var(--color-text-secondary)]", children: pickedColor })] })), jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: handleClear, "aria-label": "Remove image", className: "ml-auto", children: [jsx(XMarkIcon, { className: "size-3.5" }), "Change"] })] })] })), !imageLoaded && jsx("canvas", { ref: canvasRef, className: "hidden" })] }));
+                                }, children: pickedColor && (jsx("div", { className: "absolute inset-1 rounded-full", style: { backgroundColor: pickedColor } })) }))] }), jsxs("div", { className: "flex items-center justify-between", children: [pickedColor && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "size-5 rounded-full border border-[var(--color-border)]", style: { backgroundColor: pickedColor } }), jsx("span", { className: "text-xs font-mono text-[var(--color-text-secondary)]", children: pickedColor })] })), jsxs(Button, { variant: "ghost", size: "sm", color: "mono", onClick: handleClear, "aria-label": "Remove image", className: "ml-auto", children: [jsx(X, { className: "size-3.5" }), "Change"] })] })] })), !imageLoaded && jsx("canvas", { ref: canvasRef, className: "hidden" })] }));
 };
 ColorPickerImage.displayName = 'ColorPickerImage';
 

package/dist/components/forms/ColorPicker/ColorPickerInput.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext, useState, useEffect } from 'react';
-import { ChevronUpDownIcon, ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
+import { CaretUpDown, ClipboardText } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
 import { ColorPickerContext } from './ColorPickerContext.js';
@@ -83,7 +83,7 @@ const ColorPickerInput = ({ className, ...props }) => {
     };
     // Get the current color as rgba for the swatch
     const swatchColor = `hsla(${color.h}, ${color.s}%, ${color.l}%, ${color.a})`;
-    return (jsxs("div", { className: cn("flex items-stretch border border-[var(--color-border)] rounded-lg overflow-hidden divide-x divide-[var(--color-border)]", className), ...props, children: [jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: cycleFormat, "aria-label": "Change color format", className: "!rounded-none !border-0 !px-3 !py-2 flex-shrink-0", children: [formatLabel, jsx(ChevronUpDownIcon, { className: "size-4 text-[var(--color-text-muted)]" })] }), jsxs("div", { className: "flex items-center gap-2 px-3 py-2 flex-1 min-w-0", children: [jsx("div", { className: "size-5 rounded-full flex-shrink-0 border border-[var(--color-border)]", style: { backgroundColor: swatchColor } }), jsx("input", { type: "text", value: format === 'hex' ? inputValue : getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: format !== 'hex', className: cn("flex-1 min-w-0 bg-transparent text-sm font-mono text-[var(--color-text-primary)] outline-none", isInvalid && "text-[var(--color-danger)]"), "aria-label": "Color value" }), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: handleCopy, "aria-label": "Copy color value", title: copied ? "Copied!" : "Copy color value", className: "!p-0 !size-auto flex-shrink-0", children: copied ? (jsx(ClipboardDocumentCheckIcon, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardDocumentIcon, { className: "size-4" })) })] }), showAlpha && (jsxs("div", { className: "flex items-center px-3 py-2 flex-shrink-0", children: [jsx("input", { type: "number", min: 0, max: 100, value: alphaPercent, onChange: handleAlphaChange, className: "w-10 bg-transparent text-sm text-[var(--color-text-primary)] text-center outline-none font-mono", "aria-label": "Opacity percentage" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "%" })] }))] }));
+    return (jsxs("div", { className: cn("flex items-stretch border border-[var(--color-border)] rounded-lg overflow-hidden divide-x divide-[var(--color-border)]", className), ...props, children: [jsxs(Button, { variant: "ghost", size: "sm", color: "mono", onClick: cycleFormat, "aria-label": "Change color format", className: "!rounded-none !border-0 !px-3 !py-2 flex-shrink-0", children: [formatLabel, jsx(CaretUpDown, { className: "size-4 text-[var(--color-text-muted)]" })] }), jsxs("div", { className: "flex items-center gap-2 px-3 py-2 flex-1 min-w-0", children: [jsx("div", { className: "size-5 rounded-full flex-shrink-0 border border-[var(--color-border)]", style: { backgroundColor: swatchColor } }), jsx("input", { type: "text", value: format === 'hex' ? inputValue : getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: format !== 'hex', className: cn("flex-1 min-w-0 bg-transparent text-sm font-mono text-[var(--color-text-primary)] outline-none", isInvalid && "text-[var(--color-danger)]"), "aria-label": "Color value" }), jsx(Button, { variant: "ghost", size: "sm", color: "mono", iconOnly: true, onClick: handleCopy, "aria-label": "Copy color value", title: copied ? "Copied!" : "Copy color value", className: "!p-0 !size-auto flex-shrink-0", children: copied ? (jsx(ClipboardText, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardText, { className: "size-4" })) })] }), showAlpha && (jsxs("div", { className: "flex items-center px-3 py-2 flex-shrink-0", children: [jsx("input", { type: "number", min: 0, max: 100, value: alphaPercent, onChange: handleAlphaChange, className: "w-10 bg-transparent text-sm text-[var(--color-text-primary)] text-center outline-none font-mono", "aria-label": "Opacity percentage" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "%" })] }))] }));
 };
 ColorPickerInput.displayName = "ColorPickerInput";