@ngrok/mantle 0.79.3 → 0.81.0

package/dist/table-CGxJwtbL.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{useLayoutEffect as n,useMemo as r,useRef as i,useState as a}from"react";import{jsx as o}from"react/jsx-runtime";const s={Body:({children:e,className:n,ref:r,...i})=>o(`tbody`,{"data-slot":`table-body`,className:t(`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-body`,`[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover`,n),ref:r,...i,children:e}),Caption:({children:e,className:n,ref:r,...i})=>o(`caption`,{"data-slot":`table-caption`,ref:r,className:t(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...i,children:e}),Cell:({children:e,className:n,ref:r,...i})=>o(`td`,{"data-slot":`table-cell`,ref:r,className:t(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...i,children:e}),Element:({children:e,className:n,ref:r,...i})=>o(`table`,{"data-slot":`table-element`,ref:r,className:t(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...i,children:e}),Foot:({children:e,className:n,ref:r,...i})=>o(`tfoot`,{"data-slot":`table-foot`,ref:r,className:t(`font-medium text-body`,`[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover`,n),...i,children:e}),Head:({children:e,className:n,ref:r,...i})=>o(`thead`,{"data-slot":`table-head`,ref:r,className:t(`[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-muted bg-base`,`[&>tr]:bg-base`,n),...i,children:e}),Header:({children:e,className:n,ref:r,...i})=>o(`th`,{"data-slot":`table-header`,ref:r,className:t(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...i,children:e}),Root:({children:n,className:r,ref:i,...a})=>{let s=c();return o(`div`,{"data-slot":`table`,className:t(`group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100`,r),"data-sticky-active":s.state.hasOverflow&&!s.state.scrolledToEnd||void 0,"data-x-overflow":s.state.hasOverflow,"data-x-scroll-end":s.state.hasOverflow&&s.state.scrolledToEnd,...a,children:o(`div`,{className:t(`scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none`,`has-data-mantle-table-sticky-right:[--_fade-right:black]`),ref:e(s.ref,i),children:n})})},Row:({children:e,className:n,ref:r,...i})=>o(`tr`,{"data-slot":`table-row`,ref:r,className:t(n),...i,children:e})};function c(){let e=i(null),[t,o]=a({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return n(()=>{let t=e.current;if(!t)return;let n=0,r=()=>{let e=t.scrollWidth>t.clientWidth,n=t.scrollLeft<1,r=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;o(t=>t.hasOverflow!==e||t.scrolledToStart!==n||t.scrolledToEnd!==r?{hasOverflow:e,scrolledToStart:n,scrolledToEnd:r}:t)},i=()=>{n===0&&(n=requestAnimationFrame(()=>{n=0,r()}))},a=new ResizeObserver(i);a.observe(t);let s=new MutationObserver(i);return s.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,i,{passive:!0}),r(),()=>{cancelAnimationFrame(n),a.disconnect(),s.disconnect(),t.removeEventListener(`scroll`,i)}},[]),r(()=>({ref:e,state:t}),[t])}export{s as t};

package/dist/table.d.ts

@@ -1,2 +1,2 @@
-import { t as Table } from "./table-CwFHXC-G.js";
+import { t as Table } from "./table-Bo0vNxIJ.js";
 export { Table };

package/dist/table.js

@@ -1 +1 @@
-import{t as e}from"./table-CPH2md2-.js";export{e as Table};
+import{t as e}from"./table-CGxJwtbL.js";export{e as Table};

package/dist/tabs.d.ts

@@ -1,5 +1,100 @@
-import { HTMLAttributes } from "react";
+import { ComponentProps, HTMLAttributes } from "react";
+import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
 //#region src/components/tabs/tabs.d.ts
+/**
+ * A set of layered sections of content—known as tab panels—that are displayed one at a time.
+ * The root component that provides context for all tab components.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/tabs#tabsroot
+ *
+ * @example
+ * ```tsx
+ * <Tabs.Root defaultValue="account">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+ *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="account">
+ *     <p>Make changes to your account here.</p>
+ *   </Tabs.Content>
+ *   <Tabs.Content value="password">
+ *     <p>Change your password here.</p>
+ *   </Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ */
+declare const Root$1: ({ className, children, orientation, appearance, ...props }: ComponentProps<typeof Root> & {
+  /**
+   * The appearance of the tabs. Classic appearance shows the tab
+   * list with an underline; pill appearance shows each tab as a pill.
+   * @default "classic"
+   */
+  appearance?: "classic" | "pill";
+}) => import("react").JSX.Element;
+/**
+ * Contains the triggers that are aligned along the edge of the active content.
+ * The container for tab triggers that provides the visual layout for tab navigation.
+ *
+ * By default a horizontal classic tablist draws a 1px bottom border in the
+ * `separator` color token, and a vertical classic tablist draws the matching
+ * side border. Pass `hideBorder` to remove it; the pill appearance never
+ * draws a border.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/tabs#tabslist
+ *
+ * @example
+ * ```tsx
+ * <Tabs.Root defaultValue="account">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+ *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="account">
+ *     <p>Make changes to your account here.</p>
+ *   </Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // render the tablist without its border
+ * <Tabs.List hideBorder>
+ *   <Tabs.Trigger value="account">Account</Tabs.Trigger>
+ *   <Tabs.Trigger value="password">Password</Tabs.Trigger>
+ * </Tabs.List>
+ * ```
+ */
+declare const List$1: ({ className, hideBorder, ref, ...props }: ComponentProps<typeof List> & {
+  /**
+   * Hide the tablist's border — the bottom border of a horizontal classic
+   * tablist, or the side border of a vertical one. Also rendered as a
+   * `data-hide-border` attribute on the tablist element. Has no effect on
+   * the pill appearance, which never draws a border.
+   * @default false
+   */
+  hideBorder?: boolean;
+}) => import("react").JSX.Element;
+type TabsTriggerProps = ComponentProps<typeof Trigger>;
+/**
+ * The button that activates its associated content.
+ * A clickable tab trigger that switches between different tab content panels.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/tabs#tabstrigger
+ *
+ * @example
+ * ```tsx
+ * <Tabs.Root defaultValue="account">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+ *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="account">
+ *     <p>Make changes to your account here.</p>
+ *   </Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ */
+declare const Trigger$1: ({ "aria-disabled": _ariaDisabled, asChild, children, className, disabled: _disabled, ref, ...props }: TabsTriggerProps) => import("react").JSX.Element;
 /**
  * A badge component that can be used inside tab triggers to display additional information.
  * Typically used to show counts or status indicators within tab headers.
@@ -18,10 +113,30 @@ import { HTMLAttributes } from "react";
  * </Tabs.Root>
  * ```
  */
-declare const Badge: {
-  ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Badge: ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react").JSX.Element;
+/**
+ * Contains the content associated with each trigger.
+ * The content panel that displays when its corresponding tab trigger is active.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/tabs#tabscontent
+ *
+ * @example
+ * ```tsx
+ * <Tabs.Root defaultValue="account">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+ *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="account">
+ *     <p>Make changes to your account here.</p>
+ *   </Tabs.Content>
+ *   <Tabs.Content value="password">
+ *     <p>Change your password here.</p>
+ *   </Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ */
+declare const Content$1: ({ className, ...props }: ComponentProps<typeof Content>) => import("react").JSX.Element;
 /**
  * A set of layered sections of content—known as tab panels—that are displayed one at a time.
  * The root component that provides context for all tab components.
@@ -74,14 +189,7 @@ declare const Tabs: {
    * </Tabs.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    /**
-     * The appearance of the tabs. Classic appearance shows the tab
-     * list with an underline; pill appearance shows each tab as a pill.
-     * @default "classic"
-     */
-    appearance?: "classic" | "pill";
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root$1;
   /**
    * Contains the content associated with each trigger.
    * The content panel that displays when its corresponding tab trigger is active.
@@ -100,7 +208,7 @@ declare const Tabs: {
    * </Tabs.Root>
    * ```
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content$1;
   /**
    * Contains the triggers that are aligned along the edge of the active content.
    * The container for tab triggers that provides the visual layout for tab navigation.
@@ -121,16 +229,7 @@ declare const Tabs: {
    * </Tabs.Root>
    * ```
    */
-  readonly List: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    /**
-     * Hide the tablist's border — the bottom border of a horizontal classic
-     * tablist, or the side border of a vertical one. Also rendered as a
-     * `data-hide-border` attribute on the tablist element. Has no effect on
-     * the pill appearance, which never draws a border.
-     * @default false
-     */
-    hideBorder?: boolean;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly List: typeof List$1;
   /**
    * The button that activates its associated content.
    * A clickable tab trigger that switches between different tab content panels.
@@ -147,7 +246,7 @@ declare const Tabs: {
    * </Tabs.Root>
    * ```
    */
-  readonly Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: typeof Trigger$1;
   /**
    * A badge component that can be used inside tab triggers to display additional information.
    * Typically used to show counts or status indicators within tab headers.

package/dist/tabs.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./booleanish-BfvnW6vy.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{t as i}from"./use-prefers-reduced-motion-CagaNRgm.js";import{Children as a,cloneElement as o,createContext as s,forwardRef as c,isValidElement as l,useContext as u,useEffect as d,useMemo as f,useRef as p}from"react";import m from"tiny-invariant";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";import{cva as v}from"class-variance-authority";import{Content as y,List as b,Root as x,Trigger as S}from"@radix-ui/react-tabs";const C=s({orientation:`horizontal`,appearance:`classic`}),w=c(({className:e,children:n,orientation:r=`horizontal`,appearance:i=`classic`,...a},o)=>{let s=f(()=>({orientation:r,appearance:i}),[r,i]);return g(x,{"data-slot":`tabs`,"data-appearance":i,className:t(`flex gap-4`,r===`horizontal`?`flex-col`:`flex-row`,e),orientation:r,ref:o,...a,children:g(C.Provider,{value:s,children:n})})});w.displayName=`Tabs`;const T=v(`flex`,{variants:{orientation:{horizontal:`scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1`,vertical:`flex-col items-end gap-3.5 self-stretch`},appearance:{classic:``,pill:``},hideBorder:{true:``,false:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`horizontal`,appearance:`classic`,hideBorder:!1,className:t(`pb-px bg-origin-content bg-no-repeat bg-size-[100%_1px] bg-position-[0_calc(100%+1px)]`,`bg-[image:linear-gradient(var(--color-separator),var(--color-separator))]`,`[--_fade-bottom-border:black]`)},{orientation:`vertical`,appearance:`classic`,hideBorder:!1,className:`border-r border-separator`}],defaultVariants:{hideBorder:!1}}),E=c(({className:n,hideBorder:r=!1,...a},o)=>{let{orientation:s,appearance:c}=u(C),l=p(null);return d(()=>{let e=l.current;if(!e||s!==`horizontal`)return;let t=new AbortController;return e.addEventListener(`focusin`,t=>{if(t.target instanceof Element&&t.target!==e){let e=i()?`auto`:`smooth`;t.target.scrollIntoView({behavior:e,inline:`center`,block:`nearest`})}},{signal:t.signal}),()=>{t.abort()}},[s]),g(b,{"aria-orientation":s,"data-slot":`tabs-list`,"data-hide-border":r?``:void 0,className:t(T({orientation:s,appearance:c,hideBorder:r}),n),ref:e(l,o),...a})});E.displayName=`TabsList`;const D=v(`absolute z-0`,{variants:{orientation:{horizontal:`bottom-0 left-0 right-0 h-0.75`,vertical:`-right-px bottom-0 top-0 w-0.75`},appearance:{classic:`group-data-state-active/tab-trigger:bg-neutral-950`,pill:`hidden`}}}),O=()=>{let{orientation:e,appearance:t}=u(C);return g(`span`,{"aria-hidden":!0,className:r(D({orientation:e,appearance:t}))})};O.displayName=`TabsTriggerDecoration`;const k=v(t(`group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600`,`ring-focus-accent outline-hidden`,`aria-disabled:cursor-default aria-disabled:opacity-50`,`focus-visible:ring-4`,`[&>svg]:shrink-0 [&>svg]:size-5`,`not-aria-disabled:hover:text-gray-900`),{variants:{orientation:{horizontal:`rounded-tl-md rounded-tr-md`,vertical:`rounded-bl-md rounded-tl-md pr-3`},appearance:{classic:t(`not-aria-disabled:hover:data-state-active:text-strong`,`data-state-active:text-strong`),pill:t(`not-aria-disabled:hover:data-state-active:text-strong`,`not-aria-disabled:hover:data-state-active:bg-neutral-500/15`,`data-state-active:text-strong`,`data-state-active:bg-neutral-500/15`,`rounded-full py-2 px-3`)}}}),A=c(({"aria-disabled":e,asChild:r=!1,children:i,className:s,disabled:c,...d},f)=>{let{orientation:p,appearance:v}=u(C),y=n(e??c),b={"aria-disabled":e??c,className:t(k({orientation:p,appearance:v}),s),disabled:y,...d};if(r){let e=a.only(i);m(l(e),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let t=e.props?.children,n=y?{href:void 0,to:void 0}:{tabIndex:0};return g(S,{asChild:!0,"data-slot":`tabs-trigger`,...b,ref:f,children:o(y?g(`button`,{type:`button`}):e,n,_(h,{children:[g(O,{}),t]}))})}return _(S,{"data-slot":`tabs-trigger`,ref:f,...b,children:[g(O,{}),i]})});A.displayName=`TabsTrigger`;const j=({className:e,children:n,...r})=>g(`span`,{"data-slot":`tabs-badge`,className:t(`rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600`,`group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong`,`group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700`,e),...r,children:n});j.displayName=`TabBadge`;const M=c(({className:e,...n},r)=>g(y,{ref:r,"data-slot":`tabs-content`,className:t(`focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4`,e),...n}));M.displayName=`TabsContent`;const N={Root:w,Content:M,List:E,Trigger:A,Badge:j};export{N as Tabs};
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./booleanish-BfvnW6vy.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{t as i}from"./use-prefers-reduced-motion-CagaNRgm.js";import{Children as a,cloneElement as o,createContext as s,isValidElement as c,useContext as l,useEffect as u,useMemo as d,useRef as f}from"react";import p from"tiny-invariant";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import{Content as v,List as y,Root as b,Trigger as x}from"@radix-ui/react-tabs";const S=s({orientation:`horizontal`,appearance:`classic`}),C=({className:e,children:n,orientation:r=`horizontal`,appearance:i=`classic`,...a})=>{let o=d(()=>({orientation:r,appearance:i}),[r,i]);return h(b,{"data-slot":`tabs`,"data-appearance":i,className:t(`flex gap-4`,r===`horizontal`?`flex-col`:`flex-row`,e),orientation:r,...a,children:h(S.Provider,{value:o,children:n})})},w=_(`flex`,{variants:{orientation:{horizontal:`scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1`,vertical:`flex-col items-end gap-3.5 self-stretch`},appearance:{classic:``,pill:``},hideBorder:{true:``,false:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`horizontal`,appearance:`classic`,hideBorder:!1,className:t(`pb-px bg-origin-content bg-no-repeat bg-size-[100%_1px] bg-position-[0_calc(100%+1px)]`,`bg-[image:linear-gradient(var(--color-separator),var(--color-separator))]`,`[--_fade-bottom-border:black]`)},{orientation:`vertical`,appearance:`classic`,hideBorder:!1,className:`border-r border-separator`}],defaultVariants:{hideBorder:!1}}),T=({className:n,hideBorder:r=!1,ref:a,...o})=>{let{orientation:s,appearance:c}=l(S),d=f(null);return u(()=>{let e=d.current;if(!e||s!==`horizontal`)return;let t=new AbortController;return e.addEventListener(`focusin`,t=>{if(t.target instanceof Element&&t.target!==e){let e=i()?`auto`:`smooth`;t.target.scrollIntoView({behavior:e,inline:`center`,block:`nearest`})}},{signal:t.signal}),()=>{t.abort()}},[s]),h(y,{"aria-orientation":s,"data-slot":`tabs-list`,"data-hide-border":r?``:void 0,className:t(w({orientation:s,appearance:c,hideBorder:r}),n),ref:e(d,a),...o})},E=_(`absolute z-0`,{variants:{orientation:{horizontal:`bottom-0 left-0 right-0 h-0.75`,vertical:`-right-px bottom-0 top-0 w-0.75`},appearance:{classic:`group-data-state-active/tab-trigger:bg-neutral-950`,pill:`hidden`}}}),D=()=>{let{orientation:e,appearance:t}=l(S);return h(`span`,{"aria-hidden":!0,className:r(E({orientation:e,appearance:t}))})},O=_(t(`group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600`,`ring-focus-accent outline-hidden`,`aria-disabled:cursor-default aria-disabled:opacity-50`,`focus-visible:ring-4`,`[&>svg]:shrink-0 [&>svg]:size-5`,`not-aria-disabled:hover:text-gray-900`),{variants:{orientation:{horizontal:`rounded-tl-md rounded-tr-md`,vertical:`rounded-bl-md rounded-tl-md pr-3`},appearance:{classic:t(`not-aria-disabled:hover:data-state-active:text-strong`,`data-state-active:text-strong`),pill:t(`not-aria-disabled:hover:data-state-active:text-strong`,`not-aria-disabled:hover:data-state-active:bg-neutral-500/15`,`data-state-active:text-strong`,`data-state-active:bg-neutral-500/15`,`rounded-full py-2 px-3`)}}}),k={Root:C,Content:({className:e,...n})=>h(v,{"data-slot":`tabs-content`,className:t(`focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4`,e),...n}),List:T,Trigger:({"aria-disabled":e,asChild:r=!1,children:i,className:s,disabled:u,ref:d,...f})=>{let{orientation:_,appearance:v}=l(S),y=n(e??u),b={"aria-disabled":e??u,className:t(O({orientation:_,appearance:v}),s),disabled:y,...f};if(r){let e=a.only(i);p(c(e),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let t=e.props?.children,n=y?{href:void 0,to:void 0}:{tabIndex:0};return h(x,{asChild:!0,"data-slot":`tabs-trigger`,...b,ref:d,children:o(y?h(`button`,{type:`button`}):e,n,g(m,{children:[h(D,{}),t]}))})}return g(x,{"data-slot":`tabs-trigger`,ref:d,...b,children:[h(D,{}),i]})},Badge:({className:e,children:n,...r})=>h(`span`,{"data-slot":`tabs-badge`,className:t(`rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600`,`group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong`,`group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700`,e),...r,children:n})};export{k as Tabs};

package/dist/text-area.d.ts

@@ -1,4 +1,4 @@
-import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { o as WithValidation } from "./field-7QeiTFwl.js";
 import { ComponentProps } from "react";
 //#region src/components/text-area/text-area.d.ts
 type Props = ComponentProps<"textarea"> & WithValidation & {
@@ -28,6 +28,6 @@ type Props = ComponentProps<"textarea"> & WithValidation & {
  * </form>
  * ```
  */
-declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: ({ appearance, "aria-invalid": _ariaInvalid, className, onDragEnter, onDragLeave, onDropCapture, ref, validation: _validation, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 export { TextArea };

package/dist/text-area.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-IiQEAKf5.js";import{a as n,r}from"./validation-Bpptk_9t.js";import{forwardRef as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=i(({appearance:i,"aria-invalid":c,className:l,onDragEnter:u,onDragLeave:d,onDropCapture:f,validation:p,...m},h)=>{let g=n(),{ariaInvalid:_,validation:v}=r({"aria-invalid":c,validation:p??g}),[y,b]=o(!1),x=a(null);return s(`textarea`,{"aria-invalid":_,"data-validation":v||void 0,"data-slot":`text-area`,className:t(i===`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":y,onDragEnter:e=>{b(!0),u?.(e)},onDragLeave:e=>{b(!1),d?.(e)},onDropCapture:e=>{b(!1),x.current?.focus(),f?.(e)},ref:e(x,h),...m})});c.displayName=`TextArea`;export{c as TextArea};
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{a as n,r}from"./field-Bpptk_9t.js";import{useRef as i,useState as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=({appearance:s,"aria-invalid":c,className:l,onDragEnter:u,onDragLeave:d,onDropCapture:f,ref:p,validation:m,...h})=>{let g=n(),{ariaInvalid:_,validation:v}=r({"aria-invalid":c,validation:m??g}),[y,b]=a(!1),x=i(null);return o(`textarea`,{"aria-invalid":_,"data-validation":v||void 0,"data-slot":`text-area`,className:t(s===`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":y,onDragEnter:e=>{b(!0),u?.(e)},onDragLeave:e=>{b(!1),d?.(e)},onDropCapture:e=>{b(!1),x.current?.focus(),f?.(e)},ref:e(x,p),...h})};export{s as TextArea};

package/dist/theme-C26-Xolp.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{n as t}from"./browser-only-CPH56Xw_.js";import{t as n}from"./use-matches-media-query-CMSxHR9n.js";import{createContext as r,useContext as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";const d=[`light`,`dark`,`light-high-contrast`,`dark-high-contrast`],f=[`system`,...d],p=e=>e;function m(e){return typeof e==`string`&&f.includes(e)}const h=e=>e;function g(e){return typeof e==`string`&&d.includes(e)}const _=`(prefers-color-scheme: dark)`,v=`(prefers-contrast: more)`,y=`mantle-ui-theme`,b=`system`,x=r([`system`,()=>null]);function S({children:e}){let[n,r]=c(()=>{let e=N({cookie:t()?document.cookie:null});return w(e),e}),i=s(null);a(()=>{function e(e){let t=e??N({cookie:document.cookie});r(t),w(t)}e();try{`BroadcastChannel`in window&&(i.current=new BroadcastChannel(y),i.current.addEventListener(`message`,t=>{let n=t?.data?.theme;m(n)&&e(n)}))}catch{}function t(t){t.key===`${y}__ping`&&e()}window.addEventListener(`storage`,t);let n=window.matchMedia(_),a=window.matchMedia(v);function o(){e()}function s(){document.visibilityState===`visible`&&e()}return n.addEventListener(`change`,o),a.addEventListener(`change`,o),window.addEventListener(`pageshow`,o),document.addEventListener(`visibilitychange`,s),()=>{window.removeEventListener(`storage`,t),n.removeEventListener(`change`,o),a.removeEventListener(`change`,o),window.removeEventListener(`pageshow`,o),document.removeEventListener(`visibilitychange`,s);try{i.current?.close()}catch{}i.current=null}},[]);let l=o(()=>[n,e=>{L(e),r(e),w(e),F(e,{broadcastChannel:i.current,pingKey:`${y}__ping`})}],[n]);return u(x.Provider,{value:l,children:e})}function C(){let e=i(x);return l(e,`useTheme must be used within a ThemeProvider`),e}function w(e){if(!t())return;let n=window.document.documentElement,r=window.matchMedia(_).matches,i=window.matchMedia(v).matches,a=E(e,{prefersDarkMode:r,prefersHighContrast:i}),o=n.dataset.theme,s=n.dataset.appliedTheme,c=m(o)?o:void 0,l=g(s)?s:void 0;(c!==e||l!==a)&&(n.classList.remove(...d),n.classList.add(a),n.dataset.theme=e,n.dataset.appliedTheme=a)}function T(){if(!t())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,n=m(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:g(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:n}}function E(e,{prefersDarkMode:t,prefersHighContrast:n}){return e===`system`?O({prefersDarkMode:t,prefersHighContrast:n}):e}function D(){let e=i(x);return E(e==null?`system`:e[0],{prefersDarkMode:n(_),prefersHighContrast:n(v)})}function O({prefersDarkMode:e,prefersHighContrast:t}){return t?e?`dark-high-contrast`:`light-high-contrast`:e?`dark`:`light`}function k(e){let{storageKey:t,defaultTheme:n,themes:r,resolvedThemes:i,prefersDarkModeMediaQuery:a,prefersHighContrastMediaQuery:o}=e;function s(e){return typeof e==`string`&&r.includes(e)}function c(e){let t=document.cookie;if(!t)return null;try{let n=t.split(`;`).find(t=>t.trim().startsWith(`${e}=`))?.split(`=`)[1];return n?decodeURIComponent(n):null}catch{return null}}function l(e,t){let n=new Date;n.setFullYear(n.getFullYear()+1);let r=window.location.hostname,i=window.location.protocol,a=r===`ngrok.com`||r.endsWith(`.ngrok.com`)?`; domain=.ngrok.com`:``,o=i===`https:`?`; Secure`:``;return`${e}=${encodeURIComponent(t)}; expires=${n.toUTCString()}; path=/${a}; SameSite=Lax${o}`}function u(e,t){try{document.cookie=l(e,t)}catch{}}function d(e,t,n){return e===`system`?n?t?`dark-high-contrast`:`light-high-contrast`:t?`dark`:`light`:e}let f=null,p=null,m=null;try{f=c(t)}catch{}if(s(f))m=f;else{try{p=window.localStorage?.getItem(t)??null}catch{}s(p)&&(m=p)}let h=s(m)?m:n,g=matchMedia(a).matches,_=matchMedia(o).matches,v=d(h,g,_),y=document.documentElement;if(y.dataset.appliedTheme!==v||y.dataset.theme!==h){for(let e of i)y.classList.remove(e);y.classList.add(v),y.dataset.theme=h,y.dataset.appliedTheme=v}let b=s(f);try{if(s(p)&&!b){u(t,p);try{window.localStorage.removeItem(t)}catch{}}else b||u(t,h)}catch{}}function A(){let e={storageKey:y,defaultTheme:b,themes:f,resolvedThemes:d,prefersDarkModeMediaQuery:_,prefersHighContrastMediaQuery:v};return`(${k.toString()})(${JSON.stringify(e)})`}const j=({nonce:e})=>u(`script`,{dangerouslySetInnerHTML:{__html:A()},nonce:e,suppressHydrationWarning:!0});function M(n={}){let{className:r=``,ssrCookie:i}=n??{};return o(()=>{let n,a;if(!t())n=N({cookie:i}),a=E(n,{prefersDarkMode:!1,prefersHighContrast:!1});else{let e=window.matchMedia(_).matches,t=window.matchMedia(v).matches;n=N({cookie:document.cookie}),a=E(n,{prefersDarkMode:e,prefersHighContrast:t})}return{className:e(r,a),"data-applied-theme":a,"data-theme":n}},[r,i])}function N({cookie:e}){if(!e)return b;try{let t=e.split(`;`).find(e=>e.trim().startsWith(`${y}=`))?.split(`=`)[1],n=t?globalThis.decodeURIComponent(t):null;return m(n)?n:b}catch{return b}}function P(e){if(e)return e.split(`;`).map(e=>e.trim()).find(e=>e.startsWith(`${y}=`))}function F(e,t){let{broadcastChannel:n,pingKey:r}=t;try{if(n){n.postMessage({theme:e,timestamp:Date.now()});return}}catch{}try{localStorage.setItem(r,JSON.stringify({theme:e,timestamp:Date.now()}))}catch{}}function I(e){let t=new Date;t.setFullYear(t.getFullYear()+1);let{hostname:n,protocol:r}=window.location,i=n===`ngrok.com`||n.endsWith(`.ngrok.com`)?`; domain=.ngrok.com`:``,a=r===`https:`?`; Secure`:``;return`${y}=${encodeURIComponent(e)}; expires=${t.toUTCString()}; path=/${i}; SameSite=Lax${a}`}function L(e){if(t())try{document.cookie=I(e)}catch{}}export{A as a,M as c,p as d,g as f,f as h,N as i,C as l,d as m,S as n,T as o,m as p,P as r,D as s,j as t,h as u};

package/dist/theme-switcher.d.ts

@@ -1,18 +1,61 @@
 import { t as WithStyleProps } from "./with-style-props-Dq5Vntqy.js";
-import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-BvQvT790.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C7vAl6lS.js";
 import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
-import { t as DropdownMenu } from "./dropdown-menu-DP_Ne9Mr.js";
-import "./index-g2rfwNCH.js";
-import { ComponentProps, ComponentPropsWithoutRef } from "react";
+import { t as DropdownMenu } from "./dropdown-menu-DZg-Cd69.js";
+import "./dropdown-menu-Dw-OtXPm.js";
+import { ComponentProps } from "react";
 //#region src/components/theme-switcher/theme-switcher.d.ts
 /**
  * The props for the `ThemeDropdownMenuRadioGroup` component.
  */
 type ThemeDropdownMenuRadioGroupProps = WithStyleProps;
-declare function ThemeDropdownMenuRadioGroup({ className, style }: ThemeDropdownMenuRadioGroupProps): import("react").JSX.Element;
-declare namespace ThemeDropdownMenuRadioGroup {
-  var displayName: string;
-}
+/**
+ * Must render inside a `DropdownMenu.Content` or `DropdownMenu.SubContent` —
+ * the type system cannot express this constraint, so it is on you to uphold it.
+ *
+ * The theme-selection radio group for mantle's theme system. Renders one
+ * `role="menuitemradio"` item per mantle theme via `DropdownMenu.RadioGroup`;
+ * the active theme is `aria-checked` and choosing an item persists the new
+ * theme through `useTheme`, so a `ThemeProvider` ancestor is required
+ * (`useTheme` throws outside of one). Use it to embed theme selection in an
+ * existing menu (e.g. an account menu submenu); for a standalone picker,
+ * reach for `ThemeSwitcher` instead.
+ *
+ * @see https://mantle.ngrok.com/components/forms/theme-switcher
+ *
+ * @example
+ * Standalone inside a `DropdownMenu.Content`:
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Theme</Button>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <ThemeDropdownMenuRadioGroup />
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
+ *
+ * @example
+ * Embedded in a submenu of an existing menu (e.g. an account menu):
+ * ```tsx
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Account</Button>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Profile</DropdownMenu.Item>
+ *     <DropdownMenu.Sub>
+ *       <DropdownMenu.SubTrigger>Theme</DropdownMenu.SubTrigger>
+ *       <DropdownMenu.SubContent>
+ *         <ThemeDropdownMenuRadioGroup />
+ *       </DropdownMenu.SubContent>
+ *     </DropdownMenu.Sub>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
+ */
+declare const ThemeDropdownMenuRadioGroup: ({ className, style }: ThemeDropdownMenuRadioGroupProps) => import("react").JSX.Element;
 /**
  * The props for the `ThemeSwitcher.Root` component. Identical to
  * `DropdownMenu.Root`'s props — `Root` forwards everything through.
@@ -34,10 +77,7 @@ type ThemeSwitcherRootProps = ComponentProps<typeof DropdownMenu.Root>;
  * </ThemeSwitcher.Root>
  * ```
  */
-declare const Root: {
-  (props: ThemeSwitcherRootProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Root: (props: ThemeSwitcherRootProps) => import("react").JSX.Element;
 /**
  * The props for the `ThemeSwitcher.Trigger` component. Forwards
  * `IconButton`'s props, except the parts the trigger owns: `icon` (the
@@ -63,13 +103,63 @@ type ThemeSwitcherTriggerProps = Omit<IconButtonProps, "appearance" | "asChild"
    */
   label?: string;
 };
+/**
+ * The button that opens the theme menu: an `IconButton` (ghost by default)
+ * wired up as the menu trigger. The trigger icon is SSR-safe: the applied
+ * theme is unknowable server-side, so a `Skeleton` renders until hydration,
+ * then the icon matching the applied theme. The icon is owned by the trigger;
+ * to render a completely custom trigger, compose `DropdownMenu` +
+ * `ThemeDropdownMenuRadioGroup` directly instead.
+ *
+ * @see https://mantle.ngrok.com/components/forms/theme-switcher
+ *
+ * @example
+ * ```tsx
+ * <ThemeSwitcher.Root>
+ *   <ThemeSwitcher.Trigger appearance="outlined" label="Choose a theme" />
+ *   <ThemeSwitcher.Content />
+ * </ThemeSwitcher.Root>
+ * ```
+ */
+declare const Trigger: ({ appearance, "data-slot": dataSlot, disabled, label, ref, ...props }: ThemeSwitcherTriggerProps) => import("react").JSX.Element;
 /**
  * The props for the `ThemeSwitcher.Content` component. Identical to
  * `DropdownMenu.Content`'s props — positioning and collision behavior
  * (`align`, `side`, `collisionPadding`, …) plus `className`/`style` all
  * forward through.
  */
-type ThemeSwitcherContentProps = ComponentPropsWithoutRef<typeof DropdownMenu.Content> & WithDataSlot;
+type ThemeSwitcherContentProps = ComponentProps<typeof DropdownMenu.Content> & WithDataSlot;
+/**
+ * The popover the trigger opens: a thin forwarding wrapper over
+ * `DropdownMenu.Content`. When `children` are omitted (or `null`/`undefined`)
+ * it renders `ThemeDropdownMenuRadioGroup`, the five-theme radio group — pass
+ * `children` to own the menu contents instead (compose
+ * `ThemeDropdownMenuRadioGroup` yourself alongside extra items). Any
+ * non-nullish children replace the default entirely, including render-nothing
+ * values like `false` — a lone `{condition && <Item />}` child suppresses the
+ * radio group when the condition is false.
+ *
+ * @see https://mantle.ngrok.com/components/forms/theme-switcher
+ *
+ * @example
+ * ```tsx
+ * <ThemeSwitcher.Root>
+ *   <ThemeSwitcher.Trigger />
+ *   <ThemeSwitcher.Content align="end" collisionPadding={{ right: 16 }} />
+ * </ThemeSwitcher.Root>
+ * ```
+ *
+ * @example
+ * Extending the menu beyond theme selection:
+ * ```tsx
+ * <ThemeSwitcher.Content>
+ *   <ThemeDropdownMenuRadioGroup />
+ *   <DropdownMenu.Separator />
+ *   <DropdownMenu.Item>Appearance settings…</DropdownMenu.Item>
+ * </ThemeSwitcher.Content>
+ * ```
+ */
+declare const Content: ({ children, "data-slot": dataSlot, ...props }: ThemeSwitcherContentProps) => import("react").JSX.Element;
 /**
  * The canonical picker for mantle's theme system: a compact `IconButton`
  * trigger (ghost by default) that opens a `DropdownMenu` hosting
@@ -134,23 +224,7 @@ declare const ThemeSwitcher: {
    * </ThemeSwitcher.Root>
    * ```
    */
-  readonly Trigger: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "appearance" | "asChild" | "children" | "icon" | "intent" | "label"> & WithDataSlot & {
-    /**
-     * The visual style of the trigger `IconButton`. Optional here —
-     * `ThemeSwitcher.Trigger` defaults to `"ghost"` so the trigger sits
-     * quietly in headers and toolbars.
-     *
-     * @default "ghost"
-     */
-    appearance?: IconButtonAppearance;
-    /**
-     * The accessible name for the trigger `IconButton`. Visually hidden but
-     * announced to screen readers. Override it for localization.
-     *
-     * @default "Change Theme"
-     */
-    label?: string;
-  } & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: typeof Trigger;
   /**
    * The popover the trigger opens: forwards `DropdownMenu.Content` props
    * (`align`, `side`, `collisionPadding`, `className`, …) and renders the
@@ -166,9 +240,7 @@ declare const ThemeSwitcher: {
    * </ThemeSwitcher.Root>
    * ```
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & WithDataSlot & {
-    width?: "trigger" | "content";
-  } & import("react").RefAttributes<HTMLDivElement>, "ref"> & WithDataSlot & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content;
 };
 //#endregion
 export { ThemeDropdownMenuRadioGroup, type ThemeDropdownMenuRadioGroupProps, ThemeSwitcher, type ThemeSwitcherContentProps, type ThemeSwitcherRootProps, type ThemeSwitcherTriggerProps };

package/dist/theme-switcher.js

@@ -1 +1 @@
-import{t as e}from"./icon-CDtYjF_H.js";import{n as t}from"./slot-DmPrjM7N.js";import{t as n}from"./icon-button-DV2-GZHf.js";import{t as r}from"./browser-only-CPH56Xw_.js";import{d as i,h as a,l as o,p as s}from"./theme-provider-C9zpDyJW.js";import{t as c}from"./dropdown-menu-Bt1aKF1g.js";import{n as l,t as u}from"./theme-D3MDng6U.js";import{t as d}from"./skeleton-Bu3tgNcW.js";import{forwardRef as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";const h={system:`System Preference`,light:`Light Mode`,dark:`Dark Mode`,"light-high-contrast":`Light High Contrast`,"dark-high-contrast":`Dark High Contrast`},g=({className:t,style:n})=>{let[r,u]=o();return p(c.RadioGroup,{"data-slot":`theme-dropdown-menu-radio-group`,className:t,style:n,value:r,onValueChange:e=>{s(e)&&u(e)},children:a.map(t=>m(c.RadioItem,{value:i(t),children:[p(e,{svg:p(l,{theme:t})}),h[t]]},t))})};g.displayName=`ThemeDropdownMenuRadioGroup`;const _=e=>p(c.Root,{...e});_.displayName=`ThemeSwitcher`;const v=f(({appearance:e=`ghost`,"data-slot":i,disabled:a,label:o=`Change Theme`,...s},l)=>p(c.Trigger,{asChild:!0,disabled:a,children:p(n,{ref:l,appearance:e,disabled:a,"data-slot":t(i,`theme-switcher-trigger`),intent:`neutral`,icon:p(r,{fallback:p(d,{className:`rounded-full size-5`}),children:()=>p(u,{className:`size-5`})}),label:o,...s})}));v.displayName=`ThemeSwitcherTrigger`;const y=f(({children:e,"data-slot":n,...r},i)=>p(c.Content,{ref:i,"data-slot":t(n,`theme-switcher-content`),...r,children:e??p(g,{})}));y.displayName=`ThemeSwitcherContent`;const b={Root:_,Trigger:v,Content:y};export{g as ThemeDropdownMenuRadioGroup,b as ThemeSwitcher};
+import{t as e}from"./icon-lZ48P8Nn.js";import{n as t}from"./slot-CDk0Bb9z.js";import{t as n}from"./button-BAno7KIU.js";import{t as r}from"./browser-only-CPH56Xw_.js";import{t as i}from"./dropdown-menu-RyDWoKHx.js";import{d as a,h as o,l as s,p as c}from"./theme-C26-Xolp.js";import{n as l,t as u}from"./icons-DLCs1hLP.js";import{t as d}from"./skeleton-CsbUHbBA.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={system:`System Preference`,light:`Light Mode`,dark:`Dark Mode`,"light-high-contrast":`Light High Contrast`,"dark-high-contrast":`Dark High Contrast`},h=({className:t,style:n})=>{let[r,u]=s();return f(i.RadioGroup,{"data-slot":`theme-dropdown-menu-radio-group`,className:t,style:n,value:r,onValueChange:e=>{c(e)&&u(e)},children:o.map(t=>p(i.RadioItem,{value:a(t),children:[f(e,{svg:f(l,{theme:t})}),m[t]]},t))})},g={Root:e=>f(i.Root,{...e}),Trigger:({appearance:e=`ghost`,"data-slot":a,disabled:o,label:s=`Change Theme`,ref:c,...l})=>f(i.Trigger,{asChild:!0,disabled:o,children:f(n,{ref:c,appearance:e,disabled:o,"data-slot":t(a,`theme-switcher-trigger`),intent:`neutral`,icon:f(r,{fallback:f(d,{className:`rounded-full size-5`}),children:()=>f(u,{className:`size-5`})}),label:s,...l})}),Content:({children:e,"data-slot":n,...r})=>f(i.Content,{"data-slot":t(n,`theme-switcher-content`),...r,children:e??f(h,{})})};export{h as ThemeDropdownMenuRadioGroup,g as ThemeSwitcher};

package/dist/theme.d.ts

@@ -1,4 +1,4 @@
-import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./themes-CYNpplwN.js";
+import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./theme-CYNpplwN.js";
 import { PropsWithChildren } from "react";
 //#region src/components/theme/mantle-style-sheets.d.ts
 /**
@@ -155,9 +155,6 @@ declare function fixMediaScriptContent(forceTheme?: ResolvedTheme): string;
  * ```
  */
 declare function MantleStyleSheets({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl, forceTheme, nonce, ssrCookie }: MantleStyleSheetsProps): import("react").JSX.Element;
-declare namespace MantleStyleSheets {
-  var displayName: string;
-}
 //#endregion
 //#region src/components/theme/theme-provider.d.ts
 /**
@@ -178,9 +175,6 @@ type ThemeProviderProps = PropsWithChildren;
  * ```
  */
 declare function ThemeProvider({ children }: ThemeProviderProps): import("react").JSX.Element;
-declare namespace ThemeProvider {
-  var displayName: string;
-}
 /**
  * useTheme returns the current theme and a function to set the theme.
  *
@@ -215,10 +209,39 @@ type PreventWrongThemeFlashScriptProps = {
    */
   nonce?: string;
 };
-declare function PreventWrongThemeFlashScript({ nonce }: PreventWrongThemeFlashScriptProps): import("react").JSX.Element;
-declare namespace PreventWrongThemeFlashScript {
-  var displayName: string;
-}
+/**
+ * Renders an inline script that prevents Flash of Unstyled Content (FOUC) or the
+ * wrong theme flashing on first paint.
+ *
+ * This is the preferred building block for SSR apps. Pair it with
+ * {@link preloadFontLink} HTTP `Link` headers in your server entry so font fetches
+ * begin before HTML is parsed. For client-only apps without header control, pair
+ * it with {@link PreloadFont} elements in `<head>` instead.
+ *
+ * Place this as early as possible in the `<head>`.
+ *
+ * @example
+ * ```tsx
+ * // entry.server.tsx — send font preloads as HTTP headers (preferred for SSR)
+ * headers.set("Link", [
+ *   `<${assetsCdnOrigin}>; rel=preconnect; crossorigin`,
+ *   preloadFontLink("roobert"),
+ *   preloadFontLink("jetbrains-mono"),
+ * ].join(", "));
+ *
+ * // root.tsx — only the FOUC script in <head>
+ * <head>
+ *   <PreventWrongThemeFlashScript nonce={nonce} />
+ * </head>
+ * ```
+ *
+ * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.
+ * @returns {JSX.Element} A script tag injected before first paint.
+ * @see preloadFontLink
+ * @see PreloadFont
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+ */
+declare const PreventWrongThemeFlashScript: ({ nonce }: PreventWrongThemeFlashScriptProps) => import("react").JSX.Element;
 type InitialThemeProps = {
   className: string;
   "data-applied-theme": ResolvedTheme;
@@ -349,9 +372,25 @@ type PreloadFontProps = {
  * ```
  */
 declare function preloadFontLink(name: CoreFontName): string;
-declare function PreloadFont({ name }: PreloadFontProps): import("react").JSX.Element;
-declare namespace PreloadFont {
-  var displayName: string;
-}
+/**
+ * Preloads a single core font by name.
+ *
+ * Use this when you only need one or two specific fonts rather than all core
+ * fonts. Include it as early as possible in the document `<head>`.
+ *
+ * @remarks
+ * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.
+ *
+ * @example
+ * ```tsx
+ * <head>
+ *   <link rel="preconnect" href={assetsCdnOrigin} crossOrigin="anonymous" />
+ *   <link rel="dns-prefetch" href={assetsCdnOrigin} />
+ *   <PreloadFont name="roobert" />
+ *   <PreloadFont name="jetbrains-mono" />
+ * </head>
+ * ```
+ */
+declare const PreloadFont: ({ name }: PreloadFontProps) => import("react").JSX.Element;
 //#endregion
 export { $resolvedTheme, $theme, type CoreFontName, MantleStyleSheets, type MantleStyleSheetsProps, type MantleThemeCssUrls, PreloadFont, PreventWrongThemeFlashScript, type ResolvedTheme, type Theme, ThemeProvider, assetsCdnOrigin, extractThemeCookie, fixMediaScriptContent, fontHref, getStoredTheme, isResolvedTheme, isTheme, mantleStyleSheetUrls, preloadFontLink, preventWrongThemeFlashScriptContent, readThemeFromHtmlElement, resolvedThemes, themes, useAppliedTheme, useInitialHtmlThemeProps, useTheme };

package/dist/theme.js

@@ -1 +1 @@
-import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-provider-C9zpDyJW.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=`mantle-dark-styles`,b=`mantle-light-high-contrast-styles`,x=`mantle-dark-high-contrast-styles`,S=`(prefers-color-scheme: dark)`,C=`(prefers-contrast: more) and (prefers-color-scheme: light)`,w=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function T(e,t){let n=t??e;return{dark:n===`dark`?`all`:S,lightHighContrast:n===`light-high-contrast`?`all`:C,darkHighContrast:n===`dark-high-contrast`?`all`:w}}function E(e){return e}function D(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=document.getElementById(t),d=document.getElementById(n),f=document.getElementById(r);u&&(u.media=l===`dark`?`all`:i),d&&(d.media=l===`light-high-contrast`?`all`:a),f&&(f.media=l===`dark-high-contrast`?`all`:o)}function O(e){let t={darkLinkId:y,lightHcLinkId:b,darkHcLinkId:x,mediaDark:S,mediaLightHc:C,mediaDarkHc:w,forceTheme:e};return`(${D.toString()})(${JSON.stringify(t)})`}function k({darkCssUrl:e,lightHighContrastCssUrl:t,darkHighContrastCssUrl:n,forceTheme:i,nonce:o,ssrCookie:s}){h(()=>{function e(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function t(){let{dark:t,lightHighContrast:n,darkHighContrast:r}=T(e(),i),a=document.getElementById(y),o=document.getElementById(b),s=document.getElementById(x);a&&(a.media=t),o&&(o.media=n),s&&(s.media=r)}t();let n=new MutationObserver(t);return n.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{n.disconnect()}},[i]);let c=s==null?void 0:a({cookie:s}),l=c===`system`?void 0:c,{dark:u,lightHighContrast:d,darkHighContrast:f}=T(l,i);return v(g,{children:[(!i||i===`dark`)&&_(`link`,{rel:`stylesheet`,id:y,href:e,media:u,suppressHydrationWarning:!0}),(!i||i===`light-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:b,href:t,media:d,suppressHydrationWarning:!0}),(!i||i===`dark-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:x,href:n,media:f,suppressHydrationWarning:!0}),!i&&l==null&&_(`script`,{dangerouslySetInnerHTML:{__html:O(i)},nonce:o,suppressHydrationWarning:!0})]})}k.displayName=`MantleStyleSheets`;const A=`https://assets.ngrok.com`,j=`${A}/fonts`,M={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function N(e){let t=e.startsWith(`/`)?e:`/${e}`;return`${j}${t}`}function P(e){return`<${N(M[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const F=({name:e})=>_(`link`,{rel:`preload`,href:N(M[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});F.displayName=`PreloadFont`;export{m as $resolvedTheme,n as $theme,k as MantleStyleSheets,F as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,A as assetsCdnOrigin,d as extractThemeCookie,O as fixMediaScriptContent,N as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,E as mantleStyleSheetUrls,P as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};
+import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-C26-Xolp.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=`mantle-dark-styles`,b=`mantle-light-high-contrast-styles`,x=`mantle-dark-high-contrast-styles`,S=`(prefers-color-scheme: dark)`,C=`(prefers-contrast: more) and (prefers-color-scheme: light)`,w=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function T(e,t){let n=t??e;return{dark:n===`dark`?`all`:S,lightHighContrast:n===`light-high-contrast`?`all`:C,darkHighContrast:n===`dark-high-contrast`?`all`:w}}function E(e){return e}function D(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=document.getElementById(t),d=document.getElementById(n),f=document.getElementById(r);u&&(u.media=l===`dark`?`all`:i),d&&(d.media=l===`light-high-contrast`?`all`:a),f&&(f.media=l===`dark-high-contrast`?`all`:o)}function O(e){let t={darkLinkId:y,lightHcLinkId:b,darkHcLinkId:x,mediaDark:S,mediaLightHc:C,mediaDarkHc:w,forceTheme:e};return`(${D.toString()})(${JSON.stringify(t)})`}function k({darkCssUrl:e,lightHighContrastCssUrl:t,darkHighContrastCssUrl:n,forceTheme:i,nonce:o,ssrCookie:s}){h(()=>{function e(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function t(){let{dark:t,lightHighContrast:n,darkHighContrast:r}=T(e(),i),a=document.getElementById(y),o=document.getElementById(b),s=document.getElementById(x);a&&(a.media=t),o&&(o.media=n),s&&(s.media=r)}t();let n=new MutationObserver(t);return n.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{n.disconnect()}},[i]);let c=s==null?void 0:a({cookie:s}),l=c===`system`?void 0:c,{dark:u,lightHighContrast:d,darkHighContrast:f}=T(l,i);return v(g,{children:[(!i||i===`dark`)&&_(`link`,{rel:`stylesheet`,id:y,href:e,media:u,suppressHydrationWarning:!0}),(!i||i===`light-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:b,href:t,media:d,suppressHydrationWarning:!0}),(!i||i===`dark-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:x,href:n,media:f,suppressHydrationWarning:!0}),!i&&l==null&&_(`script`,{dangerouslySetInnerHTML:{__html:O(i)},nonce:o,suppressHydrationWarning:!0})]})}const A=`https://assets.ngrok.com`,j=`${A}/fonts`,M={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function N(e){let t=e.startsWith(`/`)?e:`/${e}`;return`${j}${t}`}function P(e){return`<${N(M[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const F=({name:e})=>_(`link`,{rel:`preload`,href:N(M[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});export{m as $resolvedTheme,n as $theme,k as MantleStyleSheets,F as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,A as assetsCdnOrigin,d as extractThemeCookie,O as fixMediaScriptContent,N as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,E as mantleStyleSheetUrls,P as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};