@ngrok/mantle 0.77.0 → 0.78.0

package/dist/split-button.d.ts

@@ -1,11 +1,19 @@
-import { t as Button } from "./button-mfYak6Rx.js";
-import { t as IconButton } from "./icon-button-D7hs6bX2.js";
-import { t as DropdownMenu } from "./dropdown-menu-CADgs9gz.js";
+import { t as Button } from "./button-Bw9MpShl.js";
+import { t as IconButton } from "./icon-button-DuRSCsPh.js";
+import { t as ButtonSize } from "./sizes-Dje_rwKc.js";
+import { t as DropdownMenu } from "./dropdown-menu-DT30TQzL.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/split-button/split-button.d.ts
-type RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<"div">;
-type PrimaryActionProps = Omit<ComponentProps<typeof Button>, "appearance" | "priority">;
+type RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<"div"> & {
+  /**
+   * The size of the SplitButton, default `"md"`. Applied to both the
+   * primary action and the menu trigger so the two halves always share
+   * one height — the parts do not accept `size`, so mixed-size
+   * composites cannot be expressed in the type system.
+   */
+  size?: ButtonSize;
+};
+type PrimaryActionProps = Omit<ComponentProps<typeof Button>, "appearance" | "priority" | "size">;
 type MenuTriggerProps = Omit<ComponentProps<typeof IconButton>, "appearance" | "size" | "asChild" | "icon"> & {
   icon?: ReactNode;
 };
@@ -14,7 +22,7 @@ type MenuTriggerProps = Omit<ComponentProps<typeof IconButton>, "appearance" | "
  * related alternatives through a dropdown menu. Best for when users typically
  * want one action but occasionally need variants.
  *
- * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot
+ * @see https://mantle.ngrok.com/components/actions/split-button#splitbuttonroot
  *
  * @example
  * Composition:
@@ -54,7 +62,7 @@ declare const SplitButton: {
    * related alternatives through a dropdown menu. Best for when users typically
    * want one action but occasionally need variants.
    *
-   * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot
+   * @see https://mantle.ngrok.com/components/actions/split-button#splitbuttonroot
    *
    * @example
    * ```tsx
@@ -82,7 +90,7 @@ declare const SplitButton: {
   /**
    * The most common action users can trigger with a single click.
    *
-   * @see https://mantle.ngrok.com/components/split-button#splitbuttonprimaryaction
+   * @see https://mantle.ngrok.com/components/actions/split-button#splitbuttonprimaryaction
    *
    * @example
    * ```tsx
@@ -110,7 +118,7 @@ declare const SplitButton: {
   /**
    * The button that opens the split button dropdown menu.
    *
-   * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenutrigger
+   * @see https://mantle.ngrok.com/components/actions/split-button#splitbuttonmenutrigger
    *
    * @example
    * ```tsx
@@ -139,7 +147,7 @@ declare const SplitButton: {
    * The container for the split button dropdown menu content. Appears in a
    * portal with scrolling and animations.
    *
-   * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenucontent
+   * @see https://mantle.ngrok.com/components/actions/split-button#splitbuttonmenucontent
    *
    * @example
    * ```tsx
@@ -170,7 +178,7 @@ declare const SplitButton: {
    * A standard item in the split button dropdown menu that can be selected or
    * activated.
    *
-   * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenuitem
+   * @see https://mantle.ngrok.com/components/actions/split-button#splitbuttonmenuitem
    *
    * @example
    * ```tsx

package/dist/split-button.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-SUx16Sl3.js";import{t as n}from"./icon-button-DiX9iZ9n.js";import{t as r}from"./button-C9GW9nAr.js";import{t as i}from"./dropdown-menu-OEuW4GLp.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{forwardRef as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=o(({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,...u},d)=>s(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,children:s(`div`,{"data-slot":`split-button`,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:d,...u,children:n})}));c.displayName=`SplitButton`;const l=o((e,t)=>s(r,{appearance:`outlined`,priority:`neutral`,ref:t,...e}));l.displayName=`SplitButtonPrimaryAction`;const u=o(({icon:e,...r},o)=>s(i.Trigger,{asChild:!0,className:`group`,children:s(n,{icon:e??s(t,{svg:s(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,ref:o,...r})}));u.displayName=`SplitButtonMenuTrigger`;const d=o(({align:e=`end`,...t},n)=>s(i.Content,{align:e,ref:n,...t}));d.displayName=`SplitButtonMenuContent`;const f=o(({className:t,...n},r)=>s(i.Item,{className:e(`gap-2`,t),ref:r,...n}));f.displayName=`SplitButtonMenuItem`;const p={Root:c,PrimaryAction:l,MenuTrigger:u,MenuContent:d,MenuItem:f};export{p as SplitButton};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{t as n}from"./icon-button-CxVsZ2N1.js";import{t as r}from"./button-AS5Ir3DE.js";import{t as i}from"./dropdown-menu-ByUQkAvJ.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,forwardRef as s,useContext as c,useMemo as l}from"react";import{jsx as u}from"react/jsx-runtime";const d=o({size:`md`}),f=s(({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:s,modal:c,size:f=`md`,...p},m)=>{let h=l(()=>({size:f}),[f]);return u(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:s,modal:c,children:u(d.Provider,{value:h,children:u(`div`,{"data-slot":`split-button`,"data-size":f,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:m,...p,children:n})})})});f.displayName=`SplitButton`;const p=s((e,t)=>{let{size:n}=c(d);return u(r,{appearance:`outlined`,priority:`neutral`,ref:t,size:n,...e})});p.displayName=`SplitButtonPrimaryAction`;const m=s(({icon:e,...r},o)=>{let{size:s}=c(d);return u(i.Trigger,{asChild:!0,className:`group`,children:u(n,{icon:e??u(t,{svg:u(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,ref:o,size:s,...r})})});m.displayName=`SplitButtonMenuTrigger`;const h=s(({align:e=`end`,...t},n)=>u(i.Content,{align:e,ref:n,...t}));h.displayName=`SplitButtonMenuContent`;const g=s(({className:t,...n},r)=>u(i.Item,{className:e(`gap-2`,t),ref:r,...n}));g.displayName=`SplitButtonMenuItem`;const _={Root:f,PrimaryAction:p,MenuTrigger:m,MenuContent:h,MenuItem:g};export{_ as SplitButton};

package/dist/{svg-only-f6ToFLH0.d.ts → svg-only-BFeFS1aa.d.ts}

@@ -1,6 +1,5 @@
-import { t as SvgAttributes } from "./types-BvUzforF.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
 import { ReactNode } from "react";
-
 //#region src/components/icon/svg-only.d.ts
 type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
   /**
@@ -12,7 +11,7 @@ type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
  * Accepts a single SVG icon element and decorates it with `shrink-0` class.
  * You probably want to use the `Icon` component instead.
  *
- * @see https://mantle.ngrok.com/components/icon
+ * @see https://mantle.ngrok.com/components/data-display/icon
  *
  * @example
  * ```tsx

package/dist/{svg-only-CSOaF1tL.js → svg-only-DDx6FtJd.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{Children as t,cloneElement as n,forwardRef as r,isValidElement as i}from"react";import a from"tiny-invariant";const o=r(({className:r,style:o,svg:s,...c},l)=>(a(i(s)&&t.only(s),`SvgOnly must be passed a single SVG icon as a JSX tag.`),n(s,{"data-slot":`svg-only`,...c,className:e(`shrink-0`,r,s.props.className),style:{...o,...s.props.style},ref:l})));o.displayName=`SvgOnly`;export{o as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{Children as t,cloneElement as n,forwardRef as r,isValidElement as i}from"react";import a from"tiny-invariant";const o=r(({className:r,style:o,svg:s,...c},l)=>(a(i(s)&&t.only(s),`SvgOnly must be passed a single SVG icon as a JSX tag.`),n(s,{"data-slot":`svg-only`,...c,className:e(`shrink-0`,r,s.props.className),style:{...o,...s.props.style},ref:l})));o.displayName=`SvgOnly`;export{o as t};

package/dist/switch.d.ts

@@ -1,14 +1,13 @@
-import { o as WithValidation } from "./validation-xyX_6kph.js";
-
+import { o as WithValidation } from "./validation-7QeiTFwl.js";
 //#region src/components/switch/switch.d.ts
 /**
  * A form control that allows the user to toggle between checked and not checked.
  *
- * Pair it with a [`Label`](/components/label) for a single-line caption, or
- * compose it inside [`Choice`](/components/choice) for a titled, multi-line
+ * Pair it with a [`Label`](/components/forms/label) for a single-line caption, or
+ * compose it inside [`Choice`](/components/forms/choice) for a titled, multi-line
  * label with a supplementary description.
  *
- * @see https://mantle.ngrok.com/components/switch
+ * @see https://mantle.ngrok.com/components/forms/switch
  *
  * @example
  * ```tsx

package/dist/switch.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./booleanish-BfvnW6vy.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{a as r,r as i}from"./validation-DCyx-ceH.js";import{forwardRef as a}from"react";import{jsx as o}from"react/jsx-runtime";import{Root as s,Thumb as c}from"@radix-ui/react-switch";const l=a(({"aria-invalid":a,"aria-readonly":l,className:u,readOnly:d,onClick:f,validation:p,...m},h)=>{let g=t(d??l),_=r(),{ariaInvalid:v,validation:y}=i({"aria-invalid":a,validation:p??_});return o(s,{"aria-invalid":v,"aria-readonly":g,"data-slot":`switch`,"data-validation":y||void 0,className:e(`peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden`,`disabled:cursor-default disabled:opacity-50`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`data-state-checked:bg-accent-600 data-state-unchecked:bg-gray-400`,`data-validation-success:data-state-checked:bg-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:data-state-checked:bg-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:data-state-checked:bg-danger-600 focus-visible:data-validation-error:ring-focus-danger`,u),onClick:e=>{if(g){e.preventDefault(),e.stopPropagation();return}f?.(e)},ref:h,...m,children:o(c,{className:n(`pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform`,`data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5`)})})});l.displayName=`Switch`;export{l as Switch};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./booleanish-BfvnW6vy.js";import{t as n}from"./clsx-DUGZgXfJ.js";import{a as r,r as i}from"./validation-Bpptk_9t.js";import{forwardRef as a}from"react";import{jsx as o}from"react/jsx-runtime";import{Root as s,Thumb as c}from"@radix-ui/react-switch";const l=a(({"aria-invalid":a,"aria-readonly":l,className:u,readOnly:d,onClick:f,validation:p,...m},h)=>{let g=t(d??l),_=r(),{ariaInvalid:v,validation:y}=i({"aria-invalid":a,validation:p??_});return o(s,{"aria-invalid":v,"aria-readonly":g,"data-slot":`switch`,"data-validation":y||void 0,className:e(`peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden`,`disabled:cursor-default disabled:opacity-50`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`data-state-checked:bg-accent-600 data-state-unchecked:bg-gray-400`,`data-validation-success:data-state-checked:bg-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:data-state-checked:bg-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:data-state-checked:bg-danger-600 focus-visible:data-validation-error:ring-focus-danger`,u),onClick:e=>{if(g){e.preventDefault(),e.stopPropagation();return}f?.(e)},ref:h,...m,children:o(c,{className:n(`pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform`,`data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5`)})})});l.displayName=`Switch`;export{l as Switch};

package/dist/{table-CAitdL78.js → table-CPH2md2-.js}

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{forwardRef as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n(({children:n,className:r,...i},a)=>{let o=v();return s(`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":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,"data-x-overflow":o.state.hasOverflow,"data-x-scroll-end":o.state.hasOverflow&&o.state.scrolledToEnd,...i,children:s(`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(o.ref,a),children:n})})});c.displayName=`TableRoot`;const l=n(({children:e,className:n,...r},i)=>s(`table`,{"data-slot":`table-element`,ref:i,className:t(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...r,children:e}));l.displayName=`TableElement`;const u=n(({children:e,className:n,...r},i)=>s(`thead`,{"data-slot":`table-head`,ref:i,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),...r,children:e}));u.displayName=`TableHead`;const d=n(({children:e,className:n,...r},i)=>s(`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:i,...r,children:e}));d.displayName=`TableBody`;const f=n(({children:e,className:n,...r},i)=>s(`tfoot`,{"data-slot":`table-foot`,ref:i,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),...r,children:e}));f.displayName=`TableFoot`;const p=n(({children:e,className:n,...r},i)=>s(`tr`,{"data-slot":`table-row`,ref:i,className:t(n),...r,children:e}));p.displayName=`TableRow`;const m=n(({children:e,className:n,...r},i)=>s(`th`,{"data-slot":`table-header`,ref:i,className:t(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...r,children:e}));m.displayName=`TableHeader`;const h=n(({children:e,className:n,...r},i)=>s(`td`,{"data-slot":`table-cell`,ref:i,className:t(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...r,children:e}));h.displayName=`TableCell`;const g=n(({children:e,className:n,...r},i)=>s(`caption`,{"data-slot":`table-caption`,ref:i,className:t(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...r,children:e}));g.displayName=`TableCaption`;const _={Body:d,Caption:g,Cell:h,Element:l,Foot:f,Head:u,Header:m,Root:c,Row:p};function v(){let e=a(null),[t,n]=o({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return r(()=>{let t=e.current;if(!t)return;let r=0,i=()=>{let e=t.scrollWidth>t.clientWidth,r=t.scrollLeft<1,i=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;n(t=>t.hasOverflow!==e||t.scrolledToStart!==r||t.scrolledToEnd!==i?{hasOverflow:e,scrolledToStart:r,scrolledToEnd:i}:t)},a=()=>{r===0&&(r=requestAnimationFrame(()=>{r=0,i()}))},o=new ResizeObserver(a);o.observe(t);let s=new MutationObserver(a);return s.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,a,{passive:!0}),i(),()=>{cancelAnimationFrame(r),o.disconnect(),s.disconnect(),t.removeEventListener(`scroll`,a)}},[]),i(()=>({ref:e,state:t}),[t])}export{_ as t};
+import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-IiQEAKf5.js";import{forwardRef as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n(({children:n,className:r,...i},a)=>{let o=v();return s(`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":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,"data-x-overflow":o.state.hasOverflow,"data-x-scroll-end":o.state.hasOverflow&&o.state.scrolledToEnd,...i,children:s(`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(o.ref,a),children:n})})});c.displayName=`TableRoot`;const l=n(({children:e,className:n,...r},i)=>s(`table`,{"data-slot":`table-element`,ref:i,className:t(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...r,children:e}));l.displayName=`TableElement`;const u=n(({children:e,className:n,...r},i)=>s(`thead`,{"data-slot":`table-head`,ref:i,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),...r,children:e}));u.displayName=`TableHead`;const d=n(({children:e,className:n,...r},i)=>s(`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:i,...r,children:e}));d.displayName=`TableBody`;const f=n(({children:e,className:n,...r},i)=>s(`tfoot`,{"data-slot":`table-foot`,ref:i,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),...r,children:e}));f.displayName=`TableFoot`;const p=n(({children:e,className:n,...r},i)=>s(`tr`,{"data-slot":`table-row`,ref:i,className:t(n),...r,children:e}));p.displayName=`TableRow`;const m=n(({children:e,className:n,...r},i)=>s(`th`,{"data-slot":`table-header`,ref:i,className:t(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...r,children:e}));m.displayName=`TableHeader`;const h=n(({children:e,className:n,...r},i)=>s(`td`,{"data-slot":`table-cell`,ref:i,className:t(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...r,children:e}));h.displayName=`TableCell`;const g=n(({children:e,className:n,...r},i)=>s(`caption`,{"data-slot":`table-caption`,ref:i,className:t(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...r,children:e}));g.displayName=`TableCaption`;const _={Body:d,Caption:g,Cell:h,Element:l,Foot:f,Head:u,Header:m,Root:c,Row:p};function v(){let e=a(null),[t,n]=o({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return r(()=>{let t=e.current;if(!t)return;let r=0,i=()=>{let e=t.scrollWidth>t.clientWidth,r=t.scrollLeft<1,i=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;n(t=>t.hasOverflow!==e||t.scrolledToStart!==r||t.scrolledToEnd!==i?{hasOverflow:e,scrolledToStart:r,scrolledToEnd:i}:t)},a=()=>{r===0&&(r=requestAnimationFrame(()=>{r=0,i()}))},o=new ResizeObserver(a);o.observe(t);let s=new MutationObserver(a);return s.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,a,{passive:!0}),i(),()=>{cancelAnimationFrame(r),o.disconnect(),s.disconnect(),t.removeEventListener(`scroll`,a)}},[]),i(()=>({ref:e,state:t}),[t])}export{_ as t};

package/dist/{table-BWD9IlIN.d.ts → table-CwFHXC-G.d.ts}

@@ -7,7 +7,7 @@
  * For INTERACTIVE tabular data with sorting / filtering / pagination / row
  * selection, use `DataTable` (built on TanStack Table) instead.
  *
- * @see https://mantle.ngrok.com/components/table
+ * @see https://mantle.ngrok.com/components/data-display/table
  *
  * @example
  * Composition:
@@ -61,7 +61,7 @@ declare const Table: {
   /**
    * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.
    *
-   * @see https://mantle.ngrok.com/components/table#tablebody
+   * @see https://mantle.ngrok.com/components/data-display/table#tablebody
    *
    * @example
    * ```tsx
@@ -100,7 +100,7 @@ declare const Table: {
   /**
    * An optional caption that specifies the caption (or title) of a table, providing an accessible description.
    *
-   * @see https://mantle.ngrok.com/components/table#tablecaption
+   * @see https://mantle.ngrok.com/components/data-display/table#tablecaption
    *
    * @example
    * ```tsx
@@ -139,7 +139,7 @@ declare const Table: {
   /**
    * A cell that contains data and may be used as a child of a table row.
    *
-   * @see https://mantle.ngrok.com/components/table#tablecell
+   * @see https://mantle.ngrok.com/components/data-display/table#tablecell
    *
    * @example
    * ```tsx
@@ -178,7 +178,7 @@ declare const Table: {
   /**
    * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.
    *
-   * @see https://mantle.ngrok.com/components/table#tableelement
+   * @see https://mantle.ngrok.com/components/data-display/table#tableelement
    *
    * @example
    * ```tsx
@@ -217,7 +217,7 @@ declare const Table: {
   /**
    * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.
    *
-   * @see https://mantle.ngrok.com/components/table#tablefoot
+   * @see https://mantle.ngrok.com/components/data-display/table#tablefoot
    *
    * @example
    * ```tsx
@@ -256,7 +256,7 @@ declare const Table: {
   /**
    * The head section of a table. Contains the table's column headers information.
    *
-   * @see https://mantle.ngrok.com/components/table#tableheader
+   * @see https://mantle.ngrok.com/components/data-display/table#tableheader
    *
    * @example
    * ```tsx
@@ -295,7 +295,7 @@ declare const Table: {
   /**
    * A cell that defines the header of a group of table cells as a child of a table row.
    *
-   * @see https://mantle.ngrok.com/components/table#tableheader
+   * @see https://mantle.ngrok.com/components/data-display/table#tableheader
    *
    * @example
    * ```tsx
@@ -334,7 +334,7 @@ declare const Table: {
   /**
    * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.
    *
-   * @see https://mantle.ngrok.com/components/table#tableroot
+   * @see https://mantle.ngrok.com/components/data-display/table#tableroot
    *
    * @example
    * ```tsx
@@ -373,7 +373,7 @@ declare const Table: {
   /**
    * Defines a row of cells in a table. Contains a mix of table cells and table headers.
    *
-   * @see https://mantle.ngrok.com/components/table#tablerow
+   * @see https://mantle.ngrok.com/components/data-display/table#tablerow
    *
    * @example
    * ```tsx

package/dist/table.d.ts

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

package/dist/table.js

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

package/dist/tabs.d.ts

@@ -1,11 +1,32 @@
 import { HTMLAttributes } from "react";
-
 //#region src/components/tabs/tabs.d.ts
+/**
+ * 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.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/tabs#tabsbadge
+ *
+ * @example
+ * ```tsx
+ * <Tabs.Root defaultValue="account">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="account">
+ *       Account <Tabs.Badge>5</Tabs.Badge>
+ *     </Tabs.Trigger>
+ *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+ *   </Tabs.List>
+ * </Tabs.Root>
+ * ```
+ */
+declare const Badge: {
+  ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * 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/tabs
+ * @see https://mantle.ngrok.com/components/navigation/tabs
  *
  * @example
  * Composition:
@@ -38,7 +59,7 @@ declare const Tabs: {
    * The root container of the tabs component that provides context for all tab components.
    * A set of layered sections of content—known as tab panels—that are displayed one at a time.
    *
-   * @see https://mantle.ngrok.com/components/tabs#tabsroot
+   * @see https://mantle.ngrok.com/components/navigation/tabs#tabsroot
    *
    * @example
    * ```tsx
@@ -65,7 +86,7 @@ declare const Tabs: {
    * 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/tabs#tabscontent
+   * @see https://mantle.ngrok.com/components/navigation/tabs#tabscontent
    *
    * @example
    * ```tsx
@@ -84,7 +105,7 @@ declare const Tabs: {
    * 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.
    *
-   * @see https://mantle.ngrok.com/components/tabs#tabslist
+   * @see https://mantle.ngrok.com/components/navigation/tabs#tabslist
    *
    * @example
    * ```tsx
@@ -101,7 +122,7 @@ declare const Tabs: {
    * The button that activates its associated content.
    * A clickable tab trigger that switches between different tab content panels.
    *
-   * @see https://mantle.ngrok.com/components/tabs#tabstrigger
+   * @see https://mantle.ngrok.com/components/navigation/tabs#tabstrigger
    *
    * @example
    * ```tsx
@@ -118,7 +139,7 @@ declare const Tabs: {
    * 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.
    *
-   * @see https://mantle.ngrok.com/components/tabs#tabsbadge
+   * @see https://mantle.ngrok.com/components/navigation/tabs#tabsbadge
    *
    * @example
    * ```tsx
@@ -131,14 +152,7 @@ declare const Tabs: {
    * </Tabs.Root>
    * ```
    */
-  readonly Badge: {
-    ({
-      className,
-      children,
-      ...props
-    }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+  readonly Badge: typeof Badge;
 };
 //#endregion
 export { Tabs };

package/dist/tabs.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.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-DBqNw1wB.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`,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:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`vertical`,appearance:`classic`,className:`border-r border-gray-200`}]}),E=c(({className:n,...r},a)=>{let{orientation:o,appearance:s}=u(C),c=p(null);return d(()=>{let e=c.current;if(!e||o!==`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()}},[o]),g(b,{"aria-orientation":o,"data-slot":`tabs-list`,className:t(T({orientation:o,appearance:s}),n),ref:e(c,a),...r})});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-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`,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:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`vertical`,appearance:`classic`,className:`border-r border-gray-200`}]}),E=c(({className:n,...r},a)=>{let{orientation:o,appearance:s}=u(C),c=p(null);return d(()=>{let e=c.current;if(!e||o!==`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()}},[o]),g(b,{"aria-orientation":o,"data-slot":`tabs-list`,className:t(T({orientation:o,appearance:s}),n),ref:e(c,a),...r})});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};

package/dist/text-area.d.ts

@@ -1,6 +1,5 @@
-import { o as WithValidation } from "./validation-xyX_6kph.js";
+import { o as WithValidation } from "./validation-7QeiTFwl.js";
 import { ComponentProps } from "react";
-
 //#region src/components/text-area/text-area.d.ts
 type Props = ComponentProps<"textarea"> & WithValidation & {
   /**
@@ -13,7 +12,7 @@ type Props = ComponentProps<"textarea"> & WithValidation & {
  * to enter a sizeable amount of free-form text, for example a comment on a
  * review or feedback form.
  *
- * @see https://mantle.ngrok.com/components/text-area
+ * @see https://mantle.ngrok.com/components/forms/text-area
  *
  * @example
  * ```tsx

package/dist/text-area.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{a as n,r}from"./validation-DCyx-ceH.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-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};

package/dist/theme-D8kZCOzM.js

@@ -0,0 +1 @@
+import{s as e}from"./theme-provider-Djj_jBo6.js";import{jsx as t}from"react/jsx-runtime";import{DesktopIcon as n}from"@phosphor-icons/react/Desktop";import{MoonIcon as r}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";function a(n){return t(o,{theme:e(),...n})}a.displayName=`AutoThemeIcon`;function o({theme:e,...a}){switch(e){case`system`:return t(n,{...a});case`light`:return t(i,{...a});case`dark`:return t(r,{...a});case`light-high-contrast`:return t(i,{...a,weight:`fill`});case`dark-high-contrast`:return t(r,{...a,weight:`fill`})}}o.displayName=`ThemeIcon`;export{o as n,a as t};

package/dist/theme-provider-Djj_jBo6.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./use-matches-media-query-CMSxHR9n.js";import{n}from"./browser-only-CPH56Xw_.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[t,r]=c(()=>{let e=N({cookie:n()?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(()=>[t,e=>{L(e),r(e),w(e),F(e,{broadcastChannel:i.current,pingKey:`${y}__ping`})}],[t]);return u(x.Provider,{value:l,children:e})}S.displayName=`ThemeProvider`;function C(){let e=i(x);return l(e,`useTheme must be used within a ThemeProvider`),e}function w(e){if(!n())return;let t=window.document.documentElement,r=window.matchMedia(_).matches,i=window.matchMedia(v).matches,a=E(e,{prefersDarkMode:r,prefersHighContrast:i}),o=t.dataset.theme,s=t.dataset.appliedTheme,c=m(o)?o:void 0,l=g(s)?s:void 0;c===e&&l===a||(t.classList.remove(...d),t.classList.add(a),t.dataset.theme=e,t.dataset.appliedTheme=a)}function T(){if(!n())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=m(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:g(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}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:t(_),prefersHighContrast:t(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});j.displayName=`PreventWrongThemeFlashScript`;function M(t={}){let{className:r=``,ssrCookie:i}=t??{};return o(()=>{let t,a;if(!n())t=N({cookie:i}),a=E(t,{prefersDarkMode:!1,prefersHighContrast:!1});else{let e=window.matchMedia(_).matches,n=window.matchMedia(v).matches;t=N({cookie:document.cookie}),a=E(t,{prefersDarkMode:e,prefersHighContrast:n})}return{className:e(r,a),"data-applied-theme":a,"data-theme":t}},[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(n())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

@@ -0,0 +1,45 @@
+import { t as WithStyleProps } from "./with-style-props-Dq5Vntqy.js";
+import { t as IconButton } from "./icon-button-DuRSCsPh.js";
+import { t as DropdownMenu } from "./dropdown-menu-DT30TQzL.js";
+import "./index-BnI3OppC.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;
+}
+/**
+ * The props for the `ThemeSwitcher` component.
+ */
+type ThemeSwitcherProps = WithStyleProps & Pick<ComponentProps<typeof IconButton>, "appearance"> & {
+  /**
+   * Props forwarded to the menu's `DropdownMenu.Content` — positioning and
+   * collision behavior (`align`, `side`, `collisionPadding`, …) plus
+   * `className`/`style` for the popover the trigger opens. To own the whole
+   * menu instead, compose `ThemeDropdownMenuRadioGroup` in your own
+   * `DropdownMenu`.
+   *
+   * @example
+   * ```tsx
+   * <ThemeSwitcher contentProps={{ collisionPadding: { right: 16 } }} />
+   * ```
+   */
+  contentProps?: Omit<ComponentProps<typeof DropdownMenu.Content>, "children">;
+  /**
+   * The accessible name for the trigger `IconButton`. Visually hidden but
+   * announced to screen readers. Override it for localization.
+   *
+   * @default "Change Theme"
+   */
+  label?: string;
+};
+declare function ThemeSwitcher({ appearance, className, contentProps, label, style }: ThemeSwitcherProps): import("react").JSX.Element;
+declare namespace ThemeSwitcher {
+  var displayName: string;
+}
+//#endregion
+export { ThemeDropdownMenuRadioGroup, type ThemeDropdownMenuRadioGroupProps, ThemeSwitcher, type ThemeSwitcherProps };

package/dist/theme-switcher.js

@@ -0,0 +1 @@
+import{t as e}from"./icon-CDtYjF_H.js";import{t}from"./icon-button-CxVsZ2N1.js";import{t as n}from"./browser-only-CPH56Xw_.js";import{d as r,h as i,l as a,p as o}from"./theme-provider-Djj_jBo6.js";import{t as s}from"./dropdown-menu-ByUQkAvJ.js";import{n as c,t as l}from"./theme-D8kZCOzM.js";import{t as u}from"./skeleton-Bu3tgNcW.js";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p={system:`System Preference`,light:`Light Mode`,dark:`Dark Mode`,"light-high-contrast":`Light High Contrast`,"dark-high-contrast":`Dark High Contrast`},m=({className:t,style:n})=>{let[l,u]=a();return d(s.RadioGroup,{"data-slot":`theme-dropdown-menu-radio-group`,className:t,style:n,value:l,onValueChange:e=>{o(e)&&u(e)},children:i.map(t=>f(s.RadioItem,{value:r(t),children:[d(e,{svg:d(c,{theme:t})}),p[t]]},t))})};m.displayName=`ThemeDropdownMenuRadioGroup`;const h=({appearance:e,className:r,contentProps:i,label:a=`Change Theme`,style:o})=>f(s.Root,{children:[d(s.Trigger,{asChild:!0,children:d(t,{type:`button`,appearance:e??`ghost`,className:r,"data-slot":`theme-switcher`,icon:d(n,{fallback:d(u,{className:`rounded-full size-5`}),children:()=>d(l,{className:`size-5`})}),label:a,style:o})}),d(s.Content,{...i,children:d(m,{})})]});h.displayName=`ThemeSwitcher`;export{m as ThemeDropdownMenuRadioGroup,h as ThemeSwitcher};