@hilum/ui 3.8.6 → 3.10.0

package/src/components/tabs.tsx

@@ -24,6 +24,7 @@ import { useShape } from "../lib/shape-context";
 import { useSurface } from "../lib/surface-context";
 import { surfaceClasses } from "../lib/surface-classes";
 import { useProximityHover } from "../hooks/use-proximity-hover";
+import { scrollStripItemIntoView, useHorizontalOverflowMask } from "../lib/scroll-fade";
 
 /* ─────────────────────── Contexts ─────────────────────── */
 
@@ -128,10 +129,18 @@ Tabs.displayName = "Tabs";
 
 /* ─────────────────────── TabsList ─────────────────────── */
 
-type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+interface TabsListProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  /**
+   * Let the strip scroll horizontally instead of clipping when the tabs are
+   * wider than their container (settings tabs on mobile, narrow panels).
+   * Edges fade while more tabs are hidden and the active tab is scrolled into
+   * view. Default: `true`.
+   */
+  scrollable?: boolean;
+}
 
 const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
-  ({ children, className, ...props }, ref) => {
+  ({ children, className, scrollable = true, style, ...props }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const isMouseInside = useRef(false);
     const shape = useShape();
@@ -211,6 +220,13 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
       setOptimisticIdx(selectedIdx >= 0 ? selectedIdx : null);
     }, [selectedIdx]);
 
+    const maskStyle = useHorizontalOverflowMask(containerRef, scrollable);
+
+    // Keep the active tab visible when the strip overflows.
+    useEffect(() => {
+      if (scrollable) scrollStripItemIntoView(containerRef.current, selectedIdx);
+    }, [scrollable, selectedIdx]);
+
     const activeSelectedIdx = optimisticIdx;
     const selectedRect = activeSelectedIdx !== null ? itemRects[activeSelectedIdx] : null;
     const hoverRect = hoveredIndex !== null ? itemRects[hoveredIndex] : null;
@@ -259,11 +275,15 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
             if (isMouseInside.current) return;
             setHoveredIndex(null);
           }}
+          data-scrollable={scrollable ? "" : undefined}
           className={cn(
             "relative inline-flex items-center gap-0.5 p-1 select-none bg-muted",
+            scrollable &&
+              "max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>[role=tab]]:shrink-0",
             shape.container,
             className,
           )}
+          style={maskStyle ? { ...maskStyle, ...style } : style}
           {...props}
         >
           {/* Active segment indicator */}
@@ -336,7 +356,7 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
             {focusRect && (
               <motion.div
                 className={cn(
-                  "absolute pointer-events-none z-20 border border-[#6B97FF]",
+                  "absolute pointer-events-none z-20 border-2 border-ring",
                   shape.focusRing,
                 )}
                 initial={false}

package/src/components/textarea.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import { controlSurfaceClasses, focusRingClasses, motionClasses } from "../lib/interaction";
+import { controlSurfaceClasses, inputFocusClasses, motionClasses } from "../lib/interaction";
 import { useShape } from "../lib/shape-context";
 import type { ControlDensity, ControlMobileSurface } from "./input";
 
@@ -49,9 +49,8 @@ function Textarea({
         "resize-none",
         controlSurfaceClasses,
         motionClasses,
-        focusRingClasses,
+        inputFocusClasses,
         textareaMobileSurfaceClasses[mobileSurface],
-        "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         className,
       )}

package/src/components/thinking-steps.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
 import { motion } from "framer-motion";
 import { cn } from "../lib/utils";
 import { useIcon } from "../lib/icon-context";
@@ -152,8 +152,8 @@ function ThinkingStep({
   label,
   description,
   status = "complete",
-  index,
-  delay = 0,
+  // `index` / `delay` are accepted for API compatibility but no longer drive
+  // the entrance animation, so they aren't destructured here.
   isLast = false,
   children,
   className,

package/src/components/toggle.tsx

@@ -10,7 +10,8 @@ const toggleVariants = cva(
     "inline-flex shrink-0 items-center justify-center gap-2",
     "body font-medium whitespace-nowrap rounded-md",
     "transition-[background-color,border-color,box-shadow,color,opacity,scale] duration-150 outline-none active:scale-[0.96]",
-    "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "compact:rounded-[5px] compact:text-[12px] compact:gap-1.5 [&_svg:not([class*='size-'])]:compact:size-3.5",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   ],
@@ -19,27 +20,27 @@ const toggleVariants = cva(
       variant: {
         default: [
           "bg-transparent text-muted-foreground",
-          "hover:bg-muted hover:text-foreground",
-          "data-[state=on]:bg-muted data-[state=on]:text-foreground",
+          "hover:bg-hover hover:text-foreground",
+          "data-[state=on]:bg-active data-[state=on]:text-foreground",
         ],
         outline: [
           "border border-border bg-card text-muted-foreground shadow-natural",
-          "hover:bg-muted hover:text-foreground",
-          "data-[state=on]:bg-muted data-[state=on]:text-foreground data-[state=on]:border-border",
+          "hover:bg-hover hover:text-foreground hover:border-border-strong",
+          "data-[state=on]:bg-active data-[state=on]:text-foreground data-[state=on]:border-border-strong",
         ],
         brand: [
           "bg-transparent text-muted-foreground",
-          "hover:bg-muted hover:text-foreground",
-          "data-[state=on]:bg-brand-primary data-[state=on]:text-background",
+          "hover:bg-hover hover:text-foreground",
+          "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
         ],
       },
       size: {
-        sm: "h-8 gap-1.5 px-3",
-        default: "h-10 px-3",
-        lg: "h-11 px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-11",
+        sm: "h-8 gap-1.5 px-3 compact:h-6 compact:px-2",
+        default: "h-10 px-3 compact:h-6 compact:px-2",
+        lg: "h-11 px-4 compact:h-7 compact:px-2.5",
+        icon: "size-9 compact:size-6",
+        "icon-sm": "size-8 compact:size-6",
+        "icon-lg": "size-11 compact:size-7",
       },
     },
     defaultVariants: {

package/src/components/tooltip.tsx

@@ -80,7 +80,18 @@ function Tooltip({
   forceOpen,
   onOpenChange: onOpenChangeProp,
 }: TooltipProps) {
+  // All hooks run before the `content === undefined` early return so the hook
+  // order is stable if `content` toggles between defined and undefined.
   const [internalOpen, setInternalOpen] = useState(false);
+  const open = forceOpen ?? openProp ?? internalOpen;
+  const [mounted, setMounted] = useState(false);
+  const shape = useShape();
+  const portalContainer = useContext(TooltipPortalContainerContext);
+
+  useEffect(() => {
+    if (open) setMounted(true);
+  }, [open]);
+
   if (content === undefined) {
     return (
       <TooltipPrimitive.Root
@@ -91,14 +102,6 @@ function Tooltip({
       </TooltipPrimitive.Root>
     );
   }
-  const open = forceOpen ?? openProp ?? internalOpen;
-  const [mounted, setMounted] = useState(false);
-  const shape = useShape();
-  const portalContainer = useContext(TooltipPortalContainerContext);
-
-  useEffect(() => {
-    if (open) setMounted(true);
-  }, [open]);
 
   const handleExitComplete = () => {
     if (!open) setMounted(false);

package/src/components/url-redirect-prompt.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { ArrowRight } from "lucide-react";
 import { Callout } from "./callout";
 import { Switch } from "./switch";
-import { cn } from "../lib/utils";
 
 function normalizeUrlHandle(value: string): string {
   return String(value || "")

package/src/index.ts

@@ -10,6 +10,14 @@ export { cn } from "./lib/utils";
 export * from "./lib/icon-context";
 export * from "./lib/shape-context";
 export * from "./lib/surface-context";
+export * from "./lib/density-context";
+export * from "./lib/format";
+export {
+  useScrollEdges,
+  horizontalEdgeMask,
+  useHorizontalOverflowMask,
+  scrollStripItemIntoView,
+} from "./lib/scroll-fade";
 
 // Components (alphabetical)
 export * from "./components/account-menu";
@@ -37,15 +45,18 @@ export * from "./components/checkbox";
 export * from "./components/checkbox-card";
 export * from "./components/checkbox-group";
 export * from "./components/collapsible";
+export * from "./components/code-block";
 export * from "./components/color-input";
 export * from "./components/color-picker";
 export * from "./components/combobox";
 export * from "./components/command-palette";
 export * from "./components/command";
 export * from "./components/context-menu";
+export * from "./components/contextual-save-bar";
 export * from "./components/data-table";
 export * from "./components/data-transfer-controls";
 export * from "./components/date-picker";
+export * from "./components/date-text";
 export * from "./components/description-list";
 export * from "./components/dialog";
 export * from "./components/drawer";
@@ -54,6 +65,7 @@ export * from "./components/dropdown-menu";
 export * from "./components/empty-state";
 export * from "./components/field";
 export * from "./components/file-thumbnail";
+export * from "./components/filter-bar";
 export * from "./components/file-dropzone";
 export * from "./components/grid-list";
 export * from "./components/help-tooltip";
@@ -83,11 +95,14 @@ export * from "./components/popover";
 export * from "./components/progress";
 export * from "./components/property-row";
 export * from "./components/radio-card";
+export * from "./components/rating";
 export * from "./components/radio-group";
 export * from "./components/resizable";
+export * from "./components/resource-item";
 export * from "./components/rich-text-editor";
 export * from "./components/scroll-area";
 export * from "./components/section-heading";
+export * from "./components/search-input";
 export * from "./components/searchable-table";
 export * from "./components/select";
 export * from "./components/separator";

package/src/lib/density-context.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+/**
+ * Control density.
+ *
+ * - `default` — the standard Hilum sizing (40px inputs, 32px buttons, 40px
+ *   menu rows). Used everywhere unless something opts in.
+ * - `compact` — editor-chrome sizing (Figma / Framer / Linear inspectors):
+ *   24px controls, 28px rows and menu items, 12px text, 11px labels, 8px
+ *   horizontal padding, 4–6px radii.
+ *
+ * Density is carried two ways so it works for both CSS and portalled UI:
+ *   1. the `data-density="compact"` attribute on an ancestor element drives the
+ *      `compact:` Tailwind variant and the `--density-*` CSS variables emitted
+ *      in tokens.css;
+ *   2. React context, so portalled content (menus, popovers, select lists)
+ *      can re-apply the attribute on its own root outside the DOM subtree.
+ */
+type Density = "default" | "compact";
+
+const DensityContext = createContext<Density>("default");
+
+function useDensity(): Density {
+  return useContext(DensityContext);
+}
+
+interface DensityProviderProps {
+  density: Density;
+  children: ReactNode;
+  /**
+   * Render a `display: contents` wrapper carrying `data-density` (default).
+   * Pass `false` when you already set `data-density` on your own element and
+   * only need the React context (e.g. for portalled menus).
+   */
+  wrap?: boolean;
+}
+
+function DensityProvider({ density, children, wrap = true }: DensityProviderProps) {
+  return (
+    <DensityContext.Provider value={density}>
+      {wrap ? (
+        <div data-density={density} style={{ display: "contents" }}>
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+    </DensityContext.Provider>
+  );
+}
+
+/**
+ * Props to spread on a portalled content root so it inherits the density of
+ * the tree that opened it. Returns `{}` in default density so markup is
+ * unchanged for non-editor consumers.
+ */
+function useDensityAttributes(): { "data-density"?: Density } {
+  const density = useDensity();
+  return density === "default" ? {} : { "data-density": density };
+}
+
+export { DensityContext, DensityProvider, useDensity, useDensityAttributes };
+export type { Density, DensityProviderProps };

package/src/lib/format.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+// ---------------------------------------------------------------------------
+// Locale-aware formatting helpers
+//
+// Product UIs drift quickly when every screen formats dates, money and counts
+// by hand ("Sep 26, 2026" next to "9/26/2026", "1 items", raw ISO strings).
+// These helpers wrap `Intl` so every surface shares one convention:
+//
+//   - dates:     medium style ("Sep 26, 2026") unless a caller opts out
+//   - datetimes: medium date + short time ("Sep 26, 2026, 3:04 PM")
+//   - relative:  "3 hours ago" / "in 2 days", falling back to a date after 7 days
+//   - money:     ISO-4217 currency, minor units handled by Intl
+//   - counts:    Intl.PluralRules-based ("1 item", "2 items")
+//
+// Every helper accepts an explicit `locale`; components read defaults from
+// the nearest <FormatProvider>.
+// ---------------------------------------------------------------------------
+
+export type DateInput = Date | string | number | null | undefined;
+
+/**
+ * - `date` / `short` — "Sep 26, 2026" (default; `short` is an alias)
+ * - `long`           — "September 26, 2026"
+ * - `datetime`       — "Sep 26, 2026, 3:04 PM"
+ * - `time`           — "3:04 PM"
+ * - `monthDay`       — "Sep 26" (dense timelines, same-year lists)
+ * - `month`          — "September 2026"
+ * - `iso`            — "2026-09-26" (local calendar date, for APIs)
+ */
+export type DateFormatStyle =
+  | "date"
+  | "short"
+  | "long"
+  | "datetime"
+  | "time"
+  | "monthDay"
+  | "month"
+  | "iso";
+
+export interface FormatOptions {
+  /** BCP-47 locale. Defaults to the provider locale, then the runtime default. */
+  locale?: string | undefined;
+  /** IANA time zone, e.g. "America/Lima". Defaults to the runtime zone. */
+  timeZone?: string | undefined;
+}
+
+const DATE_STYLE_OPTIONS: Record<Exclude<DateFormatStyle, "iso">, Intl.DateTimeFormatOptions> = {
+  date: { year: "numeric", month: "short", day: "numeric" },
+  datetime: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" },
+  time: { hour: "numeric", minute: "2-digit" },
+  short: { year: "numeric", month: "short", day: "numeric" },
+  monthDay: { month: "short", day: "numeric" },
+  long: { year: "numeric", month: "long", day: "numeric" },
+  month: { year: "numeric", month: "long" },
+};
+
+const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * Parse a date-ish value. Date-only ISO strings ("2026-09-26") are read as
+ * local calendar dates instead of UTC midnight, so they never shift a day
+ * backwards in western time zones. Returns `null` for empty/invalid input.
+ */
+export function toDate(value: DateInput): Date | null {
+  if (value === null || value === undefined || value === "") return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "string" && DATE_ONLY_PATTERN.test(value)) {
+    const [y, m, d] = value.split("-").map(Number) as [number, number, number];
+    return new Date(y, m - 1, d);
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/** Format a Date as a local calendar date string ("YYYY-MM-DD"). */
+export function toISODate(value: DateInput): string {
+  const date = toDate(value);
+  if (!date) return "";
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
+export interface FormatDateOptions extends FormatOptions {
+  /** Preset style. Default: `"date"` ("Sep 26, 2026"). */
+  style?: DateFormatStyle;
+  /** Rendered for empty/invalid input. Default: "—". */
+  fallback?: string;
+}
+
+export function formatDate(value: DateInput, options: FormatDateOptions = {}): string {
+  const { style = "date", fallback = "—", locale, timeZone } = options;
+  const date = toDate(value);
+  if (!date) return fallback;
+  if (style === "iso") return toISODate(date);
+  return new Intl.DateTimeFormat(locale, {
+    ...DATE_STYLE_OPTIONS[style],
+    ...(timeZone ? { timeZone } : {}),
+  }).format(date);
+}
+
+export function formatDateTime(value: DateInput, options: Omit<FormatDateOptions, "style"> = {}) {
+  return formatDate(value, { ...options, style: "datetime" });
+}
+
+export interface FormatDateRangeOptions extends FormatOptions {
+  style?: Exclude<DateFormatStyle, "iso" | "time">;
+  fallback?: string;
+}
+
+/** "Sep 1 – 26, 2026" — collapses shared parts via Intl.DateTimeFormat#formatRange. */
+export function formatDateRange(
+  start: DateInput,
+  end: DateInput,
+  options: FormatDateRangeOptions = {},
+): string {
+  const { style = "date", fallback = "—", locale, timeZone } = options;
+  const from = toDate(start);
+  const to = toDate(end);
+  if (!from && !to) return fallback;
+  if (!from || !to) return formatDate(from ?? to, { style, locale, timeZone, fallback });
+  const formatter = new Intl.DateTimeFormat(locale, {
+    ...DATE_STYLE_OPTIONS[style],
+    ...(timeZone ? { timeZone } : {}),
+  });
+  return typeof formatter.formatRange === "function"
+    ? formatter.formatRange(from, to)
+    : `${formatter.format(from)} – ${formatter.format(to)}`;
+}
+
+const RELATIVE_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+  ["year", 365 * 24 * 60 * 60],
+  ["month", 30 * 24 * 60 * 60],
+  ["week", 7 * 24 * 60 * 60],
+  ["day", 24 * 60 * 60],
+  ["hour", 60 * 60],
+  ["minute", 60],
+  ["second", 1],
+];
+
+export interface FormatRelativeTimeOptions extends FormatOptions {
+  /** Reference time. Default: now. */
+  now?: DateInput;
+  /**
+   * After this many seconds the absolute date is shown instead
+   * ("Sep 26, 2026"). Default: 7 days. Pass `Infinity` to always be relative.
+   */
+  maxRelativeSeconds?: number;
+  fallback?: string;
+}
+
+/** "just now", "5 minutes ago", "in 2 days"; absolute date past `maxRelativeSeconds`. */
+export function formatRelativeTime(
+  value: DateInput,
+  options: FormatRelativeTimeOptions = {},
+): string {
+  const {
+    locale,
+    timeZone,
+    now,
+    maxRelativeSeconds = 7 * 24 * 60 * 60,
+    fallback = "—",
+  } = options;
+  const date = toDate(value);
+  if (!date) return fallback;
+  const reference = toDate(now) ?? new Date();
+  const diffSeconds = Math.round((date.getTime() - reference.getTime()) / 1000);
+  const abs = Math.abs(diffSeconds);
+  if (abs > maxRelativeSeconds) return formatDate(date, { locale, timeZone });
+
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  if (abs < 45) return rtf.format(0, "second");
+  for (const [unit, seconds] of RELATIVE_UNITS) {
+    if (abs >= seconds) return rtf.format(Math.round(diffSeconds / seconds), unit);
+  }
+  return rtf.format(0, "second");
+}
+
+export interface FormatNumberOptions extends FormatOptions, Intl.NumberFormatOptions {
+  fallback?: string;
+}
+
+export function formatNumber(
+  value: number | string | null | undefined,
+  options: FormatNumberOptions = {},
+): string {
+  const { locale, timeZone: _timeZone, fallback = "—", ...intl } = options;
+  const num = typeof value === "string" ? Number(value) : value;
+  if (num === null || num === undefined || Number.isNaN(num)) return fallback;
+  return new Intl.NumberFormat(locale, intl).format(num);
+}
+
+export interface FormatCurrencyOptions extends FormatNumberOptions {
+  /** ISO-4217 code. Default: provider currency, then "USD". */
+  currency?: string;
+  /** When true, `value` is in minor units (cents) and divided by 10^fractionDigits. */
+  minorUnits?: boolean;
+}
+
+export function formatCurrency(
+  value: number | string | null | undefined,
+  options: FormatCurrencyOptions = {},
+): string {
+  const { currency = "USD", minorUnits = false, ...rest } = options;
+  const num = typeof value === "string" ? Number(value) : value;
+  if (num === null || num === undefined || Number.isNaN(num)) return rest.fallback ?? "—";
+  let amount = num;
+  if (minorUnits) {
+    const digits =
+      new Intl.NumberFormat("en", { style: "currency", currency }).resolvedOptions()
+        .maximumFractionDigits ?? 2;
+    amount = num / 10 ** digits;
+  }
+  return formatNumber(amount, { style: "currency", currency, ...rest });
+}
+
+export function formatPercent(
+  value: number | null | undefined,
+  options: FormatNumberOptions = {},
+): string {
+  return formatNumber(value, { style: "percent", maximumFractionDigits: 1, ...options });
+}
+
+export interface PluralizeOptions extends FormatOptions {
+  /** Plural form. Default: `${singular}s`. */
+  plural?: string;
+  /** Omit the number ("items" instead of "2 items"). */
+  hideCount?: boolean;
+}
+
+/**
+ * "1 item", "2 items", "1,204 orders". Uses Intl.PluralRules to pick the form
+ * and Intl.NumberFormat for the count.
+ */
+export function pluralize(count: number, singular: string, options: PluralizeOptions = {}) {
+  const { plural = `${singular}s`, hideCount = false, locale } = options;
+  const rule = new Intl.PluralRules(locale).select(count);
+  const word = rule === "one" ? singular : plural;
+  return hideCount ? word : `${new Intl.NumberFormat(locale).format(count)} ${word}`;
+}
+
+// ---------------------------------------------------------------------------
+// FormatProvider — app-wide locale/currency/timeZone defaults
+// ---------------------------------------------------------------------------
+
+export interface FormatContextValue {
+  locale?: string | undefined;
+  currency?: string | undefined;
+  timeZone?: string | undefined;
+}
+
+const FormatContext = createContext<FormatContextValue>({});
+
+export interface FormatProviderProps extends FormatContextValue {
+  children: ReactNode;
+}
+
+export function FormatProvider({ locale, currency, timeZone, children }: FormatProviderProps) {
+  const value = useMemo(() => ({ locale, currency, timeZone }), [locale, currency, timeZone]);
+  return <FormatContext.Provider value={value}>{children}</FormatContext.Provider>;
+}
+
+/** Formatters bound to the nearest FormatProvider's locale/currency/timeZone. */
+export function useFormatter() {
+  const ctx = useContext(FormatContext);
+  return useMemo(() => {
+    const base = {
+      ...(ctx.locale ? { locale: ctx.locale } : {}),
+      ...(ctx.timeZone ? { timeZone: ctx.timeZone } : {}),
+    };
+    return {
+      locale: ctx.locale,
+      currencyCode: ctx.currency,
+      timeZone: ctx.timeZone,
+      date: (value: DateInput, options: FormatDateOptions = {}) =>
+        formatDate(value, { ...base, ...options }),
+      dateTime: (value: DateInput, options: Omit<FormatDateOptions, "style"> = {}) =>
+        formatDateTime(value, { ...base, ...options }),
+      dateRange: (start: DateInput, end: DateInput, options: FormatDateRangeOptions = {}) =>
+        formatDateRange(start, end, { ...base, ...options }),
+      relative: (value: DateInput, options: FormatRelativeTimeOptions = {}) =>
+        formatRelativeTime(value, { ...base, ...options }),
+      number: (value: number | string | null | undefined, options: FormatNumberOptions = {}) =>
+        formatNumber(value, { ...base, ...options }),
+      currency: (value: number | string | null | undefined, options: FormatCurrencyOptions = {}) =>
+        formatCurrency(value, {
+          ...base,
+          ...(ctx.currency ? { currency: ctx.currency } : {}),
+          ...options,
+        }),
+      percent: (value: number | null | undefined, options: FormatNumberOptions = {}) =>
+        formatPercent(value, { ...base, ...options }),
+      pluralize: (count: number, singular: string, options: PluralizeOptions = {}) =>
+        pluralize(count, singular, { ...base, ...options }),
+    };
+  }, [ctx.locale, ctx.currency, ctx.timeZone]);
+}

package/src/lib/interaction.ts

@@ -9,12 +9,20 @@ export const springMotionClasses =
 export const pressClasses = "active:scale-[0.97] motion-reduce:active:scale-100";
 
 export const focusRingClasses =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1";
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background";
+
+/** Focus treatment for text-entry fields: ring-token border + a soft 2px halo. */
+export const inputFocusClasses =
+  "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35";
+
+/** Same as inputFocusClasses for composite fields that wrap a native input. */
+export const inputFocusWithinClasses =
+  "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/35";
 
 export const iconStrokeClasses =
   "[&_svg]:transition-[stroke-width,transform,color] [&_svg]:duration-150 [&_svg]:ease-out group-hover:[&_svg]:stroke-[2]";
 
-export const controlSurfaceClasses = "border border-border bg-background hover:border-ground-200";
+export const controlSurfaceClasses = "border border-border bg-background hover:border-border-strong";
 
 export const surfaceElevationClasses = {
   flat: "border border-border bg-card",
@@ -29,10 +37,10 @@ export const radiusClasses = {
 } as const;
 
 export const menuItemClasses =
-  "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 body outline-none transition-[background-color,color,box-shadow] duration-150 ease-out";
+  "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 body outline-none transition-[background-color,color,box-shadow] duration-150 ease-out compact:min-h-7 compact:px-2 compact:py-1 compact:text-[13px] compact:rounded-[4px]";
 
 export const menuItemActiveClasses =
-  "focus:bg-muted focus:text-foreground data-[highlighted]:bg-muted";
+  "focus:bg-active focus:text-foreground data-[highlighted]:bg-active";
 
 export function useProximityIndex<T extends HTMLElement>(axis: "x" | "y" = "y") {
   const containerRef = React.useRef<T | null>(null);