@signalflare-ai/ui 1.2.0 → 1.4.0

package/dist/{measured-text-BI3dTJmH.js → measured-text-CXkdw9Yr.js}

@@ -1,10 +1,12 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { a as prepare, i as measureNaturalWidth, o as prepareWithSegments, r as measureLineStats, t as layout } from "./layout-DJHMMap2.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { a as prepare, i as measureNaturalWidth, o as prepareWithSegments, r as measureLineStats, t as layout } from "./layout-CWBE0qwx.js";
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/utils/use-measured-text.ts
 var preparationCache = /* @__PURE__ */ new Map();
+/** Dev-only: ensures the `system-ui` first-family warning fires at most once. */
+var hasWarnedSystemUi = false;
 var fontsReadyPromise = null;
 function getFontsReady() {
 	if (fontsReadyPromise) return fontsReadyPromise;
@@ -62,32 +64,38 @@ function useMeasuredText(text, options = {}) {
 	const ref = useRef(null);
 	const [ready, setReady] = useState(false);
 	const [measurement, setMeasurement] = useState(null);
-	const [resolvedFont, setResolvedFont] = useState("16px sans-serif");
-	const [resolvedLineHeight, setResolvedLineHeight] = useState(20);
-	const [resolvedLetterSpacing, setResolvedLetterSpacing] = useState(0);
 	const readComputedStyles = useCallback(() => {
 		const el = ref.current;
 		if (!el) return;
 		const computed = window.getComputedStyle(el);
-		const font = computed.font;
-		const lh = parseFloat(computed.lineHeight);
-		const ls = parseFloat(computed.letterSpacing) || 0;
-		setResolvedFont(font || "16px sans-serif");
-		setResolvedLineHeight(Number.isNaN(lh) ? 20 : lh);
-		setResolvedLetterSpacing(Number.isNaN(ls) ? 0 : ls);
-		if (process.env.NODE_ENV === "development") {
-			if (computed.fontFamily?.includes("system-ui")) console.warn("[useMeasuredText] Font family \"system-ui\" detected on element. This is unsafe for layout accuracy on macOS. Use an explicit font family (e.g., Inter, Helvetica Neue).");
+		if (process.env.NODE_ENV === "development" && !hasWarnedSystemUi) {
+			if (computed.fontFamily?.split(",")[0]?.trim().replace(/^["']|["']$/gu, "") === "system-ui") {
+				hasWarnedSystemUi = true;
+				console.warn("[useMeasuredText] \"system-ui\" is the first font family on a measured element. Canvas measurement of system-ui is OS-dependent and unsafe for layout accuracy on macOS. Use an explicit font family first (e.g. Inter, Helvetica Neue), with system-ui only as a fallback.");
+			}
 		}
 	}, []);
 	const measure = useCallback(() => {
 		if (isSSR) return;
 		if (typeof globalThis !== "undefined" && globalThis.__SF_PRETEXT_DISABLED__) return;
 		if (!ref.current) return;
-		const containerWidth = ref.current.getBoundingClientRect().width;
+		const el = ref.current;
+		const parent = el.parentElement;
+		let containerWidth = el.getBoundingClientRect().width;
+		if (parent) {
+			const parentStyle = getComputedStyle(parent);
+			const paddingX = Number.parseFloat(parentStyle.paddingLeft) + Number.parseFloat(parentStyle.paddingRight);
+			const parentContentWidth = parent.clientWidth - paddingX;
+			if (parentContentWidth > 0) containerWidth = parentContentWidth;
+		}
 		if (containerWidth <= 0) return;
-		const font = resolvedFont;
-		const lh = lineHeightProp ?? resolvedLineHeight;
-		const ls = letterSpacingProp ?? resolvedLetterSpacing;
+		const computed = window.getComputedStyle(el);
+		const computedFont = computed.font || "16px sans-serif";
+		const computedLh = Number.parseFloat(computed.lineHeight);
+		const computedLs = Number.parseFloat(computed.letterSpacing);
+		const font = computedFont;
+		const lh = lineHeightProp ?? (Number.isNaN(computedLh) ? 20 : computedLh);
+		const ls = letterSpacingProp ?? (Number.isNaN(computedLs) ? 0 : computedLs);
 		try {
 			const { prepared, preparedWithSegments } = getPrepared(text, font, {
 				letterSpacing: ls,
@@ -147,9 +155,6 @@ function useMeasuredText(text, options = {}) {
 	}, [
 		text,
 		mode,
-		resolvedFont,
-		resolvedLineHeight,
-		resolvedLetterSpacing,
 		whiteSpace,
 		wordBreak,
 		reserveLines,
@@ -185,9 +190,15 @@ function useMeasuredText(text, options = {}) {
 		if (mode === "natural") return;
 		const el = ref.current;
 		if (!el) return;
+		const target = el.parentElement ?? el;
 		let rafId = null;
 		let pending = false;
+		let skipInitial = true;
 		const handleResize = () => {
+			if (skipInitial) {
+				skipInitial = false;
+				return;
+			}
 			if (pending) return;
 			pending = true;
 			rafId = requestAnimationFrame(() => {
@@ -197,7 +208,7 @@ function useMeasuredText(text, options = {}) {
 			});
 		};
 		const observer = new ResizeObserver(handleResize);
-		observer.observe(el);
+		observer.observe(target);
 		return () => {
 			observer.disconnect();
 			if (rafId !== null) cancelAnimationFrame(rafId);
@@ -229,7 +240,7 @@ function useMeasuredText(text, options = {}) {
 * SSR-safe: renders with CSS fallbacks initially; upgrades to measured
 * values after hydration without layout mismatch.
 */
-var MeasuredText = forwardRef(function MeasuredText({ children, as: Component = "span", wrap = "natural", reserveLines, whiteSpace = "normal", wordBreak = "normal", className, style, ...props }, forwardedRef) {
+var MeasuredText = forwardRef(({ children, as: Component = "span", wrap = "natural", reserveLines, whiteSpace = "normal", wordBreak = "normal", className, style, ...props }, forwardedRef) => {
 	const text = useMemo(() => {
 		if (typeof children === "string") return children;
 		if (typeof children === "number") return String(children);
@@ -247,34 +258,38 @@ var MeasuredText = forwardRef(function MeasuredText({ children, as: Component =
 		if (typeof forwardedRef === "function") forwardedRef(el);
 		else if (forwardedRef) forwardedRef.current = el;
 	};
+	const hasMeasuredRef = useRef(false);
+	const measured = ready && measurement !== null;
 	const layoutStyles = useMemo(() => {
-		if (!ready || !measurement) {
-			if (mode === "balance") return { textWrap: "balance" };
+		if (!measured) {
 			if (mode === "reserve" && typeof reserveLines === "number") return { minHeight: `${reserveLines * 1.5}em` };
 			return {};
 		}
+		const isFirstMeasurement = !hasMeasuredRef.current;
+		hasMeasuredRef.current = true;
+		const transition = (prop) => isFirstMeasurement ? void 0 : `${prop} 120ms ease-out`;
 		if (mode === "balance") return {
 			maxWidth: measurement.balancedWidth,
-			transition: "max-width 120ms ease-out"
+			transition: transition("max-width")
 		};
 		if (mode === "shrink") return {
 			maxWidth: measurement.maxLineWidth,
-			transition: "max-width 120ms ease-out"
+			transition: transition("max-width")
 		};
 		if (mode === "reserve") return {
 			minHeight: measurement.height,
-			transition: "min-height 120ms ease-out"
+			transition: transition("min-height")
 		};
 		return {};
 	}, [
 		mode,
 		measurement,
-		ready,
+		measured,
 		reserveLines
 	]);
 	return /* @__PURE__ */ jsx(Component, {
 		ref: setRefs,
-		className: cn(mode !== "natural" && "inline-block", className),
+		className: cn(measured && mode !== "natural" && "inline-block", className),
 		style: {
 			...layoutStyles,
 			...style
@@ -287,4 +302,4 @@ MeasuredText.displayName = "MeasuredText";
 //#endregion
 export { useMeasuredText as n, MeasuredText as t };
 
-//# sourceMappingURL=measured-text-BI3dTJmH.js.map
+//# sourceMappingURL=measured-text-CXkdw9Yr.js.map

package/dist/measured-text-CXkdw9Yr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measured-text-CXkdw9Yr.js","names":[],"sources":["../src/utils/use-measured-text.ts","../src/utils/measured-text.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  prepare,\n  prepareWithSegments,\n  layout,\n  measureLineStats,\n  measureNaturalWidth,\n  type PreparedText,\n  type PreparedTextWithSegments,\n} from \"@chenglou/pretext\";\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type MeasuredTextMode = \"natural\" | \"balance\" | \"shrink\" | \"reserve\";\n\nexport interface TextMeasurement {\n  /** Total height in pixels */\n  height: number;\n  /** Number of wrapped lines */\n  lineCount: number;\n  /** Width of the widest line */\n  maxLineWidth: number;\n  /**\n   * For balance mode: the smallest maxWidth that doesn't increase line count\n   * vs natural wrapping. For other modes, same as maxLineWidth.\n   */\n  balancedWidth: number;\n}\n\nexport interface UseMeasuredTextOptions {\n  /** Measurement strategy */\n  mode?: MeasuredTextMode;\n  /** Expected line height in pixels (syncs with CSS line-height). Auto-detected if omitted. */\n  lineHeight?: number;\n  /** CSS letter-spacing in pixels. Auto-detected if omitted. */\n  letterSpacing?: number;\n  /** CSS white-space behavior. @default \"normal\" */\n  whiteSpace?: \"normal\" | \"pre-wrap\";\n  /** CSS word-break behavior. @default \"normal\" */\n  wordBreak?: \"normal\" | \"keep-all\";\n  /**\n   * For reserve mode: pre-reserve this many lines of height before content arrives.\n   * Overrides measurement-based line count when provided.\n   */\n  reserveLines?: number;\n}\n\nexport interface UseMeasuredTextResult {\n  /** Ref to attach to the measured element */\n  ref: React.RefObject<HTMLElement | null>;\n  /** Measurement result (null when not ready or disabled) */\n  measurement: TextMeasurement | null;\n  /** Whether measurement is ready (false during SSR and initial paint) */\n  ready: boolean;\n}\n\n// ─── Module-level cache ──────────────────────────────────────────────────────\n\ntype CacheKey = string;\n\ninterface CachedPrepared {\n  prepared: PreparedText;\n  preparedWithSegments: PreparedTextWithSegments;\n}\n\nconst preparationCache = new Map<CacheKey, CachedPrepared>();\n\n/** Dev-only: ensures the `system-ui` first-family warning fires at most once. */\nlet hasWarnedSystemUi = false;\n\nlet fontsReadyPromise: Promise<void> | null = null;\n\nfunction getFontsReady(): Promise<void> {\n  if (fontsReadyPromise) return fontsReadyPromise;\n  if (typeof document === \"undefined\" || !document.fonts?.ready) {\n    fontsReadyPromise = Promise.resolve();\n    return fontsReadyPromise;\n  }\n  fontsReadyPromise = document.fonts.ready.then(() => undefined);\n  return fontsReadyPromise;\n}\n\nfunction makeCacheKey(\n  text: string,\n  font: string,\n  letterSpacing: number,\n  whiteSpace: string,\n  wordBreak: string\n): CacheKey {\n  return `${text}|${font}|${letterSpacing}|${whiteSpace}|${wordBreak}`;\n}\n\nfunction getPrepared(\n  text: string,\n  font: string,\n  options: {\n    letterSpacing: number;\n    whiteSpace: \"normal\" | \"pre-wrap\";\n    wordBreak: \"normal\" | \"keep-all\";\n  }\n): CachedPrepared {\n  const key = makeCacheKey(\n    text,\n    font,\n    options.letterSpacing,\n    options.whiteSpace,\n    options.wordBreak\n  );\n\n  const cached = preparationCache.get(key);\n  if (cached) return cached;\n\n  const prepared = prepare(text, font, {\n    letterSpacing: options.letterSpacing,\n    whiteSpace: options.whiteSpace,\n    wordBreak: options.wordBreak,\n  });\n\n  const preparedWithSegments = prepareWithSegments(text, font, {\n    letterSpacing: options.letterSpacing,\n    whiteSpace: options.whiteSpace,\n    wordBreak: options.wordBreak,\n  });\n\n  const entry: CachedPrepared = { prepared, preparedWithSegments };\n  preparationCache.set(key, entry);\n  return entry;\n}\n\n// ─── Hook ────────────────────────────────────────────────────────────────────\n\nconst isSSR = typeof window === \"undefined\";\nconst useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;\n\n/**\n * Measures text layout using @chenglou/pretext without DOM reflow.\n *\n * - Caches `prepare()` results keyed by text + font config (do not re-prepare on resize).\n * - Waits for `document.fonts.ready` before first measurement.\n * - Uses ResizeObserver (rAF-throttled) to recompute layout on container resize.\n * - SSR-safe: returns `ready: false` initially; measures post-hydration.\n *\n * @example\n * ```tsx\n * const { ref, measurement, ready } = useMeasuredText(\n *   \"Hello world\",\n *   { mode: \"balance\" }\n * );\n * // ready === false on SSR\n * // measurement.balancedWidth available after hydration + fonts load\n * ```\n */\nexport function useMeasuredText(\n  text: string,\n  options: UseMeasuredTextOptions = {}\n): UseMeasuredTextResult {\n  const {\n    mode = \"natural\",\n    lineHeight: lineHeightProp,\n    letterSpacing: letterSpacingProp,\n    whiteSpace = \"normal\",\n    wordBreak = \"normal\",\n    reserveLines,\n  } = options;\n\n  const ref = useRef<HTMLElement>(null);\n  const [ready, setReady] = useState(false);\n  const [measurement, setMeasurement] = useState<TextMeasurement | null>(null);\n\n  // Read computed styles from the DOM element. Font/line-height/letter-spacing\n  // are consumed synchronously inside `measure()`; this callback only exists for\n  // the dev-only `system-ui` warning so it doesn't drive any measurement state.\n  const readComputedStyles = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const computed = window.getComputedStyle(el);\n\n    // Dev-only warning when `system-ui` is the *effective* (first) font family.\n    // Canvas measurement of `system-ui` resolves to an OS-dependent face and is\n    // unsafe for layout accuracy on macOS (per pretext README). As a trailing\n    // fallback (e.g. after a loaded `Inter`) it never gets selected, so we only\n    // warn when it is the first family in the stack. Warn once to avoid spam.\n    if (process.env.NODE_ENV === \"development\" && !hasWarnedSystemUi) {\n      const firstFamily = computed.fontFamily\n        ?.split(\",\")[0]\n        ?.trim()\n        .replace(/^[\"']|[\"']$/gu, \"\");\n      if (firstFamily === \"system-ui\") {\n        hasWarnedSystemUi = true;\n        // eslint-disable-next-line no-console\n        console.warn(\n          `[useMeasuredText] \"system-ui\" is the first font family on a measured ` +\n            `element. Canvas measurement of system-ui is OS-dependent and unsafe ` +\n            `for layout accuracy on macOS. Use an explicit font family first ` +\n            `(e.g. Inter, Helvetica Neue), with system-ui only as a fallback.`\n        );\n      }\n    }\n  }, []);\n\n  // Main measurement effect\n  const measure = useCallback(() => {\n    if (isSSR) return;\n    if (\n      typeof globalThis !== \"undefined\" &&\n      (globalThis as { __SF_PRETEXT_DISABLED__?: boolean })\n        .__SF_PRETEXT_DISABLED__\n    ) {\n      return;\n    }\n    if (!ref.current) return;\n\n    const el = ref.current;\n\n    // Once measured the element becomes `inline-block`, so its own\n    // bounding box is shrink-to-fit — it reflects the text's *current*\n    // (possibly already-wrapped) width, not the width the layout is\n    // actually constrained to. Measuring against that collapses the\n    // layout and produces spurious wrapping whenever no ancestor sets an\n    // explicit width. Instead, measure against the parent's content-box\n    // width, which is the real constraint CSS imposes on the text.\n    const parent = el.parentElement;\n    let containerWidth = el.getBoundingClientRect().width;\n    if (parent) {\n      const parentStyle = getComputedStyle(parent);\n      const paddingX =\n        Number.parseFloat(parentStyle.paddingLeft) +\n        Number.parseFloat(parentStyle.paddingRight);\n      const parentContentWidth = parent.clientWidth - paddingX;\n      if (parentContentWidth > 0) {\n        containerWidth = parentContentWidth;\n      }\n    }\n    if (containerWidth <= 0) return;\n\n    // Read font metrics synchronously from the DOM at measure time rather than\n    // from React state. Routing them through state means the first measure runs\n    // with the default font (\"16px sans-serif\"), then the state update triggers\n    // a *second* measure with the real font — and that second pass animates,\n    // producing a visible width jump. Reading directly = one correct measure.\n    const computed = window.getComputedStyle(el);\n    const computedFont = computed.font || \"16px sans-serif\";\n    const computedLh = Number.parseFloat(computed.lineHeight);\n    const computedLs = Number.parseFloat(computed.letterSpacing);\n\n    const font = computedFont;\n    const lh = lineHeightProp ?? (Number.isNaN(computedLh) ? 20 : computedLh);\n    const ls = letterSpacingProp ?? (Number.isNaN(computedLs) ? 0 : computedLs);\n\n    try {\n      const { prepared, preparedWithSegments } = getPrepared(text, font, {\n        letterSpacing: ls,\n        whiteSpace,\n        wordBreak,\n      });\n\n      // Mode-specific measurement\n      let height = 0;\n      let lineCount = 0;\n      let maxLineWidth = 0;\n      let balancedWidth = 0;\n\n      if (mode === \"reserve\" && typeof reserveLines === \"number\") {\n        // Use reserved line count for height, but still measure width\n        const stats = measureLineStats(preparedWithSegments, containerWidth);\n        maxLineWidth = stats.maxLineWidth;\n        lineCount = reserveLines;\n        height = reserveLines * lh;\n        balancedWidth = maxLineWidth;\n      } else if (mode === \"shrink\") {\n        // Measure natural width (widest unwrapped line)\n        maxLineWidth = measureNaturalWidth(preparedWithSegments);\n        balancedWidth = maxLineWidth;\n        // Re-layout at that width to get accurate line count/height\n        const result = layout(prepared, maxLineWidth, lh);\n        height = result.height;\n        lineCount = result.lineCount;\n      } else if (mode === \"balance\") {\n        // Find balanced width: smallest width that doesn't add lines\n        const naturalResult = layout(prepared, containerWidth, lh);\n        const naturalLineCount = naturalResult.lineCount;\n\n        // Binary search for smallest width that keeps same line count\n        let low = 0;\n        let high = containerWidth;\n        balancedWidth = containerWidth;\n\n        for (let i = 0; i < 12; i++) {\n          // 12 iterations = ~0.02% precision\n          const mid = (low + high) / 2;\n          const stats = measureLineStats(preparedWithSegments, mid);\n          if (stats.lineCount <= naturalLineCount && stats.lineCount > 0) {\n            balancedWidth = mid;\n            high = mid;\n          } else {\n            low = mid;\n          }\n        }\n\n        // Final measurement at balanced width\n        const result = layout(prepared, balancedWidth, lh);\n        height = result.height;\n        lineCount = result.lineCount;\n        maxLineWidth =\n          naturalResult.lineCount > 0\n            ? measureLineStats(preparedWithSegments, containerWidth)\n                .maxLineWidth\n            : 0;\n      } else {\n        // natural or default\n        const result = layout(prepared, containerWidth, lh);\n        height = result.height;\n        lineCount = result.lineCount;\n        maxLineWidth = measureLineStats(\n          preparedWithSegments,\n          containerWidth\n        ).maxLineWidth;\n        balancedWidth = maxLineWidth;\n      }\n\n      setMeasurement({ height, lineCount, maxLineWidth, balancedWidth });\n      setReady(true);\n    } catch (err) {\n      // Measurement failed (e.g., canvas unavailable) — keep CSS fallback behavior\n      if (process.env.NODE_ENV === \"development\") {\n        // eslint-disable-next-line no-console\n        console.warn(\"[useMeasuredText] Measurement failed:\", err);\n      }\n    }\n  }, [\n    text,\n    mode,\n    whiteSpace,\n    wordBreak,\n    reserveLines,\n    lineHeightProp,\n    letterSpacingProp,\n  ]);\n\n  // Initial measurement after fonts load and layout settles\n  useIsomorphicLayoutEffect(() => {\n    if (isSSR) return;\n    if (mode === \"natural\") {\n      // No measurement needed for natural mode\n      setReady(true);\n      return;\n    }\n\n    let cancelled = false;\n\n    const runMeasurement = async () => {\n      await getFontsReady();\n      if (cancelled) return;\n\n      // Read computed styles first\n      readComputedStyles();\n\n      // Measure on next frame to ensure layout settled\n      requestAnimationFrame(() => {\n        if (!cancelled) measure();\n      });\n    };\n\n    runMeasurement();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [measure, mode, readComputedStyles]);\n\n  // ResizeObserver with rAF throttling\n  useEffect(() => {\n    if (isSSR) return;\n    if (mode === \"natural\") return;\n\n    const el = ref.current;\n    if (!el) return;\n\n    // Observe the *parent*, not the element. The element's own width is what\n    // we control via `maxWidth`; observing it creates a feedback loop —\n    // applying a measured maxWidth shrinks the element, the observer sees that\n    // as a resize, re-measures, and the second pass animates (causing the\n    // visible flash). The parent's content box is the real layout constraint,\n    // so re-measure only when *that* changes.\n    const target = el.parentElement ?? el;\n\n    let rafId: number | null = null;\n    let pending = false;\n    // ResizeObserver fires a synthetic callback immediately on observe with the\n    // current size. The initial measurement is already handled by the layout\n    // effect, so ignore this first delivery — otherwise it triggers a redundant\n    // second measure that animates (the visible flash).\n    let skipInitial = true;\n\n    const handleResize = () => {\n      if (skipInitial) {\n        skipInitial = false;\n        return;\n      }\n      if (pending) return;\n      pending = true;\n\n      rafId = requestAnimationFrame(() => {\n        pending = false;\n        readComputedStyles();\n        measure();\n      });\n    };\n\n    const observer = new ResizeObserver(handleResize);\n    observer.observe(target);\n\n    return () => {\n      observer.disconnect();\n      if (rafId !== null) cancelAnimationFrame(rafId);\n    };\n  }, [measure, mode, readComputedStyles]);\n\n  return { ref, measurement, ready };\n}\n","\"use client\";\n\nimport type { ElementType, ReactNode, CSSProperties } from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { cn } from \"./cn\";\nimport { useMeasuredText, type MeasuredTextMode } from \"./use-measured-text\";\n\n// Re-export the type for consumers\nexport type { MeasuredTextMode } from \"./use-measured-text\";\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface MeasuredTextProps {\n  /** Text content to measure and render */\n  children: ReactNode;\n  /** HTML element to render as. @default \"span\" */\n  as?: ElementType;\n  /** Measurement/wrapping strategy */\n  wrap?: MeasuredTextMode | false;\n  /**\n   * For reserve mode: pre-reserve this many lines.\n   * If omitted in reserve mode, measures children to determine line count.\n   */\n  reserveLines?: number;\n  /** CSS white-space behavior. @default \"normal\" */\n  whiteSpace?: \"normal\" | \"pre-wrap\";\n  /** CSS word-break behavior. @default \"normal\" */\n  wordBreak?: \"normal\" | \"keep-all\";\n  /** Additional CSS classes */\n  className?: string;\n  /** Inline styles (merged with measured styles) */\n  style?: CSSProperties;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * Internal component that renders text with pretext-driven layout.\n *\n * This is NOT exported publicly. It powers the public `Text` component.\n *\n * Strategies:\n * - `balance`: finds smallest maxWidth that doesn't increase line count\n * - `shrink`: hugs the widest natural line (maxWidth = maxLineWidth)\n * - `reserve`: sets minHeight based on line count × lineHeight\n * - `natural` / `false`: no measurement, renders as normal inline element\n *\n * SSR-safe: renders with CSS fallbacks initially; upgrades to measured\n * values after hydration without layout mismatch.\n */\nexport const MeasuredText = forwardRef<HTMLElement, MeasuredTextProps>(\n  (\n    {\n      children,\n      as: Component = \"span\",\n      wrap = \"natural\",\n      reserveLines,\n      whiteSpace = \"normal\",\n      wordBreak = \"normal\",\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    // Extract text content for measurement (simple stringification for now)\n    const text = useMemo(() => {\n      if (typeof children === \"string\") return children;\n      if (typeof children === \"number\") return String(children);\n      // For complex children, we can't measure accurately — fall back to natural\n      return \"\";\n    }, [children]);\n\n    const mode = wrap === false ? \"natural\" : wrap;\n    const shouldMeasure = mode !== \"natural\" && text.length > 0;\n\n    const { ref, measurement, ready } = useMeasuredText(text, {\n      mode: shouldMeasure ? mode : \"natural\",\n      whiteSpace,\n      wordBreak,\n      reserveLines,\n    });\n\n    // Merge refs\n    const setRefs = (el: HTMLElement | null) => {\n      (ref as React.MutableRefObject<HTMLElement | null>).current = el;\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(el);\n      } else if (forwardedRef) {\n        (forwardedRef as React.MutableRefObject<HTMLElement | null>).current =\n          el;\n      }\n    };\n\n    // Track whether the first real measurement has landed so we only\n    // animate *subsequent* changes (e.g. resize). Animating the initial\n    // settle makes the layout visibly slide/unwrap on load.\n    const hasMeasuredRef = useRef(false);\n    const measured = ready && measurement !== null;\n\n    // Compute layout styles based on mode and measurement state\n    const layoutStyles = useMemo<CSSProperties>(() => {\n      if (!measured) {\n        // Pre-measurement: render at natural width. Do NOT use\n        // `text-wrap: balance` here — combined with `inline-block` and no\n        // width it forces the browser to wrap into balanced lines on first\n        // paint, which then visibly unwraps once measurement applies a\n        // maxWidth. A bare inline-block shrink-wraps to a single line.\n        if (mode === \"reserve\" && typeof reserveLines === \"number\") {\n          // Heuristic: assume 1.5em line height for SSR reserve\n          return { minHeight: `${reserveLines * 1.5}em` };\n        }\n        return {};\n      }\n\n      const isFirstMeasurement = !hasMeasuredRef.current;\n      hasMeasuredRef.current = true;\n      // Only transition on changes after the initial settle.\n      const transition = (prop: string) =>\n        isFirstMeasurement ? undefined : `${prop} 120ms ease-out`;\n\n      // Post-measurement: apply precise values\n      if (mode === \"balance\") {\n        return {\n          maxWidth: measurement.balancedWidth,\n          transition: transition(\"max-width\"),\n        };\n      }\n\n      if (mode === \"shrink\") {\n        return {\n          maxWidth: measurement.maxLineWidth,\n          transition: transition(\"max-width\"),\n        };\n      }\n\n      if (mode === \"reserve\") {\n        return {\n          minHeight: measurement.height,\n          transition: transition(\"min-height\"),\n        };\n      }\n\n      return {};\n    }, [mode, measurement, measured, reserveLines]);\n\n    return (\n      <Component\n        ref={setRefs}\n        className={cn(\n          // Only become `inline-block` once measured. `measured` is false both\n          // on the server and on the first client render, so hydration matches\n          // exactly (no markup/layout swap). First paint therefore uses normal\n          // block/inline flow at the full available width — text wraps the same\n          // way the browser would naturally — and we only switch to\n          // `inline-block` + `maxWidth` to tighten the balance after measuring.\n          // A width-less `inline-block` in SSR shrink-wraps to content and is\n          // what produced the odd first-paint wrap.\n          measured && mode !== \"natural\" && \"inline-block\",\n          className\n        )}\n        style={{\n          ...layoutStyles,\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nMeasuredText.displayName = \"MeasuredText\";\n"],"mappings":"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"}

package/dist/{menubar-Cxf3xeAt.js → menubar-CoOr4ocj.js}

@@ -1,6 +1,6 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Tooltip } from "./tooltip-g9lFsvcT.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as Tooltip } from "./tooltip-uobk6Oh-.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { IconContext } from "@phosphor-icons/react";
@@ -99,4 +99,4 @@ var MenuBar = ({ className, isActive, options, optionIds = false }) => {
 //#endregion
 export { useMenuNavigation as n, MenuBar as t };
 
-//# sourceMappingURL=menubar-Cxf3xeAt.js.map
+//# sourceMappingURL=menubar-CoOr4ocj.js.map

package/dist/{menubar-Cxf3xeAt.js.map → menubar-CoOr4ocj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"menubar-Cxf3xeAt.js","names":[],"sources":["../src/components/menubar/use-menu-navigation.ts","../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n      )\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Tooltip } from \"../tooltip\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const SF_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_MENUBAR_VARIANTS\nexport interface SFMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: SFMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-sf-fill bg-sf-fill pl-px shadow-xs transition-colors\"\n  );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n  /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n  icon: React.ReactNode;\n  /** Unique identifier for the option (used when `optionIds` is true) */\n  id?: number | string;\n  /** Currently active value from the parent MenuBar */\n  isActive?: number | boolean | string | undefined;\n  /** Callback when this option is clicked */\n  onClick: () => void;\n  /** Tooltip text shown on hover */\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  return (\n    <Tooltip content={tooltip}>\n      <button\n        className={cn(\n          \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-sf-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]\",\n          {\n            \"z-20 bg-sf-base shadow-xs transition-colors\": isActive === id,\n          }\n        )}\n        onClick={onClick}\n      >\n        <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n          {icon}\n        </IconContext.Provider>\n      </button>\n    </Tooltip>\n  );\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={activeIndex}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n *     { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n *   ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The currently active option value — matched against option index or `id`. */\n  isActive: number | boolean | string | undefined;\n  /** Array of menu option configurations. */\n  options: MenuOptionProps[];\n  /** When true, each option's `id` field is used for matching instead of its array index. */\n  optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={0}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n *     { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n *   ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"flex rounded-lg border border-sf-fill bg-sf-fill pl-px shadow-xs transition-colors\",\n        className\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB,EAChC,SACA,YAAY,mBACgB;CAC5B,MAAM,mBAAmB,OAA2B,KAAK;AAEzD,iBAAgB;AACd,MAAI,CAAC,QAAQ,QAAS;EAEtB,MAAM,oBAAoB,MAAM,KAC9B,QAAQ,QAAQ,iBACd,iFACD,CACF;AAED,MAAI,kBAAkB,WAAW,EAAG;EAEpC,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,CAAC,iBAAiB,QAAS;GAE/B,MAAM,eAAe,kBAAkB,QAAQ,iBAAiB,QAAQ;GACxE,IAAI,YAAY;GAEhB,MAAM,eAAe,cAAc;GACnC,MAAM,aAAa,eAAe,eAAe;GACjD,MAAM,cAAc,eAAe,cAAc;AAEjD,OAAI,EAAE,QAAQ,YAAY;AACxB,MAAE,gBAAgB;AAClB,iBAAa,eAAe,KAAK,kBAAkB;cAC1C,EAAE,QAAQ,aAAa;AAChC,MAAE,gBAAgB;AAClB,iBACG,eAAe,IAAI,kBAAkB,UACtC,kBAAkB;SAEpB;GAGF,MAAM,cAAc,kBAAkB;AACtC,oBAAiB,UAAU;AAC3B,eAAY,OAAO;;EAGrB,MAAM,uBACJ,SAAS,iBAAiB,WAAW,cAAc;EACrD,MAAM,0BACJ,SAAS,oBAAoB,WAAW,cAAc;EAExD,MAAM,sBAAsB;AAC1B,oBAAiB,UAAU,SAAS;AACpC,mBAAgB;;EAGlB,MAAM,uBAAuB;AAC3B,oBAAiB,UAAU;AAC3B,sBAAmB;;AAGrB,UAAQ,QAAQ,iBAAiB,WAAW,cAAc;AAC1D,UAAQ,QAAQ,iBAAiB,YAAY,eAAe;AAE5D,eAAa;AACX,WAAQ,SAAS,oBAAoB,WAAW,cAAc;AAC9D,WAAQ,SAAS,oBAAoB,YAAY,eAAe;AAChE,sBAAmB;;IAEpB,CAAC,SAAS,UAAU,CAAC;;;;ACpC1B,IAAM,cAAc,EAClB,MACA,IACA,UACA,SACA,cACqB;AACrB,QACE,oBAAC,SAAD;EAAS,SAAS;YAChB,oBAAC,UAAD;GACE,WAAW,GACT,+QACA,EACE,+CAA+C,aAAa,IAC7D,CACF;GACQ;aAET,oBAAC,YAAY,UAAb;IAAsB,OAAO,EAAE,MAAM,IAAI;cACtC;IACoB,CAAA;GAChB,CAAA;EACD,CAAA;;;;;;;;;;;;;;;;;;;AAgDd,IAAa,WAAW,EACtB,WACA,UACA,SACA,YAAY,YACM;CAClB,MAAM,UAAU,OAA2B,KAAK;AAEhD,mBAAkB;EAAE;EAAS,WAAW;EAAc,CAAC;AAEvD,QACE,oBAAC,OAAD;EACE,WAAW,GACT,sFACA,UACD;EACD,KAAK;YAEJ,QAAQ,KAAK,QAAQ,UACpB,oBAAC,YAAD;GAEE,GAAI;GACM;GACV,IAAI,YAAY,OAAO,KAAK;GAC5B,EAJK,MAIL,CACF;EACE,CAAA"}
+{"version":3,"file":"menubar-CoOr4ocj.js","names":[],"sources":["../src/components/menubar/use-menu-navigation.ts","../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n      )\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Tooltip } from \"../tooltip\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const SF_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_MENUBAR_VARIANTS\nexport interface SFMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: SFMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-sf-fill bg-sf-fill pl-px shadow-xs transition-colors\"\n  );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n  /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n  icon: React.ReactNode;\n  /** Unique identifier for the option (used when `optionIds` is true) */\n  id?: number | string;\n  /** Currently active value from the parent MenuBar */\n  isActive?: number | boolean | string | undefined;\n  /** Callback when this option is clicked */\n  onClick: () => void;\n  /** Tooltip text shown on hover */\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  return (\n    <Tooltip content={tooltip}>\n      <button\n        className={cn(\n          \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-sf-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]\",\n          {\n            \"z-20 bg-sf-base shadow-xs transition-colors\": isActive === id,\n          }\n        )}\n        onClick={onClick}\n      >\n        <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n          {icon}\n        </IconContext.Provider>\n      </button>\n    </Tooltip>\n  );\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={activeIndex}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n *     { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n *   ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The currently active option value — matched against option index or `id`. */\n  isActive: number | boolean | string | undefined;\n  /** Array of menu option configurations. */\n  options: MenuOptionProps[];\n  /** When true, each option's `id` field is used for matching instead of its array index. */\n  optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={0}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n *     { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n *   ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"flex rounded-lg border border-sf-fill bg-sf-fill pl-px shadow-xs transition-colors\",\n        className\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB,EAChC,SACA,YAAY,mBACgB;CAC5B,MAAM,mBAAmB,OAA2B,IAAI;CAExD,gBAAgB;EACd,IAAI,CAAC,QAAQ,SAAS;EAEtB,MAAM,oBAAoB,MAAM,KAC9B,QAAQ,QAAQ,iBACd,gFACF,CACF;EAEA,IAAI,kBAAkB,WAAW,GAAG;EAEpC,MAAM,iBAAiB,MAAqB;GAC1C,IAAI,CAAC,iBAAiB,SAAS;GAE/B,MAAM,eAAe,kBAAkB,QAAQ,iBAAiB,OAAO;GACvE,IAAI,YAAY;GAEhB,MAAM,eAAe,cAAc;GACnC,MAAM,aAAa,eAAe,eAAe;GACjD,MAAM,cAAc,eAAe,cAAc;GAEjD,IAAI,EAAE,QAAQ,YAAY;IACxB,EAAE,eAAe;IACjB,aAAa,eAAe,KAAK,kBAAkB;GACrD,OAAO,IAAI,EAAE,QAAQ,aAAa;IAChC,EAAE,eAAe;IACjB,aACG,eAAe,IAAI,kBAAkB,UACtC,kBAAkB;GACtB,OACE;GAGF,MAAM,cAAc,kBAAkB;GACtC,iBAAiB,UAAU;GAC3B,YAAY,MAAM;EACpB;EAEA,MAAM,uBACJ,SAAS,iBAAiB,WAAW,aAAa;EACpD,MAAM,0BACJ,SAAS,oBAAoB,WAAW,aAAa;EAEvD,MAAM,sBAAsB;GAC1B,iBAAiB,UAAU,SAAS;GACpC,eAAe;EACjB;EAEA,MAAM,uBAAuB;GAC3B,iBAAiB,UAAU;GAC3B,kBAAkB;EACpB;EAEA,QAAQ,QAAQ,iBAAiB,WAAW,aAAa;EACzD,QAAQ,QAAQ,iBAAiB,YAAY,cAAc;EAE3D,aAAa;GACX,QAAQ,SAAS,oBAAoB,WAAW,aAAa;GAC7D,QAAQ,SAAS,oBAAoB,YAAY,cAAc;GAC/D,kBAAkB;EACpB;CACF,GAAG,CAAC,SAAS,SAAS,CAAC;AACzB;;;ACrCA,IAAM,cAAc,EAClB,MACA,IACA,UACA,SACA,cACqB;CACrB,OACE,oBAAC,SAAD;EAAS,SAAS;YAChB,oBAAC,UAAD;GACE,WAAW,GACT,+QACA,EACE,+CAA+C,aAAa,GAC9D,CACF;GACS;aAET,oBAAC,YAAY,UAAb;IAAsB,OAAO,EAAE,MAAM,GAAG;cACrC;GACmB,CAAA;EAChB,CAAA;CACD,CAAA;AAEb;;;;;;;;;;;;;;;;;;AA8CA,IAAa,WAAW,EACtB,WACA,UACA,SACA,YAAY,YACM;CAClB,MAAM,UAAU,OAA2B,IAAI;CAE/C,kBAAkB;EAAE;EAAS,WAAW;CAAa,CAAC;CAEtD,OACE,oBAAC,OAAD;EACE,WAAW,GACT,sFACA,SACF;EACA,KAAK;YAEJ,QAAQ,KAAK,QAAQ,UACpB,oBAAC,YAAD;GAEE,GAAI;GACM;GACV,IAAI,YAAY,OAAO,KAAK;EAC7B,GAJM,KAIN,CACF;CACE,CAAA;AAET"}

package/dist/{meter-BFFe9l5b.js → meter-Pf_VOl59.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react/meter";
 //#region src/components/meter/meter.tsx
@@ -34,4 +34,4 @@ function Meter$1({ value, customValue, label, showValue = true, className, track
 //#endregion
 export { Meter$1 as t };
 
-//# sourceMappingURL=meter-BFFe9l5b.js.map
+//# sourceMappingURL=meter-Pf_VOl59.js.map

package/dist/{meter-BFFe9l5b.js.map → meter-Pf_VOl59.js.map}

@@ -1 +1 @@
-{"version":3,"file":"meter-BFFe9l5b.js","names":[],"sources":["../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const SF_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_METER_VARIANTS\nexport interface SFMeterVariantsProps {}\n\nexport function meterVariants(_props: SFMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\"\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, SFMeterVariantsProps {\n  /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n  customValue?: string;\n  /** Label text displayed above the meter track. */\n  label: string;\n  /**\n   * Whether to display the percentage value next to the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** Additional CSS classes for the track (background bar). */\n  trackClassName?: string;\n  /** Additional CSS classes for the indicator (filled bar). */\n  indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-sf-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-sf-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-sf-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-sf-fill\",\n          trackClassName\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-sf-brand via-sf-brand to-sf-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAyDA,SAAgB,QAAM,EACpB,OACA,aACA,OACA,YAAY,MACZ,WACA,gBACA,oBACA,GAAG,SACU;AACb,QACE,qBAAC,MAAU,MAAX;EACS;EACP,GAAI;EACJ,WAAW,GAAG,8BAA8B,UAAU;YAHxD,CAKE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,MAAU,OAAX;IAAiB,WAAU;cACxB;IACe,CAAA,EACjB,cACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,GAEP,oBAAA,UAAA,EAAA,UACG,aACC,oBAAC,MAAU,OAAX,EAAiB,WAAU,oDAAqD,CAAA,EAEjF,CAAA,CAED;MACN,oBAAC,MAAU,OAAX;GACE,WAAW,GACT,+DACA,eACD;aAED,oBAAC,MAAU,WAAX,EACE,WAAW,GACT,yIACA,mBACD,EACD,CAAA;GACc,CAAA,CACH"}
+{"version":3,"file":"meter-Pf_VOl59.js","names":[],"sources":["../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const SF_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_METER_VARIANTS\nexport interface SFMeterVariantsProps {}\n\nexport function meterVariants(_props: SFMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\"\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, SFMeterVariantsProps {\n  /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n  customValue?: string;\n  /** Label text displayed above the meter track. */\n  label: string;\n  /**\n   * Whether to display the percentage value next to the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** Additional CSS classes for the track (background bar). */\n  trackClassName?: string;\n  /** Additional CSS classes for the indicator (filled bar). */\n  indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-sf-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-sf-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-sf-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-sf-fill\",\n          trackClassName\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-sf-brand via-sf-brand to-sf-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAyDA,SAAgB,QAAM,EACpB,OACA,aACA,OACA,YAAY,MACZ,WACA,gBACA,oBACA,GAAG,SACU;CACb,OACE,qBAAC,MAAU,MAAX;EACS;EACP,GAAI;EACJ,WAAW,GAAG,8BAA8B,SAAS;YAHvD,CAKE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,MAAU,OAAX;IAAiB,WAAU;cACxB;GACc,CAAA,GAChB,cACC,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA,IAEN,oBAAA,UAAA,EAAA,UACG,aACC,oBAAC,MAAU,OAAX,EAAiB,WAAU,mDAAoD,CAAA,EAEjF,CAAA,CAED;MACL,oBAAC,MAAU,OAAX;GACE,WAAW,GACT,+DACA,cACF;aAEA,oBAAC,MAAU,WAAX,EACE,WAAW,GACT,yIACA,kBACF,EACD,CAAA;EACc,CAAA,CACH;;AAEpB"}

package/dist/{pagination-yS372Tr4.js → pagination-DSY279Ta.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as InputGroup } from "./input-ClB_E4Lb.js";
+import { t as InputGroup } from "./input-COmx2M_R.js";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
@@ -114,4 +114,4 @@ function Pagination({ page = 1, perPage, totalCount, setPage, text, controls = S
 //#endregion
 export { Pagination as t };
 
-//# sourceMappingURL=pagination-yS372Tr4.js.map
+//# sourceMappingURL=pagination-DSY279Ta.js.map

package/dist/{pagination-yS372Tr4.js.map → pagination-DSY279Ta.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination-yS372Tr4.js","names":[],"sources":["../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { InputGroup } from \"../input\";\n\n/** Pagination controls variant definitions. */\nexport const SF_PAGINATION_VARIANTS = {\n  controls: {\n    full: {\n      classes: \"\",\n      description:\n        \"Full pagination controls with first, previous, page input, next, and last buttons\",\n    },\n    simple: {\n      classes: \"\",\n      description:\n        \"Simple pagination controls with only previous and next buttons\",\n    },\n  },\n} as const;\n\nexport type SFPaginationControls = keyof typeof SF_PAGINATION_VARIANTS.controls;\n\nexport const SF_PAGINATION_DEFAULT_VARIANTS = {\n  controls: \"full\",\n} as const;\n\nexport interface SFPaginationVariantsProps {\n  controls?: SFPaginationControls;\n}\n\nexport function paginationVariants({\n  controls = SF_PAGINATION_DEFAULT_VARIANTS.controls,\n}: SFPaginationVariantsProps = {}) {\n  return cn(\n    \"flex items-center justify-between gap-2\",\n    SF_PAGINATION_VARIANTS.controls[controls].classes\n  );\n}\n\n/**\n * Pagination component props.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} controls=\"simple\" />\n * ```\n */\nexport interface PaginationProps extends SFPaginationVariantsProps {\n  /** Callback fired when the current page changes. */\n  setPage: (page: number) => void;\n  /**\n   * Current page number (1-indexed).\n   * @default 1\n   */\n  page?: number;\n  /** Number of items displayed per page. */\n  perPage?: number;\n  /** Total number of items across all pages. */\n  totalCount?: number;\n  /** Method to provide custom pagination text  */\n  text?: (props: {\n    page?: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => React.ReactNode;\n}\n\n/**\n * Page navigation controls with page count display.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport function Pagination({\n  page = 1,\n  perPage,\n  totalCount,\n  setPage,\n  text,\n  controls = SF_PAGINATION_DEFAULT_VARIANTS.controls,\n}: PaginationProps) {\n  const [editingPage, setEditingPage] = useState<number>(1);\n\n  // Value of the input as its being modified to display in the input, eventually syncs with `pagination.page`\n  useEffect(() => {\n    setEditingPage(page);\n  }, [page]);\n\n  const pageShowingRange = useMemo(() => {\n    let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n    let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n    if (Number.isNaN(lower)) lower = 0;\n    if (Number.isNaN(upper)) upper = 0;\n\n    return `${lower}-${upper}`;\n  }, [page, perPage, totalCount]);\n\n  const maxPage = useMemo(() => {\n    return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n  }, [totalCount, perPage]);\n\n  const getPaginationText = () => {\n    if (text) {\n      return text({ page, perPage, totalCount, pageShowingRange });\n    } else if (totalCount && totalCount > 0) {\n      return `Showing ${pageShowingRange} of ${totalCount}`;\n    }\n    return null;\n  };\n\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <div className=\"grow text-sm text-sf-strong\">{getPaginationText()}</div>\n      <div>\n        <InputGroup focusMode=\"individual\">\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"First page\"\n              disabled={page <= 1}\n              onClick={() => {\n                setPage(1);\n                setEditingPage(1);\n              }}\n            >\n              <CaretDoubleLeftIcon size={16} />\n            </InputGroup.Button>\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Previous page\"\n            disabled={page <= 1}\n            onClick={() => {\n              const previousPage = Math.max(page - 1, 1);\n              setPage(previousPage);\n              setEditingPage(previousPage);\n            }}\n          >\n            <CaretLeftIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Input\n              style={{ width: 50 }}\n              className=\"text-center\"\n              aria-label=\"Page number\"\n              value={editingPage}\n              onValueChange={(value: string) => {\n                setEditingPage(Number(value));\n              }}\n              onBlur={() => {\n                let number = Math.max(editingPage, 1);\n                number = Math.min(number, maxPage);\n                setPage(number);\n                setEditingPage(number);\n              }}\n            />\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Next page\"\n            disabled={page === maxPage}\n            onClick={() => {\n              const nextPage = Math.min(page + 1, maxPage);\n              setPage(nextPage);\n              setEditingPage(nextPage);\n            }}\n          >\n            <CaretRightIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"Last page\"\n              disabled={page === maxPage}\n              onClick={() => {\n                setPage(maxPage);\n                setEditingPage(maxPage);\n              }}\n            >\n              <CaretDoubleRightIcon size={16} />\n            </InputGroup.Button>\n          )}\n        </InputGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA6BA,IAAa,iCAAiC,EAC5C,UAAU,QACX;;;;;;;;;AAqDD,SAAgB,WAAW,EACzB,OAAO,GACP,SACA,YACA,SACA,MACA,WAAW,+BAA+B,YACxB;CAClB,MAAM,CAAC,aAAa,kBAAkB,SAAiB,EAAE;AAGzD,iBAAgB;AACd,iBAAe,KAAK;IACnB,CAAC,KAAK,CAAC;CAEV,MAAM,mBAAmB,cAAc;EACrC,IAAI,QAAQ,QAAQ,WAAW,MAAM,WAAW,KAAK;EACrD,IAAI,QAAQ,KAAK,IAAI,QAAQ,WAAW,IAAI,cAAc,EAAE;AAE5D,MAAI,OAAO,MAAM,MAAM,CAAE,SAAQ;AACjC,MAAI,OAAO,MAAM,MAAM,CAAE,SAAQ;AAEjC,SAAO,GAAG,MAAM,GAAG;IAClB;EAAC;EAAM;EAAS;EAAW,CAAC;CAE/B,MAAM,UAAU,cAAc;AAC5B,SAAO,KAAK,MAAM,cAAc,MAAM,WAAW,GAAG;IACnD,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,0BAA0B;AAC9B,MAAI,KACF,QAAO,KAAK;GAAE;GAAM;GAAS;GAAY;GAAkB,CAAC;WACnD,cAAc,aAAa,EACpC,QAAO,WAAW,iBAAiB,MAAM;AAE3C,SAAO;;AAGT,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aAA+B,mBAAmB;GAAO,CAAA,EACxE,oBAAC,OAAD,EAAA,UACE,qBAAC,YAAD;GAAY,WAAU;aAAtB;IACG,aAAa,UACZ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,QAAQ;KAClB,eAAe;AACb,cAAQ,EAAE;AACV,qBAAe,EAAE;;eAGnB,oBAAC,qBAAD,EAAqB,MAAM,IAAM,CAAA;KACf,CAAA;IAEtB,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,QAAQ;KAClB,eAAe;MACb,MAAM,eAAe,KAAK,IAAI,OAAO,GAAG,EAAE;AAC1C,cAAQ,aAAa;AACrB,qBAAe,aAAa;;eAG9B,oBAAC,eAAD,EAAe,MAAM,IAAM,CAAA;KACT,CAAA;IACnB,aAAa,UACZ,oBAAC,WAAW,OAAZ;KACE,OAAO,EAAE,OAAO,IAAI;KACpB,WAAU;KACV,cAAW;KACX,OAAO;KACP,gBAAgB,UAAkB;AAChC,qBAAe,OAAO,MAAM,CAAC;;KAE/B,cAAc;MACZ,IAAI,SAAS,KAAK,IAAI,aAAa,EAAE;AACrC,eAAS,KAAK,IAAI,QAAQ,QAAQ;AAClC,cAAQ,OAAO;AACf,qBAAe,OAAO;;KAExB,CAAA;IAEJ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,SAAS;KACnB,eAAe;MACb,MAAM,WAAW,KAAK,IAAI,OAAO,GAAG,QAAQ;AAC5C,cAAQ,SAAS;AACjB,qBAAe,SAAS;;eAG1B,oBAAC,gBAAD,EAAgB,MAAM,IAAM,CAAA;KACV,CAAA;IACnB,aAAa,UACZ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,SAAS;KACnB,eAAe;AACb,cAAQ,QAAQ;AAChB,qBAAe,QAAQ;;eAGzB,oBAAC,sBAAD,EAAsB,MAAM,IAAM,CAAA;KAChB,CAAA;IAEX;MACT,CAAA,CACF"}
+{"version":3,"file":"pagination-DSY279Ta.js","names":[],"sources":["../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { InputGroup } from \"../input\";\n\n/** Pagination controls variant definitions. */\nexport const SF_PAGINATION_VARIANTS = {\n  controls: {\n    full: {\n      classes: \"\",\n      description:\n        \"Full pagination controls with first, previous, page input, next, and last buttons\",\n    },\n    simple: {\n      classes: \"\",\n      description:\n        \"Simple pagination controls with only previous and next buttons\",\n    },\n  },\n} as const;\n\nexport type SFPaginationControls = keyof typeof SF_PAGINATION_VARIANTS.controls;\n\nexport const SF_PAGINATION_DEFAULT_VARIANTS = {\n  controls: \"full\",\n} as const;\n\nexport interface SFPaginationVariantsProps {\n  controls?: SFPaginationControls;\n}\n\nexport function paginationVariants({\n  controls = SF_PAGINATION_DEFAULT_VARIANTS.controls,\n}: SFPaginationVariantsProps = {}) {\n  return cn(\n    \"flex items-center justify-between gap-2\",\n    SF_PAGINATION_VARIANTS.controls[controls].classes\n  );\n}\n\n/**\n * Pagination component props.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} controls=\"simple\" />\n * ```\n */\nexport interface PaginationProps extends SFPaginationVariantsProps {\n  /** Callback fired when the current page changes. */\n  setPage: (page: number) => void;\n  /**\n   * Current page number (1-indexed).\n   * @default 1\n   */\n  page?: number;\n  /** Number of items displayed per page. */\n  perPage?: number;\n  /** Total number of items across all pages. */\n  totalCount?: number;\n  /** Method to provide custom pagination text  */\n  text?: (props: {\n    page?: number;\n    perPage?: number;\n    totalCount?: number;\n    pageShowingRange: string;\n  }) => React.ReactNode;\n}\n\n/**\n * Page navigation controls with page count display.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport function Pagination({\n  page = 1,\n  perPage,\n  totalCount,\n  setPage,\n  text,\n  controls = SF_PAGINATION_DEFAULT_VARIANTS.controls,\n}: PaginationProps) {\n  const [editingPage, setEditingPage] = useState<number>(1);\n\n  // Value of the input as its being modified to display in the input, eventually syncs with `pagination.page`\n  useEffect(() => {\n    setEditingPage(page);\n  }, [page]);\n\n  const pageShowingRange = useMemo(() => {\n    let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n    let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n    if (Number.isNaN(lower)) lower = 0;\n    if (Number.isNaN(upper)) upper = 0;\n\n    return `${lower}-${upper}`;\n  }, [page, perPage, totalCount]);\n\n  const maxPage = useMemo(() => {\n    return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n  }, [totalCount, perPage]);\n\n  const getPaginationText = () => {\n    if (text) {\n      return text({ page, perPage, totalCount, pageShowingRange });\n    } else if (totalCount && totalCount > 0) {\n      return `Showing ${pageShowingRange} of ${totalCount}`;\n    }\n    return null;\n  };\n\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <div className=\"grow text-sm text-sf-strong\">{getPaginationText()}</div>\n      <div>\n        <InputGroup focusMode=\"individual\">\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"First page\"\n              disabled={page <= 1}\n              onClick={() => {\n                setPage(1);\n                setEditingPage(1);\n              }}\n            >\n              <CaretDoubleLeftIcon size={16} />\n            </InputGroup.Button>\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Previous page\"\n            disabled={page <= 1}\n            onClick={() => {\n              const previousPage = Math.max(page - 1, 1);\n              setPage(previousPage);\n              setEditingPage(previousPage);\n            }}\n          >\n            <CaretLeftIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Input\n              style={{ width: 50 }}\n              className=\"text-center\"\n              aria-label=\"Page number\"\n              value={editingPage}\n              onValueChange={(value: string) => {\n                setEditingPage(Number(value));\n              }}\n              onBlur={() => {\n                let number = Math.max(editingPage, 1);\n                number = Math.min(number, maxPage);\n                setPage(number);\n                setEditingPage(number);\n              }}\n            />\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Next page\"\n            disabled={page === maxPage}\n            onClick={() => {\n              const nextPage = Math.min(page + 1, maxPage);\n              setPage(nextPage);\n              setEditingPage(nextPage);\n            }}\n          >\n            <CaretRightIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"Last page\"\n              disabled={page === maxPage}\n              onClick={() => {\n                setPage(maxPage);\n                setEditingPage(maxPage);\n              }}\n            >\n              <CaretDoubleRightIcon size={16} />\n            </InputGroup.Button>\n          )}\n        </InputGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA6BA,IAAa,iCAAiC,EAC5C,UAAU,OACZ;;;;;;;;;AAqDA,SAAgB,WAAW,EACzB,OAAO,GACP,SACA,YACA,SACA,MACA,WAAW,+BAA+B,YACxB;CAClB,MAAM,CAAC,aAAa,kBAAkB,SAAiB,CAAC;CAGxD,gBAAgB;EACd,eAAe,IAAI;CACrB,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,mBAAmB,cAAc;EACrC,IAAI,QAAQ,QAAQ,WAAW,MAAM,WAAW,KAAK;EACrD,IAAI,QAAQ,KAAK,IAAI,QAAQ,WAAW,IAAI,cAAc,CAAC;EAE3D,IAAI,OAAO,MAAM,KAAK,GAAG,QAAQ;EACjC,IAAI,OAAO,MAAM,KAAK,GAAG,QAAQ;EAEjC,OAAO,GAAG,MAAM,GAAG;CACrB,GAAG;EAAC;EAAM;EAAS;CAAU,CAAC;CAE9B,MAAM,UAAU,cAAc;EAC5B,OAAO,KAAK,MAAM,cAAc,MAAM,WAAW,EAAE;CACrD,GAAG,CAAC,YAAY,OAAO,CAAC;CAExB,MAAM,0BAA0B;EAC9B,IAAI,MACF,OAAO,KAAK;GAAE;GAAM;GAAS;GAAY;EAAiB,CAAC;OACtD,IAAI,cAAc,aAAa,GACpC,OAAO,WAAW,iBAAiB,MAAM;EAE3C,OAAO;CACT;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aAA+B,kBAAkB;EAAO,CAAA,GACvE,oBAAC,OAAD,EAAA,UACE,qBAAC,YAAD;GAAY,WAAU;aAAtB;IACG,aAAa,UACZ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,QAAQ;KAClB,eAAe;MACb,QAAQ,CAAC;MACT,eAAe,CAAC;KAClB;eAEA,oBAAC,qBAAD,EAAqB,MAAM,GAAK,CAAA;IACf,CAAA;IAErB,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,QAAQ;KAClB,eAAe;MACb,MAAM,eAAe,KAAK,IAAI,OAAO,GAAG,CAAC;MACzC,QAAQ,YAAY;MACpB,eAAe,YAAY;KAC7B;eAEA,oBAAC,eAAD,EAAe,MAAM,GAAK,CAAA;IACT,CAAA;IAClB,aAAa,UACZ,oBAAC,WAAW,OAAZ;KACE,OAAO,EAAE,OAAO,GAAG;KACnB,WAAU;KACV,cAAW;KACX,OAAO;KACP,gBAAgB,UAAkB;MAChC,eAAe,OAAO,KAAK,CAAC;KAC9B;KACA,cAAc;MACZ,IAAI,SAAS,KAAK,IAAI,aAAa,CAAC;MACpC,SAAS,KAAK,IAAI,QAAQ,OAAO;MACjC,QAAQ,MAAM;MACd,eAAe,MAAM;KACvB;IACD,CAAA;IAEH,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,SAAS;KACnB,eAAe;MACb,MAAM,WAAW,KAAK,IAAI,OAAO,GAAG,OAAO;MAC3C,QAAQ,QAAQ;MAChB,eAAe,QAAQ;KACzB;eAEA,oBAAC,gBAAD,EAAgB,MAAM,GAAK,CAAA;IACV,CAAA;IAClB,aAAa,UACZ,oBAAC,WAAW,QAAZ;KACE,SAAQ;KACR,cAAW;KACX,UAAU,SAAS;KACnB,eAAe;MACb,QAAQ,OAAO;MACf,eAAe,OAAO;KACxB;eAEA,oBAAC,sBAAD,EAAsB,MAAM,GAAK,CAAA;IAChB,CAAA;GAEX;KACT,CAAA,CACF;;AAET"}

package/dist/{popover-SRoJaCZr.js → popover-BY-e9co1.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/popover/popover.tsx
@@ -144,4 +144,4 @@ var Popover$1 = Object.assign(PopoverRoot, {
 //#endregion
 export { PopoverRoot as a, SF_POPOVER_DEFAULT_VARIANTS as c, PopoverDescription as i, SF_POPOVER_VARIANTS as l, PopoverClose as n, PopoverTitle as o, PopoverContent as r, PopoverTrigger as s, Popover$1 as t };
 
-//# sourceMappingURL=popover-SRoJaCZr.js.map
+//# sourceMappingURL=popover-BY-e9co1.js.map

package/dist/{popover-SRoJaCZr.js.map → popover-BY-e9co1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover-SRoJaCZr.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverBase } from \"@base-ui/react/popover\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Popover side variant definitions mapping positions to their Tailwind classes. */\nexport const SF_POPOVER_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Popover appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Popover appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Popover appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Popover appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const SF_POPOVER_DEFAULT_VARIANTS = {\n  side: \"bottom\",\n} as const;\n\n// Derived types from SF_POPOVER_VARIANTS\nexport type SFPopoverSide = keyof typeof SF_POPOVER_VARIANTS.side;\n\nexport interface SFPopoverVariantsProps {\n  /**\n   * Which side of the trigger the popover appears on.\n   * - `\"top\"` — Above the trigger\n   * - `\"bottom\"` — Below the trigger\n   * - `\"left\"` — Left of the trigger\n   * - `\"right\"` — Right of the trigger\n   * @default \"bottom\"\n   */\n  side?: SFPopoverSide;\n}\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\ntype BasePopoverRootProps = ComponentPropsWithoutRef<typeof PopoverBase.Root>;\n\nexport type PopoverRootProps = BasePopoverRootProps;\n\nfunction PopoverRoot({ children, ...props }: PopoverRootProps) {\n  return <PopoverBase.Root {...props}>{children}</PopoverBase.Root>;\n}\n\nPopoverRoot.displayName = \"Popover\";\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\ntype BasePopoverTriggerProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Trigger\n>;\n\nexport type PopoverTriggerProps = BasePopoverTriggerProps & {\n  /** When true, the trigger element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverTrigger({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverTriggerProps) {\n  return (\n    <PopoverBase.Trigger\n      className={className}\n      render={\n        asChild ? (children as BasePopoverTriggerProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Trigger>\n  );\n}\n\nPopoverTrigger.displayName = \"Popover.Trigger\";\n\n// ============================================================================\n// Popover Content\n// ============================================================================\n\n/** Alignment options for popover positioning */\ntype PopoverAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Popover content panel props.\n *\n * @example\n * ```tsx\n * <Popover.Content side=\"top\" align=\"start\" sideOffset={12}>\n *   <p>Popover body</p>\n * </Popover.Content>\n * ```\n */\nexport type PopoverContentProps = SFPopoverVariantsProps & {\n  /**\n   * How to align the popover relative to the trigger.\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Distance between the trigger and the popover in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /**\n   * Additional offset along the alignment axis in pixels.\n   * @default 0\n   */\n  alignOffset?: number;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content to render inside the popover. */\n  children?: ReactNode;\n};\n\nfunction PopoverContent({\n  children,\n  side = SF_POPOVER_DEFAULT_VARIANTS.side,\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  className,\n}: PopoverContentProps) {\n  return (\n    <PopoverBase.Portal>\n      <PopoverBase.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverBase.Popup\n          className={cn(\n            \"flex origin-(--transform-origin) flex-col rounded-lg bg-sf-elevated px-4 py-3 text-sm text-sf-default\",\n            \"shadow-lg shadow-sf-tip-shadow outline outline-sf-fill\",\n            \"transition-[transform,scale,opacity] duration-150\",\n            \"data-starting-style:scale-90 data-starting-style:opacity-0\",\n            \"data-ending-style:scale-90 data-ending-style:opacity-0\",\n            \"data-instant:duration-0\",\n            \"sf-popover-popup\",\n            className\n          )}\n        >\n          <PopoverBase.Arrow\n            className={cn(\n              \"flex\",\n              \"data-[side=bottom]:-top-2\",\n              \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n              \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n              \"data-[side=top]:-bottom-2 data-[side=top]:rotate-180\"\n            )}\n          >\n            <ArrowSvg />\n          </PopoverBase.Arrow>\n          {children}\n        </PopoverBase.Popup>\n      </PopoverBase.Positioner>\n    </PopoverBase.Portal>\n  );\n}\n\nPopoverContent.displayName = \"Popover.Content\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\ntype BasePopoverTitleProps = ComponentPropsWithoutRef<typeof PopoverBase.Title>;\n\nexport type PopoverTitleProps = BasePopoverTitleProps;\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <PopoverBase.Title\n      className={cn(\"m-0 text-base leading-6 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverTitle.displayName = \"Popover.Title\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\ntype BasePopoverDescriptionProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Description\n>;\n\nexport type PopoverDescriptionProps = BasePopoverDescriptionProps;\n\nfunction PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <PopoverBase.Description\n      className={cn(\"m-0 text-base leading-6 text-sf-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverDescription.displayName = \"Popover.Description\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\ntype BasePopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverBase.Close>;\n\nexport type PopoverCloseProps = BasePopoverCloseProps & {\n  /** When true, the close element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverClose({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverCloseProps) {\n  return (\n    <PopoverBase.Close\n      className={className}\n      render={\n        asChild ? (children as BasePopoverCloseProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Close>\n  );\n}\n\nPopoverClose.displayName = \"Popover.Close\";\n\n// ============================================================================\n// Arrow SVG\n// ============================================================================\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's popover/tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches popover background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the popover's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/popover\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-sf-elevated\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-sf-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-sf-tip-stroke\"\n      />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Popover component for displaying accessible popup content anchored to a trigger.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <Popover.Trigger asChild>\n *     <Button>Open</Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <Popover.Title>Notifications</Popover.Title>\n *     <Popover.Description>You are all caught up!</Popover.Description>\n *   </Popover.Content>\n * </Popover>\n * ```\n *\n * @see https://base-ui.com/react/components/popover\n */\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\n// Export sub-components for direct access and type inference\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n};\n"],"mappings":";;;;;;AAMA,IAAa,sBAAsB,EACjC,MAAM;CACJ,KAAK;EACH,SAAS;EACT,aAAa;EACd;CACD,QAAQ;EACN,SAAS;EACT,aAAa;EACd;CACD,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,8BAA8B,EACzC,MAAM,UACP;AAyBD,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;AAC7D,QAAO,oBAAC,QAAY,MAAb;EAAkB,GAAI;EAAQ;EAA4B,CAAA;;AAGnE,YAAY,cAAc;AAe1B,SAAS,eAAe,EACtB,UACA,WACA,SACA,GAAG,SACmB;AACtB,QACE,oBAAC,QAAY,SAAb;EACa;EACX,QACE,UAAW,WAAiD,KAAA;EAE9D,GAAI;YAEH,UAAU,KAAA,IAAY;EACH,CAAA;;AAI1B,eAAe,cAAc;AAyC7B,SAAS,eAAe,EACtB,UACA,OAAO,4BAA4B,MACnC,QAAQ,UACR,aAAa,GACb,cAAc,GACd,aACsB;AACtB,QACE,oBAAC,QAAY,QAAb,EAAA,UACE,oBAAC,QAAY,YAAb;EACS;EACM;EACP;EACM;YAEZ,qBAAC,QAAY,OAAb;GACE,WAAW,GACT,yGACA,0DACA,qDACA,8DACA,0DACA,2BACA,oBACA,UACD;aAVH,CAYE,oBAAC,QAAY,OAAb;IACE,WAAW,GACT,QACA,6BACA,6DACA,+DACA,uDACD;cAED,oBAAC,UAAD,EAAY,CAAA;IACM,CAAA,EACnB,SACiB;;EACG,CAAA,EACN,CAAA;;AAIzB,eAAe,cAAc;AAU7B,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,QAAY,OAAb;EACE,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,aAAa,cAAc;AAY3B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAAC,QAAY,aAAb;EACE,WAAW,GAAG,0CAA0C,UAAU;EAClE,GAAI;EACJ,CAAA;;AAIN,mBAAmB,cAAc;AAajC,SAAS,aAAa,EACpB,UACA,WACA,SACA,GAAG,SACiB;AACpB,QACE,oBAAC,QAAY,OAAb;EACa;EACX,QACE,UAAW,WAA+C,KAAA;EAE5D,GAAI;YAEH,UAAU,KAAA,IAAY;EACL,CAAA;;AAIxB,aAAa,cAAc;;;;;;;;;;;;;;;;AAqB3B,SAAS,SAAS,OAAoC;AACpD,QACE,qBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,GAAI;YAAhE;GACE,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACF,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACF,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACE;;;;;;;;;;;;;;;;;;;;;AA0BV,IAAa,YAAU,OAAO,OAAO,aAAa;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;CACR,CAAC"}
+{"version":3,"file":"popover-BY-e9co1.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverBase } from \"@base-ui/react/popover\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Popover side variant definitions mapping positions to their Tailwind classes. */\nexport const SF_POPOVER_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Popover appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Popover appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Popover appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Popover appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const SF_POPOVER_DEFAULT_VARIANTS = {\n  side: \"bottom\",\n} as const;\n\n// Derived types from SF_POPOVER_VARIANTS\nexport type SFPopoverSide = keyof typeof SF_POPOVER_VARIANTS.side;\n\nexport interface SFPopoverVariantsProps {\n  /**\n   * Which side of the trigger the popover appears on.\n   * - `\"top\"` — Above the trigger\n   * - `\"bottom\"` — Below the trigger\n   * - `\"left\"` — Left of the trigger\n   * - `\"right\"` — Right of the trigger\n   * @default \"bottom\"\n   */\n  side?: SFPopoverSide;\n}\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\ntype BasePopoverRootProps = ComponentPropsWithoutRef<typeof PopoverBase.Root>;\n\nexport type PopoverRootProps = BasePopoverRootProps;\n\nfunction PopoverRoot({ children, ...props }: PopoverRootProps) {\n  return <PopoverBase.Root {...props}>{children}</PopoverBase.Root>;\n}\n\nPopoverRoot.displayName = \"Popover\";\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\ntype BasePopoverTriggerProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Trigger\n>;\n\nexport type PopoverTriggerProps = BasePopoverTriggerProps & {\n  /** When true, the trigger element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverTrigger({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverTriggerProps) {\n  return (\n    <PopoverBase.Trigger\n      className={className}\n      render={\n        asChild ? (children as BasePopoverTriggerProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Trigger>\n  );\n}\n\nPopoverTrigger.displayName = \"Popover.Trigger\";\n\n// ============================================================================\n// Popover Content\n// ============================================================================\n\n/** Alignment options for popover positioning */\ntype PopoverAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Popover content panel props.\n *\n * @example\n * ```tsx\n * <Popover.Content side=\"top\" align=\"start\" sideOffset={12}>\n *   <p>Popover body</p>\n * </Popover.Content>\n * ```\n */\nexport type PopoverContentProps = SFPopoverVariantsProps & {\n  /**\n   * How to align the popover relative to the trigger.\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Distance between the trigger and the popover in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /**\n   * Additional offset along the alignment axis in pixels.\n   * @default 0\n   */\n  alignOffset?: number;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content to render inside the popover. */\n  children?: ReactNode;\n};\n\nfunction PopoverContent({\n  children,\n  side = SF_POPOVER_DEFAULT_VARIANTS.side,\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  className,\n}: PopoverContentProps) {\n  return (\n    <PopoverBase.Portal>\n      <PopoverBase.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverBase.Popup\n          className={cn(\n            \"flex origin-(--transform-origin) flex-col rounded-lg bg-sf-elevated px-4 py-3 text-sm text-sf-default\",\n            \"shadow-lg shadow-sf-tip-shadow outline outline-sf-fill\",\n            \"transition-[transform,scale,opacity] duration-150\",\n            \"data-starting-style:scale-90 data-starting-style:opacity-0\",\n            \"data-ending-style:scale-90 data-ending-style:opacity-0\",\n            \"data-instant:duration-0\",\n            \"sf-popover-popup\",\n            className\n          )}\n        >\n          <PopoverBase.Arrow\n            className={cn(\n              \"flex\",\n              \"data-[side=bottom]:-top-2\",\n              \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n              \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n              \"data-[side=top]:-bottom-2 data-[side=top]:rotate-180\"\n            )}\n          >\n            <ArrowSvg />\n          </PopoverBase.Arrow>\n          {children}\n        </PopoverBase.Popup>\n      </PopoverBase.Positioner>\n    </PopoverBase.Portal>\n  );\n}\n\nPopoverContent.displayName = \"Popover.Content\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\ntype BasePopoverTitleProps = ComponentPropsWithoutRef<typeof PopoverBase.Title>;\n\nexport type PopoverTitleProps = BasePopoverTitleProps;\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <PopoverBase.Title\n      className={cn(\"m-0 text-base leading-6 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverTitle.displayName = \"Popover.Title\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\ntype BasePopoverDescriptionProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Description\n>;\n\nexport type PopoverDescriptionProps = BasePopoverDescriptionProps;\n\nfunction PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <PopoverBase.Description\n      className={cn(\"m-0 text-base leading-6 text-sf-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverDescription.displayName = \"Popover.Description\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\ntype BasePopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverBase.Close>;\n\nexport type PopoverCloseProps = BasePopoverCloseProps & {\n  /** When true, the close element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverClose({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverCloseProps) {\n  return (\n    <PopoverBase.Close\n      className={className}\n      render={\n        asChild ? (children as BasePopoverCloseProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Close>\n  );\n}\n\nPopoverClose.displayName = \"Popover.Close\";\n\n// ============================================================================\n// Arrow SVG\n// ============================================================================\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's popover/tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches popover background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the popover's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/popover\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-sf-elevated\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-sf-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-sf-tip-stroke\"\n      />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Popover component for displaying accessible popup content anchored to a trigger.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <Popover.Trigger asChild>\n *     <Button>Open</Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <Popover.Title>Notifications</Popover.Title>\n *     <Popover.Description>You are all caught up!</Popover.Description>\n *   </Popover.Content>\n * </Popover>\n * ```\n *\n * @see https://base-ui.com/react/components/popover\n */\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\n// Export sub-components for direct access and type inference\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n};\n"],"mappings":";;;;;;AAMA,IAAa,sBAAsB,EACjC,MAAM;CACJ,KAAK;EACH,SAAS;EACT,aAAa;CACf;CACA,QAAQ;EACN,SAAS;EACT,aAAa;CACf;CACA,MAAM;EACJ,SAAS;EACT,aAAa;CACf;CACA,OAAO;EACL,SAAS;EACT,aAAa;CACf;AACF,EACF;AAEA,IAAa,8BAA8B,EACzC,MAAM,SACR;AAyBA,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;CAC7D,OAAO,oBAAC,QAAY,MAAb;EAAkB,GAAI;EAAQ;CAA2B,CAAA;AAClE;AAEA,YAAY,cAAc;AAe1B,SAAS,eAAe,EACtB,UACA,WACA,SACA,GAAG,SACmB;CACtB,OACE,oBAAC,QAAY,SAAb;EACa;EACX,QACE,UAAW,WAAiD,KAAA;EAE9D,GAAI;YAEH,UAAU,KAAA,IAAY;CACJ,CAAA;AAEzB;AAEA,eAAe,cAAc;AAyC7B,SAAS,eAAe,EACtB,UACA,OAAO,4BAA4B,MACnC,QAAQ,UACR,aAAa,GACb,cAAc,GACd,aACsB;CACtB,OACE,oBAAC,QAAY,QAAb,EAAA,UACE,oBAAC,QAAY,YAAb;EACS;EACM;EACP;EACM;YAEZ,qBAAC,QAAY,OAAb;GACE,WAAW,GACT,yGACA,0DACA,qDACA,8DACA,0DACA,2BACA,oBACA,SACF;aAVF,CAYE,oBAAC,QAAY,OAAb;IACE,WAAW,GACT,QACA,6BACA,6DACA,+DACA,sDACF;cAEA,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,GAClB,QACgB;;CACG,CAAA,EACN,CAAA;AAExB;AAEA,eAAe,cAAc;AAU7B,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;CAChE,OACE,oBAAC,QAAY,OAAb;EACE,WAAW,GAAG,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc;AAY3B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;CAC5E,OACE,oBAAC,QAAY,aAAb;EACE,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc;AAajC,SAAS,aAAa,EACpB,UACA,WACA,SACA,GAAG,SACiB;CACpB,OACE,oBAAC,QAAY,OAAb;EACa;EACX,QACE,UAAW,WAA+C,KAAA;EAE5D,GAAI;YAEH,UAAU,KAAA,IAAY;CACN,CAAA;AAEvB;AAEA,aAAa,cAAc;;;;;;;;;;;;;;;;AAqB3B,SAAS,SAAS,OAAoC;CACpD,OACE,qBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,GAAI;YAAhE;GACE,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA;EACE;;AAET;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,YAAU,OAAO,OAAO,aAAa;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;AACT,CAAC"}

package/dist/{radio-BcwhwYNB.js → radio-DZwL13j0.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { createContext, forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react/fieldset";
@@ -98,4 +98,4 @@ var Radio$1 = {
 //#endregion
 export { radioVariants as a, SF_RADIO_VARIANTS as i, RadioGroup$1 as n, SF_RADIO_DEFAULT_VARIANTS as r, Radio$1 as t };
 
-//# sourceMappingURL=radio-BcwhwYNB.js.map
+//# sourceMappingURL=radio-DZwL13j0.js.map

package/dist/{radio-BcwhwYNB.js.map → radio-DZwL13j0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-BcwhwYNB.js","names":[],"sources":["../src/components/radio/radio.tsx"],"sourcesContent":["import { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { forwardRef, createContext, useContext, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const SF_RADIO_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"ring-sf-interact\",\n      description: \"Default radio appearance\",\n    },\n    error: {\n      classes: \"ring-destructive\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_RADIO_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_RADIO_VARIANTS\nexport type SFRadioVariant = keyof typeof SF_RADIO_VARIANTS.variant;\n\nexport interface SFRadioVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard radio appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFRadioVariant;\n}\n\nexport function radioVariants({\n  variant = SF_RADIO_DEFAULT_VARIANTS.variant,\n}: SFRadioVariantsProps = {}) {\n  return cn(SF_RADIO_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = SFRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition from Group to Items\nconst RadioGroupContext = createContext<{\n  controlPosition: RadioControlPosition;\n}>({\n  controlPosition: \"start\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n *   <Radio.Item label=\"Small\" value=\"sm\" />\n *   <Radio.Item label=\"Medium\" value=\"md\" />\n *   <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n *   legend=\"Payment method\"\n *   error=\"Please select a payment method\"\n *   description=\"Choose how you'd like to pay\"\n * >\n *   <Radio.Item label=\"Credit Card\" value=\"card\" />\n *   <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n *   <Radio.Item label=\"Option A\" value=\"a\" />\n *   <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n  /** Legend text for the group (required for accessibility) */\n  legend: string;\n  /** Child Radio.Item components */\n  children: ReactNode;\n  /** Layout direction of the radio items */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Error message for the group */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Value of the radio that should be initially selected (uncontrolled) */\n  defaultValue?: string;\n  /** Value of the radio that should be selected (controlled) */\n  value?: string;\n  /** Event handler called when radio value changes */\n  onValueChange?: (value: string) => void;\n  /** Whether all radios in the group are disabled */\n  disabled?: boolean;\n  /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio */\n  controlPosition?: RadioControlPosition;\n  /** Form submission name for the radio group */\n  name?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: RadioVariant;\n  /** Label text displayed next to radio (required) */\n  label: string;\n  /** Value of the radio (required) */\n  value: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n  ({ className, disabled, variant = \"default\", label, value }, ref) => {\n    const { controlPosition } = useContext(RadioGroupContext);\n\n    return (\n      <label\n        className={cn(\n          \"group relative inline-flex items-center gap-2\",\n          // \"start\" (default): radio before label\n          // \"end\": label before radio using flex-row-reverse\n          controlPosition === \"end\" && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"flex h-4 w-4 items-center justify-center rounded-full border-0 bg-sf-base ring\",\n            variant === \"error\" ? \"ring-sf-danger\" : \"ring-sf-interact\",\n            !disabled &&\n              \"group-hover:ring-sf-ring focus-visible:ring-sf-ring focus-visible:outline-offset-3\",\n            \"data-checked:bg-sf-contrast\"\n          )}\n        >\n          <BaseRadio.Indicator className=\"flex items-center justify-center\">\n            <span className=\"h-2 w-2 rounded-full bg-sf-base\" />\n          </BaseRadio.Indicator>\n        </BaseRadio.Root>\n        <span className=\"text-base font-medium text-sf-default\">{label}</span>\n      </label>\n    );\n  }\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n  legend,\n  children,\n  orientation = \"vertical\",\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  disabled,\n  controlPosition = \"start\",\n  name,\n  className,\n}: RadioGroupProps) {\n  return (\n    <RadioGroupContext.Provider value={{ controlPosition }}>\n      <BaseRadioGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={(newValue) => onValueChange?.(newValue as string)}\n        disabled={disabled}\n        name={name}\n      >\n        <Fieldset.Root\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-sf-line p-4\",\n            className\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-sf-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div\n            className={cn(\n              \"flex gap-2\",\n              orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\"\n            )}\n          >\n            {children}\n          </div>\n          {error && <p className=\"text-sm text-sf-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-sf-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = {\n  Item: RadioItem,\n  Group: RadioGroup,\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,oBAAoB,EAC/B,SAAS;CACP,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,4BAA4B,EACvC,SAAS,WACV;AAeD,SAAgB,cAAc,EAC5B,UAAU,0BAA0B,YACZ,EAAE,EAAE;AAC5B,QAAO,GAAG,kBAAkB,QAAQ,SAAS,QAAQ;;AAUvD,IAAM,oBAAoB,cAEvB,EACD,iBAAiB,SAClB,CAAC;AAgHF,IAAM,YAAY,YACf,EAAE,WAAW,UAAU,UAAU,WAAW,OAAO,SAAS,QAAQ;CACnE,MAAM,EAAE,oBAAoB,WAAW,kBAAkB;AAEzD,QACE,qBAAC,SAAD;EACE,WAAW,GACT,iDAGA,oBAAoB,SAAS,gCAC7B,WAAW,kCAAkC,kBAC7C,UACD;YARH,CAUE,oBAAC,MAAU,MAAX;GACO;GACE;GACG;GACV,WAAW,GACT,kFACA,YAAY,UAAU,mBAAmB,oBACzC,CAAC,YACC,sFACF,8BACD;aAED,oBAAC,MAAU,WAAX;IAAqB,WAAU;cAC7B,oBAAC,QAAD,EAAM,WAAU,mCAAoC,CAAA;IAChC,CAAA;GACP,CAAA,EACjB,oBAAC,QAAD;GAAM,WAAU;aAAyC;GAAa,CAAA,CAChE;;EAGb;AAED,UAAU,cAAc;AAGxB,SAAS,aAAW,EAClB,QACA,UACA,cAAc,YACd,OACA,aACA,cACA,OACA,eACA,UACA,kBAAkB,SAClB,MACA,aACkB;AAClB,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO,EAAE,iBAAiB;YACpD,oBAAC,YAAD;GACgB;GACP;GACP,gBAAgB,aAAa,gBAAgB,SAAmB;GACtD;GACJ;aAEN,qBAAC,SAAS,MAAV;IACE,WAAW,GACT,4DACA,UACD;cAJH;KAME,oBAAC,SAAS,QAAV;MAAiB,WAAU;gBACxB;MACe,CAAA;KAClB,oBAAC,OAAD;MACE,WAAW,GACT,cACA,gBAAgB,aAAa,aAAa,qBAC3C;MAEA;MACG,CAAA;KACL,SAAS,oBAAC,KAAD;MAAG,WAAU;gBAA0B;MAAU,CAAA;KAC1D,eACC,oBAAC,KAAD;MAAG,WAAU;gBAA0B;MAAgB,CAAA;KAE3C;;GACD,CAAA;EACU,CAAA;;AAIjC,aAAW,cAAc;;;;;;;;;;;;;;;;AAoBzB,IAAa,UAAQ;CACnB,MAAM;CACN,OAAO;CACR"}
+{"version":3,"file":"radio-DZwL13j0.js","names":[],"sources":["../src/components/radio/radio.tsx"],"sourcesContent":["import { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { forwardRef, createContext, useContext, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const SF_RADIO_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"ring-sf-interact\",\n      description: \"Default radio appearance\",\n    },\n    error: {\n      classes: \"ring-destructive\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_RADIO_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_RADIO_VARIANTS\nexport type SFRadioVariant = keyof typeof SF_RADIO_VARIANTS.variant;\n\nexport interface SFRadioVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard radio appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFRadioVariant;\n}\n\nexport function radioVariants({\n  variant = SF_RADIO_DEFAULT_VARIANTS.variant,\n}: SFRadioVariantsProps = {}) {\n  return cn(SF_RADIO_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = SFRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition from Group to Items\nconst RadioGroupContext = createContext<{\n  controlPosition: RadioControlPosition;\n}>({\n  controlPosition: \"start\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n *   <Radio.Item label=\"Small\" value=\"sm\" />\n *   <Radio.Item label=\"Medium\" value=\"md\" />\n *   <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n *   legend=\"Payment method\"\n *   error=\"Please select a payment method\"\n *   description=\"Choose how you'd like to pay\"\n * >\n *   <Radio.Item label=\"Credit Card\" value=\"card\" />\n *   <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n *   <Radio.Item label=\"Option A\" value=\"a\" />\n *   <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n  /** Legend text for the group (required for accessibility) */\n  legend: string;\n  /** Child Radio.Item components */\n  children: ReactNode;\n  /** Layout direction of the radio items */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Error message for the group */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Value of the radio that should be initially selected (uncontrolled) */\n  defaultValue?: string;\n  /** Value of the radio that should be selected (controlled) */\n  value?: string;\n  /** Event handler called when radio value changes */\n  onValueChange?: (value: string) => void;\n  /** Whether all radios in the group are disabled */\n  disabled?: boolean;\n  /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio */\n  controlPosition?: RadioControlPosition;\n  /** Form submission name for the radio group */\n  name?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: RadioVariant;\n  /** Label text displayed next to radio (required) */\n  label: string;\n  /** Value of the radio (required) */\n  value: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n  ({ className, disabled, variant = \"default\", label, value }, ref) => {\n    const { controlPosition } = useContext(RadioGroupContext);\n\n    return (\n      <label\n        className={cn(\n          \"group relative inline-flex items-center gap-2\",\n          // \"start\" (default): radio before label\n          // \"end\": label before radio using flex-row-reverse\n          controlPosition === \"end\" && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"flex h-4 w-4 items-center justify-center rounded-full border-0 bg-sf-base ring\",\n            variant === \"error\" ? \"ring-sf-danger\" : \"ring-sf-interact\",\n            !disabled &&\n              \"group-hover:ring-sf-ring focus-visible:ring-sf-ring focus-visible:outline-offset-3\",\n            \"data-checked:bg-sf-contrast\"\n          )}\n        >\n          <BaseRadio.Indicator className=\"flex items-center justify-center\">\n            <span className=\"h-2 w-2 rounded-full bg-sf-base\" />\n          </BaseRadio.Indicator>\n        </BaseRadio.Root>\n        <span className=\"text-base font-medium text-sf-default\">{label}</span>\n      </label>\n    );\n  }\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n  legend,\n  children,\n  orientation = \"vertical\",\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  disabled,\n  controlPosition = \"start\",\n  name,\n  className,\n}: RadioGroupProps) {\n  return (\n    <RadioGroupContext.Provider value={{ controlPosition }}>\n      <BaseRadioGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={(newValue) => onValueChange?.(newValue as string)}\n        disabled={disabled}\n        name={name}\n      >\n        <Fieldset.Root\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-sf-line p-4\",\n            className\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-sf-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div\n            className={cn(\n              \"flex gap-2\",\n              orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\"\n            )}\n          >\n            {children}\n          </div>\n          {error && <p className=\"text-sm text-sf-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-sf-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = {\n  Item: RadioItem,\n  Group: RadioGroup,\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,oBAAoB,EAC/B,SAAS;CACP,SAAS;EACP,SAAS;EACT,aAAa;CACf;CACA,OAAO;EACL,SAAS;EACT,aAAa;CACf;AACF,EACF;AAEA,IAAa,4BAA4B,EACvC,SAAS,UACX;AAeA,SAAgB,cAAc,EAC5B,UAAU,0BAA0B,YACZ,CAAC,GAAG;CAC5B,OAAO,GAAG,kBAAkB,QAAQ,SAAS,OAAO;AACtD;AASA,IAAM,oBAAoB,cAEvB,EACD,iBAAiB,QACnB,CAAC;AAgHD,IAAM,YAAY,YACf,EAAE,WAAW,UAAU,UAAU,WAAW,OAAO,SAAS,QAAQ;CACnE,MAAM,EAAE,oBAAoB,WAAW,iBAAiB;CAExD,OACE,qBAAC,SAAD;EACE,WAAW,GACT,iDAGA,oBAAoB,SAAS,gCAC7B,WAAW,kCAAkC,kBAC7C,SACF;YARF,CAUE,oBAAC,MAAU,MAAX;GACO;GACE;GACG;GACV,WAAW,GACT,kFACA,YAAY,UAAU,mBAAmB,oBACzC,CAAC,YACC,sFACF,6BACF;aAEA,oBAAC,MAAU,WAAX;IAAqB,WAAU;cAC7B,oBAAC,QAAD,EAAM,WAAU,kCAAmC,CAAA;GAChC,CAAA;EACP,CAAA,GAChB,oBAAC,QAAD;GAAM,WAAU;aAAyC;EAAY,CAAA,CAChE;;AAEX,CACF;AAEA,UAAU,cAAc;AAGxB,SAAS,aAAW,EAClB,QACA,UACA,cAAc,YACd,OACA,aACA,cACA,OACA,eACA,UACA,kBAAkB,SAClB,MACA,aACkB;CAClB,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO,EAAE,gBAAgB;YACnD,oBAAC,YAAD;GACgB;GACP;GACP,gBAAgB,aAAa,gBAAgB,QAAkB;GACrD;GACJ;aAEN,qBAAC,SAAS,MAAV;IACE,WAAW,GACT,4DACA,SACF;cAJF;KAME,oBAAC,SAAS,QAAV;MAAiB,WAAU;gBACxB;KACc,CAAA;KACjB,oBAAC,OAAD;MACE,WAAW,GACT,cACA,gBAAgB,aAAa,aAAa,oBAC5C;MAEC;KACE,CAAA;KACJ,SAAS,oBAAC,KAAD;MAAG,WAAU;gBAA0B;KAAS,CAAA;KACzD,eACC,oBAAC,KAAD;MAAG,WAAU;gBAA0B;KAAe,CAAA;IAE3C;;EACD,CAAA;CACU,CAAA;AAEhC;AAEA,aAAW,cAAc;;;;;;;;;;;;;;;;AAoBzB,IAAa,UAAQ;CACnB,MAAM;CACN,OAAO;AACT"}

package/dist/{select-DMhdoHMa.js → select-BFifYqHA.js}

@@ -1,8 +1,8 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { i as buttonVariants } from "./button-CO6-qPax.js";
-import { t as Field } from "./field-B_yVof52.js";
-import { t as SkeletonLine } from "./skeleton-line-CH1-h6e2.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { i as buttonVariants } from "./button-BHOgXJRU.js";
+import { t as Field } from "./field-DBpFzzBS.js";
+import { t as SkeletonLine } from "./skeleton-line-CxxYVTO2.js";
 import { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretUpDownIcon, CheckIcon } from "@phosphor-icons/react";
@@ -28,7 +28,7 @@ function Select$1({ children, className, renderValue, label, hideLabel = true, p
 	const fallbackLabel = typeof label === "string" ? label : placeholder;
 	const useFieldWrapper = label && !hideLabel;
 	const triggerLabelledBy = useFieldWrapper ? void 0 : ariaLabelledby ?? (label ? labelId : void 0);
-	const triggerAriaLabel = ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : void 0);
+	const triggerAriaLabel = ariaLabel ?? (triggerLabelledBy ? void 0 : fallbackLabel);
 	let items = props.items;
 	if (placeholder) {
 		if (!items) items = [{
@@ -92,4 +92,4 @@ Select$1.Option = Option;
 //#endregion
 export { Select$1 as t };
 
-//# sourceMappingURL=select-DMhdoHMa.js.map
+//# sourceMappingURL=select-BFifYqHA.js.map