@ngrok/mantle 0.51.3 → 0.52.1

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(\n\tcallback: T | undefined,\n): 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\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\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(\n\t\t\t\t() => stableCallbackFn(...args),\n\t\t\t\toptions.waitMs,\n\t\t\t);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect =\n\ttypeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * usePrefersReducedMotion returns true if the user has opted out of animations\n */\nexport function usePrefersReducedMotion() {\n\t// default to no animations, since we don't know what the user's preference is on the server\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(!mediaQueryList.matches);\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") =>\n\tuseMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"2EAAA,OAAS,aAAAA,EAAW,WAAAC,EAAS,UAAAC,MAAc,QAU3C,SAASC,EACRC,EACI,CACJ,IAAMC,EAAcH,EAAOE,CAAQ,EAEnC,OAAAJ,EAAU,IAAM,CACfK,EAAY,QAAUD,CACvB,CAAC,EAEMH,EAAQ,KAAO,IAAIK,IAASD,EAAY,UAAU,GAAGC,CAAI,GAAS,CAAC,CAAC,CAC5E,CCpBA,OAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,MAAc,QAoB/C,SAASC,EACRC,EACAC,EACC,CACD,IAAMC,EAAmBC,EAAeH,CAAU,EAC5CI,EAAmBC,EAAO,CAAC,EACjC,OAAAC,EAAU,IAAM,IAAM,OAAO,aAAaF,EAAiB,OAAO,EAAG,CAAC,CAAC,EAEhEG,EACN,IAAIC,IAAwB,CAC3B,OAAO,aAAaJ,EAAiB,OAAO,EAC5CA,EAAiB,QAAU,OAAO,WACjC,IAAMF,EAAiB,GAAGM,CAAI,EAC9BP,EAAQ,MACT,CACD,EACA,CAACC,EAAkBD,EAAQ,MAAM,CAClC,CACD,CCtCA,OAAS,aAAAQ,EAAW,mBAAAC,MAAuB,QAKpC,IAAMC,EACZ,OAAO,OAAW,IAAcD,EAAkBD,ECNnD,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAOpC,IAAMC,EAAQ,0CAKP,SAASC,GAA0B,CAEzC,GAAM,CAACC,EAAsBC,CAAuB,EAAIJ,EAAS,EAAI,EAErE,OAAAD,EAAU,IAAM,CACf,IAAMM,EAAiB,OAAO,WAAWJ,CAAK,EAG9CG,EAAwB,CAACC,EAAe,OAAO,EAG/C,SAASC,EAASC,EAA4B,CAC7CH,EAAwB,CAACG,EAAM,OAAO,CACvC,CAEA,OAAAF,EAAe,iBAAiB,SAAUC,CAAQ,EAE3C,IAAM,CACZD,EAAe,oBAAoB,SAAUC,CAAQ,CACtD,CACD,EAAG,CAAC,CAAC,EAEEH,CACR,CCnCA,OAAS,WAAAK,MAAe,QAOxB,IAAMC,EAAoB,CAACC,EAAS,WACnCF,EAAQ,IAAMG,EAAeD,CAAM,EAAG,CAACA,CAAM,CAAC,EAO/C,SAASE,EAAeC,EAAS,SAAU,CAE1C,MAAO,CADSA,EAAO,KAAK,GAAK,SAChBC,EAAc,CAAC,EAAE,KAAK,GAAG,CAC3C,CAEA,SAASA,GAAgB,CACxB,OAAO,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CACjD","names":["useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}
+{"version":3,"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.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 */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\"] 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 */\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 * \"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 * \"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} 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} 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};\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};\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 * Factory to create 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 `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\treturn (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\n/**\n * Factory to create 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 function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\treturn () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(\n\tcallback: T | undefined,\n): 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\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\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(\n\t\t\t\t() => stableCallbackFn(...args),\n\t\t\t\toptions.waitMs,\n\t\t\t);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect =\n\ttypeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * usePrefersReducedMotion returns true if the user has opted out of animations\n */\nexport function usePrefersReducedMotion() {\n\t// default to no animations, since we don't know what the user's preference is on the server\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(!mediaQueryList.matches);\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") =>\n\tuseMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"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","names":["useSyncExternalStore","tailwindBreakpoints","breakpoints","useBreakpoint","subscribeToBreakpointChanges","getCurrentBreakpointSnapshot","useIsBelowBreakpoint","breakpoint","createBelowBreakpointSubscribe","createBelowBreakpointGetSnapshot","breakpointQueries","belowBreakpointQueries","minWidthMQLs","maxWidthMQLs","getMinWidthMQLs","getMaxWidthMQL","breakpoint","currentBreakpointValue","breakpointListeners","breakpointSubscriptionActive","getCurrentBreakpoint","mqls","tailwindBreakpoints","breakpointUpdatePending","updateCurrentBreakpoint","newBreakpoint","listener","subscribeToBreakpointChanges","callback","mql","getCurrentBreakpointSnapshot","createBelowBreakpointSubscribe","mediaQuery","pending","onChange","createBelowBreakpointGetSnapshot","useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}

package/dist/icons.js

@@ -1,2 +1,2 @@
-import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-2PHWBRBD.js";import"./chunk-GYPSB3OK.js";import{l as m}from"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import{DesktopIcon as u}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as c}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function i(o){let e=m();return t(r,{theme:e,...o})}i.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(u,{...e});case"light":return t(c,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(c,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{i as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
+import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-2PHWBRBD.js";import"./chunk-GYPSB3OK.js";import{l as m}from"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{DesktopIcon as u}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as c}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function i(o){let e=m();return t(r,{theme:e,...o})}i.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(u,{...e});case"light":return t(c,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(c,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{i as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
 //# sourceMappingURL=icons.js.map

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-MEIVQLEY.js";import"./chunk-MF2QITTY.js";import{b}from"./chunk-J6ZF5J72.js";import{a as z}from"./chunk-3H3EUKI7.js";import{a as m}from"./chunk-S4HWPRRX.js";import"./chunk-MGYWQQVZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as P}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),y=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
+import{a as p}from"./chunk-MEIVQLEY.js";import"./chunk-MF2QITTY.js";import{b}from"./chunk-J6ZF5J72.js";import{a as z}from"./chunk-3H3EUKI7.js";import{a as m}from"./chunk-E6VQ7CJN.js";import"./chunk-MGYWQQVZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as P}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),y=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map

package/dist/sheet.d.ts

@@ -286,7 +286,7 @@ declare const Sheet: {
      * </Sheet.Header>
      * ```
      */
-    readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
     /**
      * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.
      * Should be rendered as a child of `Sheet.Content`.

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-2ID2TLYD.js";import{d as c}from"./chunk-FUT5N3AI.js";import"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import{a as y}from"./chunk-S4HWPRRX.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
+import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-PX63EGR2.js";import{d as c}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{a as y}from"./chunk-E6VQ7CJN.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
 //# sourceMappingURL=sheet.js.map

package/dist/tabs.d.ts

@@ -11,7 +11,7 @@ import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
  *
  * @example
  * ```tsx
- * <Tabs defaultValue="account">
+ * <Tabs.Root defaultValue="account">
  *   <Tabs.List>
  *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
  *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
@@ -22,7 +22,7 @@ import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
  *   <Tabs.Content value="password">
  *     <p>Change your password here.</p>
  *   </Tabs.Content>
- * </Tabs>
+ * </Tabs.Root>
  * ```
  */
 declare const Tabs: {

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype TabsStateContextValue = {\n\torientation: \"horizontal\" | \"vertical\";\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot>\n>(({ className, children, orientation = \"horizontal\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\n\t\t\t\"flex gap-4\",\n\t\t\torientation === \"horizontal\" ? \"flex-col\" : \"flex-row\",\n\t\t\tclassName,\n\t\t)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={ctx.orientation}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex border-gray-200\",\n\t\t\t\tctx.orientation === \"horizontal\"\n\t\t\t\t\t? \"flex-row items-center gap-6 border-b\"\n\t\t\t\t\t: \"flex-col items-end gap-[0.875rem] self-stretch border-r\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\nconst TabsTriggerDecoration = () => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={clsx(\n\t\t\t\t\"group-data-state-active/tab-trigger:bg-blue-600 absolute z-0\",\n\t\t\t\tctx.orientation === \"horizontal\" &&\n\t\t\t\t\t\"-bottom-px left-0 right-0 h-[0.1875rem]\",\n\t\t\t\tctx.orientation === \"vertical\" &&\n\t\t\t\t\t\"-right-px bottom-0 top-0 w-[0.1875rem]\",\n\t\t\t)}\n\t\t/>\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof TabsPrimitiveTrigger>,\n\tTabsTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\t\tctx.orientation === \"horizontal\" && \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tctx.orientation === \"vertical\" && \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t\t\"ring-focus-accent outline-hidden\",\n\t\t\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\t\t\"focus-visible:ring-4\",\n\t\t\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\t\t\"not-aria-disabled:hover:text-gray-900 not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = {\n\t\t\t\t...(disabled\n\t\t\t\t\t? /**\n\t\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t\t: /**\n\t\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ tabIndex: 0 }),\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs>\n * ```\n */\nconst Badge = ({\n\tclassName,\n\tchildren,\n\t...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"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","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","props","ref","TabsPrimitiveRoot","cx","List","ctx","useContext","TabsPrimitiveList","TabsTriggerDecoration","clsx","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","cloneProps","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}
+{"version":3,"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype TabsStateContextValue = {\n\torientation: \"horizontal\" | \"vertical\";\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot>\n>(({ className, children, orientation = \"horizontal\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\n\t\t\t\"flex gap-4\",\n\t\t\torientation === \"horizontal\" ? \"flex-col\" : \"flex-row\",\n\t\t\tclassName,\n\t\t)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={ctx.orientation}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex border-gray-200\",\n\t\t\t\tctx.orientation === \"horizontal\"\n\t\t\t\t\t? \"flex-row items-center gap-6 border-b\"\n\t\t\t\t\t: \"flex-col items-end gap-[0.875rem] self-stretch border-r\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\nconst TabsTriggerDecoration = () => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={clsx(\n\t\t\t\t\"group-data-state-active/tab-trigger:bg-blue-600 absolute z-0\",\n\t\t\t\tctx.orientation === \"horizontal\" &&\n\t\t\t\t\t\"-bottom-px left-0 right-0 h-[0.1875rem]\",\n\t\t\t\tctx.orientation === \"vertical\" &&\n\t\t\t\t\t\"-right-px bottom-0 top-0 w-[0.1875rem]\",\n\t\t\t)}\n\t\t/>\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof TabsPrimitiveTrigger>,\n\tTabsTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\t\tctx.orientation === \"horizontal\" && \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tctx.orientation === \"vertical\" && \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t\t\"ring-focus-accent outline-hidden\",\n\t\t\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\t\t\"focus-visible:ring-4\",\n\t\t\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\t\t\"not-aria-disabled:hover:text-gray-900 not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = {\n\t\t\t\t...(disabled\n\t\t\t\t\t? /**\n\t\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t\t: /**\n\t\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ tabIndex: 0 }),\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({\n\tclassName,\n\tchildren,\n\t...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"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","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","props","ref","TabsPrimitiveRoot","cx","List","ctx","useContext","TabsPrimitiveList","TabsTriggerDecoration","clsx","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","cloneProps","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}

package/dist/text-area.js

@@ -1,2 +1,2 @@
-import{a as d}from"./chunk-AZ56JGNY.js";import{forwardRef as b,useRef as x,useState as y}from"react";import{jsx as h}from"react/jsx-runtime";var s=b(({appearance:c,"aria-invalid":r,className:l,onDragEnter:p,onDragLeave:u,onDropCapture:f,validation:o,...g},e)=>{let n=r!=null&&r!=="false"?"error":typeof o=="function"?o():o,v=r??n==="error",[m,t]=y(!1),i=x(null);return h("textarea",{"aria-invalid":v,"data-validation":n||void 0,className:d(c==="monospaced"&&"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]","border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50","placeholder:text-placeholder data-drag-over:border-dashed","border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600","data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600","data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600","data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600",l),"data-drag-over":m,onDragEnter:a=>{t(!0),p?.(a)},onDragLeave:a=>{t(!1),u?.(a)},onDropCapture:a=>{t(!1),i.current?.focus(),f?.(a)},ref:a=>{i.current=a,typeof e=="function"?e(a):e&&(e.current=a)},...g})});s.displayName="TextArea";export{s as TextArea};
+import{a as i}from"./chunk-MF2QITTY.js";import{a as d}from"./chunk-AZ56JGNY.js";import{forwardRef as x,useRef as h,useState as w}from"react";import{jsx as y}from"react/jsx-runtime";var s=x(({appearance:c,"aria-invalid":a,className:p,onDragEnter:l,onDragLeave:f,onDropCapture:g,validation:r,...u},v)=>{let t=a!=null&&a!=="false"?"error":typeof r=="function"?r():r,m=a??t==="error",[b,o]=w(!1),n=h(null);return y("textarea",{"aria-invalid":m,"data-validation":t||void 0,className:d(c==="monospaced"&&"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]","border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50","placeholder:text-placeholder data-drag-over:border-dashed","border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600","data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600","data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600","data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600",p),"data-drag-over":b,onDragEnter:e=>{o(!0),l?.(e)},onDragLeave:e=>{o(!1),f?.(e)},onDropCapture:e=>{o(!1),n.current?.focus(),g?.(e)},ref:i(n,v),...u})});s.displayName="TextArea";export{s as TextArea};
 //# sourceMappingURL=text-area.js.map

package/dist/text-area.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\ntype Props = ComponentProps<\"textarea\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\n/**\n * A multi-line plain-text editing control, useful when you want to allow users\n * to enter a sizeable amount of free-form text, for example a comment on a\n * review or feedback form.\n *\n * @see https://mantle.ngrok.com/components/text-area#api-text-area\n *\n * @example\n * ```tsx\n * <form>\n *   <div>\n *     <Label htmlFor=\"feedback\">Feedback:</Label>\n *     <TextArea\n *       id=\"feedback\"\n *       name=\"feedback\"\n *       placeholder=\"Enter your feedback here\"\n *     />\n *   </div>\n * </form>\n * ```\n */\nconst TextArea = forwardRef<ComponentRef<\"textarea\">, Props>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst _ref = useRef<HTMLTextAreaElement | null>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\t_ref.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={(node) => {\n\t\t\t\t\t_ref.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\tref.current = node;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport {\n\t//,\n\tTextArea,\n};\n\nexport type {\n\t//,\n\tProps as TextAreaProps,\n};\n"],"mappings":"wCAGA,OAAS,cAAAA,EAAY,UAAAC,EAAQ,YAAAC,MAAgB,QA0D1C,cAAAC,MAAA,oBAzBH,IAAMC,EAAWC,EAChB,CACC,CACC,WAAAC,EACA,eAAgBC,EAChB,UAAAC,EACA,YAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CAEJ,IAAMC,EADYR,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOK,GAAgB,WACtBA,EAAY,EACZA,EACEI,EAAcT,GAAgBQ,IAAe,QAC7C,CAACE,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5CC,EAAOC,EAAmC,IAAI,EAEpD,OACClB,EAAC,YACA,eAAca,EACd,kBAAiBD,GAAc,OAC/B,UAAWO,EACVhB,IAAe,cACd,6DACD,qUACA,4DACA,qGACA,+LACA,2MACA,2MACAE,CACD,EACA,iBAAgBS,EAChB,YAAcM,GAAU,CACvBL,EAAc,EAAI,EAClBT,IAAcc,CAAK,CACpB,EACA,YAAcA,GAAU,CACvBL,EAAc,EAAK,EACnBR,IAAca,CAAK,CACpB,EACA,cAAgBA,GAAU,CACzBL,EAAc,EAAK,EACnBE,EAAK,SAAS,MAAM,EACpBT,IAAgBY,CAAK,CACtB,EACA,IAAMC,GAAS,CACdJ,EAAK,QAAUI,EACX,OAAOV,GAAQ,WAClBA,EAAIU,CAAI,EACEV,IACVA,EAAI,QAAUU,EAEhB,EACC,GAAGX,EACL,CAEF,CACD,EACAT,EAAS,YAAc","names":["forwardRef","useRef","useState","jsx","TextArea","forwardRef","appearance","_ariaInvalid","className","onDragEnter","onDragLeave","onDropCapture","_validation","props","ref","validation","ariaInvalid","isDragOver","setIsDragOver","useState","_ref","useRef","cx","event","node"]}
+{"version":3,"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\ntype Props = ComponentProps<\"textarea\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\n/**\n * A multi-line plain-text editing control, useful when you want to allow users\n * to enter a sizeable amount of free-form text, for example a comment on a\n * review or feedback form.\n *\n * @see https://mantle.ngrok.com/components/text-area#api-text-area\n *\n * @example\n * ```tsx\n * <form>\n *   <div>\n *     <Label htmlFor=\"feedback\">Feedback:</Label>\n *     <TextArea\n *       id=\"feedback\"\n *       name=\"feedback\"\n *       placeholder=\"Enter your feedback here\"\n *     />\n *   </div>\n * </form>\n * ```\n */\nconst TextArea = forwardRef<ComponentRef<\"textarea\">, Props>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst innerRef = useRef<ComponentRef<\"textarea\">>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tinnerRef.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport {\n\t//,\n\tTextArea,\n};\n\nexport type {\n\t//,\n\tProps as TextAreaProps,\n};\n"],"mappings":"gFAGA,OAAS,cAAAA,EAAY,UAAAC,EAAQ,YAAAC,MAAgB,QA2D1C,cAAAC,MAAA,oBAzBH,IAAMC,EAAWC,EAChB,CACC,CACC,WAAAC,EACA,eAAgBC,EAChB,UAAAC,EACA,YAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CAEJ,IAAMC,EADYR,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOK,GAAgB,WACtBA,EAAY,EACZA,EACEI,EAAcT,GAAgBQ,IAAe,QAC7C,CAACE,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5CC,EAAWC,EAAiC,IAAI,EAEtD,OACClB,EAAC,YACA,eAAca,EACd,kBAAiBD,GAAc,OAC/B,UAAWO,EACVhB,IAAe,cACd,6DACD,qUACA,4DACA,qGACA,+LACA,2MACA,2MACAE,CACD,EACA,iBAAgBS,EAChB,YAAcM,GAAU,CACvBL,EAAc,EAAI,EAClBT,IAAcc,CAAK,CACpB,EACA,YAAcA,GAAU,CACvBL,EAAc,EAAK,EACnBR,IAAca,CAAK,CACpB,EACA,cAAgBA,GAAU,CACzBL,EAAc,EAAK,EACnBE,EAAS,SAAS,MAAM,EACxBT,IAAgBY,CAAK,CACtB,EACA,IAAKC,EAAYJ,EAAUN,CAAG,EAC7B,GAAGD,EACL,CAEF,CACD,EACAT,EAAS,YAAc","names":["forwardRef","useRef","useState","jsx","TextArea","forwardRef","appearance","_ariaInvalid","className","onDragEnter","onDragLeave","onDropCapture","_validation","props","ref","validation","ariaInvalid","isDragOver","setIsDragOver","useState","innerRef","useRef","cx","event","composeRefs"]}

package/dist/theme-provider.js

@@ -1,2 +1,2 @@
-import{a as e,b as m,c as r,d as o,e as t,f as h,g as s,h as T,i as p,j as l,k as d,l as n,m as i,n as a,o as v}from"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";export{h as $resolvedTheme,o as $theme,a as MantleThemeHeadContent,e as PreloadFonts,T as ThemeProvider,l as applyTheme,s as isResolvedTheme,t as isTheme,i as preventWrongThemeFlashScriptContent,d as readThemeFromHtmlElement,m as resolvedThemes,r as themes,n as useAppliedTheme,v as useInitialHtmlThemeProps,p as useTheme};
+import{a as e,b as m,c as r,d as o,e as t,f as h,g as s,h as T,i as p,j as l,k as d,l as n,m as i,n as a,o as v}from"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";export{h as $resolvedTheme,o as $theme,a as MantleThemeHeadContent,e as PreloadFonts,T as ThemeProvider,l as applyTheme,s as isResolvedTheme,t as isTheme,i as preventWrongThemeFlashScriptContent,d as readThemeFromHtmlElement,m as resolvedThemes,r as themes,n as useAppliedTheme,v as useInitialHtmlThemeProps,p as useTheme};
 //# sourceMappingURL=theme-provider.js.map

package/dist/toast.js

@@ -1,2 +1,2 @@
-import{a as o,b as t,c as r}from"./chunk-FUT5N3AI.js";import"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{r as Toast,o as Toaster,t as makeToast};
+import{a as o,b as t,c as r}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{r as Toast,o as Toaster,t as makeToast};
 //# sourceMappingURL=toast.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.51.3",
+  "version": "0.52.1",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -52,18 +52,18 @@
   "devDependencies": {
     "@phosphor-icons/react": "2.1.10",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.7.0",
+    "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/prismjs": "1.26.5",
-    "@types/react": "18.3.23",
+    "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
     "browserslist": "4.25.3",
     "date-fns": "4.1.0",
     "jsdom": "26.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.8.1",
+    "react-router": "7.8.2",
     "tailwindcss": "4.1.12",
     "tsup": "8.5.0",
     "typescript": "5.9.2",
@@ -104,6 +104,11 @@
       "import": "./dist/badge.js",
       "types": "./dist/badge.d.ts"
     },
+    "./browser-only": {
+      "@ngrok/mantle/source": "./src/components/browser-only/index.ts",
+      "import": "./dist/browser-only.js",
+      "types": "./dist/browser-only.d.ts"
+    },
     "./button": {
       "@ngrok/mantle/source": "./src/components/button/index.ts",
       "import": "./dist/button.js",
@@ -124,6 +129,11 @@
       "import": "./dist/checkbox.js",
       "types": "./dist/checkbox.d.ts"
     },
+    "./code": {
+      "@ngrok/mantle/source": "./src/components/code/index.ts",
+      "import": "./dist/code.js",
+      "types": "./dist/code.d.ts"
+    },
     "./code-block": {
       "@ngrok/mantle/source": "./src/components/code-block/index.ts",
       "import": "./dist/code-block.js",
@@ -190,11 +200,6 @@
       "import": "./dist/icons.js",
       "types": "./dist/icons.d.ts"
     },
-    "./inline-code": {
-      "@ngrok/mantle/source": "./src/components/inline-code/index.ts",
-      "import": "./dist/inline-code.js",
-      "types": "./dist/inline-code.d.ts"
-    },
     "./input": {
       "@ngrok/mantle/source": "./src/components/input/index.ts",
       "import": "./dist/input.js",

package/dist/chunk-2ID2TLYD.js

@@ -1,2 +0,0 @@
-import*as i from"@radix-ui/react-dialog";import{createContext as l,forwardRef as n,useContext as s,useEffect as p,useState as m}from"react";import{jsx as r}from"react/jsx-runtime";var a=l({hasDescription:!1,setHasDescription:()=>{}});function D(t){let[o,e]=m(!1);return r(a.Provider,{value:{hasDescription:o,setHasDescription:e},children:r(i.Root,{...t})})}D.displayName="DialogPrimitiveRoot";var c=i.Trigger;c.displayName="DialogPrimitiveTrigger";var g=i.Portal;g.displayName="DialogPrimitivePortal";var v=i.Close;v.displayName="DialogPrimitiveClose";var P=i.Overlay;P.displayName="DialogPrimitiveOverlay";var f=n((t,o)=>{let e=s(a);return r(i.Content,{ref:o,...e.hasDescription?{}:{"aria-describedby":void 0},...t})});f.displayName="DialogPrimitiveContent";var C=i.Title,d=n((t,o)=>{let e=s(a);return p(()=>(e.setHasDescription(!0),()=>e.setHasDescription(!1)),[e]),r(i.Description,{ref:o,...t})});d.displayName="DialogPrimitiveDescription";export{D as a,c as b,g as c,v as d,P as e,f,C as g,d as h};
-//# sourceMappingURL=chunk-2ID2TLYD.js.map

package/dist/chunk-2ID2TLYD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\n\treturn (\n\t\t<InternalDialogContext.Provider\n\t\t\tvalue={{ hasDescription, setHasDescription }}\n\t\t>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = DialogPrimitive.Overlay;\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\n/**\n * The main content container of the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>((props, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\treturn (\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n */\nconst Description = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>((props, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\treturn <DialogPrimitive.Description ref={ref} {...props} />;\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n};\n"],"mappings":"AAEA,UAAYA,MAAqB,yBACjC,OAGC,iBAAAC,EACA,cAAAC,EACA,cAAAC,EACA,aAAAC,EACA,YAAAC,MACM,QAmBJ,cAAAC,MAAA,oBAZH,IAAMC,EAAwBN,EAA0C,CACvE,eAAgB,GAChB,kBAAmB,IAAM,CAAC,CAC3B,CAAC,EAED,SAASO,EAAKC,EAA8D,CAC3E,GAAM,CAACC,EAAgBC,CAAiB,EAAIN,EAAS,EAAK,EAE1D,OACCC,EAACC,EAAsB,SAAtB,CACA,MAAO,CAAE,eAAAG,EAAgB,kBAAAC,CAAkB,EAE3C,SAAAL,EAAiB,OAAhB,CAAsB,GAAGG,EAAO,EAClC,CAEF,CACAD,EAAK,YAAc,sBAEnB,IAAMI,EAA0B,UAChCA,EAAQ,YAAc,yBAEtB,IAAMC,EAAyB,SAC/BA,EAAO,YAAc,wBAErB,IAAMC,EAAwB,QAC9BA,EAAM,YAAc,uBAEpB,IAAMC,EAA0B,UAChCA,EAAQ,YAAc,yBAMtB,IAAMC,EAAUd,EAGd,CAACO,EAAOQ,IAAQ,CACjB,IAAMC,EAAMf,EAAWI,CAAqB,EAE5C,OACCD,EAAiB,UAAhB,CACA,IAAKW,EAEJ,GAAKC,EAAI,eAAqD,CAAC,EAArC,CAAE,mBAAoB,MAAU,EAC1D,GAAGT,EACL,CAEF,CAAC,EACDO,EAAQ,YAAc,yBAEtB,IAAMG,EAAwB,QAMxBC,EAAclB,EAGlB,CAACO,EAAOQ,IAAQ,CACjB,IAAMC,EAAMf,EAAWI,CAAqB,EAE5C,OAAAH,EAAU,KACTc,EAAI,kBAAkB,EAAI,EACnB,IAAMA,EAAI,kBAAkB,EAAK,GACtC,CAACA,CAAG,CAAC,EAEDZ,EAAiB,cAAhB,CAA4B,IAAKW,EAAM,GAAGR,EAAO,CAC1D,CAAC,EACDW,EAAY,YAAc","names":["DialogPrimitive","createContext","forwardRef","useContext","useEffect","useState","jsx","InternalDialogContext","Root","props","hasDescription","setHasDescription","Trigger","Portal","Close","Overlay","Content","ref","ctx","Title","Description"]}

package/dist/chunk-D3XF6J5A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-matches-media-query.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\n\nexport function useMatchesMediaQuery(query: string) {\n\tconst subscribe = useCallback(\n\t\t(callback: () => void) => {\n\t\t\tconst matchMedia = window.matchMedia(query);\n\n\t\t\tmatchMedia.addEventListener(\"change\", callback);\n\t\t\treturn () => {\n\t\t\t\tmatchMedia.removeEventListener(\"change\", callback);\n\t\t\t};\n\t\t},\n\t\t[query],\n\t);\n\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => {\n\t\t\treturn window.matchMedia(query).matches;\n\t\t},\n\t\t() => false,\n\t);\n}\n"],"mappings":"AAAA,OAAS,eAAAA,EAAa,wBAAAC,MAA4B,QAE3C,SAASC,EAAqBC,EAAe,CACnD,IAAMC,EAAYJ,EAChBK,GAAyB,CACzB,IAAMC,EAAa,OAAO,WAAWH,CAAK,EAE1C,OAAAG,EAAW,iBAAiB,SAAUD,CAAQ,EACvC,IAAM,CACZC,EAAW,oBAAoB,SAAUD,CAAQ,CAClD,CACD,EACA,CAACF,CAAK,CACP,EAEA,OAAOF,EACNG,EACA,IACQ,OAAO,WAAWD,CAAK,EAAE,QAEjC,IAAM,EACP,CACD","names":["useCallback","useSyncExternalStore","useMatchesMediaQuery","query","subscribe","callback","matchMedia"]}

package/dist/chunk-IWKI4XHM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\n/**\n * A hook that allows you to copy a string to the clipboard.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n */\nfunction useCopyToClipboard() {\n\tconst [state, setState] = useState<string>(\"\");\n\n\tconst copyToClipboard = useCallback((value: string) => {\n\t\tconst handleCopy = async () => {\n\t\t\ttry {\n\t\t\t\tif (typeof window.navigator?.clipboard?.writeText === \"function\") {\n\t\t\t\t\tawait navigator.clipboard.writeText(value);\n\t\t\t\t\tsetState(value);\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(\"writeText not supported\");\n\t\t\t\t}\n\t\t\t} catch (_) {\n\t\t\t\toldSchoolCopy(value);\n\t\t\t\tsetState(value);\n\t\t\t}\n\t\t};\n\n\t\thandleCopy();\n\t}, []);\n\n\treturn [state, copyToClipboard] as const;\n}\n\nexport {\n\t//,\n\tuseCopyToClipboard,\n};\n\n/**\n * A fallback copy to clipboard function for older browsers.\n */\nfunction oldSchoolCopy(text: string) {\n\tconst tempTextArea = document.createElement(\"textarea\");\n\ttempTextArea.value = text;\n\tdocument.body.appendChild(tempTextArea);\n\ttempTextArea.select();\n\tdocument.execCommand(\"copy\");\n\tdocument.body.removeChild(tempTextArea);\n}\n"],"mappings":"AAAA,OAAS,eAAAA,EAAa,YAAAC,MAAgB,QAOtC,SAASC,GAAqB,CAC7B,GAAM,CAACC,EAAOC,CAAQ,EAAIH,EAAiB,EAAE,EAEvCI,EAAkBL,EAAaM,GAAkB,EACnC,SAAY,CAC9B,GAAI,CACH,GAAI,OAAO,OAAO,WAAW,WAAW,WAAc,WACrD,MAAM,UAAU,UAAU,UAAUA,CAAK,EACzCF,EAASE,CAAK,MAEd,OAAM,IAAI,MAAM,yBAAyB,CAE3C,MAAY,CACXC,EAAcD,CAAK,EACnBF,EAASE,CAAK,CACf,CACD,GAEW,CACZ,EAAG,CAAC,CAAC,EAEL,MAAO,CAACH,EAAOE,CAAe,CAC/B,CAUA,SAASG,EAAcC,EAAc,CACpC,IAAMC,EAAe,SAAS,cAAc,UAAU,EACtDA,EAAa,MAAQD,EACrB,SAAS,KAAK,YAAYC,CAAY,EACtCA,EAAa,OAAO,EACpB,SAAS,YAAY,MAAM,EAC3B,SAAS,KAAK,YAAYA,CAAY,CACvC","names":["useCallback","useState","useCopyToClipboard","state","setState","copyToClipboard","value","oldSchoolCopy","oldSchoolCopy","text","tempTextArea"]}

package/dist/inline-code.d.ts

@@ -1,18 +0,0 @@
-import * as react from 'react';
-import { HTMLAttributes } from 'react';
-
-/**
- * A component to render inline code with syntax highlighting and styling.
- *
- * @see https://mantle.ngrok.com/components/inline-code#api-inline-code
- *
- * @example
- * ```tsx
- * <p>
- *   Use the <InlineCode>console.log()</InlineCode> function to debug your code.
- * </p>
- * ```
- */
-declare const InlineCode: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
-
-export { InlineCode };

package/dist/inline-code.js

@@ -1,2 +0,0 @@
-import{a as e}from"./chunk-AZ56JGNY.js";import{forwardRef as n}from"react";import{jsx as d}from"react/jsx-runtime";var o=n(({className:r,...t},m)=>d("code",{ref:m,className:e("border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]",r),...t}));o.displayName="InlineCode";export{o as InlineCode};
-//# sourceMappingURL=inline-code.js.map

package/dist/inline-code.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/inline-code/inline-code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A component to render inline code with syntax highlighting and styling.\n *\n * @see https://mantle.ngrok.com/components/inline-code#api-inline-code\n *\n * @example\n * ```tsx\n * <p>\n *   Use the <InlineCode>console.log()</InlineCode> function to debug your code.\n * </p>\n * ```\n */\nconst InlineCode = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<code\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nInlineCode.displayName = \"InlineCode\";\n\nexport { InlineCode };\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAkBzB,cAAAC,MAAA,oBAFF,IAAMC,EAAaC,EAClB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACzBL,EAAC,QACA,IAAKK,EACL,UAAWC,EACV,iFACAH,CACD,EACC,GAAGC,EACL,CAEF,EACAH,EAAW,YAAc","names":["forwardRef","jsx","InlineCode","forwardRef","className","props","ref","cx"]}