@ngrok/mantle 0.80.0 → 0.81.1

package/dist/switch.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";
 import { Root } from "@radix-ui/react-switch";
 //#region src/components/switch/switch.d.ts

package/dist/switch.js

@@ -1 +1 @@
-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{jsx as a}from"react/jsx-runtime";import{Root as o,Thumb as s}from"@radix-ui/react-switch";const c=({"aria-invalid":c,"aria-readonly":l,className:u,readOnly:d,onClick:f,ref:p,validation:m,...h})=>{let g=t(d??l),_=r(),{ariaInvalid:v,validation:y}=i({"aria-invalid":c,validation:m??_});return a(o,{"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:p,...h,children:a(s,{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`)})})};export{c 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"./field-Bpptk_9t.js";import{jsx as a}from"react/jsx-runtime";import{Root as o,Thumb as s}from"@radix-ui/react-switch";const c=({"aria-invalid":c,"aria-readonly":l,className:u,readOnly:d,onClick:f,ref:p,validation:m,...h})=>{let g=t(d??l),_=r(),{ariaInvalid:v,validation:y}=i({"aria-invalid":c,validation:m??_});return a(o,{"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:p,...h,children:a(s,{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`)})})};export{c as Switch};

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-DUSvU_Jw.d.ts → table-CZBYEmyK.d.ts}

@@ -42,10 +42,7 @@ import { ComponentProps } from "react";
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tableroot
  */
-declare const Root: {
-  ({ children, className, ref, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Root: ({ children, className, ref, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 /**
  * The `<Table.Element>` is a structured way to display data in rows and columns. The API
  * matches the HTML `<table>` element 1:1.
@@ -111,10 +108,7 @@ declare const Root: {
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tableelement
  */
-declare const Element: {
-  ({ children, className, ref, ...props }: ComponentProps<"table">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Element: ({ children, className, ref, ...props }: ComponentProps<"table">) => import("react").JSX.Element;
 /**
  * The `<Table.Head>` is a container for the table's column headers.
  * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head
@@ -160,12 +154,9 @@ declare const Element: {
  * </Table.Root>
  * ```
  *
- * @see https://mantle.ngrok.com/components/data-display/table#tableheader
+ * @see https://mantle.ngrok.com/components/data-display/table#tablehead
  */
-declare const Head: {
-  ({ children, className, ref, ...props }: ComponentProps<"thead">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Head: ({ children, className, ref, ...props }: ComponentProps<"thead">) => import("react").JSX.Element;
 /**
  * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they
  * comprise the body of a table's (main) data.
@@ -211,10 +202,7 @@ declare const Head: {
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tablebody
  */
-declare const Body: {
-  ({ children, className, ref, ...props }: ComponentProps<"tbody">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Body: ({ children, className, ref, ...props }: ComponentProps<"tbody">) => import("react").JSX.Element;
 /**
  * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they
  * comprise the foot of a table with information about the table's columns. This
@@ -262,10 +250,7 @@ declare const Body: {
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tablefoot
  */
-declare const Foot: {
-  ({ children, className, ref, ...props }: ComponentProps<"tfoot">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Foot: ({ children, className, ref, ...props }: ComponentProps<"tfoot">) => import("react").JSX.Element;
 /**
  * The `<Table.Row>` defines a row of cells in a table. The row's cells can then
  * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.
@@ -310,10 +295,7 @@ declare const Foot: {
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tablerow
  */
-declare const Row: {
-  ({ children, className, ref, ...props }: ComponentProps<"tr">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Row: ({ children, className, ref, ...props }: ComponentProps<"tr">) => import("react").JSX.Element;
 /**
  * The `<Table.Header>` defines a cell as the header of a group of table cells
  * and may be used as a child of a `<Table.Row>`. The exact nature of this group
@@ -360,10 +342,7 @@ declare const Row: {
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tableheader
  */
-declare const Header: {
-  ({ children, className, ref, ...props }: ComponentProps<"th">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Header: ({ children, className, ref, ...props }: ComponentProps<"th">) => import("react").JSX.Element;
 /**
  * The `<Table.Cell>` defines a cell of a table that contains data and may be
  * used as a child of a `<Table.Row>`.
@@ -408,10 +387,7 @@ declare const Header: {
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tablecell
  */
-declare const Cell: {
-  ({ children, className, ref, ...props }: ComponentProps<"td">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Cell: ({ children, className, ref, ...props }: ComponentProps<"td">) => import("react").JSX.Element;
 /**
  * The optional `<Table.Caption>` specifies the caption (or title) of a table,
  * providing the table an accessible description.
@@ -456,10 +432,7 @@ declare const Cell: {
  *
  * @see https://mantle.ngrok.com/components/data-display/table#tablecaption
  */
-declare const Caption: {
-  ({ children, className, ref, ...props }: ComponentProps<"caption">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Caption: ({ children, className, ref, ...props }: ComponentProps<"caption">) => import("react").JSX.Element;
 /**
  * Use `Table` for STATIC, layout-driven tabular data — read-only data dumps,
  * simple key/value displays, plain markup tables. The API matches the HTML
@@ -717,7 +690,7 @@ declare const Table: {
   /**
    * The head section of a table. Contains the table's column headers information.
    *
-   * @see https://mantle.ngrok.com/components/data-display/table#tableheader
+   * @see https://mantle.ngrok.com/components/data-display/table#tablehead
    *
    * @example
    * ```tsx

package/dist/table.d.ts

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

package/dist/table.js

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

package/dist/tabs.d.ts

@@ -23,17 +23,14 @@ import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
  * </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;
-  displayName: string;
-};
+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.
@@ -67,19 +64,16 @@ declare const Root$1: {
  * </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;
-  displayName: string;
-};
+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.
@@ -100,10 +94,7 @@ type TabsTriggerProps = ComponentProps<typeof Trigger>;
  * </Tabs.Root>
  * ```
  */
-declare const Trigger$1: {
-  ({ "aria-disabled": _ariaDisabled, asChild, children, className, disabled: _disabled, ref, ...props }: TabsTriggerProps): import("react").JSX.Element;
-  displayName: string;
-};
+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.
@@ -122,10 +113,7 @@ declare const Trigger$1: {
  * </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.
@@ -148,10 +136,7 @@ declare const Badge: {
  * </Tabs.Root>
  * ```
  */
-declare const Content$1: {
-  ({ className, ...props }: ComponentProps<typeof Content>): import("react").JSX.Element;
-  displayName: string;
-};
+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.

package/dist/tabs.js

@@ -1 +1 @@
-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})})};C.displayName=`Tabs`;const 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})};T.displayName=`TabsList`;const 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=({"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]})};k.displayName=`TabsTrigger`;const A=({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});A.displayName=`TabBadge`;const j=({className:e,...n})=>h(v,{"data-slot":`tabs-content`,className:t(`focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4`,e),...n});j.displayName=`TabsContent`;const M={Root:C,Content:j,List:T,Trigger:k,Badge:A};export{M 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 & {
@@ -30,4 +30,4 @@ type Props = ComponentProps<"textarea"> & WithValidation & {
  */
 declare const TextArea: ({ appearance, "aria-invalid": _ariaInvalid, className, onDragEnter, onDragLeave, onDropCapture, ref, validation: _validation, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { TextArea };
+export { TextArea, type Props as TextAreaProps };

package/dist/text-area.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{a as n,r}from"./validation-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};
+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/{themes-CYNpplwN.d.ts → theme-FbfjYiD3.d.ts}

@@ -1,34 +1,50 @@
 //#region src/components/theme/themes.d.ts
 /**
  * resolvedThemes is a tuple of valid themes that have been resolved from "system" to a specific theme.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare const resolvedThemes: readonly ["light", "dark", "light-high-contrast", "dark-high-contrast"];
 /**
  * ResolvedTheme is a type that represents a theme that has been resolved from "system" to a specific theme.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 type ResolvedTheme = (typeof resolvedThemes)[number];
 /**
  * themes is a tuple of valid themes.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare const themes: readonly ["system", "light", "dark", "light-high-contrast", "dark-high-contrast"];
 /**
  * Theme is a string literal type that represents a valid theme.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 type Theme = (typeof themes)[number];
 /**
  * $theme is a helper which translates the Theme type into a string literal type.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare const $theme: <T extends Theme = Theme>(value: T) => T;
 /**
  * Type predicate that checks if a value is a valid theme.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare function isTheme(value: unknown): value is Theme;
 /**
  * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare const $resolvedTheme: <T extends ResolvedTheme = ResolvedTheme>(value: T) => T;
 /**
  * Type predicate that checks if a value is a valid resolved theme.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare function isResolvedTheme(value: unknown): value is ResolvedTheme;
 //#endregion

package/dist/theme-switcher.d.ts

@@ -1,8 +1,8 @@
 import { t as WithStyleProps } from "./with-style-props-Dq5Vntqy.js";
-import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-C1AfGnQx.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-CoyozLzy.js";
-import "./index-CdPXa9h1.js";
+import { t as DropdownMenu } from "./dropdown-menu-D6pMAY7I.js";
+import "./dropdown-menu-BbbQuae2.js";
 import { ComponentProps } from "react";
 //#region src/components/theme-switcher/theme-switcher.d.ts
 /**
@@ -77,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
@@ -124,10 +121,7 @@ type ThemeSwitcherTriggerProps = Omit<IconButtonProps, "appearance" | "asChild"
  * </ThemeSwitcher.Root>
  * ```
  */
-declare const Trigger: {
-  ({ appearance, "data-slot": dataSlot, disabled, label, ref, ...props }: ThemeSwitcherTriggerProps): import("react").JSX.Element;
-  displayName: string;
-};
+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
@@ -165,10 +159,7 @@ type ThemeSwitcherContentProps = ComponentProps<typeof DropdownMenu.Content> & W
  * </ThemeSwitcher.Content>
  * ```
  */
-declare const Content: {
-  ({ children, "data-slot": dataSlot, ...props }: ThemeSwitcherContentProps): import("react").JSX.Element;
-  displayName: string;
-};
+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

package/dist/theme-switcher.js

@@ -1 +1 @@
-import{t as e}from"./icon-CGgMKpJg.js";import{n as t}from"./slot-CDk0Bb9z.js";import{t as n}from"./icon-button-DiOhreJD.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-BftkIiZn.js";import{t as c}from"./dropdown-menu-CSCDdA3K.js";import{n as l,t as u}from"./theme-wVnzzx2F.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]=o();return f(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=>p(c.RadioItem,{value:i(t),children:[f(e,{svg:f(l,{theme:t})}),m[t]]},t))})},g=e=>f(c.Root,{...e});g.displayName=`ThemeSwitcher`;const _=({appearance:e=`ghost`,"data-slot":i,disabled:a,label:o=`Change Theme`,ref:s,...l})=>f(c.Trigger,{asChild:!0,disabled:a,children:f(n,{ref:s,appearance:e,disabled:a,"data-slot":t(i,`theme-switcher-trigger`),intent:`neutral`,icon:f(r,{fallback:f(d,{className:`rounded-full size-5`}),children:()=>f(u,{className:`size-5`})}),label:o,...l})});_.displayName=`ThemeSwitcherTrigger`;const v=({children:e,"data-slot":n,...r})=>f(c.Content,{"data-slot":t(n,`theme-switcher-content`),...r,children:e??f(h,{})});v.displayName=`ThemeSwitcherContent`;const y={Root:g,Trigger:_,Content:v};export{h as ThemeDropdownMenuRadioGroup,y 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,10 +1,12 @@
-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-FbfjYiD3.js";
 import { PropsWithChildren } from "react";
 //#region src/components/theme/mantle-style-sheets.d.ts
 /**
  * Browser-accessible URLs for mantle's three lazy-loaded theme stylesheets.
  *
  * Use {@link mantleStyleSheetUrls} to create this object from Vite `?url` imports.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 type MantleThemeCssUrls = {
   /**
@@ -51,8 +53,16 @@ type MantleThemeCssUrls = {
  * // In JSX:
  * <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={ssrCookie} />
  * ```
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme#mantlestylesheeturls
  */
 declare function mantleStyleSheetUrls(urls: MantleThemeCssUrls): MantleThemeCssUrls;
+/**
+ * Props for {@link MantleStyleSheets} — the three theme stylesheet URLs plus optional
+ * `forceTheme`, `ssrCookie`, and `nonce`.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme#mantlestylesheets
+ */
 type MantleStyleSheetsProps = MantleThemeCssUrls & {
   /**
    * Force a specific resolved theme's stylesheet to load unconditionally (`media="all"`),
@@ -105,6 +115,8 @@ type MantleStyleSheetsProps = MantleThemeCssUrls & {
  * Use this when you need to inline the script directly into SSR HTML outside of a React
  * context — for example, in a legacy Go service that renders the initial HTML response.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme#fixmediascriptcontent
+ *
  * @example
  * ```go
  * // In a Go template, inline script content that was pre-generated by mantle
@@ -138,6 +150,8 @@ declare function fixMediaScriptContent(forceTheme?: ResolvedTheme): string;
  * When `forceTheme` is set, only the link tag for that theme is rendered — the others are
  * omitted entirely to avoid unnecessary network requests.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme#mantlestylesheets
+ *
  * @example
  * ```tsx
  * // root.tsx
@@ -169,7 +183,7 @@ type ThemeProviderProps = PropsWithChildren;
  *
  * @example
  * ```tsx
- * <ThemeProvider defaultTheme="system" storageKey="app-theme">
+ * <ThemeProvider>
  *   <App />
  * </ThemeProvider>
  * ```
@@ -178,11 +192,15 @@ declare function ThemeProvider({ children }: ThemeProviderProps): import("react"
 /**
  * useTheme returns the current theme and a function to set the theme.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme
+ *
  * @note This function will throw an error if used outside of a ThemeProvider context tree.
  */
 declare function useTheme(): ThemeProviderState;
 /**
  * Read the theme and applied theme from the `<html>` element.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare function readThemeFromHtmlElement(): {
   appliedTheme: "dark" | "dark-high-contrast" | "light" | "light-high-contrast" | undefined;
@@ -191,12 +209,16 @@ declare function readThemeFromHtmlElement(): {
 /**
  * If the theme is "system", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.
  * This will mirror the result that gets applied to the <html> element.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare function useAppliedTheme(): "dark" | "dark-high-contrast" | "light" | "light-high-contrast";
 /**
  * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.
  * It checks cookies for a stored theme, and if none is found, it sets the default theme.
  * It also applies the correct theme to the `<html>` element based on the user's media query preferences.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  */
 declare function preventWrongThemeFlashScriptContent(): string;
 type PreventWrongThemeFlashScriptProps = {
@@ -220,6 +242,8 @@ type PreventWrongThemeFlashScriptProps = {
  *
  * Place this as early as possible in the `<head>`.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme#preventwrongthemeflashscript
+ *
  * @example
  * ```tsx
  * // entry.server.tsx — send font preloads as HTTP headers (preferred for SSR)
@@ -258,6 +282,8 @@ type UseInitialHtmlThemePropsOptions = {
 };
 /**
  * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme#useinitialhtmlthemeprops
  */
 declare function useInitialHtmlThemeProps(props?: UseInitialHtmlThemePropsOptions): InitialThemeProps;
 type GetStoredThemeOptions = {
@@ -274,6 +300,8 @@ type GetStoredThemeOptions = {
  * {@link DEFAULT_THEME}. This function never throws; malformed encodings or
  * missing cookies quietly return the default.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme
+ *
  * @example
  * getStoredTheme({ cookie: `${THEME_STORAGE_KEY}=dark; session=abc` }) // "dark"
  * @example
@@ -287,6 +315,8 @@ declare function getStoredTheme({ cookie }: GetStoredThemeOptions): Theme;
  * {@link useInitialHtmlThemeProps} without exposing the full `Cookie` header
  * (which may contain HttpOnly/session cookies) in serialized loader data.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme#extractthemecookie
+ *
  * @example
  * ```ts
  * // app/root.tsx loader
@@ -310,12 +340,16 @@ declare function extractThemeCookie(cookieHeader: string | null | undefined): st
  * The origin for the assets CDN where custom ngrok fonts and assets are hosted.
  *
  * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  * @public
  */
 declare const assetsCdnOrigin = "https://assets.ngrok.com";
 declare const coreFontNames: readonly ["roobert", "jetbrains-mono", "jetbrains-mono-italic", "family-regular", "family-italic"];
 /**
  * Named keys identifying each individual core font.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/theme
  * @public
  */
 type CoreFontName = (typeof coreFontNames)[number];
@@ -323,6 +357,8 @@ type FontPath = `/${string}` | (string & {});
 /**
  * Builds an absolute CDN URL for a given font.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme
+ *
  * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.
  *
  * @example
@@ -354,6 +390,8 @@ type PreloadFontProps = {
  * addition to) an HTML `<link>` element. Sending this as a `Link` header lets
  * the browser start the font fetch before it has parsed any HTML.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme#preloadfontlink
+ *
  * @remarks
  * For best performance, also send a `preconnect` hint to {@link assetsCdnOrigin}
  * in the same `Link` header.
@@ -378,6 +416,8 @@ declare function preloadFontLink(name: CoreFontName): string;
  * 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>`.
  *
+ * @see https://mantle.ngrok.com/components/primitives/theme#preloadfont
+ *
  * @remarks
  * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.
  *

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-BftkIiZn.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};
+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};