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

package/dist/components/core/shared/Ripple.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Shared press ripple for interactive surfaces (Button, NavItem, MenuItem,
+ * Pill, SelectableCard). One source of truth so every pressable surface in the
+ * library ripples with the same character — the sibling of `createPressVariants`
+ * in `interaction.animations.ts`.
+ *
+ * Drop it in as the LAST child of a host that is `relative`:
+ *
+ * ```tsx
+ * <button className="relative">
+ *   Save
+ *   <Ripple />
+ * </button>
+ * ```
+ *
+ * It wires itself: the layer reads its own `parentElement` and listens there,
+ * so the host never threads a handler or a ref. Clipping lives on the layer
+ * (`overflow-hidden rounded-[inherit]`), so the host does not need
+ * `overflow-hidden` of its own.
+ */
+/** Interactive elements that earn a ripple. See `isInteractive` below. */
+const INTERACTIVE_SELECTOR = [
+    "button",
+    "a[href]",
+    '[role="button"]',
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    '[role="option"]',
+    '[role="tab"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+/**
+ * A ripple is a press affordance, so it must only appear on something a user
+ * can actually press — including by keyboard. A bare `<div onClick>` has no
+ * role and no tab stop, so advertising interactivity on it would be the exact
+ * pattern CLAUDE.md §8b describes when it explains why Badge's click path was
+ * removed. Gating on the DOM (rather than on the presence of a handler) keeps
+ * that guarantee self-correcting: a host becomes rippleable by becoming
+ * accessible, not by passing a prop.
+ */
+function isInteractive(element) {
+    return element.matches(INTERACTIVE_SELECTOR);
+}
+/** Duration scales with reach — a fixed value crosses a large surface far too fast. */
+const MIN_DURATION = 0.35;
+const MAX_DURATION = 0.7;
+const DURATION_DIVISOR = 500;
+function durationForRadius(radius) {
+    return Math.min(MAX_DURATION, Math.max(MIN_DURATION, radius / DURATION_DIVISOR));
+}
+const Ripple = ({ disabled = false, className }) => {
+    const layerRef = useRef(null);
+    const [ripples, setRipples] = useState([]);
+    const shouldReduceMotion = useReducedMotion();
+    // Monotonic ids. Date.now() collides when two presses land in the same
+    // millisecond, which produced duplicate React keys in the previous
+    // Button-only implementation.
+    const nextId = useRef(0);
+    // Read through refs inside the listener so the effect below subscribes once
+    // per host rather than re-subscribing whenever these flip.
+    const disabledRef = useRef(disabled);
+    disabledRef.current = disabled;
+    const reducedMotionRef = useRef(shouldReduceMotion);
+    reducedMotionRef.current = shouldReduceMotion;
+    // Dev warning fires at most once per host, not once per press.
+    const warnedRef = useRef(false);
+    useEffect(() => {
+        const layer = layerRef.current;
+        const host = layer === null || layer === void 0 ? void 0 : layer.parentElement;
+        if (!host)
+            return;
+        // NOTE: no runtime check that the host is positioned. jsdom does not
+        // process Tailwind, so `getComputedStyle(host).position` reads "static"
+        // for a `relative` host in every test — a warning there is pure noise for
+        // us and for consumers. The `relative` contract is documented above and
+        // enforced by review.
+        // `pointerdown` rather than `click` on purpose: it fires on press instead
+        // of release, and a keyboard Enter/Space never produces one — so ripples
+        // are pointer-only without any synthetic-click sniffing.
+        const handlePointerDown = (event) => {
+            if (disabledRef.current || reducedMotionRef.current)
+                return;
+            if (host.hasAttribute("disabled") || host.getAttribute("aria-disabled") === "true")
+                return;
+            // Checked per press, not once on mount: a host's interactivity is not
+            // static (SelectableCard drops to tabIndex={-1} while disabled), and a
+            // mount-time gate would leave the listener permanently detached for any
+            // host that starts non-interactive and later becomes pressable.
+            if (!isInteractive(host)) {
+                if (process.env.NODE_ENV !== "production" && !warnedRef.current) {
+                    warnedRef.current = true;
+                    // eslint-disable-next-line no-console
+                    console.warn("[Ripple]: host is not an interactive element (needs a button/link role or a tab stop) — no ripple will render.");
+                }
+                return;
+            }
+            const rect = host.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // Reach the farthest corner, so the ripple always covers the host.
+            const dx = Math.max(x, rect.width - x);
+            const dy = Math.max(y, rect.height - y);
+            const radius = Math.hypot(dx, dy);
+            if (radius === 0)
+                return;
+            setRipples((prev) => [...prev, { id: nextId.current++, x, y, radius }]);
+        };
+        host.addEventListener("pointerdown", handlePointerDown);
+        return () => host.removeEventListener("pointerdown", handlePointerDown);
+    }, []);
+    const removeRipple = useCallback((id) => {
+        setRipples((prev) => prev.filter((ripple) => ripple.id !== id));
+    }, []);
+    // The layer always mounts, even under reduced motion — the listener bails on
+    // `reducedMotionRef` instead. Returning null here would leave the effect
+    // above bound against a null ref, so a user turning reduced motion off
+    // mid-session would get no ripple until the host remounted.
+    return (jsx("span", { ref: layerRef, "aria-hidden": "true", "data-flikkui-ripple": "", className: "absolute inset-0 overflow-hidden rounded-[inherit] pointer-events-none", children: ripples.map((ripple) => (jsx(motion.span, { "data-flikkui-ripple-circle": "", initial: { scale: 0, opacity: 0.2 }, animate: { scale: 1, opacity: 0 }, transition: {
+                duration: durationForRadius(ripple.radius),
+                ease: "easeOut",
+            }, onAnimationComplete: () => removeRipple(ripple.id), 
+            // Geometry is per-press, so it goes through `style` — an
+            // interpolated class name would not exist in the shipped CSS
+            // (CLAUDE.md §3).
+            style: {
+                width: ripple.radius * 2,
+                height: ripple.radius * 2,
+                left: ripple.x - ripple.radius,
+                top: ripple.y - ripple.radius,
+            }, className: cn("absolute rounded-full bg-current", className) }, ripple.id))) }));
+};
+Ripple.displayName = "Ripple";
+
+export { Ripple };

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

@@ -1,18 +1,18 @@
 const ganttChartTheme = {
     baseStyle: "flex flex-col w-full overflow-hidden rounded-[var(--gantt-chart-radius)] border border-[var(--color-border)] bg-[var(--color-background)] text-sm shadow-sm",
-    toolbarStyle: "flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
+    toolbarStyle: "flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-surface)]/80",
     tablePanelStyle: "flex flex-col shrink-0 overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-background)]",
     chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
-    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
+    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-surface)]/80",
     tableHeaderCellStyle: "px-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-muted)] truncate",
-    tableGroupRowStyle: "flex items-center cursor-pointer select-none border-b border-[var(--color-border)]/30 bg-[var(--color-background-secondary)]/35 hover:bg-[var(--color-background-secondary)] transition-colors",
-    tableTaskRowStyle: "flex items-center border-b border-[var(--color-border)]/20 hover:bg-[var(--color-background-secondary)]/70 transition-colors",
+    tableGroupRowStyle: "flex items-center cursor-pointer select-none border-b border-[var(--color-border)]/30 bg-[var(--color-surface)]/35 hover:bg-[var(--color-surface)] transition-colors",
+    tableTaskRowStyle: "flex items-center border-b border-[var(--color-border)]/20 hover:bg-[var(--color-surface)]/70 transition-colors",
     tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
     timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)] shadow-[0_1px_0_var(--color-border)]",
-    timelineMonthStyle: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center bg-[var(--color-background-secondary)]/45",
+    timelineMonthStyle: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center bg-[var(--color-surface)]/45",
     timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center border-r border-[var(--color-border)]/20",
     gridLineStyle: "border-r border-[var(--color-border)]/20",
-    weekendStyle: "bg-[var(--color-background-secondary)]/35",
+    weekendStyle: "bg-[var(--color-surface)]/35",
     todayMarkerStyle: "bg-[var(--color-primary)] w-0.5",
     todayColumnStyle: "bg-[var(--color-primary)]/10",
     taskBarStyle: "absolute cursor-pointer flex items-center overflow-hidden shadow-sm ring-1 ring-black/10",

package/dist/components/data-display/GanttChart/GanttTaskBar.js

@@ -5,7 +5,7 @@ import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { getDayOffset, calculateExpectedProgress, formatDateShort, formatDuration } from './GanttChart.utils.js';
-import { ChartTooltip } from '../../charts/shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
 import { taskBarVariants } from './GanttChart.animations.js';

package/dist/components/data-display/GanttChart/GanttTimelineHeader.js

@@ -61,7 +61,7 @@ const GanttTimelineHeader = ({ days, monthSpans, }) => {
     return (jsxs("div", { className: cn(theme.timelineHeaderStyle), style: { width: totalWidth }, children: [jsx("div", { className: "flex", style: { height: 28 }, children: headerSpans.map((span) => (jsx("div", { className: cn(theme.timelineMonthStyle), style: { width: span.span * dayWidth }, children: span.label }, `${span.label}-${span.startIndex}`))) }), jsx("div", { className: "flex", style: { height: 28 }, children: days.map((day, i) => {
                     const isToday = isSameDay(day, today);
                     const weekend = isWeekend(day);
-                    return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-background-secondary)]/50", isToday && "font-semibold text-[var(--color-primary)]"), style: { width: dayWidth }, children: getDayLabel(day, zoom) }, i));
+                    return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-surface)]/50", isToday && "font-semibold text-[var(--color-primary)]"), style: { width: dayWidth }, children: getDayLabel(day, zoom) }, i));
                 }) })] }));
 };
 

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -5,7 +5,6 @@ import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChartContext.js';
 import { Segmented } from '../../core/Segmented/Segmented.js';
 import { Button } from '../../core/Button/Button.js';
-import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 
 const ZOOM_OPTIONS = [

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
-import { motion } from 'motion/react';
 import { ArrowUpRight, ArrowDownRight } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
+import { Progress } from '../../core/Progress/Progress.js';
 import { kpiTheme } from './KPI.theme.js';
 
 const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, subtitle, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
@@ -32,28 +32,19 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
             : trend < 0
                 ? "down"
                 : "neutral";
-    // Calculate filled bar count from progress
-    const filledBars = useMemo(() => {
-        if (progress === undefined)
-            return 0;
-        return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
-    }, [progress, barCount]);
-    const barSize = kpiTheme.barSizes[size];
+    // KPI owns its own bar geometry; hand it to Progress as segment sizing.
+    // (`width` predates the flex-1 cells and is unused.)
+    const segmentSizes = useMemo(() => Object.fromEntries(Object.entries(kpiTheme.barSizes).map(([key, { height, gap }]) => [
+        key,
+        { height, gap },
+    ])), []);
     return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label &&
                                 (typeof label === "string" ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : (label))] }), formattedTrend &&
                         trendDirection &&
-                        (typeof formattedTrend === "string" ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && (jsx(ArrowUpRight, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRight, { className: "size-4" }))] })) : (formattedTrend))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
-                    const isFilled = i < filledBars;
-                    const fadeDistance = filledBars - i;
-                    const fillOpacity = isFilled && fadeDistance <= 3
-                        ? 0.4 + (fadeDistance / 3) * 0.6
-                        : 1;
-                    return (jsx("div", { className: cn("relative rounded-sm flex-1", barSize.height, theme.barEmptyColor), children: isFilled && (jsx(motion.div, { className: cn("absolute inset-0 rounded-sm", theme.barFilledColors[color]), initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
-                                duration: 0.25,
-                                ease: "easeOut",
-                                delay: i * 0.03,
-                            } })) }, i));
-                }) })), subtitle &&
+                        (typeof formattedTrend === "string" ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && (jsx(ArrowUpRight, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRight, { className: "size-4" }))] })) : (formattedTrend))] }), progress !== undefined && (jsx(Progress, { value: progress, segments: barCount, segmentFade: true, size: size, className: theme.barFilledColors[color], "aria-label": `Progress: ${progress}%`, theme: {
+                    segmentEmptyStyle: theme.barEmptyColor,
+                    segmentSizes,
+                } })), subtitle &&
                 (typeof subtitle === "string" ? (jsx("span", { className: cn(theme.subtitleStyle), children: subtitle })) : (subtitle))] }));
 });
 KPI.displayName = "KPI";

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

@@ -3,9 +3,9 @@ import { semanticBgColors } from '../../../utils/colorUtils.js';
 const kpiTheme = {
     baseStyle: "flex flex-col gap-3",
     valueSizes: {
-        sm: "text-[length:var(--kpi-value-size-sm)] leading-[1.4] font-bold text-[var(--color-text-primary)]",
-        md: "text-[length:var(--kpi-value-size-md)] leading-[1.333] font-bold text-[var(--color-text-primary)]",
-        lg: "text-[length:var(--kpi-value-size-lg)] leading-[1.2] font-bold text-[var(--color-text-primary)]",
+        sm: "text-[length:var(--kpi-value-size-sm)]/[var(--kpi-value-line-height-sm)] font-bold text-[var(--color-text-primary)]",
+        md: "text-[length:var(--kpi-value-size-md)]/[var(--kpi-value-line-height-md)] font-bold text-[var(--color-text-primary)]",
+        lg: "text-[length:var(--kpi-value-size-lg)]/[var(--kpi-value-line-height-lg)] font-bold text-[var(--color-text-primary)]",
     },
     labelStyle: "text-[var(--color-text-primary)] font-medium",
     labelSizes: {
@@ -23,7 +23,11 @@ const kpiTheme = {
     },
     barFilledColors: {
         ...semanticBgColors,
-        mono: "bg-[var(--color-text-secondary)]",
+        // The gray role, not a text token (§8: never paint a fill with --color-text-*).
+        // These bars carry no text, so they take the role's own weight rather than a
+        // -contrast pairing; --color-mono is the mono token that flips per mode
+        // (900 light / 200 dark), which a fixed ramp rung would not.
+        mono: "bg-[var(--color-mono)]",
     },
     barEmptyColor: "bg-[var(--color-surface-sunken)]",
     barSizes: {

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

@@ -10,7 +10,7 @@ const metricTheme = {
     // --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)]",
+    baseStyle: "transition-colors duration-[var(--motion-duration-base)] 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
@@ -54,9 +54,9 @@ const metricTheme = {
     // 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]",
+        sm: "text-[length:var(--metric-value-size-sm)]/[var(--metric-value-line-height-sm)]",
+        md: "text-[length:var(--metric-value-size-md)]/[var(--metric-value-line-height-md)]",
+        lg: "text-[length:var(--metric-value-size-lg)]/[var(--metric-value-line-height-lg)]",
     },
     subtitleSizes: { sm: "text-xs mt-1", md: "text-xs mt-0.5", lg: "text-sm mt-1" },
     // Common element styles

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

@@ -45,7 +45,7 @@ const tableTheme = {
             // <tr> (inset shadow) so a shifted cell can't drag a notch into it.
             "[&>tbody>tr>td]:border-b-0 " +
             "[&>tbody>tr]:shadow-[inset_0_-1px_0_0_var(--color-border)] [&>tbody>tr:last-child]:shadow-none " +
-            "[&>tbody>tr>td]:transition-transform [&>tbody>tr>td]:duration-300 " +
+            "[&>tbody>tr>td]:transition-transform [&>tbody>tr>td]:duration-[var(--motion-duration-slow)] " +
             // first cell eases right (its left padding); last cell eases left only when
             // right-aligned (matches `pr-4` — invisible on left-aligned content).
             "[&>tbody>tr:hover>td:first-child]:translate-x-2 " +
@@ -60,7 +60,7 @@ const tableTheme = {
         "text-[var(--color-text-primary)] ",
     // 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 " +
+    rowStyle: "group transition-all duration-[var(--motion-duration-slow)] relative " +
         "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

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

@@ -5,7 +5,6 @@ import '../../core/Popover/PopoverContext.js';
 import '../../core/Popover/PopoverBody.js';
 import { Gear } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
-import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 
@@ -19,7 +18,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: "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" }) })] }) })] }));
+    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-surface)]' : ''}`, 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-surface)]' : ''}`, 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/TableContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 import { tableTheme } from './Table.theme.js';
 

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

@@ -35,7 +35,11 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
             label: opt.label,
             value: opt.value,
         }));
-        return (jsx(Select, { value: filter.value, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select..." }));
+        return (jsx(Select, { 
+            // Options are SelectOption<string>, so only a string is selectable here;
+            // FilterValue is wider (number | boolean | string[]) and those states
+            // simply mean "nothing selected" for this control.
+            value: typeof filter.value === "string" ? filter.value : undefined, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select..." }));
     }
     // MultiSelect filter type
     if (filterType === "multiSelect" && (column === null || column === void 0 ? void 0 : column.filterOptions)) {
@@ -44,7 +48,10 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
             label: opt.label,
             value: opt.value,
         }));
-        return (jsx(Select, { value: filter.value, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select...", multiple: true }));
+        return (jsx(Select, { 
+            // `multiple` makes the value an array; FilterValue is wider than that,
+            // so narrow rather than letting a scalar reach a multi-select.
+            value: Array.isArray(filter.value) ? filter.value : [], onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select...", multiple: true }));
     }
     // Date filter type
     if (filterType === "date") {

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

@@ -2,9 +2,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { X } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
-import 'react';
 import { Link } from '../../core/Link/Link.js';
 import { cn } from '../../../utils/cn.js';
+import 'react';
 
 /**
  * Selection header that appears when rows are selected

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

@@ -18,7 +18,7 @@ const timelineTheme = {
     // Completed connector color (overrides the base connector background)
     connectorCompletedStyle: "bg-[var(--color-success)]",
     // Marker base styles (shared across statuses)
-    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200 ring-4 ring-[var(--color-surface)] backdrop-blur-sm",
+    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-[var(--motion-duration-base)] ring-4 ring-[var(--color-surface)] backdrop-blur-sm",
     // Marker status-specific styles
     markerStatuses: {
         completed: "size-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",

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

@@ -27,7 +27,7 @@ export declare const CustomCursorProvider: React.ForwardRefExoticComponent<Omit<
  * @example
  * ```tsx
  * <CustomCursor size="md" color="primary" variant="glass">
- *   <PaperAirplaneIcon />
+ *   <PaperPlaneTilt />
  * </CustomCursor>
  * ```
  */

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

@@ -122,7 +122,7 @@ CustomCursorProvider.displayName = "CustomCursorProvider";
  * @example
  * ```tsx
  * <CustomCursor size="md" color="primary" variant="glass">
- *   <PaperAirplaneIcon />
+ *   <PaperPlaneTilt />
  * </CustomCursor>
  * ```
  */

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

@@ -4,13 +4,13 @@
  */
 const customCursorTheme = {
     baseStyle: "pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]",
-    cursorStyle: "transition-transform duration-150",
+    cursorStyle: "transition-transform duration-[var(--motion-duration-fast)]",
     cursorFollowVariants: {
-        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
+        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-surface)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
         user: "flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl",
     },
     cursorFollowColors: {
-        mono: "bg-[var(--color-background-secondary)]",
+        mono: "bg-[var(--color-surface)]",
         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: {
-        mono: "text-[var(--color-background-secondary)]",
+        mono: "text-[var(--color-surface)]",
         dark: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)]",
         success: "text-[var(--color-success)]",

package/dist/components/effects/Neumorphic/InsetCircleButton.js

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import 'react';
 
 function InsetCircleButton({ children, size = 44, className, classNameDisc, classNameHover, onClick, }) {
-    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, onClick: onClick, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
+    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, onClick: onClick, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--motion-duration-slow)]", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
 }
 
 export { InsetCircleButton };

package/dist/components/effects/Overlay/Overlay.js

@@ -157,15 +157,19 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
                 unlockScroll();
                 hasLockedScroll.current = false;
             }
-        }, children: isOpen && (jsxs(motion.div, { className: cn(isDarkMode && "dark", overlayTheme.backdrop, overlayPositionVariants[position], overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, children: [jsx("div", { className: overlayTheme.pattern, style: {
+        }, children: isOpen && (jsxs(motion.div, { className: cn(overlayTheme.backdrop, overlayPositionVariants[position], overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, children: [jsx("div", { className: overlayTheme.pattern, style: {
                         backgroundImage: "radial-gradient(circle, rgba(250,250,250,0.08) 1.5px, transparent 1.5px)",
                         backgroundSize: "30px 30px",
                         maskImage: "radial-gradient(ellipse at center, black 0%, transparent 70%)",
                         WebkitMaskImage: "radial-gradient(ellipse at center, black 0%, transparent 70%)",
-                    } }), jsx(motion.div, { ref: mergedRef, className: cn(overlayTheme.content, contentClassName), style: contentStyle, variants: finalContentAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, onClick: (e) => e.stopPropagation(), ...(role ? { role } : {}), ...(ariaModal ? { "aria-modal": true } : {}), ...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), ...(ariaDescribedBy
+                    } }), jsx(motion.div, { ref: mergedRef, className: cn(overlayTheme.content, contentClassName), style: contentStyle, variants: finalContentAnimations, 
+                    // Inherit the parent's variant label so backdrop and panel form one
+                    // coordinated animation tree. Explicit controls here would opt the
+                    // panel out of the parent's enter/exit orchestration.
+                    transition: instantTransition, onClick: (e) => e.stopPropagation(), ...(role ? { role } : {}), ...(ariaModal ? { "aria-modal": true } : {}), ...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), ...(ariaDescribedBy
                         ? { "aria-describedby": ariaDescribedBy }
                         : {}), children: children })] })) }));
-    return createPortal(content, target);
+    return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: content }), target);
 });
 Overlay.displayName = "Overlay";
 

package/dist/components/effects/index.d.ts

@@ -1,21 +1,13 @@
 export { CustomCursorProvider, CustomCursor, CustomCursorFollow, useCustomCursor } from "./CustomCursor";
 export type { CustomCursorProps, CustomCursorProviderProps, CustomCursorFollowProps, CustomCursorContextType, CustomCursorSize, CustomCursorColor, CustomCursorVariant, CustomCursorShape, CustomCursorTheme, CustomCursorThemeOverrides, } from "./CustomCursor";
-export { GlassEffect } from "./GlassEffect";
-export type { GlassEffectProps, BlendMode } from "./GlassEffect";
 export { Overlay } from "./Overlay";
 export type { OverlayProps, OverlayPosition, OverlayAnimations, } from "./Overlay";
-export { GlassSurface } from "./GlassSurface";
-export type { GlassSurfaceProps, GlassChannel, GlassMixBlendMode, } from "./GlassSurface";
 export { Animated } from "./Animated";
 export type { AnimatedGroupProps, AnimatedItemProps, AnimationPreset, AnimatedElement, } from "./Animated";
 export { ProgressiveBlur } from "./ProgressiveBlur";
 export type { ProgressiveBlurProps, ProgressiveBlurPosition, ProgressiveBlurThemeOverrides, } from "./ProgressiveBlur";
 export { Aurora } from "./Aurora";
 export type { AuroraProps } from "./Aurora";
-export { MagneticElement } from "./MagneticElement";
-export type { MagneticElementProps } from "./MagneticElement";
-export { GridPattern } from "./GridPattern";
-export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern";
 export { DotPattern } from "./DotPattern";
 export type { DotPatternProps, DotPatternFadeDirection, } from "./DotPattern";
 export { StripePattern } from "./StripePattern";
@@ -45,35 +37,11 @@ export { Dithering } from "./Dithering";
 export type { DitheringProps, DitheringShape, DitheringType } from "./Dithering";
 export { GradientMesh } from "./GradientMesh";
 export type { GradientMeshProps } from "./GradientMesh";
-export { StaticGradientMesh } from "./StaticGradientMesh";
-export type { StaticGradientMeshProps } from "./StaticGradientMesh";
 export { StaticRadialGradient } from "./StaticRadialGradient";
 export type { StaticRadialGradientProps } from "./StaticRadialGradient";
-export { Metaballs } from "./Metaballs";
-export type { MetaballsProps } from "./Metaballs";
-export { ColorPanels } from "./ColorPanels";
-export type { ColorPanelsProps } from "./ColorPanels";
-export { SmokeRing } from "./SmokeRing";
-export type { SmokeRingProps } from "./SmokeRing";
-export { GodRays } from "./GodRays";
-export type { GodRaysProps } from "./GodRays";
 export { GrainGradient } from "./GrainGradient";
 export type { GrainGradientProps, GrainGradientShape } from "./GrainGradient";
-export { PulsingBorder } from "./PulsingBorder";
-export type { PulsingBorderProps } from "./PulsingBorder";
 export { LiquidMetal } from "./LiquidMetal";
 export type { LiquidMetalProps, LiquidMetalShape } from "./LiquidMetal";
 export { GemSmoke } from "./GemSmoke";
 export type { GemSmokeProps, GemSmokeShape } from "./GemSmoke";
-export { Water } from "./Water";
-export type { WaterProps } from "./Water";
-export { ImageDithering } from "./ImageDithering";
-export type { ImageDitheringProps, ImageDitheringType } from "./ImageDithering";
-export { PaperTexture } from "./PaperTexture";
-export type { PaperTextureProps } from "./PaperTexture";
-export { FlutedGlass } from "./FlutedGlass";
-export type { FlutedGlassProps, FlutedGlassShape, FlutedGlassDistortionShape, } from "./FlutedGlass";
-export { HalftoneDots } from "./HalftoneDots";
-export type { HalftoneDotsProps, HalftoneDotsType, HalftoneDotsGrid, } from "./HalftoneDots";
-export { HalftoneCmyk } from "./HalftoneCmyk";
-export type { HalftoneCmykProps } from "./HalftoneCmyk";

package/dist/components/effects/index.js

@@ -1,12 +1,8 @@
 export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor } from './CustomCursor/CustomCursor.js';
-export { GlassEffect } from './GlassEffect/GlassEffect.js';
 export { Overlay } from './Overlay/Overlay.js';
-export { GlassSurface } from './GlassSurface/GlassSurface.js';
 export { Animated } from './Animated/Animated.js';
 export { ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
 export { Aurora } from './Aurora/Aurora.js';
-export { MagneticElement } from './MagneticElement/MagneticElement.js';
-export { GridPattern } from './GridPattern/GridPattern.js';
 export { DotPattern } from './DotPattern/DotPattern.js';
 export { StripePattern } from './StripePattern/StripePattern.js';
 export { NoiseOverlay } from './NoiseOverlay/NoiseOverlay.js';
@@ -23,19 +19,7 @@ export { DEFAULT_MESH_COLORS, MESH_PALETTES, getMeshTextTone, pickPalette } from
 export { Shimmer } from './Shimmer/Shimmer.js';
 export { Dithering } from './Dithering/Dithering.js';
 export { GradientMesh } from './GradientMesh/GradientMesh.js';
-export { StaticGradientMesh } from './StaticGradientMesh/StaticGradientMesh.js';
 export { StaticRadialGradient } from './StaticRadialGradient/StaticRadialGradient.js';
-export { Metaballs } from './Metaballs/Metaballs.js';
-export { ColorPanels } from './ColorPanels/ColorPanels.js';
-export { SmokeRing } from './SmokeRing/SmokeRing.js';
-export { GodRays } from './GodRays/GodRays.js';
 export { GrainGradient } from './GrainGradient/GrainGradient.js';
-export { PulsingBorder } from './PulsingBorder/PulsingBorder.js';
 export { LiquidMetal } from './LiquidMetal/LiquidMetal.js';
 export { GemSmoke } from './GemSmoke/GemSmoke.js';
-export { Water } from './Water/Water.js';
-export { ImageDithering } from './ImageDithering/ImageDithering.js';
-export { PaperTexture } from './PaperTexture/PaperTexture.js';
-export { FlutedGlass } from './FlutedGlass/FlutedGlass.js';
-export { HalftoneDots } from './HalftoneDots/HalftoneDots.js';
-export { HalftoneCmyk } from './HalftoneCmyk/HalftoneCmyk.js';

package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.d.ts

@@ -4,8 +4,6 @@ import type { ShaderCanvasProps } from "./ShaderCanvas.types";
  * Minimal raw WebGL2 canvas renderer for fullscreen fragment shaders.
  * - Built-in uniforms: iTime (float), iResolution (vec2)
  * - Custom uniforms read from `uniformsRef` each frame (no stale closures)
- * - Optional sampler2D uniforms read from `texturesRef` (image loading,
- *   texture upload, mipmaps, transparent-pixel placeholder while unset/loading)
  * - ResizeObserver for responsive canvas sizing
  * - rAF animation loop, paused while the tab is hidden, with cleanup on unmount
  * - Graceful degradation: renders nothing if WebGL2 unavailable