@signalflare-ai/ui 1.0.0 → 1.2.0

package/dist/measured-text-BI3dTJmH.js

@@ -0,0 +1,290 @@
+"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 { 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();
+var fontsReadyPromise = null;
+function getFontsReady() {
+	if (fontsReadyPromise) return fontsReadyPromise;
+	if (typeof document === "undefined" || !document.fonts?.ready) {
+		fontsReadyPromise = Promise.resolve();
+		return fontsReadyPromise;
+	}
+	fontsReadyPromise = document.fonts.ready.then(() => void 0);
+	return fontsReadyPromise;
+}
+function makeCacheKey(text, font, letterSpacing, whiteSpace, wordBreak) {
+	return `${text}|${font}|${letterSpacing}|${whiteSpace}|${wordBreak}`;
+}
+function getPrepared(text, font, options) {
+	const key = makeCacheKey(text, font, options.letterSpacing, options.whiteSpace, options.wordBreak);
+	const cached = preparationCache.get(key);
+	if (cached) return cached;
+	const entry = {
+		prepared: prepare(text, font, {
+			letterSpacing: options.letterSpacing,
+			whiteSpace: options.whiteSpace,
+			wordBreak: options.wordBreak
+		}),
+		preparedWithSegments: prepareWithSegments(text, font, {
+			letterSpacing: options.letterSpacing,
+			whiteSpace: options.whiteSpace,
+			wordBreak: options.wordBreak
+		})
+	};
+	preparationCache.set(key, entry);
+	return entry;
+}
+var isSSR = typeof window === "undefined";
+var useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
+/**
+* Measures text layout using @chenglou/pretext without DOM reflow.
+*
+* - Caches `prepare()` results keyed by text + font config (do not re-prepare on resize).
+* - Waits for `document.fonts.ready` before first measurement.
+* - Uses ResizeObserver (rAF-throttled) to recompute layout on container resize.
+* - SSR-safe: returns `ready: false` initially; measures post-hydration.
+*
+* @example
+* ```tsx
+* const { ref, measurement, ready } = useMeasuredText(
+*   "Hello world",
+*   { mode: "balance" }
+* );
+* // ready === false on SSR
+* // measurement.balancedWidth available after hydration + fonts load
+* ```
+*/
+function useMeasuredText(text, options = {}) {
+	const { mode = "natural", lineHeight: lineHeightProp, letterSpacing: letterSpacingProp, whiteSpace = "normal", wordBreak = "normal", reserveLines } = 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).");
+		}
+	}, []);
+	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;
+		if (containerWidth <= 0) return;
+		const font = resolvedFont;
+		const lh = lineHeightProp ?? resolvedLineHeight;
+		const ls = letterSpacingProp ?? resolvedLetterSpacing;
+		try {
+			const { prepared, preparedWithSegments } = getPrepared(text, font, {
+				letterSpacing: ls,
+				whiteSpace,
+				wordBreak
+			});
+			let height = 0;
+			let lineCount = 0;
+			let maxLineWidth = 0;
+			let balancedWidth = 0;
+			if (mode === "reserve" && typeof reserveLines === "number") {
+				maxLineWidth = measureLineStats(preparedWithSegments, containerWidth).maxLineWidth;
+				lineCount = reserveLines;
+				height = reserveLines * lh;
+				balancedWidth = maxLineWidth;
+			} else if (mode === "shrink") {
+				maxLineWidth = measureNaturalWidth(preparedWithSegments);
+				balancedWidth = maxLineWidth;
+				const result = layout(prepared, maxLineWidth, lh);
+				height = result.height;
+				lineCount = result.lineCount;
+			} else if (mode === "balance") {
+				const naturalResult = layout(prepared, containerWidth, lh);
+				const naturalLineCount = naturalResult.lineCount;
+				let low = 0;
+				let high = containerWidth;
+				balancedWidth = containerWidth;
+				for (let i = 0; i < 12; i++) {
+					const mid = (low + high) / 2;
+					const stats = measureLineStats(preparedWithSegments, mid);
+					if (stats.lineCount <= naturalLineCount && stats.lineCount > 0) {
+						balancedWidth = mid;
+						high = mid;
+					} else low = mid;
+				}
+				const result = layout(prepared, balancedWidth, lh);
+				height = result.height;
+				lineCount = result.lineCount;
+				maxLineWidth = naturalResult.lineCount > 0 ? measureLineStats(preparedWithSegments, containerWidth).maxLineWidth : 0;
+			} else {
+				const result = layout(prepared, containerWidth, lh);
+				height = result.height;
+				lineCount = result.lineCount;
+				maxLineWidth = measureLineStats(preparedWithSegments, containerWidth).maxLineWidth;
+				balancedWidth = maxLineWidth;
+			}
+			setMeasurement({
+				height,
+				lineCount,
+				maxLineWidth,
+				balancedWidth
+			});
+			setReady(true);
+		} catch (err) {
+			if (process.env.NODE_ENV === "development") console.warn("[useMeasuredText] Measurement failed:", err);
+		}
+	}, [
+		text,
+		mode,
+		resolvedFont,
+		resolvedLineHeight,
+		resolvedLetterSpacing,
+		whiteSpace,
+		wordBreak,
+		reserveLines,
+		lineHeightProp,
+		letterSpacingProp
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (isSSR) return;
+		if (mode === "natural") {
+			setReady(true);
+			return;
+		}
+		let cancelled = false;
+		const runMeasurement = async () => {
+			await getFontsReady();
+			if (cancelled) return;
+			readComputedStyles();
+			requestAnimationFrame(() => {
+				if (!cancelled) measure();
+			});
+		};
+		runMeasurement();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		measure,
+		mode,
+		readComputedStyles
+	]);
+	useEffect(() => {
+		if (isSSR) return;
+		if (mode === "natural") return;
+		const el = ref.current;
+		if (!el) return;
+		let rafId = null;
+		let pending = false;
+		const handleResize = () => {
+			if (pending) return;
+			pending = true;
+			rafId = requestAnimationFrame(() => {
+				pending = false;
+				readComputedStyles();
+				measure();
+			});
+		};
+		const observer = new ResizeObserver(handleResize);
+		observer.observe(el);
+		return () => {
+			observer.disconnect();
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [
+		measure,
+		mode,
+		readComputedStyles
+	]);
+	return {
+		ref,
+		measurement,
+		ready
+	};
+}
+//#endregion
+//#region src/utils/measured-text.tsx
+/**
+* Internal component that renders text with pretext-driven layout.
+*
+* This is NOT exported publicly. It powers the public `Text` component.
+*
+* Strategies:
+* - `balance`: finds smallest maxWidth that doesn't increase line count
+* - `shrink`: hugs the widest natural line (maxWidth = maxLineWidth)
+* - `reserve`: sets minHeight based on line count × lineHeight
+* - `natural` / `false`: no measurement, renders as normal inline element
+*
+* 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) {
+	const text = useMemo(() => {
+		if (typeof children === "string") return children;
+		if (typeof children === "number") return String(children);
+		return "";
+	}, [children]);
+	const mode = wrap === false ? "natural" : wrap;
+	const { ref, measurement, ready } = useMeasuredText(text, {
+		mode: mode !== "natural" && text.length > 0 ? mode : "natural",
+		whiteSpace,
+		wordBreak,
+		reserveLines
+	});
+	const setRefs = (el) => {
+		ref.current = el;
+		if (typeof forwardedRef === "function") forwardedRef(el);
+		else if (forwardedRef) forwardedRef.current = el;
+	};
+	const layoutStyles = useMemo(() => {
+		if (!ready || !measurement) {
+			if (mode === "balance") return { textWrap: "balance" };
+			if (mode === "reserve" && typeof reserveLines === "number") return { minHeight: `${reserveLines * 1.5}em` };
+			return {};
+		}
+		if (mode === "balance") return {
+			maxWidth: measurement.balancedWidth,
+			transition: "max-width 120ms ease-out"
+		};
+		if (mode === "shrink") return {
+			maxWidth: measurement.maxLineWidth,
+			transition: "max-width 120ms ease-out"
+		};
+		if (mode === "reserve") return {
+			minHeight: measurement.height,
+			transition: "min-height 120ms ease-out"
+		};
+		return {};
+	}, [
+		mode,
+		measurement,
+		ready,
+		reserveLines
+	]);
+	return /* @__PURE__ */ jsx(Component, {
+		ref: setRefs,
+		className: cn(mode !== "natural" && "inline-block", className),
+		style: {
+			...layoutStyles,
+			...style
+		},
+		...props,
+		children
+	});
+});
+MeasuredText.displayName = "MeasuredText";
+//#endregion
+export { useMeasuredText as n, MeasuredText as t };
+
+//# sourceMappingURL=measured-text-BI3dTJmH.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"measured-text-BI3dTJmH.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\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(text: string, font: string, options: {\n  letterSpacing: number;\n  whiteSpace: \"normal\" | \"pre-wrap\";\n  wordBreak: \"normal\" | \"keep-all\";\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  // Resolved styles from computed CSS (synced with DOM)\n  const [resolvedFont, setResolvedFont] = useState<string>(\"16px sans-serif\");\n  const [resolvedLineHeight, setResolvedLineHeight] = useState<number>(20);\n  const [resolvedLetterSpacing, setResolvedLetterSpacing] = useState<number>(0);\n\n  // Read computed styles from the DOM element\n  const readComputedStyles = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const computed = window.getComputedStyle(el);\n    const font = computed.font;\n    const lh = parseFloat(computed.lineHeight);\n    const ls = parseFloat(computed.letterSpacing) || 0;\n\n    setResolvedFont(font || \"16px sans-serif\");\n    setResolvedLineHeight(Number.isNaN(lh) ? 20 : lh);\n    setResolvedLetterSpacing(Number.isNaN(ls) ? 0 : ls);\n\n    // Dev-only warning for system-ui (unsafe on macOS per pretext README)\n    if (process.env.NODE_ENV === \"development\") {\n      const fontFamily = computed.fontFamily;\n      if (fontFamily?.includes(\"system-ui\")) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `[useMeasuredText] Font family \"system-ui\" detected on element. ` +\n            `This is unsafe for layout accuracy on macOS. ` +\n            `Use an explicit font family (e.g., Inter, Helvetica Neue).`\n        );\n      }\n    }\n  }, []);\n\n  // Main measurement effect\n  const measure = useCallback(() => {\n    if (isSSR) return;\n    if (typeof globalThis !== \"undefined\" && (globalThis as { __SF_PRETEXT_DISABLED__?: boolean }).__SF_PRETEXT_DISABLED__) {\n      return;\n    }\n    if (!ref.current) return;\n\n    const el = ref.current;\n    const rect = el.getBoundingClientRect();\n    const containerWidth = rect.width;\n    if (containerWidth <= 0) return;\n\n    const font = resolvedFont;\n    const lh = lineHeightProp ?? resolvedLineHeight;\n    const ls = letterSpacingProp ?? resolvedLetterSpacing;\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 = naturalResult.lineCount > 0\n          ? measureLineStats(preparedWithSegments, containerWidth).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(preparedWithSegments, containerWidth).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  }, [text, mode, resolvedFont, resolvedLineHeight, resolvedLetterSpacing, whiteSpace, wordBreak, reserveLines, lineHeightProp, letterSpacingProp]);\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    let rafId: number | null = null;\n    let pending = false;\n\n    const handleResize = () => {\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(el);\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 } from \"react\";\nimport { cn } from \"./cn\";\nimport {\n  useMeasuredText,\n  type MeasuredTextMode,\n} 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  function MeasuredText(\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 = el;\n      }\n    };\n\n    // Compute layout styles based on mode and measurement state\n    const layoutStyles = useMemo<CSSProperties>(() => {\n      if (!ready || !measurement) {\n        // Pre-measurement: CSS fallbacks\n        if (mode === \"balance\") {\n          return { textWrap: \"balance\" as const };\n        }\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      // Post-measurement: apply precise values\n      if (mode === \"balance\") {\n        return {\n          maxWidth: measurement.balancedWidth,\n          // Smooth transition when measurement settles\n          transition: \"max-width 120ms ease-out\",\n        };\n      }\n\n      if (mode === \"shrink\") {\n        return {\n          maxWidth: measurement.maxLineWidth,\n          transition: \"max-width 120ms ease-out\",\n        };\n      }\n\n      if (mode === \"reserve\") {\n        return {\n          minHeight: measurement.height,\n          transition: \"min-height 120ms ease-out\",\n        };\n      }\n\n      return {};\n    }, [mode, measurement, ready, reserveLines]);\n\n    return (\n      <Component\n        ref={setRefs}\n        className={cn(\n          // Base display mode for measurement to work correctly\n          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":";;;;;;AAyEA,IAAM,mCAAmB,IAAI,KAA+B;AAE5D,IAAI,oBAA0C;AAE9C,SAAS,gBAA+B;AACtC,KAAI,kBAAmB,QAAO;AAC9B,KAAI,OAAO,aAAa,eAAe,CAAC,SAAS,OAAO,OAAO;AAC7D,sBAAoB,QAAQ,SAAS;AACrC,SAAO;;AAET,qBAAoB,SAAS,MAAM,MAAM,WAAW,KAAA,EAAU;AAC9D,QAAO;;AAGT,SAAS,aACP,MACA,MACA,eACA,YACA,WACU;AACV,QAAO,GAAG,KAAK,GAAG,KAAK,GAAG,cAAc,GAAG,WAAW,GAAG;;AAG3D,SAAS,YAAY,MAAc,MAAc,SAI9B;CACjB,MAAM,MAAM,aACV,MACA,MACA,QAAQ,eACR,QAAQ,YACR,QAAQ,UACT;CAED,MAAM,SAAS,iBAAiB,IAAI,IAAI;AACxC,KAAI,OAAQ,QAAO;CAcnB,MAAM,QAAwB;EAAE,UAZf,QAAQ,MAAM,MAAM;GACnC,eAAe,QAAQ;GACvB,YAAY,QAAQ;GACpB,WAAW,QAAQ;GACpB,CAAC;EAQwC,sBANb,oBAAoB,MAAM,MAAM;GAC3D,eAAe,QAAQ;GACvB,YAAY,QAAQ;GACpB,WAAW,QAAQ;GACpB,CAAC;EAE8D;AAChE,kBAAiB,IAAI,KAAK,MAAM;AAChC,QAAO;;AAKT,IAAM,QAAQ,OAAO,WAAW;AAChC,IAAM,4BAA4B,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;AAoBtD,SAAgB,gBACd,MACA,UAAkC,EAAE,EACb;CACvB,MAAM,EACJ,OAAO,WACP,YAAY,gBACZ,eAAe,mBACf,aAAa,UACb,YAAY,UACZ,iBACE;CAEJ,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,CAAC,aAAa,kBAAkB,SAAiC,KAAK;CAG5E,MAAM,CAAC,cAAc,mBAAmB,SAAiB,kBAAkB;CAC3E,MAAM,CAAC,oBAAoB,yBAAyB,SAAiB,GAAG;CACxE,MAAM,CAAC,uBAAuB,4BAA4B,SAAiB,EAAE;CAG7E,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,KAAK,IAAI;AACf,MAAI,CAAC,GAAI;EAET,MAAM,WAAW,OAAO,iBAAiB,GAAG;EAC5C,MAAM,OAAO,SAAS;EACtB,MAAM,KAAK,WAAW,SAAS,WAAW;EAC1C,MAAM,KAAK,WAAW,SAAS,cAAc,IAAI;AAEjD,kBAAgB,QAAQ,kBAAkB;AAC1C,wBAAsB,OAAO,MAAM,GAAG,GAAG,KAAK,GAAG;AACjD,2BAAyB,OAAO,MAAM,GAAG,GAAG,IAAI,GAAG;AAGnD,MAAA,QAAA,IAAA,aAA6B;OACR,SAAS,YACZ,SAAS,YAAY,CAEnC,SAAQ,KACN,2KAGD;;IAGJ,EAAE,CAAC;CAGN,MAAM,UAAU,kBAAkB;AAChC,MAAI,MAAO;AACX,MAAI,OAAO,eAAe,eAAgB,WAAqD,wBAC7F;AAEF,MAAI,CAAC,IAAI,QAAS;EAIlB,MAAM,iBAFK,IAAI,QACC,uBAAuB,CACX;AAC5B,MAAI,kBAAkB,EAAG;EAEzB,MAAM,OAAO;EACb,MAAM,KAAK,kBAAkB;EAC7B,MAAM,KAAK,qBAAqB;AAEhC,MAAI;GACF,MAAM,EAAE,UAAU,yBAAyB,YAAY,MAAM,MAAM;IACjE,eAAe;IACf;IACA;IACD,CAAC;GAGF,IAAI,SAAS;GACb,IAAI,YAAY;GAChB,IAAI,eAAe;GACnB,IAAI,gBAAgB;AAEpB,OAAI,SAAS,aAAa,OAAO,iBAAiB,UAAU;AAG1D,mBADc,iBAAiB,sBAAsB,eAAe,CAC/C;AACrB,gBAAY;AACZ,aAAS,eAAe;AACxB,oBAAgB;cACP,SAAS,UAAU;AAE5B,mBAAe,oBAAoB,qBAAqB;AACxD,oBAAgB;IAEhB,MAAM,SAAS,OAAO,UAAU,cAAc,GAAG;AACjD,aAAS,OAAO;AAChB,gBAAY,OAAO;cACV,SAAS,WAAW;IAE7B,MAAM,gBAAgB,OAAO,UAAU,gBAAgB,GAAG;IAC1D,MAAM,mBAAmB,cAAc;IAGvC,IAAI,MAAM;IACV,IAAI,OAAO;AACX,oBAAgB;AAEhB,SAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK;KAE3B,MAAM,OAAO,MAAM,QAAQ;KAC3B,MAAM,QAAQ,iBAAiB,sBAAsB,IAAI;AACzD,SAAI,MAAM,aAAa,oBAAoB,MAAM,YAAY,GAAG;AAC9D,sBAAgB;AAChB,aAAO;WAEP,OAAM;;IAKV,MAAM,SAAS,OAAO,UAAU,eAAe,GAAG;AAClD,aAAS,OAAO;AAChB,gBAAY,OAAO;AACnB,mBAAe,cAAc,YAAY,IACrC,iBAAiB,sBAAsB,eAAe,CAAC,eACvD;UACC;IAEL,MAAM,SAAS,OAAO,UAAU,gBAAgB,GAAG;AACnD,aAAS,OAAO;AAChB,gBAAY,OAAO;AACnB,mBAAe,iBAAiB,sBAAsB,eAAe,CAAC;AACtE,oBAAgB;;AAGlB,kBAAe;IAAE;IAAQ;IAAW;IAAc;IAAe,CAAC;AAClE,YAAS,KAAK;WACP,KAAK;AAEZ,OAAA,QAAA,IAAA,aAA6B,cAE3B,SAAQ,KAAK,yCAAyC,IAAI;;IAG7D;EAAC;EAAM;EAAM;EAAc;EAAoB;EAAuB;EAAY;EAAW;EAAc;EAAgB;EAAkB,CAAC;AAGjJ,iCAAgC;AAC9B,MAAI,MAAO;AACX,MAAI,SAAS,WAAW;AAEtB,YAAS,KAAK;AACd;;EAGF,IAAI,YAAY;EAEhB,MAAM,iBAAiB,YAAY;AACjC,SAAM,eAAe;AACrB,OAAI,UAAW;AAGf,uBAAoB;AAGpB,+BAA4B;AAC1B,QAAI,CAAC,UAAW,UAAS;KACzB;;AAGJ,kBAAgB;AAEhB,eAAa;AACX,eAAY;;IAEb;EAAC;EAAS;EAAM;EAAmB,CAAC;AAGvC,iBAAgB;AACd,MAAI,MAAO;AACX,MAAI,SAAS,UAAW;EAExB,MAAM,KAAK,IAAI;AACf,MAAI,CAAC,GAAI;EAET,IAAI,QAAuB;EAC3B,IAAI,UAAU;EAEd,MAAM,qBAAqB;AACzB,OAAI,QAAS;AACb,aAAU;AAEV,WAAQ,4BAA4B;AAClC,cAAU;AACV,wBAAoB;AACpB,aAAS;KACT;;EAGJ,MAAM,WAAW,IAAI,eAAe,aAAa;AACjD,WAAS,QAAQ,GAAG;AAEpB,eAAa;AACX,YAAS,YAAY;AACrB,OAAI,UAAU,KAAM,sBAAqB,MAAM;;IAEhD;EAAC;EAAS;EAAM;EAAmB,CAAC;AAEvC,QAAO;EAAE;EAAK;EAAa;EAAO;;;;;;;;;;;;;;;;;;AClTpC,IAAa,eAAe,WAC1B,SAAS,aACP,EACE,UACA,IAAI,YAAY,QAChB,OAAO,WACP,cACA,aAAa,UACb,YAAY,UACZ,WACA,OACA,GAAG,SAEL,cACA;CAEA,MAAM,OAAO,cAAc;AACzB,MAAI,OAAO,aAAa,SAAU,QAAO;AACzC,MAAI,OAAO,aAAa,SAAU,QAAO,OAAO,SAAS;AAEzD,SAAO;IACN,CAAC,SAAS,CAAC;CAEd,MAAM,OAAO,SAAS,QAAQ,YAAY;CAG1C,MAAM,EAAE,KAAK,aAAa,UAAU,gBAAgB,MAAM;EACxD,MAHoB,SAAS,aAAa,KAAK,SAAS,IAGlC,OAAO;EAC7B;EACA;EACA;EACD,CAAC;CAGF,MAAM,WAAW,OAA2B;AACzC,MAAmD,UAAU;AAC9D,MAAI,OAAO,iBAAiB,WAC1B,cAAa,GAAG;WACP,aACR,cAA4D,UAAU;;CAK3E,MAAM,eAAe,cAA6B;AAChD,MAAI,CAAC,SAAS,CAAC,aAAa;AAE1B,OAAI,SAAS,UACX,QAAO,EAAE,UAAU,WAAoB;AAEzC,OAAI,SAAS,aAAa,OAAO,iBAAiB,SAEhD,QAAO,EAAE,WAAW,GAAG,eAAe,IAAI,KAAK;AAEjD,UAAO,EAAE;;AAIX,MAAI,SAAS,UACX,QAAO;GACL,UAAU,YAAY;GAEtB,YAAY;GACb;AAGH,MAAI,SAAS,SACX,QAAO;GACL,UAAU,YAAY;GACtB,YAAY;GACb;AAGH,MAAI,SAAS,UACX,QAAO;GACL,WAAW,YAAY;GACvB,YAAY;GACb;AAGH,SAAO,EAAE;IACR;EAAC;EAAM;EAAa;EAAO;EAAa,CAAC;AAE5C,QACE,oBAAC,WAAD;EACE,KAAK;EACL,WAAW,GAET,SAAS,aAAa,gBACtB,UACD;EACD,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EAEH;EACS,CAAA;EAGjB;AAED,aAAa,cAAc"}

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

@@ -1,6 +1,6 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { t as Tooltip } from "./tooltip-g9lFsvcT.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-C8NzAjfd.js.map
+//# sourceMappingURL=menubar-Cxf3xeAt.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menubar-C8NzAjfd.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-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"}

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

@@ -34,4 +34,4 @@ function Meter$1({ value, customValue, label, showValue = true, className, track
 //#endregion
 export { Meter$1 as t };
 
-//# sourceMappingURL=meter-CpmTenEr.js.map
+//# sourceMappingURL=meter-BFFe9l5b.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"meter-CpmTenEr.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-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"}

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

@@ -1,5 +1,5 @@
 "use client";
-import { t as InputGroup } from "./input-DddtBN-g.js";
+import { t as InputGroup } from "./input-ClB_E4Lb.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-BVqdlONY.js.map
+//# sourceMappingURL=pagination-yS372Tr4.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination-BVqdlONY.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-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"}

package/dist/{popover-BRQZ2b6z.js → popover-SRoJaCZr.js}

@@ -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-BRQZ2b6z.js.map
+//# sourceMappingURL=popover-SRoJaCZr.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover-BRQZ2b6z.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-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"}

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

@@ -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-BNSwOt3B.js.map
+//# sourceMappingURL=radio-BcwhwYNB.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-BNSwOt3B.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-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"}