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

package/dist/components/core/OfflineIndicator/OfflineIndicator.animations.d.ts

@@ -0,0 +1,22 @@
+import type { Variants } from "motion/react";
+import type { OfflineIndicatorPosition, OfflineIndicatorVariant } from "./OfflineIndicator.types";
+/**
+ * Custom spring preset for offline indicator to give it a satisfying, subtle bounce.
+ */
+export declare const indicatorSpring: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Generates context-aware animation variants for OfflineIndicator.
+ * Dynamically adjusts translation side/axis based on screen placement.
+ */
+/**
+ * Fade-only variants for prefers-reduced-motion users — the status pill
+ * still appears/disappears (it's a role="status" signal), just without
+ * translation, scale, or bounce.
+ */
+export declare const reducedMotionIndicatorVariants: Variants;
+export declare const getOfflineIndicatorVariants: (position: OfflineIndicatorPosition, variant: OfflineIndicatorVariant) => Variants;

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

@@ -0,0 +1,54 @@
+"use client";
+/**
+ * Custom spring preset for offline indicator to give it a satisfying, subtle bounce.
+ */
+const indicatorSpring = {
+    type: "spring",
+    stiffness: 260,
+    damping: 26,
+    mass: 1,
+};
+/**
+ * Generates context-aware animation variants for OfflineIndicator.
+ * Dynamically adjusts translation side/axis based on screen placement.
+ */
+/**
+ * Fade-only variants for prefers-reduced-motion users — the status pill
+ * still appears/disappears (it's a role="status" signal), just without
+ * translation, scale, or bounce.
+ */
+const reducedMotionIndicatorVariants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1, transition: { duration: 0.15 } },
+    exit: { opacity: 0, transition: { duration: 0.15 } },
+};
+const getOfflineIndicatorVariants = (position, variant) => {
+    const isTop = position.startsWith("top");
+    // Toast variants slide and scale, Banner variants just slide to maintain bleed styling
+    const yOffset = isTop ? -24 : 24;
+    const initialScale = variant === "banner" ? 1 : 0.92;
+    return {
+        initial: {
+            opacity: 0,
+            y: yOffset,
+            scale: initialScale,
+        },
+        animate: {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            transition: indicatorSpring,
+        },
+        exit: {
+            opacity: 0,
+            y: yOffset,
+            scale: initialScale,
+            transition: {
+                duration: 0.18,
+                ease: "easeIn",
+            },
+        },
+    };
+};
+
+export { getOfflineIndicatorVariants, indicatorSpring, reducedMotionIndicatorVariants };

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

@@ -1,13 +1,19 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useMemo } from 'react';
-import { SignalSlashIcon, CheckCircleIcon } from '@heroicons/react/24/solid';
-import { AnimatePresence, motion } from 'motion/react';
+import { WifiSlash, CheckCircle } from '@phosphor-icons/react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useNetworkStatus } from '../../../hooks/useNetworkStatus.js';
 import { getDefaultQueue } from '../../../utils/actionQueue.js';
+import { Link } from '../Link/Link.js';
+import { reducedMotionIndicatorVariants, getOfflineIndicatorVariants } from './OfflineIndicator.animations.js';
 import { offlineIndicatorTheme } from './OfflineIndicator.theme.js';
 
+const isOfflineIndicatorAction = (action) => typeof action === "object" &&
+    action !== null &&
+    "label" in action &&
+    "onClick" in action;
 /**
  * OfflineIndicator - Visual indicator for offline status
  *
@@ -21,9 +27,10 @@ import { offlineIndicatorTheme } from './OfflineIndicator.theme.js';
  * // Custom position and variant
  * <OfflineIndicator position="bottom-right" variant="badge" />
  */
-const OfflineIndicator = React__default.forwardRef(({ position = "top", showQueueCount = false, queue, variant = "toast", autoHideOnline = true, autoHideDelay = 5000, offlineMessage = "You're offline", onlineMessage = "Back online", className, }, ref) => {
-    var _a, _b;
+const OfflineIndicator = React__default.forwardRef(({ position = "top", showQueueCount = false, queue, variant = "toast", autoHideOnline = true, autoHideDelay = 5000, offlineMessage = "You're offline", onlineMessage = "Back online", action, className, }, ref) => {
+    var _a, _b, _c;
     const theme = offlineIndicatorTheme;
+    const shouldReduceMotion = useReducedMotion();
     const { isOnline, wasOffline } = useNetworkStatus();
     const [isVisible, setIsVisible] = useState(false);
     const [queueSize, setQueueSize] = useState(0);
@@ -73,29 +80,21 @@ const OfflineIndicator = React__default.forwardRef(({ position = "top", showQueu
         autoHideOnline,
         autoHideDelay,
     ]);
-    // Animation variants
-    const animationVariants = useMemo(() => ({
-        initial: {
-            opacity: 0,
-            y: position.startsWith("top") ? -20 : 20,
-            scale: 0.95,
-        },
-        animate: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-        },
-        exit: {
-            opacity: 0,
-            y: position.startsWith("top") ? -20 : 20,
-            scale: 0.95,
-        },
-    }), [position]);
+    // Animation variants — fade-only under prefers-reduced-motion (§12)
+    const animationVariants = useMemo(() => shouldReduceMotion
+        ? reducedMotionIndicatorVariants
+        : getOfflineIndicatorVariants(position, variant), [shouldReduceMotion, position, variant]);
     const isOffline = !isOnline;
-    const Icon = isOffline ? SignalSlashIcon : CheckCircleIcon;
+    const Icon = isOffline ? WifiSlash : CheckCircle;
     const message = isOffline ? offlineMessage : onlineMessage;
     const stateStyle = isOffline ? theme.offline : theme.online;
-    return (jsx(AnimatePresence, { children: isVisible && (jsxs(motion.div, { ref: ref, initial: "initial", animate: "animate", exit: "exit", variants: animationVariants, transition: { duration: 0.2, ease: "easeOut" }, className: cn(theme.base, (_a = theme.positions) === null || _a === void 0 ? void 0 : _a[position], (_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant], stateStyle, className), role: "status", "aria-live": "polite", children: [jsx(Icon, { className: theme.icon, "aria-hidden": "true" }), jsxs("span", { className: theme.message, children: [message, showQueueCount && queueSize > 0 && isOffline && (jsxs("span", { className: theme.queueCount, children: ["(", queueSize, " action", queueSize !== 1 ? "s" : "", " queued)"] }))] })] })) }));
+    // No `layout` on the root motion.div: its FLIP transform would fight the
+    // y/scale enter/exit variants on the same element (the documented
+    // concurrent layout+transform trap). Content-size changes animate via the
+    // children's layout="position" instead.
+    return (jsx(AnimatePresence, { children: isVisible && (jsxs(motion.div, { ref: ref, initial: "initial", animate: "animate", exit: "exit", variants: animationVariants, className: cn(theme.base, variant === "banner"
+                ? (_a = theme.bannerPositions) === null || _a === void 0 ? void 0 : _a[position]
+                : (_b = theme.positions) === null || _b === void 0 ? void 0 : _b[position], (_c = theme.variants) === null || _c === void 0 ? void 0 : _c[variant], stateStyle, className), role: "status", "aria-live": "polite", children: [jsx("div", { className: "relative size-3.5 flex-shrink-0", children: jsx(AnimatePresence, { mode: "popLayout", children: jsx(motion.div, { initial: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.5, rotate: -45 }, animate: shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, rotate: 0 }, exit: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.5, rotate: 45 }, transition: { duration: 0.25 }, className: "absolute inset-0 flex items-center justify-center", children: jsx(Icon, { className: "size-full", "aria-hidden": "true" }) }, isOffline ? "offline" : "online") }) }), jsxs(motion.span, { layout: shouldReduceMotion ? false : "position", className: theme.message, children: [message, jsx(AnimatePresence, { mode: "popLayout", children: showQueueCount && queueSize > 0 && isOffline && (jsxs(motion.span, { initial: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.8 }, animate: shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }, exit: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.8 }, transition: { duration: 0.18 }, className: theme.queueCount, children: ["(", queueSize, " action", queueSize !== 1 ? "s" : "", " queued)"] })) })] }), jsx(AnimatePresence, { children: action != null && isOffline && (jsx(motion.div, { layout: shouldReduceMotion ? false : "position", initial: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.9 }, animate: shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }, exit: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.9 }, transition: { duration: 0.2 }, className: "inline-flex items-center flex-shrink-0", children: isOfflineIndicatorAction(action) ? (jsx(Link, { size: "sm", onClick: action.onClick, className: theme.action, children: action.label })) : (action) })) })] })) }));
 });
 OfflineIndicator.displayName = "OfflineIndicator";
 

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

@@ -1,5 +1,5 @@
 const offlineIndicatorTheme = {
-    base: "fixed z-50 flex items-center gap-2 transition-all duration-300 select-none ",
+    base: "fixed z-50 flex items-center gap-1.5 transition-colors duration-300 select-none",
     positions: {
         top: "top-4 left-1/2 -translate-x-1/2",
         bottom: "bottom-4 left-1/2 -translate-x-1/2",
@@ -8,14 +8,33 @@ const offlineIndicatorTheme = {
         "bottom-left": "bottom-4 left-4",
         "bottom-right": "bottom-4 right-4",
     },
+    // Banner is an edge-to-edge bar, so it collapses every position to the
+    // flush viewport edge — only the top/bottom half of `position` matters.
+    bannerPositions: {
+        top: "top-0",
+        bottom: "bottom-0",
+        "top-left": "top-0",
+        "top-right": "top-0",
+        "bottom-left": "bottom-0",
+        "bottom-right": "bottom-0",
+    },
     variants: {
-        banner: "w-full left-0 right-0 px-4 py-1 justify-center rounded-none shadow-real-lg",
-        toast: "px-3 py-2 rounded-[var(--radius-base)] shadow-real-lg",
+        // translate-x-0 cancels the centered positions' -translate-x-1/2 (cn's
+        // tailwind-merge lets the variant win) — without it the full-width bar
+        // is dragged left by half its own width and clips off-screen.
+        banner: "w-full left-0 right-0 translate-x-0 px-4 py-1 justify-center rounded-none shadow-real-lg",
+        toast: "px-3 py-2 rounded-[var(--toast-radius)] shadow-real-xl",
     },
-    offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-[var(--color-neutral-100)]",
+    // Filled-neutral pill: the bare neutral token flips light/dark on its own
+    // (dark near-black pill in light mode, light pill in dark mode) and
+    // -contrast auto-derives — no hand-picked rungs or dark: inversions (§3).
+    offline: "bg-[var(--color-mono)]/90 backdrop-blur-sm text-[var(--color-mono-contrast)]",
     online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
-    icon: "size-4 flex-shrink-0",
-    message: "text-xs font-medium",
+    // text-inherit keeps the link legible on the inverse pill in BOTH modes
+    // (near-black in light, near-white in dark) — a fixed Link color can't.
+    action: "text-xs font-semibold text-inherit",
+    icon: "size-3.5 flex-shrink-0",
+    message: "text-xs font-medium -tracking-[0.025em]",
     queueCount: "text-xs opacity-80 ml-1",
 };
 

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

@@ -1,4 +1,12 @@
+import type { ReactNode } from "react";
 import type { ActionQueue } from "../../../utils/actionQueue";
+/**
+ * Declarative action rendered after the offline message (e.g. a retry link)
+ */
+export interface OfflineIndicatorAction {
+    label: string;
+    onClick: () => void;
+}
 /**
  * Position options for OfflineIndicator
  */
@@ -27,6 +35,11 @@ export interface OfflineIndicatorProps {
     offlineMessage?: string;
     /** Custom online message (shown briefly when reconnecting) */
     onlineMessage?: string;
+    /**
+     * Action shown next to the message while offline — pass `{ label, onClick }`
+     * for a link-styled button (mirrors Toast's `action`), or any ReactNode.
+     */
+    action?: OfflineIndicatorAction | ReactNode;
     /** Additional class names */
     className?: string;
 }
@@ -38,6 +51,8 @@ export interface OfflineIndicatorTheme {
     base?: string;
     /** Position-specific styles */
     positions?: Record<OfflineIndicatorPosition, string>;
+    /** Position overrides for the full-bleed banner variant (flush to the viewport edge, no inset) */
+    bannerPositions?: Record<OfflineIndicatorPosition, string>;
     /** Variant-specific styles */
     variants?: {
         banner?: string;
@@ -48,6 +63,8 @@ export interface OfflineIndicatorTheme {
     offline?: string;
     /** Online (reconnected) state styles */
     online?: string;
+    /** Action link styles */
+    action?: string;
     /** Icon styles */
     icon?: string;
     /** Message text styles */

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

@@ -1,7 +1,7 @@
 const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex flex-col items-start sm:flex-row sm:items-center gap-4",
-    titleStyle: "text-xl font-bold  text-[var(--color-text-primary)]",
+    titleStyle: "text-[length:var(--page-heading-title-size)] leading-[1.4] font-bold text-[var(--color-text-primary)]",
     subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
     actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
     iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",

package/dist/components/core/PageHeading/PageHeadingBackButton.js

@@ -2,11 +2,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { ArrowLeftIcon } from '@heroicons/react/20/solid';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { Link } from '../Link/Link.js';
 
 const PageHeadingBackButton = React__default.forwardRef(({ label = "Back", onClick, className, ...props }, ref) => {
-    return (jsxs(Link, { ref: ref, color: "neutral", size: "sm", onClick: onClick, className: cn("mb-2 w-fit", className), ...props, children: [jsx(ArrowLeftIcon, { className: "size-4" }), typeof label === 'string'
+    return (jsxs(Link, { ref: ref, color: "mono", size: "sm", onClick: onClick, className: cn("mb-2 w-fit", className), ...props, children: [jsx(ArrowLeft, { className: "size-4" }), typeof label === 'string'
                 ? jsx("span", { children: label })
                 : label] }));
 });

package/dist/components/core/Pagination/Pagination.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useMemo, useCallback } from 'react';
 import { paginationTheme } from './Pagination.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
+import { CaretDoubleLeft, CaretLeft, CaretRight, CaretDoubleRight } from '@phosphor-icons/react';
 
 /**
  * Internal PaginationItem component for page numbers and ellipsis
@@ -83,14 +83,14 @@ const Pagination = React__default.forwardRef(({ currentPage, totalPages, onPageC
     // on page 1, or "(totalPages + 1)" on the last page).
     const previousPageLabelNumber = Math.max(currentPage - 1, 1);
     const nextPageLabelNumber = Math.min(currentPage + 1, totalPages);
-    return (jsxs("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props, children: [showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page", children: [jsx(ChevronDoubleLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "First" })] })), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${previousPageLabelNumber})`, children: [jsx(ChevronLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Previous" })] })), paginationRange.map((pageNumber, index) => {
+    return (jsxs("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props, children: [showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page", children: [jsx(CaretDoubleLeft, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "First" })] })), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${previousPageLabelNumber})`, children: [jsx(CaretLeft, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Previous" })] })), paginationRange.map((pageNumber, index) => {
                 if (pageNumber === "...") {
                     return (jsx("span", { role: "separator", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`));
                 }
                 const page = pageNumber;
                 const isActive = page === currentPage;
                 return (jsxs(PaginationItem, { size: size, variant: "page", isActive: isActive, onClick: () => handlePageChange(page), "aria-label": isActive ? `Page ${page}, current page` : `Go to page ${page}`, children: [page, isActive && jsx("span", { className: "sr-only", children: "(current)" })] }, page));
-            }), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "aria-label": `Go to next page (${nextPageLabelNumber})`, children: [jsx(ChevronRightIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Next" })] })), showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(totalPages), "aria-label": "Go to last page", children: [jsx(ChevronDoubleRightIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Last" })] }))] }));
+            }), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "aria-label": `Go to next page (${nextPageLabelNumber})`, children: [jsx(CaretRight, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Next" })] })), showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(totalPages), "aria-label": "Go to last page", children: [jsx(CaretDoubleRight, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Last" })] }))] }));
 });
 Pagination.displayName = "Pagination";
 

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

@@ -9,7 +9,7 @@ const paginationTheme = {
     // Dark mode: neutral-800 background, lighter text, neutral-600 borders
     itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-radius)] transition-all duration-200 ease-in-out " +
         // Focus styles
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-[var(--color-neutral-900)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-[var(--color-mono-900)] " +
         // Base state - light
         "cursor-pointer bg-white border border-transparent text-[var(--color-text-muted)] " +
         // Base state - dark
@@ -21,7 +21,7 @@ const paginationTheme = {
         // Active state - light
         "data-[active=true]:bg-white data-[active=true]:border-[var(--color-border)] data-[active=true]:text-[var(--color-text-primary)] " +
         // Active state - dark (uses primary color accent)
-        "dark:data-[active=true]:bg-[var(--color-neutral-800)] dark:data-[active=true]:border-none dark:data-[active=true]:text-[var(--color-text-primary)] " +
+        "dark:data-[active=true]:bg-[var(--color-mono-800)] dark:data-[active=true]:border-none dark:data-[active=true]:text-[var(--color-text-primary)] " +
         // Disabled state
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes
@@ -30,7 +30,7 @@ const paginationTheme = {
         md: "size-10 min-w-[2.5rem] text-sm",
     },
     // Ellipsis styles
-    ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",
+    ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] cursor-default pointer-events-none",
 };
 
 export { paginationTheme };

package/dist/components/core/Pill/Pill.js

@@ -3,9 +3,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { pillTheme } from './Pill.theme.js';
-import { pillTapVariant } from './Pill.animations.js';
+import { createPressVariants } from '../shared/interaction.animations.js';
 import { cn } from '../../../utils/cn.js';
 
+// Shared press physics + subtle hover lift (module-level constant)
+const PILL_PRESS_VARIANTS = createPressVariants(0.97, 1.02);
 /**
  * Pill component - Simplified selectable chip for filters and tags
  *
@@ -120,7 +122,7 @@ const Pill = React__default.forwardRef((props, ref) => {
         // Accessibility
         role: isSelectable && !readOnly ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-pressed": isSelectable && !readOnly ? isSelected : undefined, "aria-readonly": readOnly || undefined, 
         // Animation
-        whileTap: isInteractive && !shouldReduceMotion ? pillTapVariant : undefined, ...restProps, children: [renderStartIcon(), children] }));
+        variants: PILL_PRESS_VARIANTS, animate: "rest", whileHover: isInteractive && !shouldReduceMotion ? "hover" : undefined, whileTap: isInteractive && !shouldReduceMotion ? "press" : undefined, ...restProps, children: [renderStartIcon(), children] }));
 });
 Pill.displayName = "Pill";
 

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

@@ -9,7 +9,7 @@ const pillTheme = {
      * Base pill style - structure and default colors (no hover)
      */
     baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
-        "ring-1 bg-[var(--color-surface)] transition-all duration-300 " +
+        "ring-1 bg-[var(--color-surface)] transition-[color,background-color,box-shadow] duration-150 ease-out " +
         "text-[var(--color-text-primary)] ring-[var(--color-border)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     /**
@@ -26,10 +26,12 @@ const pillTheme = {
     /**
      * Size variants
      */
+    // Paddings tokenised (--pill-px-*/--pill-py-*) so a theme can grow the chip
+    // tier alongside its controls — defaults are px-2.5/px-3 + py-0.5/py-1.
     sizes: {
-        sm: "text-xs px-2.5 py-0.5 gap-0.5",
-        md: "text-sm px-2.5 py-0.5 gap-1",
-        lg: "text-sm px-3 py-1 gap-1.5",
+        sm: "text-xs px-[var(--pill-px-sm)] py-[var(--pill-py-sm)] gap-0.5",
+        md: "text-sm px-[var(--pill-px-md)] py-[var(--pill-py-md)] gap-1",
+        lg: "text-sm px-[var(--pill-px-lg)] py-[var(--pill-py-lg)] gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

package/dist/components/core/Rating/Rating.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { StarIcon } from '@heroicons/react/24/solid';
-import { StarIcon as StarIcon$1 } from '@heroicons/react/24/outline';
+import { Star } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { ratingTheme } from './Rating.theme.js';
 
@@ -147,14 +146,14 @@ const Rating = React__default.memo(React__default.forwardRef(({ value: controlle
         // Determine which icon to render based on fill state
         const renderStarIcon = () => {
             if (fillState === "full") {
-                return iconFilled ? (jsx("span", { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true", children: iconFilled })) : (jsx(StarIcon, { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true" }));
+                return iconFilled ? (jsx("span", { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true", children: iconFilled })) : (jsx(Star, { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true" }));
             }
             if (fillState === "half") {
                 // Half star: clip a filled star to the left half, overlay on empty star
-                return (jsxs("span", { className: cn("relative inline-flex", starSizeClass), "aria-hidden": "true", children: [iconEmpty ? (jsx("span", { className: cn("absolute inset-0", emptyColorClass), children: iconEmpty })) : (jsx(StarIcon$1, { className: cn("absolute inset-0", starSizeClass, emptyColorClass) })), jsx("span", { className: "absolute inset-0 overflow-hidden", style: { width: "50%" }, children: iconFilled ? (jsx("span", { className: cn(filledColorClass), children: iconFilled })) : (jsx(StarIcon, { className: cn(starSizeClass, filledColorClass) })) })] }));
+                return (jsxs("span", { className: cn("relative inline-flex", starSizeClass), "aria-hidden": "true", children: [iconEmpty ? (jsx("span", { className: cn("absolute inset-0", emptyColorClass), children: iconEmpty })) : (jsx(Star, { className: cn("absolute inset-0", starSizeClass, emptyColorClass) })), jsx("span", { className: "absolute inset-0 overflow-hidden", style: { width: "50%" }, children: iconFilled ? (jsx("span", { className: cn(filledColorClass), children: iconFilled })) : (jsx(Star, { className: cn(starSizeClass, filledColorClass) })) })] }));
             }
             // Empty star
-            return iconEmpty ? (jsx("span", { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true", children: iconEmpty })) : (jsx(StarIcon$1, { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true" }));
+            return iconEmpty ? (jsx("span", { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true", children: iconEmpty })) : (jsx(Star, { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true" }));
         };
         if (!isInteractive) {
             // Read-only or disabled: render as a non-interactive span

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

@@ -27,7 +27,7 @@ const ratingTheme = {
         danger: "text-[var(--color-danger)]",
     },
     // Empty star color
-    emptyColor: "text-[var(--color-neutral-300)]",
+    emptyColor: "text-[var(--color-mono-300)]",
     // State styles
     states: {
         disabled: "opacity-50 cursor-not-allowed pointer-events-none",

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

@@ -3,7 +3,7 @@
  */
 const segmentedTheme = {
     // Base styles for the segmented container
-    baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-neutral-100 dark:bg-neutral-900 border border-[var(--color-border)] p-[var(--segmented-padding)] shadow-inner-real-md",
+    baseStyle: "relative flex w-fit rounded-[var(--segmented-radius)] bg-[var(--color-surface-sunken)] border border-[var(--color-border)] p-[var(--segmented-padding)] shadow-inner-real-md",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,7 +15,7 @@ const segmentedTheme = {
     // Disabled style
     disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
     // Sliding background style with CSS variables
-    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[var(--segmented-inner-radius)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-surface)] shadow-real-md dark:bg-neutral-800",
+    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[var(--segmented-inner-radius)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-surface)] shadow-real-md",
 };
 /**
  * Default theme for the SegmentedItem component
@@ -23,11 +23,14 @@ const segmentedTheme = {
 const segmentedItemTheme = {
     // Base styles for the segmented item
     baseStyle: "relative flex min-w-fit flex-1 items-center justify-center whitespace-nowrap transition-all duration-200 rounded-[var(--segmented-inner-radius)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
-    // Size variants using CSS variables
+    // Size variants using CSS variables. Type reads --segmented-text-size-*
+    // (which aliases the shared --form-text-size-* ramp) so lg steps up with its
+    // box — it was pinned at text-sm across all three sizes while Button/Input,
+    // whose height tokens Segmented literally aliases, both stepped up at lg.
     sizes: {
-        sm: "text-sm px-[var(--segmented-px-sm)]",
-        md: "text-sm px-[var(--segmented-px-md)]",
-        lg: "text-sm px-[var(--segmented-px-lg)]",
+        sm: "text-[length:var(--segmented-text-size-sm)]/[var(--segmented-line-height-sm)] px-[var(--segmented-px-sm)]",
+        md: "text-[length:var(--segmented-text-size-md)]/[var(--segmented-line-height-md)] px-[var(--segmented-px-md)]",
+        lg: "text-[length:var(--segmented-text-size-lg)]/[var(--segmented-line-height-lg)] px-[var(--segmented-px-lg)]",
     },
     // Selected state
     selectedStyle: "text-[var(--color-text-primary)] z-10",

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

@@ -133,11 +133,13 @@ export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElemen
 }
 export interface SidebarToggleProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
-     * Custom icon for expanded state
+     * Icon shown while the sidebar is COLLAPSED — clicking it expands.
+     * Falls back to the default chevron.
      */
     expandIcon?: ReactNode;
     /**
-     * Custom icon for collapsed state
+     * Icon shown while the sidebar is EXPANDED — clicking it collapses.
+     * Falls back to the default chevron.
      */
     collapseIcon?: ReactNode;
 }

package/dist/components/core/Sidebar/SidebarHeader.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext, useSidebarCollapsed } from './SidebarContext.js';
 import { SidebarToggle } from './SidebarToggle.js';
@@ -22,7 +22,7 @@ const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, cust
         // fills the interior exactly. Left-pinned in both states (no
         // `justify-*` toggle) so nothing jumps mid-animation. Same value
         // for collapsed + expanded → no padding transition needed.
-        "px-3", className), ...props, children: [jsx("div", { className: "flex items-center min-w-0 flex-1", children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "ghost", size: "sm", className: "size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-4" }) })), !isMobile && showToggle && (customToggle || jsx(SidebarToggle, {}))] }));
+        "px-3", className), ...props, children: [jsx("div", { className: "flex items-center min-w-0 flex-1", children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "ghost", size: "sm", className: "size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(X, { className: "size-4" }) })), !isMobile && showToggle && (customToggle || jsx(SidebarToggle, {}))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

package/dist/components/core/Sidebar/SidebarMobileTrigger.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { Bars3Icon } from '@heroicons/react/24/outline';
+import { List } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
 import { Button } from '../Button/Button.js';
@@ -23,7 +23,7 @@ const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onCli
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
-    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(List, { className: "size-5" }) }));
 });
 SidebarMobileTrigger.displayName = "SidebarMobileTrigger";
 

package/dist/components/core/Sidebar/SidebarSearch.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
@@ -106,7 +106,7 @@ const SidebarSearch = React__default.forwardRef(({ value: controlledValue, defau
         // width) and the input fading in/out via AnimatePresence. Adding
         // a justify-* toggle here would snap the icon by 4px on frame 0
         // of every transition.
-        "transition-[background-color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", "overflow-hidden", isCollapsedView ? shellCollapsed : shellExpanded, inputGroupClassName), children: [jsx("span", { className: cn("flex items-center justify-center flex-shrink-0 pl-2", "text-[var(--color-text-muted)] transition-colors duration-200"), "aria-hidden": !isCollapsedView || undefined, children: iconStart !== null && iconStart !== void 0 ? iconStart : jsx(MagnifyingGlassIcon, { className: "size-5" }) }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
+        "transition-[background-color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", "overflow-hidden", isCollapsedView ? shellCollapsed : shellExpanded, inputGroupClassName), children: [jsx("span", { className: cn("flex items-center justify-center flex-shrink-0 pl-2", "text-[var(--color-text-muted)] transition-colors duration-200"), "aria-hidden": !isCollapsedView || undefined, children: iconStart !== null && iconStart !== void 0 ? iconStart : jsx(MagnifyingGlass, { className: "size-5" }) }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
                         opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
                         x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
                     }, className: "flex-1 min-w-0 flex items-center overflow-hidden", children: jsx("input", { ref: setInputRef, type: "search", value: value, onChange: handleChange, placeholder: placeholder, "aria-label": collapsedLabel, className: cn(
@@ -114,7 +114,7 @@ const SidebarSearch = React__default.forwardRef(({ value: controlledValue, defau
                         // Input pl-3 (12) → text starts at field-x = 28 + 12 = 40,
                         // giving a 12px icon→text gap (matches <Input iconStart>'s
                         // pl-3 + pl-10 = 12px convention).
-                        "w-full bg-transparent border-0 outline-none text-sm py-2 pl-3 pr-3", "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]", "dark:placeholder:text-[var(--color-neutral-500)]") }) }, "search-input")) })] }));
+                        "w-full bg-transparent border-0 outline-none text-sm py-2 pl-3 pr-3", "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]") }) }, "search-input")) })] }));
     return (
     // Outer horizontal padding mirrors Sidebar.Content (px-3 collapsed,
     // px-2.5 expanded) so the search row sits on the exact same horizontal

package/dist/components/core/Sidebar/SidebarToggle.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { CaretLeft } from '@phosphor-icons/react';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
 import { Button } from '../Button/Button.js';
 
 const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, className, onClick, ...props }, ref) => {
-    var _a;
+    var _a, _b;
     const sidebarContext = useSidebarContext();
     if (!sidebarContext) {
         if (process.env.NODE_ENV !== "production") {
@@ -26,7 +26,7 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
     const positionClasses = side === "left"
         ? "absolute right-0 translate-x-1/2 top-4 z-50"
         : "absolute left-0 -translate-x-1/2 top-4 z-50";
-    return (jsx(Button, { ref: ref, iconOnly: true, variant: "ghost", className: cn("size-6 p-0 rounded-full border border-[var(--color-border)] bg-[var(--color-background)]/50 backdrop-blur-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:shadow-md hover:bg-[var(--color-surface-hover)] opacity-100 transition-all duration-400", positionClasses, className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center justify-center", children: jsx(ChevronLeftIcon, { className: "size-3", strokeWidth: 2.5 }) }) }));
+    return (jsx(Button, { ref: ref, iconOnly: true, variant: "ghost", className: cn("size-6 p-0 rounded-full border border-[var(--color-border)] bg-[var(--color-background)]/50 backdrop-blur-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:shadow-md hover:bg-[var(--color-surface-hover)] opacity-100 transition-all duration-400", positionClasses, className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: (_b = (collapsed ? expandIcon : collapseIcon)) !== null && _b !== void 0 ? _b : (jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center justify-center", children: jsx(CaretLeft, { className: "size-3", weight: "bold" }) })) }));
 });
 SidebarToggle.displayName = "SidebarToggle";
 

package/dist/components/core/Sidebar/SidebarUserProfile.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { CaretUpDown } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { motion, AnimatePresence } from 'motion/react';
 import { useSidebarCollapsed } from './SidebarContext.js';
@@ -37,7 +37,7 @@ const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, sta
                 className: "flex-shrink-0", children: avatarElement }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { className: "flex flex-row items-center gap-2 flex-1 min-w-0 overflow-hidden whitespace-nowrap", initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
                         opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
                         x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }
-                    }, children: [children !== null && children !== void 0 ? children : (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-secondary)]/80 truncate", children: email }))] })), dropdownContent && (jsx(ChevronUpDownIcon, { className: "size-4 flex-shrink-0  text-[var(--color-text-muted)]" }))] }, "profile-text")) })] }));
+                    }, children: [children !== null && children !== void 0 ? children : (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-secondary)]/80 truncate", children: email }))] })), dropdownContent && (jsx(CaretUpDown, { className: "size-4 flex-shrink-0  text-[var(--color-text-muted)]" }))] }, "profile-text")) })] }));
     // When dropdownContent is provided, the profile acts as a menu trigger.
     if (dropdownContent) {
         return (jsxs(Dropdown, { placement: "right-end", offset: 8, children: [jsx(Dropdown.Trigger, { children: content }), jsx(Dropdown.Menu, { "aria-label": `${name} menu`, children: dropdownContent })] }));