@ngrok/mantle 0.73.3 → 0.73.4

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","names":[],"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-random-stable-id.tsx","../src/hooks/use-scroll-behavior.tsx","../src/hooks/use-in-view.tsx","../src/hooks/use-undo-redo.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Tailwind CSS breakpoints in descending order (largest → smallest).\n *\n * These correspond to Tailwind’s default `theme.screens` config and are used\n * to determine the current viewport size.\n *\n * @see https://tailwindcss.com/docs/screens\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\"  // ≥80rem (1280px)\n * \"lg\"  // ≥64rem (1024px)\n * \"md\"  // ≥48rem (768px)\n * \"sm\"  // ≥40rem (640px)\n * \"xs\"  // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\", \"xs\", \"2xs\"] as const;\n\n/**\n * A valid Tailwind CSS breakpoint identifier.\n *\n * @example\n * const bp: TailwindBreakpoint = \"md\"; // ≥48rem (768px)\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\"  // ≥80rem (1280px)\n * \"lg\"  // ≥64rem (1024px)\n * \"md\"  // ≥48rem (768px)\n * \"sm\"  // ≥40rem (640px)\n * \"xs\"  // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\ntype TailwindBreakpoint = (typeof tailwindBreakpoints)[number];\n\n/**\n * Mantle’s breakpoint set, extending Tailwind’s with `\"default\"`.\n *\n * `\"default\"` represents the base (0px and up) viewport,\n * useful for defining fallbacks or mobile-first styles.\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\"     // ≥22.5rem (360px)\n * \"xs\"      // ≥30rem (480px)\n * \"sm\"      // ≥40rem (640px)\n * \"md\"      // ≥48rem (768px)\n * \"lg\"      // ≥64rem (1024px)\n * \"xl\"      // ≥80rem (1280px)\n * \"2xl\"     // ≥96rem (1536px)\n */\nconst breakpoints = [\"default\", ...tailwindBreakpoints] as const;\n\n/**\n * A valid Mantle breakpoint identifier.\n *\n * Includes Tailwind’s standard breakpoints plus `\"default\"` for 0px+.\n *\n * @example\n * const bp: Breakpoint = \"default\"; // ≥0px\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\"     // ≥22.5rem (360px)\n * \"xs\"      // ≥30rem (480px)\n * \"sm\"      // ≥40rem (640px)\n * \"md\"      // ≥48rem (768px)\n * \"lg\"      // ≥64rem (1024px)\n * \"xl\"      // ≥80rem (1280px)\n * \"2xl\"     // ≥96rem (1536px)\n */\ntype Breakpoint = (typeof breakpoints)[number];\n\n/**\n * React hook that returns the current breakpoint based on the viewport width.\n *\n * Uses a singleton subscription to a set of min-width media queries and returns\n * the largest matching breakpoint. Designed for React 18+ with\n * `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The current breakpoint that matches the viewport width.\n *\n * @example\n * const breakpoint = useBreakpoint();\n * if (breakpoint === \"lg\") {\n *   // Do something for large screens and above\n * }\n */\nfunction useBreakpoint(): Breakpoint {\n\treturn useSyncExternalStore(\n\t\tsubscribeToBreakpointChanges,\n\t\tgetCurrentBreakpointSnapshot,\n\t\t() => \"default\", // SSR fallback\n\t);\n}\n\n/**\n * React hook that returns true if the current viewport width is below the specified breakpoint.\n *\n * This hook uses `window.matchMedia` with a max-width media query and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., \"md\", \"lg\").\n *\n * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.\n *\n * @example\n * // Check if viewport is below medium (768px)\n * const isBelowMd = useIsBelowBreakpoint(\"md\");\n */\nfunction useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean {\n\treturn useSyncExternalStore(\n\t\tcreateBelowBreakpointSubscribe(breakpoint),\n\t\tcreateBelowBreakpointGetSnapshot(breakpoint),\n\t\t() => false, // SSR fallback - assume desktop\n\t);\n}\n\nexport {\n\t//,\n\tbreakpoints,\n\tuseBreakpoint,\n\tuseIsBelowBreakpoint,\n};\n\nexport type {\n\t//,\n\tBreakpoint,\n\tTailwindBreakpoint,\n};\n\n/**\n * A CSS media query string representing a minimum width in `rem` units.\n *\n * @example\n * const query: MinWidthQuery = \"(min-width: 48rem)\";\n *\n * @private\n */\ntype MinWidthQuery = `(min-width: ${number}rem)`;\n\n/**\n * A CSS media query string representing a maximum width in `rem` units.\n *\n * @example\n * const query: MaxWidthQuery = \"(max-width: 47.99rem)\";\n *\n * @private\n */\ntype MaxWidthQuery = `(max-width: ${number}rem)`;\n\n/**\n * Precomputed min-width media query strings for each Tailwind breakpoint.\n *\n * Using constants avoids template string work in hot paths and ensures type\n * safety against the `MinWidthQuery` template literal type.\n *\n * @remarks\n * These are expressed in `rem`. If your CSS breakpoints are in `px`, consider\n * aligning units to avoid JS/CSS drift when `html{font-size}` changes.\n *\n * @private\n */\nconst breakpointQueries = {\n\t\"2xl\": \"(min-width: 96rem)\" as const,\n\txl: \"(min-width: 80rem)\" as const,\n\tlg: \"(min-width: 64rem)\" as const,\n\tmd: \"(min-width: 48rem)\" as const,\n\tsm: \"(min-width: 40rem)\" as const,\n\txs: \"(min-width: 30rem)\" as const,\n\t\"2xs\": \"(min-width: 22.5rem)\" as const,\n} as const satisfies Record<TailwindBreakpoint, MinWidthQuery>;\n\n/**\n * Precomputed max-width media query strings used by `useIsBelowBreakpoint`.\n *\n * The `-0.01rem` offset avoids overlap at exact boundaries.\n *\n * @private\n */\nconst belowBreakpointQueries = {\n\t\"2xl\": \"(max-width: 95.99rem)\" as const, // 96 - 0.01\n\txl: \"(max-width: 79.99rem)\" as const, // 80 - 0.01\n\tlg: \"(max-width: 63.99rem)\" as const, // 64 - 0.01\n\tmd: \"(max-width: 47.99rem)\" as const, // 48 - 0.01\n\tsm: \"(max-width: 39.99rem)\" as const, // 40 - 0.01\n\txs: \"(max-width: 29.99rem)\" as const, // 30 - 0.01\n\t\"2xs\": \"(max-width: 22.49rem)\" as const, // 22.5 - 0.01\n} as const satisfies Record<TailwindBreakpoint, MaxWidthQuery>;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for min-width queries.\n *\n * Initialized on first access to remain SSR-safe (no `window` at import time).\n *\n * @private\n */\nlet minWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for max-width queries.\n *\n * Used by `useIsBelowBreakpoint`. Also SSR-safe by lazy access.\n *\n * @private\n */\nlet maxWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` objects for min-width queries.\n *\n * @returns A record of `MediaQueryList` keyed by Tailwind breakpoint.\n * @private\n */\nfunction getMinWidthMQLs(): Record<TailwindBreakpoint, MediaQueryList> {\n\tif (!minWidthMQLs) {\n\t\tminWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(breakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(breakpointQueries.xl),\n\t\t\tlg: window.matchMedia(breakpointQueries.lg),\n\t\t\tmd: window.matchMedia(breakpointQueries.md),\n\t\t\tsm: window.matchMedia(breakpointQueries.sm),\n\t\t\txs: window.matchMedia(breakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(breakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn minWidthMQLs;\n}\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` for a specific max-width breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"md\").\n * @returns The corresponding `MediaQueryList`.\n * @private\n */\nfunction getMaxWidthMQL(breakpoint: TailwindBreakpoint): MediaQueryList {\n\tif (!maxWidthMQLs) {\n\t\tmaxWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(belowBreakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(belowBreakpointQueries.xl),\n\t\t\tlg: window.matchMedia(belowBreakpointQueries.lg),\n\t\t\tmd: window.matchMedia(belowBreakpointQueries.md),\n\t\t\tsm: window.matchMedia(belowBreakpointQueries.sm),\n\t\t\txs: window.matchMedia(belowBreakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(belowBreakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn maxWidthMQLs[breakpoint];\n}\n\n/**\n * Current breakpoint value used by the singleton store backing `useBreakpoint`.\n *\n * Initialized to `\"default\"` and updated on media-query change events.\n *\n * @private\n */\nlet currentBreakpointValue: Breakpoint = \"default\";\n\n/**\n * Set of component listeners subscribed to the singleton breakpoint store.\n *\n * Each listener is invoked when the current breakpoint value changes.\n *\n * @private\n */\nconst breakpointListeners = new Set<() => void>();\n\n/**\n * Flag indicating whether global media-query listeners are currently attached.\n *\n * Prevents duplicate registrations and enables full teardown when unused.\n *\n * @private\n */\nlet breakpointSubscriptionActive = false;\n\n/**\n * Compute the current breakpoint by checking cached min-width MQLs\n * from largest to smallest.\n *\n * @returns {Breakpoint} The largest matching breakpoint, or `\"default\"`.\n * @private\n */\nfunction getCurrentBreakpoint(): Breakpoint {\n\tconst mqls = getMinWidthMQLs();\n\tfor (const breakpoint of tailwindBreakpoints) {\n\t\tif (mqls[breakpoint].matches) {\n\t\t\treturn breakpoint;\n\t\t}\n\t}\n\treturn \"default\";\n}\n\n/**\n * Update the current breakpoint value and notify all listeners.\n *\n * Uses `requestAnimationFrame` to coalesce rapid resize events and minimize\n * re-renders during active window resizing.\n *\n * @private\n */\nlet breakpointUpdatePending = false;\nfunction updateCurrentBreakpoint() {\n\tif (!breakpointUpdatePending) {\n\t\tbreakpointUpdatePending = true;\n\t\trequestAnimationFrame(() => {\n\t\t\tbreakpointUpdatePending = false;\n\t\t\tconst newBreakpoint = getCurrentBreakpoint();\n\t\t\tif (newBreakpoint !== currentBreakpointValue) {\n\t\t\t\tcurrentBreakpointValue = newBreakpoint;\n\t\t\t\tfor (const listener of breakpointListeners) {\n\t\t\t\t\tlistener();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n/**\n * Subscribe a component to breakpoint changes (singleton pattern).\n *\n * Ensures only one set of MQL listeners exists app-wide. Also reconciles the\n * `useSyncExternalStore` initial snapshot/subscribe race by invoking the\n * subscriber once on mount.\n *\n * @param callback - Listener invoked when the breakpoint value may have changed.\n * @returns Cleanup function to unsubscribe the listener.\n * @private\n */\nfunction subscribeToBreakpointChanges(callback: () => void) {\n\tbreakpointListeners.add(callback);\n\n\t// Attach global listeners once\n\tif (!breakpointSubscriptionActive) {\n\t\tbreakpointSubscriptionActive = true;\n\t\tconst mqls = getMinWidthMQLs();\n\n\t\t// Initialize current value synchronously\n\t\tcurrentBreakpointValue = getCurrentBreakpoint();\n\n\t\t// Attach listeners to all breakpoint MQLs\n\t\tfor (const mql of Object.values(mqls)) {\n\t\t\tmql.addEventListener(\"change\", updateCurrentBreakpoint);\n\t\t}\n\t}\n\n\t// Reconcile initial getSnapshot vs subscribe ordering\n\tcallback();\n\n\t// Cleanup\n\treturn () => {\n\t\tbreakpointListeners.delete(callback);\n\n\t\t// Tear down global listeners when no one is listening\n\t\tif (breakpointListeners.size === 0 && breakpointSubscriptionActive) {\n\t\t\tbreakpointSubscriptionActive = false;\n\t\t\tconst mqls = getMinWidthMQLs();\n\t\t\tfor (const mql of Object.values(mqls)) {\n\t\t\t\tmql.removeEventListener(\"change\", updateCurrentBreakpoint);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Return the current breakpoint value from the singleton store.\n *\n * Used as the `getSnapshot` for `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The latest computed breakpoint.\n * @private\n */\nfunction getCurrentBreakpointSnapshot(): Breakpoint {\n\treturn currentBreakpointValue;\n}\n\n/**\n * Cached `subscribe` functions keyed by breakpoint.\n *\n * Without caching, `useSyncExternalStore` receives a new function reference on\n * every render, causing it to tear down and re-attach the MQL listener each\n * time — the primary source of resize sluggishness.\n *\n * @private\n */\nconst belowBreakpointSubscribeCache = new Map<\n\tTailwindBreakpoint,\n\t(callback: () => void) => () => void\n>();\n\n/**\n * Get (or create and cache) a `subscribe` function for a specific \"below\" breakpoint.\n *\n * Uses a cached `MediaQueryList` and rAF-throttled change handler to avoid\n * bursty updates during resize.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSubscribeCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = (callback: () => void) => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\n\t\t// rAF throttle the change callback during active resize\n\t\tlet pending = false;\n\t\tconst onChange = () => {\n\t\t\tif (!pending) {\n\t\t\t\tpending = true;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tpending = false;\n\t\t\t\t\tcallback();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", onChange);\n\t\treturn () => {\n\t\t\tmediaQuery.removeEventListener(\"change\", onChange);\n\t\t};\n\t};\n\n\tbelowBreakpointSubscribeCache.set(breakpoint, cached);\n\treturn cached;\n}\n\n/**\n * Cached `getSnapshot` functions keyed by breakpoint.\n *\n * Ensures `useSyncExternalStore` receives a referentially stable function,\n * preventing unnecessary subscription churn.\n *\n * @private\n */\nconst belowBreakpointSnapshotCache = new Map<TailwindBreakpoint, () => boolean>();\n\n/**\n * Get (or create and cache) a `getSnapshot` function for a specific \"below\" breakpoint.\n *\n * Uses the cached `MediaQueryList` for the target breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSnapshotCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n\n\tbelowBreakpointSnapshotCache.set(breakpoint, cached);\n\treturn cached;\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that always invokes the latest version of the\n * provided callback, while preserving a stable function identity across\n * renders.\n *\n * Use this when you need to pass a callback to a child component, an event\n * handler, or a hook dependency array, but the consumer should not re-run /\n * re-render simply because the callback's identity changed. The returned\n * function never changes reference, but internally always calls through to\n * the latest `callback` passed in.\n *\n * Most commonly used as an internal building block for other hooks (for\n * example, {@link useDebouncedCallback}). It is also re-exported publicly\n * for consumers that need the same pattern.\n *\n * @param callback - The callback to wrap. May be `undefined`, in which case\n *   invoking the returned function is a no-op until a callback is provided\n *   on a subsequent render.\n * @returns A stable function with the same signature as `callback` that\n *   forwards its arguments to the most recent `callback` value.\n *\n * @example\n * // Pass a stable handler to a memoized child without re-rendering it\n * const onSelect = useCallbackRef((id: string) => {\n *   // reads the latest `props.items` without being in deps\n *   props.onSelectItem(id, props.items);\n * });\n *\n * return <MemoizedList onSelect={onSelect} />;\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\n/**\n * Options for {@link useDebouncedCallback}.\n */\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait between the last invocation and\n\t * actually running the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Returns a debounced version of the provided callback. Each call resets a\n * timer; the underlying callback only runs after `options.waitMs` of\n * inactivity has elapsed.\n *\n * Useful for limiting rapid invocations such as search-as-you-type inputs,\n * window resize handlers, or expensive button-press handlers. The pending\n * timer is automatically cleared on unmount.\n *\n * The debounced function always invokes the latest version of `callbackFn`,\n * so callers do not need to memoize it. The returned function's identity\n * only changes when `options.waitMs` changes, so it is safe to include in\n * dependency arrays.\n *\n * @param callbackFn - The function to debounce. The latest reference passed\n *   on each render is always used when the timer fires.\n * @param options - Debounce options.\n * @param options.waitMs - Milliseconds of inactivity to wait before calling\n *   `callbackFn`.\n * @returns A function with the same parameter list as `callbackFn` that\n *   schedules (or reschedules) the underlying call.\n *\n * @example\n * // Debounce a search input by 300ms\n * const [query, setQuery] = useState(\"\");\n * const search = useDebouncedCallback((value: string) => {\n *   fetchResults(value);\n * }, { waitMs: 300 });\n *\n * return (\n *   <input\n *     value={query}\n *     onChange={(event) => {\n *       setQuery(event.target.value);\n *       search(event.target.value);\n *     }}\n *   />\n * );\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(() => stableCallbackFn(...args), options.waitMs);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useMemo } from \"react\";\n\n/**\n * React hook that returns a random, stable id (e.g. `\"mantle-a3f9k7q\"`)\n * suitable for DOM `id` attributes and `aria-*` references.\n *\n * Unlike React's built-in `useId`, the generated suffix does not contain\n * special characters (`:`). The default id is safe to use directly in CSS\n * selectors and `querySelector` calls; if you provide a custom `prefix`,\n * keep it selector-safe or escape the final id with `CSS.escape()` before\n * querying. The id is generated once for the lifetime of the component and\n * is stable across re-renders, but a new value is produced when `prefix`\n * changes.\n *\n * @param prefix - Optional string prepended to the generated suffix.\n *   Whitespace-only or empty values fall back to `\"mantle\"`. Use a\n *   selector-safe prefix if you plan to reference the id in CSS selectors\n *   without escaping. Defaults to `\"mantle\"`.\n * @returns A string of the form `\"<prefix>-<7-char-random>\"`.\n *\n * @example\n * // Associate a label with a custom input\n * const id = useRandomStableId(\"email-input\");\n *\n * return (\n *   <>\n *     <label htmlFor={id}>Email</label>\n *     <input id={id} type=\"email\" />\n *   </>\n * );\n *\n * @example\n * // Use as an aria-controls reference\n * const panelId = useRandomStableId(\"panel\");\n *\n * return (\n *   <>\n *     <button aria-controls={panelId}>Toggle</button>\n *     <div id={panelId}>Panel contents</div>\n *   </>\n * );\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst safePrefix = prefix.trim() || \"mantle\";\n\treturn [safePrefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n","import { useMemo } from \"react\";\nimport { usePrefersReducedMotion } from \"./use-prefers-reduced-motion.js\";\n\n/**\n * `scroll-behavior` values:\n *\n * - `\"auto\"`   — scrolling happens instantly (no animation).\n * - `\"smooth\"` — scrolling animates smoothly using a user-agent–defined easing and duration.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#values\n */\nexport type ScrollBehavior = \"auto\" | \"smooth\";\n\n/**\n * React hook that returns a {@link ScrollBehavior} value (`\"auto\"` or\n * `\"smooth\"`) that respects the user's motion preference.\n *\n * Internally calls {@link usePrefersReducedMotion}: when reduced motion is\n * preferred, this returns `\"auto\"` (no animated scroll); otherwise it\n * returns `\"smooth\"`. Pair this with `window.scrollTo`,\n * `Element.scrollIntoView`, or any other scroll API that accepts a\n * `behavior` option to avoid forcing animations on users who have opted\n * out of motion. The conservative SSR default also prevents \"first paint\"\n * scroll animations.\n *\n * @returns `\"auto\"` when the user prefers reduced motion, otherwise\n *   `\"smooth\"`.\n *\n * @example\n * // Scroll to the top of the page on a button click\n * const behavior = useScrollBehavior();\n *\n * return (\n *   <button onClick={() => window.scrollTo({ top: 0, behavior })}>\n *     Back to top\n *   </button>\n * );\n *\n * @example\n * // Bring a referenced section into view\n * const behavior = useScrollBehavior();\n * const sectionRef = useRef<HTMLElement>(null);\n *\n * function focusSection() {\n *   sectionRef.current?.scrollIntoView({ behavior, block: \"start\" });\n * }\n *\n * @see {@link usePrefersReducedMotion}\n * @see CSS `scroll-behavior` property (values: `\"auto\"`, `\"smooth\"`).\n */\nexport function useScrollBehavior(): ScrollBehavior {\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\treturn useMemo(() => (prefersReducedMotion ? \"auto\" : \"smooth\"), [prefersReducedMotion]);\n}\n","\"use client\";\n\nimport { type RefObject, useEffect, useState } from \"react\";\nimport type { InViewOptions, MarginType } from \"../utils/in-view.js\";\nimport { inView } from \"../utils/in-view.js\";\n\n/**\n * Options for the `useInView` hook.\n */\ntype UseInViewOptions = {\n\t/**\n\t * A ref to a scrollable container element to use as the intersection root.\n\t * Defaults to the browser viewport.\n\t */\n\troot?: RefObject<Element | null>;\n\n\t/**\n\t * Expand or contract the detected area from each side of the root's bounding box.\n\t * Uses the same syntax as the CSS `margin` shorthand (e.g. `\"10px\"`, `\"10% 20px\"`).\n\t */\n\tmargin?: MarginType;\n\n\t/**\n\t * How much of the element must be visible before it is considered in view.\n\t * - `\"some\"` (default): Any part of the element is visible.\n\t * - `\"all\"`: The entire element is visible.\n\t * - `number`: An intersection ratio between `0` and `1` (e.g. `0.5` for 50%).\n\t */\n\tamount?: \"some\" | \"all\" | number;\n\n\t/**\n\t * If `true`, stop observing once the element enters the viewport for the\n\t * first time. Useful for one-shot entrance animations.\n\t * Defaults to `false`.\n\t */\n\tonce?: boolean;\n\n\t/**\n\t * The initial visibility state returned before the observer has attached.\n\t * Defaults to `false`.\n\t */\n\tinitial?: boolean;\n};\n\n/**\n * React hook that tracks whether a DOM element is visible within the viewport\n * (or a scrollable container) using the `IntersectionObserver` API.\n *\n * @param ref - A ref attached to the element to observe.\n * @param options - Options controlling the scroll root, margin, threshold,\n *   initial state, and one-time detection.\n * @returns `true` if the element is currently in view, otherwise `false`.\n *\n * @example\n * // Basic usage\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref);\n *\n * return <div ref={ref}>{isInView ? \"Visible!\" : \"Hidden\"}</div>;\n *\n * @example\n * // Trigger once when the element first enters the viewport\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref, { once: true });\n *\n * return (\n *   <div\n *     ref={ref}\n *     style={{ opacity: isInView ? 1 : 0, transition: \"opacity 0.5s\" }}\n *   />\n * );\n *\n * @example\n * // Require 50% of the element to be visible\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref, { amount: 0.5 });\n */\nfunction useInView(\n\tref: RefObject<Element | null>,\n\t{ root, margin, amount, once = false, initial = false }: UseInViewOptions = {},\n): boolean {\n\tconst [isInView, setInView] = useState(initial);\n\n\tuseEffect(() => {\n\t\tif (!ref.current || (once && isInView)) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction onEnter() {\n\t\t\tsetInView(true);\n\t\t\treturn once ? undefined : () => setInView(false);\n\t\t}\n\n\t\tconst options: InViewOptions = {\n\t\t\troot: (root && root.current) || undefined,\n\t\t\tmargin,\n\t\t\tamount,\n\t\t};\n\n\t\treturn inView(ref.current, onEnter, options);\n\t\t/**\n\t\t * Intentionally omit `isInView` from deps. The effect must only re-run\n\t\t * when the observation parameters change, not when visibility changes.\n\t\t * Including `isInView` would restart the observer (disconnect + reconnect)\n\t\t * on every enter/leave event, causing wasteful churn for the common\n\t\t * `once=false` case.\n\t\t */\n\t\t// oxlint-disable-next-line react-hooks/exhaustive-deps\n\t}, [root, ref, margin, once, amount]);\n\n\treturn isInView;\n}\n\nexport { useInView };\nexport type { UseInViewOptions };\n","import { useCallback, useMemo, useReducer } from \"react\";\n\ntype UndoRedoState<T> = {\n\tundoStack: T[];\n\tredoStack: T[];\n};\n\ntype UndoRedoAction<T> =\n\t| { type: \"push\"; snapshot: T }\n\t| { type: \"undo\"; current: T }\n\t| { type: \"redo\"; current: T };\n\nfunction undoRedoReducer<T>(state: UndoRedoState<T>, action: UndoRedoAction<T>): UndoRedoState<T> {\n\tswitch (action.type) {\n\t\tcase \"push\": {\n\t\t\treturn {\n\t\t\t\tundoStack: [...state.undoStack, action.snapshot],\n\t\t\t\tredoStack: [],\n\t\t\t};\n\t\t}\n\t\tcase \"undo\": {\n\t\t\tif (state.undoStack.length === 0) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\tconst undoStack = state.undoStack.slice(0, -1);\n\t\t\tconst previous = state.undoStack[state.undoStack.length - 1];\n\t\t\tif (previous === undefined) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tundoStack,\n\t\t\t\tredoStack: [...state.redoStack, action.current],\n\t\t\t};\n\t\t}\n\t\tcase \"redo\": {\n\t\t\tif (state.redoStack.length === 0) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\tconst redoStack = state.redoStack.slice(0, -1);\n\t\t\tconst next = state.redoStack[state.redoStack.length - 1];\n\t\t\tif (next === undefined) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tundoStack: [...state.undoStack, action.current],\n\t\t\t\tredoStack,\n\t\t\t};\n\t\t}\n\t}\n}\n\ntype UseUndoRedoReturn<T> = {\n\t/** Whether there are actions to undo. */\n\tcanUndo: boolean;\n\t/** Whether there are actions to redo. */\n\tcanRedo: boolean;\n\t/** Push a snapshot onto the undo stack. Clears the redo stack. */\n\tpush: (snapshot: T) => void;\n\t/** Pop the last snapshot from the undo stack. Returns `undefined` if empty. */\n\tundo: (current: T) => T | undefined;\n\t/** Pop the last snapshot from the redo stack. Returns `undefined` if empty. */\n\tredo: (current: T) => T | undefined;\n};\n\n/**\n * Generic undo/redo hook backed by a reducer that maintains two history\n * stacks (undo and redo).\n *\n * The hook does not own your application state — instead it helps you\n * snapshot it. Call `push(snapshot)` *before* mutating state to capture\n * the current value, then call `undo(current)` or `redo(current)` to swap\n * `current` with the previous/next snapshot. Both `undo` and `redo` return\n * the snapshot to apply, or `undefined` if their stack is empty. Pushing a\n * new snapshot clears the redo stack, matching standard editor semantics.\n *\n * @typeParam T - The type of the value being snapshotted (e.g. a list of\n *   items, a serialized form value, etc.).\n *\n * @returns An object with the current undo/redo capability flags and\n *   actions:\n *   - `canUndo`: `true` when there is at least one snapshot on the undo\n *     stack.\n *   - `canRedo`: `true` when there is at least one snapshot on the redo\n *     stack.\n *   - `push(snapshot)`: Push a snapshot onto the undo stack and clear the\n *     redo stack. Call this *before* mutating state.\n *   - `undo(current)`: Pop the latest undo snapshot and return it; returns\n *     `undefined` when the undo stack is empty. The supplied `current` is\n *     pushed onto the redo stack so you can redo back to it.\n *   - `redo(current)`: Pop the latest redo snapshot and return it; returns\n *     `undefined` when the redo stack is empty. The supplied `current` is\n *     pushed onto the undo stack.\n *\n * @example\n * // Snapshot before mutating, then wire up keyboard shortcuts\n * const [items, setItems] = useState<string[]>([]);\n * const { push, undo, redo, canUndo, canRedo } = useUndoRedo<string[]>();\n *\n * function removeItem(item: string) {\n *   push(items); // snapshot before mutation\n *   setItems((prev) => prev.filter((entry) => entry !== item));\n * }\n *\n * function handleKeyDown(event: React.KeyboardEvent) {\n *   const cmd = event.metaKey || event.ctrlKey;\n *   if (cmd && event.key === \"z\" && !event.shiftKey) {\n *     const previous = undo(items);\n *     if (previous) {\n *       setItems(previous);\n *     }\n *   }\n *   if (cmd && ((event.shiftKey && event.key === \"z\") || event.key === \"y\")) {\n *     const next = redo(items);\n *     if (next) {\n *       setItems(next);\n *     }\n *   }\n * }\n *\n * return (\n *   <div tabIndex={0} onKeyDown={handleKeyDown}>\n *     <button disabled={!canUndo} onClick={() => { const previous = undo(items); if (previous) setItems(previous); }}>Undo</button>\n *     <button disabled={!canRedo} onClick={() => { const next = redo(items); if (next) setItems(next); }}>Redo</button>\n *   </div>\n * );\n */\nfunction useUndoRedo<T>(): UseUndoRedoReturn<T> {\n\tconst [state, dispatch] = useReducer(undoRedoReducer<T>, {\n\t\tundoStack: [],\n\t\tredoStack: [],\n\t});\n\n\tconst push = useCallback((snapshot: T) => {\n\t\tdispatch({ type: \"push\", snapshot });\n\t}, []);\n\n\tconst undo = useCallback(\n\t\t(current: T): T | undefined => {\n\t\t\tconst previous = state.undoStack[state.undoStack.length - 1];\n\t\t\tif (previous === undefined) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tdispatch({ type: \"undo\", current });\n\t\t\treturn previous;\n\t\t},\n\t\t[state.undoStack],\n\t);\n\n\tconst redo = useCallback(\n\t\t(current: T): T | undefined => {\n\t\t\tconst next = state.redoStack[state.redoStack.length - 1];\n\t\t\tif (next === undefined) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tdispatch({ type: \"redo\", current });\n\t\t\treturn next;\n\t\t},\n\t\t[state.redoStack],\n\t);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tcanUndo: state.undoStack.length > 0,\n\t\t\tcanRedo: state.redoStack.length > 0,\n\t\t\tpush,\n\t\t\tundo,\n\t\t\tredo,\n\t\t}),\n\t\t[state.undoStack.length, state.redoStack.length, push, undo, redo],\n\t);\n}\n\nexport {\n\t//,\n\tuseUndoRedo,\n};\n\nexport type {\n\t//,\n\tUseUndoRedoReturn,\n};\n"],"mappings":"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"}
+{"version":3,"file":"hooks.js","names":[],"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-random-stable-id.tsx","../src/hooks/use-scroll-behavior.tsx","../src/hooks/use-in-view.tsx","../src/hooks/use-undo-redo.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Tailwind CSS breakpoints in descending order (largest → smallest).\n *\n * These correspond to Tailwind’s default `theme.screens` config and are used\n * to determine the current viewport size.\n *\n * @see https://tailwindcss.com/docs/screens\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\"  // ≥80rem (1280px)\n * \"lg\"  // ≥64rem (1024px)\n * \"md\"  // ≥48rem (768px)\n * \"sm\"  // ≥40rem (640px)\n * \"xs\"  // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\", \"xs\", \"2xs\"] as const;\n\n/**\n * A valid Tailwind CSS breakpoint identifier.\n *\n * @example\n * const bp: TailwindBreakpoint = \"md\"; // ≥48rem (768px)\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\"  // ≥80rem (1280px)\n * \"lg\"  // ≥64rem (1024px)\n * \"md\"  // ≥48rem (768px)\n * \"sm\"  // ≥40rem (640px)\n * \"xs\"  // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\ntype TailwindBreakpoint = (typeof tailwindBreakpoints)[number];\n\n/**\n * Mantle’s breakpoint set, extending Tailwind’s with `\"default\"`.\n *\n * `\"default\"` represents the base (0px and up) viewport,\n * useful for defining fallbacks or mobile-first styles.\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\"     // ≥22.5rem (360px)\n * \"xs\"      // ≥30rem (480px)\n * \"sm\"      // ≥40rem (640px)\n * \"md\"      // ≥48rem (768px)\n * \"lg\"      // ≥64rem (1024px)\n * \"xl\"      // ≥80rem (1280px)\n * \"2xl\"     // ≥96rem (1536px)\n */\nconst breakpoints = [\"default\", ...tailwindBreakpoints] as const;\n\n/**\n * A valid Mantle breakpoint identifier.\n *\n * Includes Tailwind’s standard breakpoints plus `\"default\"` for 0px+.\n *\n * @example\n * const bp: Breakpoint = \"default\"; // ≥0px\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\"     // ≥22.5rem (360px)\n * \"xs\"      // ≥30rem (480px)\n * \"sm\"      // ≥40rem (640px)\n * \"md\"      // ≥48rem (768px)\n * \"lg\"      // ≥64rem (1024px)\n * \"xl\"      // ≥80rem (1280px)\n * \"2xl\"     // ≥96rem (1536px)\n */\ntype Breakpoint = (typeof breakpoints)[number];\n\n/**\n * React hook that returns the current breakpoint based on the viewport width.\n *\n * Uses a singleton subscription to a set of min-width media queries and returns\n * the largest matching breakpoint. Designed for React 18+ with\n * `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The current breakpoint that matches the viewport width.\n *\n * @example\n * const breakpoint = useBreakpoint();\n * if (breakpoint === \"lg\") {\n *   // Do something for large screens and above\n * }\n */\nfunction useBreakpoint(): Breakpoint {\n\treturn useSyncExternalStore(\n\t\tsubscribeToBreakpointChanges,\n\t\tgetCurrentBreakpointSnapshot,\n\t\t() => \"default\", // SSR fallback\n\t);\n}\n\n/**\n * React hook that returns true if the current viewport width is below the specified breakpoint.\n *\n * This hook uses `window.matchMedia` with a max-width media query and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., \"md\", \"lg\").\n *\n * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.\n *\n * @example\n * // Check if viewport is below medium (768px)\n * const isBelowMd = useIsBelowBreakpoint(\"md\");\n */\nfunction useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean {\n\treturn useSyncExternalStore(\n\t\tcreateBelowBreakpointSubscribe(breakpoint),\n\t\tcreateBelowBreakpointGetSnapshot(breakpoint),\n\t\t() => false, // SSR fallback - assume desktop\n\t);\n}\n\nexport {\n\t//,\n\tbreakpoints,\n\tuseBreakpoint,\n\tuseIsBelowBreakpoint,\n};\n\nexport type {\n\t//,\n\tBreakpoint,\n\tTailwindBreakpoint,\n};\n\n/**\n * A CSS media query string representing a minimum width in `rem` units.\n *\n * @example\n * const query: MinWidthQuery = \"(min-width: 48rem)\";\n *\n * @private\n */\ntype MinWidthQuery = `(min-width: ${number}rem)`;\n\n/**\n * A CSS media query string representing a maximum width in `rem` units.\n *\n * @example\n * const query: MaxWidthQuery = \"(max-width: 47.99rem)\";\n *\n * @private\n */\ntype MaxWidthQuery = `(max-width: ${number}rem)`;\n\n/**\n * Precomputed min-width media query strings for each Tailwind breakpoint.\n *\n * Using constants avoids template string work in hot paths and ensures type\n * safety against the `MinWidthQuery` template literal type.\n *\n * @remarks\n * These are expressed in `rem`. If your CSS breakpoints are in `px`, consider\n * aligning units to avoid JS/CSS drift when `html{font-size}` changes.\n *\n * @private\n */\nconst breakpointQueries = {\n\t\"2xl\": \"(min-width: 96rem)\" as const,\n\txl: \"(min-width: 80rem)\" as const,\n\tlg: \"(min-width: 64rem)\" as const,\n\tmd: \"(min-width: 48rem)\" as const,\n\tsm: \"(min-width: 40rem)\" as const,\n\txs: \"(min-width: 30rem)\" as const,\n\t\"2xs\": \"(min-width: 22.5rem)\" as const,\n} as const satisfies Record<TailwindBreakpoint, MinWidthQuery>;\n\n/**\n * Precomputed max-width media query strings used by `useIsBelowBreakpoint`.\n *\n * The `-0.01rem` offset avoids overlap at exact boundaries.\n *\n * @private\n */\nconst belowBreakpointQueries = {\n\t\"2xl\": \"(max-width: 95.99rem)\" as const, // 96 - 0.01\n\txl: \"(max-width: 79.99rem)\" as const, // 80 - 0.01\n\tlg: \"(max-width: 63.99rem)\" as const, // 64 - 0.01\n\tmd: \"(max-width: 47.99rem)\" as const, // 48 - 0.01\n\tsm: \"(max-width: 39.99rem)\" as const, // 40 - 0.01\n\txs: \"(max-width: 29.99rem)\" as const, // 30 - 0.01\n\t\"2xs\": \"(max-width: 22.49rem)\" as const, // 22.5 - 0.01\n} as const satisfies Record<TailwindBreakpoint, MaxWidthQuery>;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for min-width queries.\n *\n * Initialized on first access to remain SSR-safe (no `window` at import time).\n *\n * @private\n */\nlet minWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for max-width queries.\n *\n * Used by `useIsBelowBreakpoint`. Also SSR-safe by lazy access.\n *\n * @private\n */\nlet maxWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` objects for min-width queries.\n *\n * @returns A record of `MediaQueryList` keyed by Tailwind breakpoint.\n * @private\n */\nfunction getMinWidthMQLs(): Record<TailwindBreakpoint, MediaQueryList> {\n\tif (!minWidthMQLs) {\n\t\tminWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(breakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(breakpointQueries.xl),\n\t\t\tlg: window.matchMedia(breakpointQueries.lg),\n\t\t\tmd: window.matchMedia(breakpointQueries.md),\n\t\t\tsm: window.matchMedia(breakpointQueries.sm),\n\t\t\txs: window.matchMedia(breakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(breakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn minWidthMQLs;\n}\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` for a specific max-width breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"md\").\n * @returns The corresponding `MediaQueryList`.\n * @private\n */\nfunction getMaxWidthMQL(breakpoint: TailwindBreakpoint): MediaQueryList {\n\tif (!maxWidthMQLs) {\n\t\tmaxWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(belowBreakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(belowBreakpointQueries.xl),\n\t\t\tlg: window.matchMedia(belowBreakpointQueries.lg),\n\t\t\tmd: window.matchMedia(belowBreakpointQueries.md),\n\t\t\tsm: window.matchMedia(belowBreakpointQueries.sm),\n\t\t\txs: window.matchMedia(belowBreakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(belowBreakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn maxWidthMQLs[breakpoint];\n}\n\n/**\n * Current breakpoint value used by the singleton store backing `useBreakpoint`.\n *\n * Initialized to `\"default\"` and updated on media-query change events.\n *\n * @private\n */\nlet currentBreakpointValue: Breakpoint = \"default\";\n\n/**\n * Set of component listeners subscribed to the singleton breakpoint store.\n *\n * Each listener is invoked when the current breakpoint value changes.\n *\n * @private\n */\nconst breakpointListeners = new Set<() => void>();\n\n/**\n * Flag indicating whether global media-query listeners are currently attached.\n *\n * Prevents duplicate registrations and enables full teardown when unused.\n *\n * @private\n */\nlet breakpointSubscriptionActive = false;\n\n/**\n * Compute the current breakpoint by checking cached min-width MQLs\n * from largest to smallest.\n *\n * @returns {Breakpoint} The largest matching breakpoint, or `\"default\"`.\n * @private\n */\nfunction getCurrentBreakpoint(): Breakpoint {\n\tconst mqls = getMinWidthMQLs();\n\tfor (const breakpoint of tailwindBreakpoints) {\n\t\tif (mqls[breakpoint].matches) {\n\t\t\treturn breakpoint;\n\t\t}\n\t}\n\treturn \"default\";\n}\n\n/**\n * Update the current breakpoint value and notify all listeners.\n *\n * Uses `requestAnimationFrame` to coalesce rapid resize events and minimize\n * re-renders during active window resizing.\n *\n * @private\n */\nlet breakpointUpdatePending = false;\nfunction updateCurrentBreakpoint() {\n\tif (!breakpointUpdatePending) {\n\t\tbreakpointUpdatePending = true;\n\t\trequestAnimationFrame(() => {\n\t\t\tbreakpointUpdatePending = false;\n\t\t\tconst newBreakpoint = getCurrentBreakpoint();\n\t\t\tif (newBreakpoint !== currentBreakpointValue) {\n\t\t\t\tcurrentBreakpointValue = newBreakpoint;\n\t\t\t\tfor (const listener of breakpointListeners) {\n\t\t\t\t\tlistener();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n/**\n * Subscribe a component to breakpoint changes (singleton pattern).\n *\n * Ensures only one set of MQL listeners exists app-wide. Also reconciles the\n * `useSyncExternalStore` initial snapshot/subscribe race by invoking the\n * subscriber once on mount.\n *\n * @param callback - Listener invoked when the breakpoint value may have changed.\n * @returns Cleanup function to unsubscribe the listener.\n * @private\n */\nfunction subscribeToBreakpointChanges(callback: () => void) {\n\tbreakpointListeners.add(callback);\n\n\t// Attach global listeners once\n\tif (!breakpointSubscriptionActive) {\n\t\tbreakpointSubscriptionActive = true;\n\t\tconst mqls = getMinWidthMQLs();\n\n\t\t// Initialize current value synchronously\n\t\tcurrentBreakpointValue = getCurrentBreakpoint();\n\n\t\t// Attach listeners to all breakpoint MQLs\n\t\tfor (const mql of Object.values(mqls)) {\n\t\t\tmql.addEventListener(\"change\", updateCurrentBreakpoint);\n\t\t}\n\t}\n\n\t// Reconcile initial getSnapshot vs subscribe ordering\n\tcallback();\n\n\t// Cleanup\n\treturn () => {\n\t\tbreakpointListeners.delete(callback);\n\n\t\t// Tear down global listeners when no one is listening\n\t\tif (breakpointListeners.size === 0 && breakpointSubscriptionActive) {\n\t\t\tbreakpointSubscriptionActive = false;\n\t\t\tconst mqls = getMinWidthMQLs();\n\t\t\tfor (const mql of Object.values(mqls)) {\n\t\t\t\tmql.removeEventListener(\"change\", updateCurrentBreakpoint);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Return the current breakpoint value from the singleton store.\n *\n * Used as the `getSnapshot` for `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The latest computed breakpoint.\n * @private\n */\nfunction getCurrentBreakpointSnapshot(): Breakpoint {\n\treturn currentBreakpointValue;\n}\n\n/**\n * Cached `subscribe` functions keyed by breakpoint.\n *\n * Without caching, `useSyncExternalStore` receives a new function reference on\n * every render, causing it to tear down and re-attach the MQL listener each\n * time — the primary source of resize sluggishness.\n *\n * @private\n */\nconst belowBreakpointSubscribeCache = new Map<\n\tTailwindBreakpoint,\n\t(callback: () => void) => () => void\n>();\n\n/**\n * Get (or create and cache) a `subscribe` function for a specific \"below\" breakpoint.\n *\n * Uses a cached `MediaQueryList` and rAF-throttled change handler to avoid\n * bursty updates during resize.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSubscribeCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = (callback: () => void) => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\n\t\t// rAF throttle the change callback during active resize\n\t\tlet pending = false;\n\t\tconst onChange = () => {\n\t\t\tif (!pending) {\n\t\t\t\tpending = true;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tpending = false;\n\t\t\t\t\tcallback();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", onChange);\n\t\treturn () => {\n\t\t\tmediaQuery.removeEventListener(\"change\", onChange);\n\t\t};\n\t};\n\n\tbelowBreakpointSubscribeCache.set(breakpoint, cached);\n\treturn cached;\n}\n\n/**\n * Cached `getSnapshot` functions keyed by breakpoint.\n *\n * Ensures `useSyncExternalStore` receives a referentially stable function,\n * preventing unnecessary subscription churn.\n *\n * @private\n */\nconst belowBreakpointSnapshotCache = new Map<TailwindBreakpoint, () => boolean>();\n\n/**\n * Get (or create and cache) a `getSnapshot` function for a specific \"below\" breakpoint.\n *\n * Uses the cached `MediaQueryList` for the target breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSnapshotCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n\n\tbelowBreakpointSnapshotCache.set(breakpoint, cached);\n\treturn cached;\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that always invokes the latest version of the\n * provided callback, while preserving a stable function identity across\n * renders.\n *\n * Use this when you need to pass a callback to a child component, an event\n * handler, or a hook dependency array, but the consumer should not re-run /\n * re-render simply because the callback's identity changed. The returned\n * function never changes reference, but internally always calls through to\n * the latest `callback` passed in.\n *\n * Most commonly used as an internal building block for other hooks (for\n * example, {@link useDebouncedCallback}). It is also re-exported publicly\n * for consumers that need the same pattern.\n *\n * @param callback - The callback to wrap. May be `undefined`, in which case\n *   invoking the returned function is a no-op until a callback is provided\n *   on a subsequent render.\n * @returns A stable function with the same signature as `callback` that\n *   forwards its arguments to the most recent `callback` value.\n *\n * @example\n * // Pass a stable handler to a memoized child without re-rendering it\n * const onSelect = useCallbackRef((id: string) => {\n *   // reads the latest `props.items` without being in deps\n *   props.onSelectItem(id, props.items);\n * });\n *\n * return <MemoizedList onSelect={onSelect} />;\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\n/**\n * Options for {@link useDebouncedCallback}.\n */\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait between the last invocation and\n\t * actually running the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Returns a debounced version of the provided callback. Each call resets a\n * timer; the underlying callback only runs after `options.waitMs` of\n * inactivity has elapsed.\n *\n * Useful for limiting rapid invocations such as search-as-you-type inputs,\n * window resize handlers, or expensive button-press handlers. The pending\n * timer is automatically cleared on unmount.\n *\n * The debounced function always invokes the latest version of `callbackFn`,\n * so callers do not need to memoize it. The returned function's identity\n * only changes when `options.waitMs` changes, so it is safe to include in\n * dependency arrays.\n *\n * @param callbackFn - The function to debounce. The latest reference passed\n *   on each render is always used when the timer fires.\n * @param options - Debounce options.\n * @param options.waitMs - Milliseconds of inactivity to wait before calling\n *   `callbackFn`.\n * @returns A function with the same parameter list as `callbackFn` that\n *   schedules (or reschedules) the underlying call.\n *\n * @example\n * // Debounce a search input by 300ms\n * const [query, setQuery] = useState(\"\");\n * const search = useDebouncedCallback((value: string) => {\n *   fetchResults(value);\n * }, { waitMs: 300 });\n *\n * return (\n *   <input\n *     value={query}\n *     onChange={(event) => {\n *       setQuery(event.target.value);\n *       search(event.target.value);\n *     }}\n *   />\n * );\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(() => stableCallbackFn(...args), options.waitMs);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useMemo } from \"react\";\n\n/**\n * React hook that returns a random, stable id (e.g. `\"mantle-a3f9k7q\"`)\n * suitable for DOM `id` attributes and `aria-*` references.\n *\n * Unlike React's built-in `useId`, the generated suffix does not contain\n * special characters (`:`). The default id is safe to use directly in CSS\n * selectors and `querySelector` calls; if you provide a custom `prefix`,\n * keep it selector-safe or escape the final id with `CSS.escape()` before\n * querying. The id is generated once for the lifetime of the component and\n * is stable across re-renders, but a new value is produced when `prefix`\n * changes.\n *\n * @param prefix - Optional string prepended to the generated suffix.\n *   Whitespace-only or empty values fall back to `\"mantle\"`. Use a\n *   selector-safe prefix if you plan to reference the id in CSS selectors\n *   without escaping. Defaults to `\"mantle\"`.\n * @returns A string of the form `\"<prefix>-<7-char-random>\"`.\n *\n * @example\n * // Associate a label with a custom input\n * const id = useRandomStableId(\"email-input\");\n *\n * return (\n *   <>\n *     <label htmlFor={id}>Email</label>\n *     <input id={id} type=\"email\" />\n *   </>\n * );\n *\n * @example\n * // Use as an aria-controls reference\n * const panelId = useRandomStableId(\"panel\");\n *\n * return (\n *   <>\n *     <button aria-controls={panelId}>Toggle</button>\n *     <div id={panelId}>Panel contents</div>\n *   </>\n * );\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst safePrefix = prefix.trim() || \"mantle\";\n\treturn [safePrefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n","import { useMemo } from \"react\";\nimport { usePrefersReducedMotion } from \"./use-prefers-reduced-motion.js\";\n\n/**\n * `scroll-behavior` values:\n *\n * - `\"auto\"`   — scrolling happens instantly (no animation).\n * - `\"smooth\"` — scrolling animates smoothly using a user-agent–defined easing and duration.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#values\n */\nexport type ScrollBehavior = \"auto\" | \"smooth\";\n\n/**\n * React hook that returns a {@link ScrollBehavior} value (`\"auto\"` or\n * `\"smooth\"`) that respects the user's motion preference.\n *\n * Internally calls {@link usePrefersReducedMotion}: when reduced motion is\n * preferred, this returns `\"auto\"` (no animated scroll); otherwise it\n * returns `\"smooth\"`. Pair this with `window.scrollTo`,\n * `Element.scrollIntoView`, or any other scroll API that accepts a\n * `behavior` option to avoid forcing animations on users who have opted\n * out of motion. The conservative SSR default also prevents \"first paint\"\n * scroll animations.\n *\n * @returns `\"auto\"` when the user prefers reduced motion, otherwise\n *   `\"smooth\"`.\n *\n * @example\n * // Scroll to the top of the page on a button click\n * const behavior = useScrollBehavior();\n *\n * return (\n *   <button onClick={() => window.scrollTo({ top: 0, behavior })}>\n *     Back to top\n *   </button>\n * );\n *\n * @example\n * // Bring a referenced section into view\n * const behavior = useScrollBehavior();\n * const sectionRef = useRef<HTMLElement>(null);\n *\n * function focusSection() {\n *   sectionRef.current?.scrollIntoView({ behavior, block: \"start\" });\n * }\n *\n * @see {@link usePrefersReducedMotion}\n * @see CSS `scroll-behavior` property (values: `\"auto\"`, `\"smooth\"`).\n */\nexport function useScrollBehavior(): ScrollBehavior {\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\treturn useMemo(() => (prefersReducedMotion ? \"auto\" : \"smooth\"), [prefersReducedMotion]);\n}\n","\"use client\";\n\nimport { type RefObject, useEffect, useState } from \"react\";\nimport type { InViewOptions, MarginType } from \"../utils/in-view.js\";\nimport { inView } from \"../utils/in-view.js\";\n\n/**\n * Options for the `useInView` hook.\n */\ntype UseInViewOptions = {\n\t/**\n\t * A ref to a scrollable container element to use as the intersection root.\n\t * Defaults to the browser viewport.\n\t */\n\troot?: RefObject<Element | null>;\n\n\t/**\n\t * Expand or contract the detected area from each side of the root's bounding box.\n\t * Uses the same syntax as the CSS `margin` shorthand (e.g. `\"10px\"`, `\"10% 20px\"`).\n\t */\n\tmargin?: MarginType;\n\n\t/**\n\t * How much of the element must be visible before it is considered in view.\n\t * - `\"some\"` (default): Any part of the element is visible.\n\t * - `\"all\"`: The entire element is visible.\n\t * - `number`: An intersection ratio between `0` and `1` (e.g. `0.5` for 50%).\n\t */\n\tamount?: \"some\" | \"all\" | number;\n\n\t/**\n\t * If `true`, stop observing once the element enters the viewport for the\n\t * first time. Useful for one-shot entrance animations.\n\t * Defaults to `false`.\n\t */\n\tonce?: boolean;\n\n\t/**\n\t * The initial visibility state returned before the observer has attached.\n\t * Defaults to `false`.\n\t */\n\tinitial?: boolean;\n};\n\n/**\n * React hook that tracks whether a DOM element is visible within the viewport\n * (or a scrollable container) using the `IntersectionObserver` API.\n *\n * @param ref - A ref attached to the element to observe.\n * @param options - Options controlling the scroll root, margin, threshold,\n *   initial state, and one-time detection.\n * @returns `true` if the element is currently in view, otherwise `false`.\n *\n * @example\n * // Basic usage\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref);\n *\n * return <div ref={ref}>{isInView ? \"Visible!\" : \"Hidden\"}</div>;\n *\n * @example\n * // Trigger once when the element first enters the viewport\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref, { once: true });\n *\n * return (\n *   <div\n *     ref={ref}\n *     style={{ opacity: isInView ? 1 : 0, transition: \"opacity 0.5s\" }}\n *   />\n * );\n *\n * @example\n * // Require 50% of the element to be visible\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref, { amount: 0.5 });\n */\nfunction useInView(\n\tref: RefObject<Element | null>,\n\t{ root, margin, amount, once = false, initial = false }: UseInViewOptions = {},\n): boolean {\n\tconst [isInView, setInView] = useState(initial);\n\n\tuseEffect(() => {\n\t\tif (!ref.current || (once && isInView)) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction onEnter() {\n\t\t\tsetInView(true);\n\t\t\treturn once ? undefined : () => setInView(false);\n\t\t}\n\n\t\tconst options: InViewOptions = {\n\t\t\troot: (root && root.current) || undefined,\n\t\t\tmargin,\n\t\t\tamount,\n\t\t};\n\n\t\treturn inView(ref.current, onEnter, options);\n\t\t/**\n\t\t * Intentionally omit `isInView` from deps. The effect must only re-run\n\t\t * when the observation parameters change, not when visibility changes.\n\t\t * Including `isInView` would restart the observer (disconnect + reconnect)\n\t\t * on every enter/leave event, causing wasteful churn for the common\n\t\t * `once=false` case.\n\t\t */\n\t\t// oxlint-disable-next-line react-hooks/exhaustive-deps\n\t}, [root, ref, margin, once, amount]);\n\n\treturn isInView;\n}\n\nexport { useInView };\nexport type { UseInViewOptions };\n","import { useCallback, useMemo, useReducer } from \"react\";\n\ntype UndoRedoState<T> = {\n\tundoStack: T[];\n\tredoStack: T[];\n};\n\ntype UndoRedoAction<T> =\n\t| { type: \"push\"; snapshot: T }\n\t| { type: \"undo\"; current: T }\n\t| { type: \"redo\"; current: T };\n\nfunction undoRedoReducer<T>(state: UndoRedoState<T>, action: UndoRedoAction<T>): UndoRedoState<T> {\n\tswitch (action.type) {\n\t\tcase \"push\": {\n\t\t\treturn {\n\t\t\t\tundoStack: [...state.undoStack, action.snapshot],\n\t\t\t\tredoStack: [],\n\t\t\t};\n\t\t}\n\t\tcase \"undo\": {\n\t\t\tif (state.undoStack.length === 0) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\tconst undoStack = state.undoStack.slice(0, -1);\n\t\t\tconst previous = state.undoStack[state.undoStack.length - 1];\n\t\t\tif (previous === undefined) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tundoStack,\n\t\t\t\tredoStack: [...state.redoStack, action.current],\n\t\t\t};\n\t\t}\n\t\tcase \"redo\": {\n\t\t\tif (state.redoStack.length === 0) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\tconst redoStack = state.redoStack.slice(0, -1);\n\t\t\tconst next = state.redoStack[state.redoStack.length - 1];\n\t\t\tif (next === undefined) {\n\t\t\t\treturn state;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tundoStack: [...state.undoStack, action.current],\n\t\t\t\tredoStack,\n\t\t\t};\n\t\t}\n\t}\n}\n\ntype UseUndoRedoReturn<T> = {\n\t/** Whether there are actions to undo. */\n\tcanUndo: boolean;\n\t/** Whether there are actions to redo. */\n\tcanRedo: boolean;\n\t/** Push a snapshot onto the undo stack. Clears the redo stack. */\n\tpush: (snapshot: T) => void;\n\t/** Pop the last snapshot from the undo stack. Returns `undefined` if empty. */\n\tundo: (current: T) => T | undefined;\n\t/** Pop the last snapshot from the redo stack. Returns `undefined` if empty. */\n\tredo: (current: T) => T | undefined;\n};\n\n/**\n * Generic undo/redo hook backed by a reducer that maintains two history\n * stacks (undo and redo).\n *\n * The hook does not own your application state — instead it helps you\n * snapshot it. Call `push(snapshot)` *before* mutating state to capture\n * the current value, then call `undo(current)` or `redo(current)` to swap\n * `current` with the previous/next snapshot. Both `undo` and `redo` return\n * the snapshot to apply, or `undefined` if their stack is empty. Pushing a\n * new snapshot clears the redo stack, matching standard editor semantics.\n *\n * @typeParam T - The type of the value being snapshotted (e.g. a list of\n *   items, a serialized form value, etc.).\n *\n * @returns An object with the current undo/redo capability flags and\n *   actions:\n *   - `canUndo`: `true` when there is at least one snapshot on the undo\n *     stack.\n *   - `canRedo`: `true` when there is at least one snapshot on the redo\n *     stack.\n *   - `push(snapshot)`: Push a snapshot onto the undo stack and clear the\n *     redo stack. Call this *before* mutating state.\n *   - `undo(current)`: Pop the latest undo snapshot and return it; returns\n *     `undefined` when the undo stack is empty. The supplied `current` is\n *     pushed onto the redo stack so you can redo back to it.\n *   - `redo(current)`: Pop the latest redo snapshot and return it; returns\n *     `undefined` when the redo stack is empty. The supplied `current` is\n *     pushed onto the undo stack.\n *\n * @example\n * // Snapshot before mutating, then wire up keyboard shortcuts\n * const [items, setItems] = useState<string[]>([]);\n * const { push, undo, redo, canUndo, canRedo } = useUndoRedo<string[]>();\n *\n * function removeItem(item: string) {\n *   push(items); // snapshot before mutation\n *   setItems((prev) => prev.filter((entry) => entry !== item));\n * }\n *\n * function handleKeyDown(event: React.KeyboardEvent) {\n *   const cmd = event.metaKey || event.ctrlKey;\n *   if (cmd && event.key === \"z\" && !event.shiftKey) {\n *     const previous = undo(items);\n *     if (previous) {\n *       setItems(previous);\n *     }\n *   }\n *   if (cmd && ((event.shiftKey && event.key === \"z\") || event.key === \"y\")) {\n *     const next = redo(items);\n *     if (next) {\n *       setItems(next);\n *     }\n *   }\n * }\n *\n * return (\n *   <div tabIndex={0} onKeyDown={handleKeyDown}>\n *     <button disabled={!canUndo} onClick={() => { const previous = undo(items); if (previous) setItems(previous); }}>Undo</button>\n *     <button disabled={!canRedo} onClick={() => { const next = redo(items); if (next) setItems(next); }}>Redo</button>\n *   </div>\n * );\n */\nfunction useUndoRedo<T>(): UseUndoRedoReturn<T> {\n\tconst [state, dispatch] = useReducer(undoRedoReducer<T>, {\n\t\tundoStack: [],\n\t\tredoStack: [],\n\t});\n\n\tconst push = useCallback((snapshot: T) => {\n\t\tdispatch({ type: \"push\", snapshot });\n\t}, []);\n\n\tconst undo = useCallback(\n\t\t(current: T): T | undefined => {\n\t\t\tconst previous = state.undoStack[state.undoStack.length - 1];\n\t\t\tif (previous === undefined) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tdispatch({ type: \"undo\", current });\n\t\t\treturn previous;\n\t\t},\n\t\t[state.undoStack],\n\t);\n\n\tconst redo = useCallback(\n\t\t(current: T): T | undefined => {\n\t\t\tconst next = state.redoStack[state.redoStack.length - 1];\n\t\t\tif (next === undefined) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tdispatch({ type: \"redo\", current });\n\t\t\treturn next;\n\t\t},\n\t\t[state.redoStack],\n\t);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tcanUndo: state.undoStack.length > 0,\n\t\t\tcanRedo: state.redoStack.length > 0,\n\t\t\tpush,\n\t\t\tundo,\n\t\t\tredo,\n\t\t}),\n\t\t[state.undoStack.length, state.redoStack.length, push, undo, redo],\n\t);\n}\n\nexport {\n\t//,\n\tuseUndoRedo,\n};\n\nexport type {\n\t//,\n\tUseUndoRedoReturn,\n};\n"],"mappings":"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"}

package/dist/hover-card.d.ts

@@ -1,6 +1,4 @@
-import * as _$react from "react";
 import { ComponentPropsWithoutRef } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
 //#region src/components/hover-card/hover-card.d.ts
@@ -62,7 +60,7 @@ declare const HoverCard: {
       closeDelay,
       openDelay,
       ...props
-    }: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+    }: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
   };
   /**
@@ -86,7 +84,7 @@ declare const HoverCard: {
    * </HoverCard.Root>
    * ```
    */
-  readonly Content: _$react.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Content: import("react").ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The portal container for rendering hover card content outside the normal DOM tree.
    * `HoverCard.Content` already renders inside this portal internally, so you typically
@@ -111,7 +109,7 @@ declare const HoverCard: {
    * </HoverCard.Root>
    * ```
    */
-  readonly Portal: _$react.FC<HoverCardPrimitive.HoverCardPortalProps>;
+  readonly Portal: import("react").FC<HoverCardPrimitive.HoverCardPortalProps>;
   /**
    * The trigger element that opens the hover card when hovered.
    *
@@ -134,7 +132,7 @@ declare const HoverCard: {
    * </HoverCard.Root>
    * ```
    */
-  readonly Trigger: _$react.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardTriggerProps & _$react.RefAttributes<HTMLAnchorElement>, "ref"> & _$react.RefAttributes<HTMLAnchorElement>>;
+  readonly Trigger: import("react").ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
 };
 //#endregion
 export { HoverCard };

package/dist/hover-card.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-hover-card";const i=({closeDelay:e=300,openDelay:t=100,...i})=>n(r.Root,{closeDelay:e,openDelay:t,...i});i.displayName=`HoverCard`;const a=t((e,t)=>n(r.Trigger,{ref:t,"data-slot":`hover-card-trigger`,...e}));a.displayName=`HoverCardTrigger`;const o=r.Portal;o.displayName=`HoverCardPortal`;const s=t(({className:t,onClick:i,align:a=`center`,sideOffset:s=4,...c},l)=>n(o,{children:n(r.Content,{ref:l,"data-slot":`hover-card-content`,align:a,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,t),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}));s.displayName=r.Content.displayName;const c={Root:i,Content:s,Portal:o,Trigger:a};export{c as HoverCard};
+import{t as e}from"./cx-CBSnSC36.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-hover-card";const i=({closeDelay:e=300,openDelay:t=100,...i})=>n(r.Root,{closeDelay:e,openDelay:t,...i});i.displayName=`HoverCard`;const a=t((e,t)=>n(r.Trigger,{ref:t,"data-slot":`hover-card-trigger`,...e}));a.displayName=`HoverCardTrigger`;const o=r.Portal;o.displayName=`HoverCardPortal`;const s=t(({className:t,onClick:i,align:a=`center`,sideOffset:s=4,...c},l)=>n(o,{children:n(r.Content,{ref:l,"data-slot":`hover-card-content`,align:a,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,t),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}));s.displayName=r.Content.displayName;const c={Root:i,Content:s,Portal:o,Trigger:a};export{c as HoverCard};
 //# sourceMappingURL=hover-card.js.map

package/dist/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","names":[],"sources":["../src/components/hover-card/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n * This is the root, stateful component that manages the open/closed state of the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Root = ({\n\tcloseDelay = 300,\n\topenDelay = 100,\n\t...props\n}: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>) => (\n\t<HoverCardPrimitive.Root closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\nRoot.displayName = \"HoverCard\";\n\n/**\n * The trigger element that opens the hover card when hovered.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>\n>((props, ref) => (\n\t<HoverCardPrimitive.Trigger ref={ref} data-slot=\"hover-card-trigger\" {...props} />\n));\nTrigger.displayName = \"HoverCardTrigger\";\n\n/**\n * The portal container for rendering hover card content outside the normal DOM tree.\n * `HoverCard.Content` already renders inside this portal internally, so you typically\n * do not need to use `HoverCard.Portal` directly. Use it only when you need to\n * customize portal placement (e.g., pass a `container` prop) or wrap multiple\n * `HoverCard.Content` instances in a shared portal.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardportal\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Portal>\n *     <HoverCard.Content>\n *       <p>This is the hover card content.</p>\n *     </HoverCard.Content>\n *   </HoverCard.Portal>\n * </HoverCard.Root>\n * ```\n */\nconst Portal = HoverCardPrimitive.Portal;\nPortal.displayName = \"HoverCardPortal\";\n\n/**\n * The content to render inside the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, onClick, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-slot=\"hover-card-content\"\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = HoverCardPrimitive.Content.displayName;\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n *\n * Use `HoverCard` for non-essential preview content shown on HOVER — user\n * cards, repo previews, rich link previews. Because hover is not reachable\n * via keyboard, all content inside a `HoverCard` must be supplemental,\n * never the only path to information; the trigger is typically a link that\n * already leads to the same content for keyboard and screen reader users.\n * For short, non-interactive labels or hints, use `Tooltip`. For\n * interactive overlays the user opens deliberately, use `Popover`.\n *\n * @see https://mantle.ngrok.com/components/hover-card\n *\n * @example\n * Composition:\n * ```\n * HoverCard.Root\n * ├── HoverCard.Trigger\n * └── HoverCard.Content\n * ```\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst HoverCard = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the hover card.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button>Hover me</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <p>This is the hover card content.</p>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the hover card. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"link\">@username</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content side=\"top\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">User Profile</Text>\n\t *       <Text>Additional information about the user.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Follow</Button>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The portal container for rendering hover card content outside the normal DOM tree.\n\t * `HoverCard.Content` already renders inside this portal internally, so you typically\n\t * do not need to use `HoverCard.Portal` directly. Use it only when you need to\n\t * customize portal placement or wrap multiple `HoverCard.Content` instances.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardportal\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Portal>\n\t *     <HoverCard.Content>\n\t *       <p>This is the hover card content.</p>\n\t *     </HoverCard.Content>\n\t *   </HoverCard.Portal>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * The trigger element that opens the hover card when hovered.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"ghost\">\n\t *       Hover for details\n\t *     </Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <div className=\"space-y-1\">\n\t *       <Text weight=\"strong\">Quick Info</Text>\n\t *       <Text>This appears when you hover over the trigger.</Text>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tHoverCard,\n};\n"],"mappings":"6JA2BA,MAAM,GAAQ,CACb,aAAa,IACb,YAAY,IACZ,GAAG,KAEH,EAAC,EAAmB,KAApB,CAAqC,aAAuB,YAAW,GAAI,EAAS,CAAA,CAErF,EAAK,YAAc,YAqBnB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAmB,QAApB,CAAiC,MAAK,YAAU,qBAAqB,GAAI,EAAS,CAAA,CACjF,CACF,EAAQ,YAAc,mBA2BtB,MAAM,EAAS,EAAmB,OAClC,EAAO,YAAc,kBAqBrB,MAAM,EAAU,GAGb,CAAE,YAAW,UAAS,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAS,IACtE,EAAC,EAAD,CAAA,SACC,EAAC,EAAmB,QAApB,CACM,MACL,YAAU,qBACH,QACK,aACZ,UAAW,EACV,qFACA,+TACA,EACA,CACD,QAAU,GAAU,CAInB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEjB,GAAI,EACH,CAAA,CACM,CAAA,CACR,CACF,EAAQ,YAAc,EAAmB,QAAQ,YAqCjD,MAAM,EAAY,CAkBjB,OAsBA,UAyBA,SAuBA,UACA"}
+{"version":3,"file":"hover-card.js","names":[],"sources":["../src/components/hover-card/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n * This is the root, stateful component that manages the open/closed state of the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Root = ({\n\tcloseDelay = 300,\n\topenDelay = 100,\n\t...props\n}: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>) => (\n\t<HoverCardPrimitive.Root closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\nRoot.displayName = \"HoverCard\";\n\n/**\n * The trigger element that opens the hover card when hovered.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>\n>((props, ref) => (\n\t<HoverCardPrimitive.Trigger ref={ref} data-slot=\"hover-card-trigger\" {...props} />\n));\nTrigger.displayName = \"HoverCardTrigger\";\n\n/**\n * The portal container for rendering hover card content outside the normal DOM tree.\n * `HoverCard.Content` already renders inside this portal internally, so you typically\n * do not need to use `HoverCard.Portal` directly. Use it only when you need to\n * customize portal placement (e.g., pass a `container` prop) or wrap multiple\n * `HoverCard.Content` instances in a shared portal.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardportal\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Portal>\n *     <HoverCard.Content>\n *       <p>This is the hover card content.</p>\n *     </HoverCard.Content>\n *   </HoverCard.Portal>\n * </HoverCard.Root>\n * ```\n */\nconst Portal = HoverCardPrimitive.Portal;\nPortal.displayName = \"HoverCardPortal\";\n\n/**\n * The content to render inside the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, onClick, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-slot=\"hover-card-content\"\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = HoverCardPrimitive.Content.displayName;\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n *\n * Use `HoverCard` for non-essential preview content shown on HOVER — user\n * cards, repo previews, rich link previews. Because hover is not reachable\n * via keyboard, all content inside a `HoverCard` must be supplemental,\n * never the only path to information; the trigger is typically a link that\n * already leads to the same content for keyboard and screen reader users.\n * For short, non-interactive labels or hints, use `Tooltip`. For\n * interactive overlays the user opens deliberately, use `Popover`.\n *\n * @see https://mantle.ngrok.com/components/hover-card\n *\n * @example\n * Composition:\n * ```\n * HoverCard.Root\n * ├── HoverCard.Trigger\n * └── HoverCard.Content\n * ```\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst HoverCard = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the hover card.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button>Hover me</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <p>This is the hover card content.</p>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the hover card. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"link\">@username</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content side=\"top\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">User Profile</Text>\n\t *       <Text>Additional information about the user.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Follow</Button>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The portal container for rendering hover card content outside the normal DOM tree.\n\t * `HoverCard.Content` already renders inside this portal internally, so you typically\n\t * do not need to use `HoverCard.Portal` directly. Use it only when you need to\n\t * customize portal placement or wrap multiple `HoverCard.Content` instances.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardportal\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Portal>\n\t *     <HoverCard.Content>\n\t *       <p>This is the hover card content.</p>\n\t *     </HoverCard.Content>\n\t *   </HoverCard.Portal>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * The trigger element that opens the hover card when hovered.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"ghost\">\n\t *       Hover for details\n\t *     </Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <div className=\"space-y-1\">\n\t *       <Text weight=\"strong\">Quick Info</Text>\n\t *       <Text>This appears when you hover over the trigger.</Text>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tHoverCard,\n};\n"],"mappings":"6JA2BA,MAAM,GAAQ,CACb,aAAa,IACb,YAAY,IACZ,GAAG,KAEH,EAAC,EAAmB,KAApB,CAAqC,aAAuB,YAAW,GAAI,CAAQ,CAAA,EAEpF,EAAK,YAAc,YAqBnB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAmB,QAApB,CAAiC,MAAK,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CACjF,EACD,EAAQ,YAAc,mBA2BtB,MAAM,EAAS,EAAmB,OAClC,EAAO,YAAc,kBAqBrB,MAAM,EAAU,GAGb,CAAE,YAAW,UAAS,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAS,IACtE,EAAC,EAAD,CAAA,SACC,EAAC,EAAmB,QAApB,CACM,MACL,YAAU,qBACH,QACK,aACZ,UAAW,EACV,qFACA,+TACA,CACD,EACA,QAAU,GAAU,CAInB,EAAM,gBAAgB,EACtB,IAAU,CAAK,CAChB,EACA,GAAI,CACJ,CAAA,CACM,CAAA,CACR,EACD,EAAQ,YAAc,EAAmB,QAAQ,YAqCjD,MAAM,EAAY,CAkBjB,OAsBA,UAyBA,SAuBA,SACD"}

package/dist/{icon-bWc5yC3-.js → icon-C8bYBIHW.js}

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-7gYlsX8f.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({className:n,style:i,svg:a,...o},s)=>r(t,{ref:s,"data-slot":`icon`,className:e(`size-5`,n),style:i,svg:a,...o}));i.displayName=`Icon`;export{i as t};
-//# sourceMappingURL=icon-bWc5yC3-.js.map
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./svg-only-Cz1cby8y.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({className:n,style:i,svg:a,...o},s)=>r(t,{ref:s,"data-slot":`icon`,className:e(`size-5`,n),style:i,svg:a,...o}));i.displayName=`Icon`;export{i as t};
+//# sourceMappingURL=icon-C8bYBIHW.js.map

package/dist/{icon-bWc5yC3-.js.map → icon-C8bYBIHW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-bWc5yC3-.js","names":[],"sources":["../src/components/icon/icon.tsx"],"sourcesContent":["import { type ComponentRef, type ReactNode, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"./svg-only.js\";\nimport type { SvgAttributes } from \"./types.js\";\n\ntype IconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * Decorates an svg icon with automatic sizing styles and a `shrink-0` class.\n *\n * @see https://mantle.ngrok.com/components/icon\n *\n * @example\n * ```tsx\n * import { ShrimpIcon } from \"@phosphor-icons/react/Shrimp\";\n *\n * <Icon svg={<ShrimpIcon />} />\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, IconProps>(\n\t({ className, style, svg, ...props }, ref) => (\n\t\t<SvgOnly\n\t\t\tref={ref}\n\t\t\tdata-slot=\"icon\"\n\t\t\tclassName={cx(\"size-5\", className)}\n\t\t\tstyle={style}\n\t\t\tsvg={svg}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nIcon.displayName = \"Icon\";\n\nexport {\n\t//,\n\tIcon,\n};\n\nexport type {\n\t//,\n\tIconProps,\n};\n"],"mappings":"sJAwBA,MAAM,EAAO,GACX,CAAE,YAAW,QAAO,MAAK,GAAG,GAAS,IACrC,EAAC,EAAD,CACM,MACL,YAAU,OACV,UAAW,EAAG,SAAU,EAAU,CAC3B,QACF,MACL,GAAI,EACH,CAAA,CAEH,CACD,EAAK,YAAc"}
+{"version":3,"file":"icon-C8bYBIHW.js","names":[],"sources":["../src/components/icon/icon.tsx"],"sourcesContent":["import { type ComponentRef, type ReactNode, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"./svg-only.js\";\nimport type { SvgAttributes } from \"./types.js\";\n\ntype IconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * Decorates an svg icon with automatic sizing styles and a `shrink-0` class.\n *\n * @see https://mantle.ngrok.com/components/icon\n *\n * @example\n * ```tsx\n * import { ShrimpIcon } from \"@phosphor-icons/react/Shrimp\";\n *\n * <Icon svg={<ShrimpIcon />} />\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, IconProps>(\n\t({ className, style, svg, ...props }, ref) => (\n\t\t<SvgOnly\n\t\t\tref={ref}\n\t\t\tdata-slot=\"icon\"\n\t\t\tclassName={cx(\"size-5\", className)}\n\t\t\tstyle={style}\n\t\t\tsvg={svg}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nIcon.displayName = \"Icon\";\n\nexport {\n\t//,\n\tIcon,\n};\n\nexport type {\n\t//,\n\tIconProps,\n};\n"],"mappings":"sJAwBA,MAAM,EAAO,GACX,CAAE,YAAW,QAAO,MAAK,GAAG,GAAS,IACrC,EAAC,EAAD,CACM,MACL,YAAU,OACV,UAAW,EAAG,SAAU,CAAS,EAC1B,QACF,MACL,GAAI,CACJ,CAAA,CAEH,EACA,EAAK,YAAc"}

package/dist/{icon-button-ZKN0sRIJ.js → icon-button-C_Ht_g1C.js}

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./booleanish-CBGdPL3Q.js";import{t as r}from"./slot-D_ZUrdEW.js";import{Children as i,cloneElement as a,forwardRef as o,isValidElement as s}from"react";import c from"tiny-invariant";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{cva as f}from"class-variance-authority";import{CircleNotchIcon as p}from"@phosphor-icons/react/CircleNotch";const m=e(`icon-button`,`inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`),h=f(m,{variants:{appearance:{ghost:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`,outlined:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600 focus-visible:not-disabled:active:border-accent-600`},isLoading:{false:``,true:`opacity-50`},size:{xs:`size-6`,sm:`size-7`,md:`size-9`}},defaultVariants:{appearance:`outlined`,size:`md`}}),g=o(({"aria-disabled":o,appearance:f,asChild:m=!1,children:g,className:_,disabled:v,icon:y,isLoading:b=!1,label:x,size:S,type:C,...w},T)=>{let E=n(o??v??b),D=b?u(p,{className:`animate-spin`}):y,O={"aria-disabled":E,"data-slot":`icon-button`,className:e(h({appearance:f,isLoading:b,size:S}),_),"data-appearance":f,"data-disabled":E,"data-icon-button":!0,"data-loading":b,"data-size":S,disabled:E,ref:T,...w},k=d(l,{children:[u(`span`,{className:`sr-only`,children:x}),u(t,{svg:D})]});return m?(c(s(g)&&i.only(g),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),u(r,{...O,children:a(g,{},k)})):u(`button`,{...O,type:C,children:k})});g.displayName=`IconButton`;export{m as n,h as r,g as t};
-//# sourceMappingURL=icon-button-ZKN0sRIJ.js.map
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-C8bYBIHW.js";import{t as n}from"./booleanish-BfvnW6vy.js";import{t as r}from"./slot-CV5fmqFr.js";import{Children as i,cloneElement as a,forwardRef as o,isValidElement as s}from"react";import c from"tiny-invariant";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{cva as f}from"class-variance-authority";import{CircleNotchIcon as p}from"@phosphor-icons/react/CircleNotch";const m=e(`icon-button`,`inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`),h=f(m,{variants:{appearance:{ghost:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`,outlined:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600 focus-visible:not-disabled:active:border-accent-600`},isLoading:{false:``,true:`opacity-50`},size:{xs:`size-6`,sm:`size-7`,md:`size-9`}},defaultVariants:{appearance:`outlined`,size:`md`}}),g=o(({"aria-disabled":o,appearance:f,asChild:m=!1,children:g,className:_,disabled:v,icon:y,isLoading:b=!1,label:x,size:S,type:C,...w},T)=>{let E=n(o??v??b),D=b?u(p,{className:`animate-spin`}):y,O={"aria-disabled":E,"data-slot":`icon-button`,className:e(h({appearance:f,isLoading:b,size:S}),_),"data-appearance":f,"data-disabled":E,"data-icon-button":!0,"data-loading":b,"data-size":S,disabled:E,ref:T,...w},k=d(l,{children:[u(`span`,{className:`sr-only`,children:x}),u(t,{svg:D})]});return m?(c(s(g)&&i.only(g),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),u(r,{...O,children:a(g,{},k)})):u(`button`,{...O,type:C,children:k})});g.displayName=`IconButton`;export{m as n,h as r,g as t};
+//# sourceMappingURL=icon-button-C_Ht_g1C.js.map

package/dist/{icon-button-ZKN0sRIJ.js.map → icon-button-C_Ht_g1C.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-ZKN0sRIJ.js","names":[],"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst baseIconButtonClasses = cx(\n\t\"icon-button\",\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border\",\n\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\"disabled:cursor-default disabled:opacity-50\",\n\t\"not-disabled:active:scale-97 ease-out transition-transform duration-150\",\n);\n\nconst iconButtonVariants = cva(baseIconButtonClasses, {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tghost:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent\",\n\t\t\toutlined:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600 focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace the `icon` with a spinner.\n\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * The size of the IconButton.\n\t\t */\n\t\tsize: {\n\t\t\txs: \"size-6\",\n\t\t\tsm: \"size-7\",\n\t\t\tmd: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ButtonHTMLAttributes<HTMLButtonElement>[\"type\"], undefined>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button\n *\n * @example\n * ```tsx\n * <IconButton\n *   type=\"button\"\n *   icon={<TrashIcon />}\n *   label=\"Delete item\"\n *   appearance=\"ghost\"\n *   size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? <CircleNotchIcon className=\"animate-spin\" /> : propIcon;\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\t\"data-slot\": \"icon-button\",\n\t\t\tclassName: cx(iconButtonVariants({ appearance, isLoading, size }), className),\n\t\t\t\"data-appearance\": appearance,\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tconst innerChildren = (\n\t\t\t<>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</>\n\t\t);\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, IconButton must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn <Slot {...buttonProps}>{cloneElement(children, {}, innerChildren)}</Slot>;\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{innerChildren}\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\tbaseIconButtonClasses,\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"mcAWA,MAAM,EAAwB,EAC7B,cACA,8GACA,4CACA,8CACA,0EACA,CAEK,EAAqB,EAAI,EAAuB,CACrD,SAAU,CAIT,WAAY,CACX,MACC,qIACD,SACC,+SACD,CAMD,UAAW,CACV,MAAO,GACP,KAAM,aACN,CAID,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,CACD,CACD,gBAAiB,CAChB,WAAY,WACZ,KAAM,KACN,CACD,CAAC,CA2FI,EAAa,GAEjB,CACC,gBAAiB,EACjB,aACA,UAAU,GACV,WACA,YACA,SAAU,EACV,KAAM,EACN,YAAY,GACZ,QACA,OACA,OACA,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAAgB,GAAiB,GAAa,EAAU,CACnE,EAAO,EAAY,EAAC,EAAD,CAAiB,UAAU,eAAiB,CAAA,CAAG,EAElE,EAAc,CACnB,gBAAiB,EACjB,YAAa,cACb,UAAW,EAAG,EAAmB,CAAE,aAAY,YAAW,OAAM,CAAC,CAAE,EAAU,CAC7E,kBAAmB,EACnB,gBAAiB,EACjB,mBAAoB,GACpB,eAAgB,EAChB,YAAa,EACb,WACA,MACA,GAAG,EACH,CAEK,EACL,EAAA,EAAA,CAAA,SAAA,CACC,EAAC,OAAD,CAAM,UAAU,mBAAW,EAAa,CAAA,CACxC,EAAC,EAAD,CAAM,IAAK,EAAQ,CAAA,CACjB,CAAA,CAAA,CAYJ,OATI,GACH,EACC,EAAe,EAAS,EAAI,EAAS,KAAK,EAAS,CACnD,+EACA,CAEM,EAAC,EAAD,CAAM,GAAI,WAAc,EAAa,EAAU,EAAE,CAAE,EAAc,CAAQ,CAAA,EAIhF,EAAC,SAAD,CAAQ,GAAI,EAAmB,gBAC7B,EACO,CAAA,EAGX,CACD,EAAW,YAAc"}
+{"version":3,"file":"icon-button-C_Ht_g1C.js","names":[],"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst baseIconButtonClasses = cx(\n\t\"icon-button\",\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border\",\n\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\"disabled:cursor-default disabled:opacity-50\",\n\t\"not-disabled:active:scale-97 ease-out transition-transform duration-150\",\n);\n\nconst iconButtonVariants = cva(baseIconButtonClasses, {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tghost:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent\",\n\t\t\toutlined:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600 focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace the `icon` with a spinner.\n\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * The size of the IconButton.\n\t\t */\n\t\tsize: {\n\t\t\txs: \"size-6\",\n\t\t\tsm: \"size-7\",\n\t\t\tmd: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ButtonHTMLAttributes<HTMLButtonElement>[\"type\"], undefined>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button\n *\n * @example\n * ```tsx\n * <IconButton\n *   type=\"button\"\n *   icon={<TrashIcon />}\n *   label=\"Delete item\"\n *   appearance=\"ghost\"\n *   size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? <CircleNotchIcon className=\"animate-spin\" /> : propIcon;\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\t\"data-slot\": \"icon-button\",\n\t\t\tclassName: cx(iconButtonVariants({ appearance, isLoading, size }), className),\n\t\t\t\"data-appearance\": appearance,\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tconst innerChildren = (\n\t\t\t<>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</>\n\t\t);\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, IconButton must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn <Slot {...buttonProps}>{cloneElement(children, {}, innerChildren)}</Slot>;\n\t\t}\n\n\t\treturn (\n\t\t\t// oxlint-disable-next-line react/button-has-type -- `type` is resolved at runtime from the `type` prop (defaulted to \"button\"); the static analyzer can't see that.\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{innerChildren}\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\tbaseIconButtonClasses,\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"mcAWA,MAAM,EAAwB,EAC7B,cACA,8GACA,4CACA,8CACA,yEACD,EAEM,EAAqB,EAAI,EAAuB,CACrD,SAAU,CAIT,WAAY,CACX,MACC,qIACD,SACC,8SACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CAAC,EA2FK,EAAa,GAEjB,CACC,gBAAiB,EACjB,aACA,UAAU,GACV,WACA,YACA,SAAU,EACV,KAAM,EACN,YAAY,GACZ,QACA,OACA,OACA,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAAgB,GAAiB,GAAa,CAAS,EAClE,EAAO,EAAY,EAAC,EAAD,CAAiB,UAAU,cAAgB,CAAA,EAAI,EAElE,EAAc,CACnB,gBAAiB,EACjB,YAAa,cACb,UAAW,EAAG,EAAmB,CAAE,aAAY,YAAW,MAAK,CAAC,EAAG,CAAS,EAC5E,kBAAmB,EACnB,gBAAiB,EACjB,mBAAoB,GACpB,eAAgB,EAChB,YAAa,EACb,WACA,MACA,GAAG,CACJ,EAEM,EACL,EAAA,EAAA,CAAA,SAAA,CACC,EAAC,OAAD,CAAM,UAAU,mBAAW,CAAY,CAAA,EACvC,EAAC,EAAD,CAAM,IAAK,CAAO,CAAA,CACjB,CAAA,CAAA,EAYH,OATI,GACH,EACC,EAAe,CAAQ,GAAK,EAAS,KAAK,CAAQ,EAClD,8EACD,EAEO,EAAC,EAAD,CAAM,GAAI,WAAc,EAAa,EAAU,CAAC,EAAG,CAAa,CAAQ,CAAA,GAK/E,EAAC,SAAD,CAAQ,GAAI,EAAmB,gBAC7B,CACM,CAAA,CAEV,CACD,EACA,EAAW,YAAc"}

package/dist/{icon-button-BDTb-lxs.d.ts → icon-button-ntupABbM.d.ts}

@@ -1,15 +1,13 @@
-import { t as WithAsChild } from "./as-child-CpZKMqTE.js";
-import { t as VariantProps } from "./variant-props-BZbM__kQ.js";
-import * as _$react from "react";
+import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as VariantProps } from "./variant-props-CVymuSfa.js";
 import { ButtonHTMLAttributes, ReactNode } from "react";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/button/icon-button.d.ts
 declare const iconButtonVariants: (props?: ({
   appearance?: "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  size?: "md" | "sm" | "xs" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  size?: "xs" | "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
 /**
  * The props for the `Button` component.
@@ -92,7 +90,7 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
  * />
  * ```
  */
-declare const IconButton: _$react.ForwardRefExoticComponent<IconButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=icon-button-BDTb-lxs.d.ts.map
+//# sourceMappingURL=icon-button-ntupABbM.d.ts.map

package/dist/{icon-BJ7q2RXZ.d.ts → icon-n49kOh4_.d.ts}

@@ -1,5 +1,4 @@
-import { t as SvgAttributes } from "./types-QKZ5fvaQ.js";
-import * as _$react from "react";
+import { t as SvgAttributes } from "./types-BvUzforF.js";
 import { ReactNode } from "react";
 
 //#region src/components/icon/icon.d.ts
@@ -21,7 +20,7 @@ type IconProps = Omit<SvgAttributes, "children"> & {
  * <Icon svg={<ShrimpIcon />} />
  * ```
  */
-declare const Icon: _$react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 //#endregion
 export { IconProps as n, Icon as t };
-//# sourceMappingURL=icon-BJ7q2RXZ.d.ts.map
+//# sourceMappingURL=icon-n49kOh4_.d.ts.map

package/dist/icon.d.ts

@@ -1,4 +1,4 @@
-import { t as SvgAttributes } from "./types-QKZ5fvaQ.js";
-import { n as IconProps, t as Icon } from "./icon-BJ7q2RXZ.js";
-import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-D4uqM1OC.js";
+import { t as SvgAttributes } from "./types-BvUzforF.js";
+import { n as IconProps, t as Icon } from "./icon-n49kOh4_.js";
+import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-f6ToFLH0.js";
 export { Icon, type IconProps, type SvgAttributes, SvgOnly, type SvgOnlyProps };

package/dist/icon.js

@@ -1 +1 @@
-import{t as e}from"./svg-only-7gYlsX8f.js";import{t}from"./icon-bWc5yC3-.js";export{t as Icon,e as SvgOnly};
+import{t as e}from"./svg-only-Cz1cby8y.js";import{t}from"./icon-C8bYBIHW.js";export{t as Icon,e as SvgOnly};

package/dist/icons.d.ts

@@ -1,8 +1,7 @@
-import { t as SvgAttributes } from "./types-QKZ5fvaQ.js";
-import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-D9IZ1wW6.js";
-import { i as Theme } from "./themes-FPux5kIu.js";
+import { t as SvgAttributes } from "./types-BvUzforF.js";
+import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-CcTY0FmA.js";
+import { i as Theme } from "./themes-CYNpplwN.js";
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/icons/sort.d.ts
 type Props = SvgAttributes & ({
@@ -31,7 +30,7 @@ declare const SortIcon: {
     mode,
     direction,
     ...props
-  }: Props): _$react_jsx_runtime0.JSX.Element;
+  }: Props): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 //#endregion
@@ -39,7 +38,7 @@ declare const SortIcon: {
 /**
  * An icon representing a traffic policy file.
  */
-declare function TrafficPolicyFileIcon(props: SvgAttributes): _$react_jsx_runtime0.JSX.Element;
+declare function TrafficPolicyFileIcon(props: SvgAttributes): import("react/jsx-runtime").JSX.Element;
 declare namespace TrafficPolicyFileIcon {
   var displayName: string;
 }
@@ -52,7 +51,7 @@ declare namespace TrafficPolicyFileIcon {
  * - `light-high-contrast`: SunIcon (fill)
  * - `dark-high-contrast`: MoonIcon (fill)
  */
-declare function AutoThemeIcon(props: SvgAttributes): _$react_jsx_runtime0.JSX.Element;
+declare function AutoThemeIcon(props: SvgAttributes): import("react/jsx-runtime").JSX.Element;
 declare namespace AutoThemeIcon {
   var displayName: string;
 }
@@ -71,7 +70,7 @@ type ThemeIconProps = SvgAttributes & {
 declare function ThemeIcon({
   theme,
   ...props
-}: ThemeIconProps): _$react_jsx_runtime0.JSX.Element;
+}: ThemeIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeIcon {
   var displayName: string;
 }
@@ -94,11 +93,11 @@ type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox"
 /**
  * An inline svg icon that renders the ngrok wordmark logo. Fill color is determined by the `color` CSS property.
  */
-declare function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">): _$react_jsx_runtime0.JSX.Element;
+declare function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">): import("react/jsx-runtime").JSX.Element;
 /**
  * An inline svg icon that renders the ngrok lettermark "n" logo. Fill color is determined by the `color` CSS property.
  */
-declare function NgrokLettermarkIcon(props: Omit<InlineIconProps, "color">): _$react_jsx_runtime0.JSX.Element;
+declare function NgrokLettermarkIcon(props: Omit<InlineIconProps, "color">): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { AutoThemeIcon, type InlineIconProps, NgrokLettermarkIcon, NgrokWordmarkIcon, SortIcon, ThemeIcon, TrafficPolicyFileIcon };
 //# sourceMappingURL=icons.d.ts.map

package/dist/icons.js

@@ -1,2 +1,2 @@
-import{s as e}from"./theme-provider-BFcnjeME.js";import{t}from"./traffic-policy-file-BwHHdhWJ.js";import{t as n}from"./sort-mXo37xN2.js";import{jsx as r}from"react/jsx-runtime";import{DesktopIcon as i}from"@phosphor-icons/react/Desktop";import{MoonIcon as a}from"@phosphor-icons/react/Moon";import{SunIcon as o}from"@phosphor-icons/react/Sun";function s(t){return r(c,{theme:e(),...t})}s.displayName=`AutoThemeIcon`;function c({theme:e,...t}){switch(e){case`system`:return r(i,{...t});case`light`:return r(o,{...t});case`dark`:return r(a,{...t});case`light-high-contrast`:return r(o,{...t,weight:`fill`});case`dark-high-contrast`:return r(a,{...t,weight:`fill`})}}c.displayName=`ThemeIcon`;function l(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:r(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function u(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:r(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{s as AutoThemeIcon,u as NgrokLettermarkIcon,l as NgrokWordmarkIcon,n as SortIcon,c as ThemeIcon,t as TrafficPolicyFileIcon};
+import{s as e}from"./theme-provider-MMwxHEfw.js";import{t}from"./traffic-policy-file-0g5RXFqu.js";import{t as n}from"./sort-BPX2Fk9t.js";import{jsx as r}from"react/jsx-runtime";import{DesktopIcon as i}from"@phosphor-icons/react/Desktop";import{MoonIcon as a}from"@phosphor-icons/react/Moon";import{SunIcon as o}from"@phosphor-icons/react/Sun";function s(t){return r(c,{theme:e(),...t})}s.displayName=`AutoThemeIcon`;function c({theme:e,...t}){switch(e){case`system`:return r(i,{...t});case`light`:return r(o,{...t});case`dark`:return r(a,{...t});case`light-high-contrast`:return r(o,{...t,weight:`fill`});case`dark-high-contrast`:return r(a,{...t,weight:`fill`})}}c.displayName=`ThemeIcon`;function l(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:r(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function u(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:r(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{s as AutoThemeIcon,u as NgrokLettermarkIcon,l as NgrokWordmarkIcon,n as SortIcon,c as ThemeIcon,t as TrafficPolicyFileIcon};
 //# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","names":[],"sources":["../src/components/icons/theme.tsx","../src/components/icons/ngrok.tsx"],"sourcesContent":["import { DesktopIcon } from \"@phosphor-icons/react/Desktop\";\nimport { MoonIcon } from \"@phosphor-icons/react/Moon\";\nimport { SunIcon } from \"@phosphor-icons/react/Sun\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\nimport type { Theme } from \"../theme/themes.js\";\n\n/**\n * An icon that automatically adapts to the current applied theme.\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction AutoThemeIcon(props: SvgAttributes) {\n\tconst appliedTheme = useAppliedTheme();\n\n\treturn <ThemeIcon theme={appliedTheme} {...props} />;\n}\nAutoThemeIcon.displayName = \"AutoThemeIcon\";\n\ntype ThemeIconProps = SvgAttributes & { theme: Theme };\n\n/**\n * An icon that adapts to a specific theme.\n * It will render a different icon based on the provided theme:\n * - `system`: DesktopIcon\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction ThemeIcon({ theme, ...props }: ThemeIconProps) {\n\tswitch (theme) {\n\t\tcase \"system\":\n\t\t\treturn <DesktopIcon {...props} />;\n\t\tcase \"light\":\n\t\t\treturn <SunIcon {...props} />;\n\t\tcase \"dark\":\n\t\t\treturn <MoonIcon {...props} />;\n\t\tcase \"light-high-contrast\":\n\t\t\treturn <SunIcon {...props} weight=\"fill\" />;\n\t\tcase \"dark-high-contrast\":\n\t\t\treturn <MoonIcon {...props} weight=\"fill\" />;\n\t}\n}\nThemeIcon.displayName = \"ThemeIcon\";\n\nexport {\n\t//,\n\tAutoThemeIcon,\n\tThemeIcon,\n};\n","import type { InlineIconProps } from \"./types.js\";\n\n/**\n * An inline svg icon that renders the ngrok wordmark logo. Fill color is determined by the `color` CSS property.\n */\nfunction NgrokWordmarkIcon(props: Omit<InlineIconProps, \"color\">) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 94 36\" width=\"2.61em\" {...props}>\n\t\t\t<path d=\"M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502\" />\n\t\t</svg>\n\t);\n}\n\n/**\n * An inline svg icon that renders the ngrok lettermark \"n\" logo. Fill color is determined by the `color` CSS property.\n */\nfunction NgrokLettermarkIcon(props: Omit<InlineIconProps, \"color\">) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 32 32\" width=\"1em\" {...props}>\n\t\t\t<path d=\"M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z\" />\n\t\t</svg>\n\t);\n}\n\nexport {\n\t//,\n\tNgrokWordmarkIcon,\n\tNgrokLettermarkIcon,\n};\n"],"mappings":"uVAcA,SAAS,EAAc,EAAsB,CAG5C,OAAO,EAAC,EAAD,CAAW,MAFG,GAEgB,CAAE,GAAI,EAAS,CAAA,CAErD,EAAc,YAAc,gBAa5B,SAAS,EAAU,CAAE,QAAO,GAAG,GAAyB,CACvD,OAAQ,EAAR,CACC,IAAK,SACJ,OAAO,EAAC,EAAD,CAAa,GAAI,EAAS,CAAA,CAClC,IAAK,QACJ,OAAO,EAAC,EAAD,CAAS,GAAI,EAAS,CAAA,CAC9B,IAAK,OACJ,OAAO,EAAC,EAAD,CAAU,GAAI,EAAS,CAAA,CAC/B,IAAK,sBACJ,OAAO,EAAC,EAAD,CAAS,GAAI,EAAO,OAAO,OAAS,CAAA,CAC5C,IAAK,qBACJ,OAAO,EAAC,EAAD,CAAU,GAAI,EAAO,OAAO,OAAS,CAAA,EAG/C,EAAU,YAAc,YCzCxB,SAAS,EAAkB,EAAuC,CACjE,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,YAAY,MAAM,SAAS,GAAI,WAC5E,EAAC,OAAD,CAAM,EAAE,mlEAAqlE,CAAA,CACxlE,CAAA,CAOR,SAAS,EAAoB,EAAuC,CACnE,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,YAAY,MAAM,MAAM,GAAI,WACzE,EAAC,OAAD,CAAM,EAAE,gLAAkL,CAAA,CACrL,CAAA"}
+{"version":3,"file":"icons.js","names":[],"sources":["../src/components/icons/theme.tsx","../src/components/icons/ngrok.tsx"],"sourcesContent":["import { DesktopIcon } from \"@phosphor-icons/react/Desktop\";\nimport { MoonIcon } from \"@phosphor-icons/react/Moon\";\nimport { SunIcon } from \"@phosphor-icons/react/Sun\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\nimport type { Theme } from \"../theme/themes.js\";\n\n/**\n * An icon that automatically adapts to the current applied theme.\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction AutoThemeIcon(props: SvgAttributes) {\n\tconst appliedTheme = useAppliedTheme();\n\n\treturn <ThemeIcon theme={appliedTheme} {...props} />;\n}\nAutoThemeIcon.displayName = \"AutoThemeIcon\";\n\ntype ThemeIconProps = SvgAttributes & { theme: Theme };\n\n/**\n * An icon that adapts to a specific theme.\n * It will render a different icon based on the provided theme:\n * - `system`: DesktopIcon\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction ThemeIcon({ theme, ...props }: ThemeIconProps) {\n\tswitch (theme) {\n\t\tcase \"system\":\n\t\t\treturn <DesktopIcon {...props} />;\n\t\tcase \"light\":\n\t\t\treturn <SunIcon {...props} />;\n\t\tcase \"dark\":\n\t\t\treturn <MoonIcon {...props} />;\n\t\tcase \"light-high-contrast\":\n\t\t\treturn <SunIcon {...props} weight=\"fill\" />;\n\t\tcase \"dark-high-contrast\":\n\t\t\treturn <MoonIcon {...props} weight=\"fill\" />;\n\t}\n}\nThemeIcon.displayName = \"ThemeIcon\";\n\nexport {\n\t//,\n\tAutoThemeIcon,\n\tThemeIcon,\n};\n","import type { InlineIconProps } from \"./types.js\";\n\n/**\n * An inline svg icon that renders the ngrok wordmark logo. Fill color is determined by the `color` CSS property.\n */\nfunction NgrokWordmarkIcon(props: Omit<InlineIconProps, \"color\">) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 94 36\" width=\"2.61em\" {...props}>\n\t\t\t<path d=\"M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502\" />\n\t\t</svg>\n\t);\n}\n\n/**\n * An inline svg icon that renders the ngrok lettermark \"n\" logo. Fill color is determined by the `color` CSS property.\n */\nfunction NgrokLettermarkIcon(props: Omit<InlineIconProps, \"color\">) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 32 32\" width=\"1em\" {...props}>\n\t\t\t<path d=\"M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z\" />\n\t\t</svg>\n\t);\n}\n\nexport {\n\t//,\n\tNgrokWordmarkIcon,\n\tNgrokLettermarkIcon,\n};\n"],"mappings":"uVAcA,SAAS,EAAc,EAAsB,CAG5C,OAAO,EAAC,EAAD,CAAW,MAFG,EAEe,EAAG,GAAI,CAAQ,CAAA,CACpD,CACA,EAAc,YAAc,gBAa5B,SAAS,EAAU,CAAE,QAAO,GAAG,GAAyB,CACvD,OAAQ,EAAR,CACC,IAAK,SACJ,OAAO,EAAC,EAAD,CAAa,GAAI,CAAQ,CAAA,EACjC,IAAK,QACJ,OAAO,EAAC,EAAD,CAAS,GAAI,CAAQ,CAAA,EAC7B,IAAK,OACJ,OAAO,EAAC,EAAD,CAAU,GAAI,CAAQ,CAAA,EAC9B,IAAK,sBACJ,OAAO,EAAC,EAAD,CAAS,GAAI,EAAO,OAAO,MAAQ,CAAA,EAC3C,IAAK,qBACJ,OAAO,EAAC,EAAD,CAAU,GAAI,EAAO,OAAO,MAAQ,CAAA,CAC7C,CACD,CACA,EAAU,YAAc,YCzCxB,SAAS,EAAkB,EAAuC,CACjE,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,YAAY,MAAM,SAAS,GAAI,WAC5E,EAAC,OAAD,CAAM,EAAE,klEAAolE,CAAA,CACxlE,CAAA,CAEP,CAKA,SAAS,EAAoB,EAAuC,CACnE,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,YAAY,MAAM,MAAM,GAAI,WACzE,EAAC,OAAD,CAAM,EAAE,+KAAiL,CAAA,CACrL,CAAA,CAEP"}

package/dist/{in-view-BUgyu-Tk.d.ts → in-view-BC3wmz-a.d.ts}

@@ -93,4 +93,4 @@ declare function inView(element: Element, onStart: (element: Element, entry: Int
 }?: InViewOptions): VoidFunction;
 //#endregion
 export { composeRefs as a, inView as i, MarginType as n, useComposedRefs as o, ViewChangeHandler as r, copyToClipboard as s, InViewOptions as t };
-//# sourceMappingURL=in-view-BUgyu-Tk.d.ts.map
+//# sourceMappingURL=in-view-BC3wmz-a.d.ts.map

package/dist/{in-view-CeVqeGbv.js → in-view-C2DpZ6s0.js}

@@ -1,2 +1,2 @@
 const e={some:0,all:1};function t(t,n,{root:r,margin:i,amount:a=`some`}={}){let o=new WeakMap,s=new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target);if(e.isIntersecting!==!!t)if(e.isIntersecting){let t=n(e.target,e);typeof t==`function`?o.set(e.target,t):s.unobserve(e.target)}else typeof t==`function`&&(t(e),o.delete(e.target))})},{root:r,rootMargin:i,threshold:typeof a==`number`?a:e[a]});return s.observe(t),()=>{s.unobserve(t),s.disconnect()}}export{t};
-//# sourceMappingURL=in-view-CeVqeGbv.js.map
+//# sourceMappingURL=in-view-C2DpZ6s0.js.map