@ngrok/mantle 0.79.3 → 0.80.0

package/dist/index-B8mIWKIU.d.ts

@@ -0,0 +1,211 @@
+import { ComponentProps } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/components/popover/popover.d.ts
+type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
+  /**
+   * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.
+   *
+   * By default, a `Popover`'s content width is responsive with a default
+   * preferred width: the maximum width of the `PopoverContent`
+   *
+   * @default `max-w-72`
+   */
+  preferredWidth?: `max-w-${string}`;
+};
+/**
+ * The content to render inside the popover.
+ *
+ * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/popover#popovercontent
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Open Popover
+ *     </Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <p>This is the popover content.</p>
+ *   </Popover.Content>
+ * </Popover.Root>
+ * ```
+ */
+declare const Content: {
+  ({ align, className, onClick, preferredWidth, ref, sideOffset, ...props }: PopoverContentProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A floating overlay that displays rich content in a portal, triggered by a button.
+ *
+ * Use `Popover` for INTERACTIVE overlay content — small forms, settings
+ * menus, color pickers, action lists. The user opens it deliberately
+ * (click/tap or focus + space). For short, non-interactive label hints
+ * triggered by hover, use `Tooltip` instead. For non-essential preview
+ * content shown on hover, use `HoverCard`.
+ *
+ * `Popover` is a non-modal dialog by default: focus moves into the content
+ * when it opens, `Escape` closes and returns focus to the trigger, clicking
+ * outside dismisses, and the page (body and any scroll containers) continues
+ * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside
+ * the content, block interaction with the rest of the page, and lock body
+ * scroll while the popover is open.
+ *
+ * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/popover
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ *
+ * @example
+ * Composition:
+ * ```
+ * Popover.Root
+ * ├── Popover.Trigger
+ * ├── Popover.Anchor
+ * └── Popover.Content
+ *     └── Popover.Close
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Open Popover
+ *     </Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <p>This is the popover content.</p>
+ *   </Popover.Content>
+ * </Popover.Root>
+ * ```
+ */
+declare const Popover: {
+  /**
+   * The root, stateful component that manages the open/closed state of the popover.
+   *
+   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popoverroot
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Open popover</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <p>This is the popover content.</p>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Root: import("react").FC<PopoverPrimitive.PopoverProps>;
+  /**
+   * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popoveranchor
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Anchor asChild>
+   *     <div>Position relative to this element</div>
+   *   </Popover.Anchor>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Open Popover</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <p>This popover is positioned relative to the anchor.</p>
+   *     <Popover.Close asChild>
+   *       <Button type="button" appearance="outlined" intent="neutral">Close</Button>
+   *     </Popover.Close>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * A button that closes an open popover. Can be placed anywhere within the popover content.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popoverclose
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Settings</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <div className="flex items-center justify-between">
+   *       <Text>Settings Panel</Text>
+   *       <Popover.Close asChild>
+   *         <IconButton type="button" appearance="ghost" intent="neutral" size="sm" label="Close" icon={<XIcon />} />
+   *       </Popover.Close>
+   *     </div>
+   *     <Text>Configure your preferences here.</Text>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Close: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+  /**
+   * The content to render inside the popover. Appears in a portal with rich styling and animations.
+   *
+   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popovercontent
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">Show Info</Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content side="top" align="center">
+   *     <div className="space-y-2">
+   *       <Text weight="strong">Additional Information</Text>
+   *       <Text>This is the content inside the popover.</Text>
+   *       <Button type="button" appearance="filled" intent="neutral" size="sm">Action</Button>
+   *     </div>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * The trigger button that opens the popover when clicked or focused.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/popover#popovertrigger
+   *
+   * @example
+   * ```tsx
+   * <Popover.Root>
+   *   <Popover.Trigger asChild>
+   *     <Button type="button" appearance="outlined" intent="neutral">
+   *       Options
+   *     </Button>
+   *   </Popover.Trigger>
+   *   <Popover.Content>
+   *     <div className="space-y-2">
+   *       <Button type="button" appearance="ghost" intent="neutral">Edit</Button>
+   *       <Button type="button" appearance="ghost" intent="danger">Delete</Button>
+   *     </div>
+   *   </Popover.Content>
+   * </Popover.Root>
+   * ```
+   */
+  readonly Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Popover as t };

package/dist/{index-Rv8RL7xy.d.ts → index-BtwKJTLq.d.ts}

@@ -20,6 +20,6 @@ type Props = ComponentProps<typeof Slot> & WithDataSlot;
  * </Slot>
  * ```
  */
-declare const Slot$1: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const Slot$1: ({ children, className, "data-slot": dataSlot, ref, ...props }: Props) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 //#endregion
 export { Slot$1 as t };

package/dist/{index-BSAizFod.d.ts → index-C2jj8U4a.d.ts}

@@ -1,7 +1,7 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { r as VariantProps } from "./index-D47aqlpz.js";
-import "./button-DcXOWUYo.js";
-import "./icon-button-BvQvT790.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { r as VariantProps } from "./index-DA4ig3gj.js";
+import "./button-BPMwa2jN.js";
+import "./icon-button-C1AfGnQx.js";
 import { ComponentProps } from "react";
 //#region src/components/button/button-group.d.ts
 declare const buttonGroupVariants: (props?: ({
@@ -26,6 +26,6 @@ type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants & WithAsChil
  * </ButtonGroup>
  * ```
  */
-declare const ButtonGroup: import("react").ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const ButtonGroup: ({ appearance, asChild, className, children, ref, ...props }: ButtonGroupProps) => import("react").JSX.Element;
 //#endregion
 export { ButtonGroupProps as n, ButtonGroup as t };

package/dist/index-CdPXa9h1.d.ts

@@ -0,0 +1 @@
+import "./dropdown-menu-CoyozLzy.js";

package/dist/{index-D47aqlpz.d.ts → index-DA4ig3gj.d.ts}

@@ -1,4 +1,4 @@
-import "./as-child-CYEVu1WY.js";
+import "./as-child-D23mGo4f.js";
 import "./with-style-props-Dq5Vntqy.js";
 import { CSSProperties } from "react";
 import { VariantProps } from "class-variance-authority";

package/dist/input-CVyAVbim.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-CGgMKpJg.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{a as i,r as a}from"./validation-Bpptk_9t.js";import{createContext as o,useContext as s,useMemo as c,useRef as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{CheckCircleIcon as f}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as p}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as m}from"@phosphor-icons/react/WarningDiamond";const h=({children:e,className:t,ref:n,...r})=>{let i=!!e,a=l(null);return i?u(v,{className:t,forwardedRef:n,innerRef:a,...r,children:e}):u(v,{...r,className:t,forwardedRef:n,innerRef:a,children:u(g,{...r})})},g=({"aria-invalid":n,className:r,ref:o,validation:c,...l})=>{let{"aria-invalid":d,forwardedRef:f,innerRef:p,validation:m,...h}=s(_),g=i(),{ariaInvalid:v,validation:y}=a({"aria-invalid":d??n,validation:m??c??g}),b={...h,...l,type:l.type??h.type??`text`};return u(`input`,{"aria-invalid":v,"data-slot":`input-capture`,"data-validation":y,className:t(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:e(o,f,p),...b})},_=o({validation:void 0,innerRef:{current:null}}),v=({"aria-invalid":e,"aria-disabled":n,"data-slot":r=`input`,children:o,className:s,disabled:l,forwardedRef:f,innerRef:p,style:m,type:h,validation:g,...v})=>{let b=i(),{validation:x}=a({"aria-invalid":e,validation:g??b}),S=c(()=>({"aria-invalid":e,"aria-disabled":n,disabled:l,type:h,validation:g,...v,forwardedRef:f,innerRef:p}),[e,n,l,h,g,v,f,p]);return u(_.Provider,{value:S,children:d(`div`,{role:`none`,"data-slot":r,"data-disabled":(l??n)||void 0,"data-validation":x||void 0,className:t(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent`,`data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,s),onMouseDown:e=>{e.target!==p?.current&&e.preventDefault()},onClick:()=>{p?.current?.focus()},onKeyDown:()=>{p?.current!==document.activeElement&&p?.current?.focus()},style:m,children:[o,u(y,{name:v.name,validation:x})]})})},y=({name:e,validation:t})=>{switch(t){case`error`:return d(`div`,{className:`text-danger-600 order-last select-none`,children:[u(`span`,{className:`sr-only`,children:r(`The value entered for the`,e,`input has failed validation.`)}),u(n,{svg:u(p,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return u(`div`,{className:`text-success-600 order-last select-none`,children:u(n,{svg:u(f,{weight:`fill`})})});case`warning`:return u(`div`,{className:`text-warning-600 order-last select-none`,children:u(n,{svg:u(m,{weight:`fill`})})});default:return null}};export{g as n,h as t};

package/dist/{types-C19IR7jf.d.ts → input-DV9M6K4v.d.ts}

@@ -1,4 +1,5 @@
-import "./validation-7QeiTFwl.js";
+import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { ComponentProps, PropsWithChildren } from "react";
 //#region src/components/input/types.d.ts
 /**
  * (Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what,
@@ -45,4 +46,43 @@ type WithInputType = {
   type?: InputType;
 };
 //#endregion
-export { WithInputType as i, InputType as n, WithAutoComplete as r, AutoComplete as t };
+//#region src/components/input/input.d.ts
+type BaseProps = WithAutoComplete & WithInputType & WithValidation;
+/**
+ * The props for the `Input` component.
+ */
+type InputProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & BaseProps & PropsWithChildren;
+/**
+ * Used to create interactive controls for web-based forms in order to accept data from the user.
+ * A versatile input element that supports various types, validation states, and can be composed with other elements.
+ *
+ * @see https://mantle.ngrok.com/components/forms/input
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   validation="success"
+ * />
+ * ```
+ */
+declare const Input: ({ children, className, ref, ...props }: InputProps) => import("react").JSX.Element;
+type InputCaptureProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & BaseProps;
+/**
+ * The actual <input /> element that captures user input.
+ * Used internally by Input component or when you need direct control over the input element.
+ *
+ * @see https://mantle.ngrok.com/components/forms/input
+ *
+ * @example
+ * ```tsx
+ * <Input>
+ *   <InputCapture />
+ *   <Icon svg={<SearchIcon />} />
+ * </Input>
+ * ```
+ */
+declare const InputCapture: ({ "aria-invalid": _ariaInvalid, className, ref, validation: _validation, ...restProps }: InputCaptureProps) => import("react").JSX.Element;
+//#endregion
+export { AutoComplete as a, WithInputType as c, InputProps as i, InputCapture as n, InputType as o, InputCaptureProps as r, WithAutoComplete as s, Input as t };

package/dist/input.d.ts

@@ -1,49 +1,8 @@
 import { o as WithValidation, r as Validation } from "./validation-7QeiTFwl.js";
-import { i as WithInputType, n as InputType, r as WithAutoComplete, t as AutoComplete } from "./types-C19IR7jf.js";
-import { InputHTMLAttributes, PropsWithChildren } from "react";
-//#region src/components/input/input.d.ts
-type BaseProps = WithAutoComplete & WithInputType & WithValidation;
-/**
- * The props for the `Input` component.
- */
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps & PropsWithChildren;
-/**
- * Used to create interactive controls for web-based forms in order to accept data from the user.
- * A versatile input element that supports various types, validation states, and can be composed with other elements.
- *
- * @see https://mantle.ngrok.com/components/forms/input
- *
- * @example
- * ```tsx
- * <Input
- *   type="email"
- *   placeholder="Enter your email"
- *   validation="success"
- * />
- * ```
- */
-declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
-  children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
-type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
-/**
- * The actual <input /> element that captures user input.
- * Used internally by Input component or when you need direct control over the input element.
- *
- * @see https://mantle.ngrok.com/components/forms/input
- *
- * @example
- * ```tsx
- * <Input>
- *   <InputCapture />
- *   <Icon svg={<SearchIcon />} />
- * </Input>
- * ```
- */
-declare const InputCapture: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & import("react").RefAttributes<HTMLInputElement>>;
-//#endregion
+import { a as AutoComplete, c as WithInputType, i as InputProps, n as InputCapture, o as InputType, r as InputCaptureProps, s as WithAutoComplete, t as Input } from "./input-DV9M6K4v.js";
+import { ComponentProps } from "react";
 //#region src/components/input/password-input.d.ts
-type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
+type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
   /**
    * Callback for when the visibility of the password value changes.
    */
@@ -112,17 +71,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * }
  * ```
  */
-declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
-  /**
-   * Callback for when the visibility of the password value changes.
-   */
-  onValueVisibilityChange?: (visible: boolean) => void;
-  /**
-   * Show/hide the password value as a controlled state.
-   * @default false
-   */
-  showValue?: boolean;
-} & import("react").RefAttributes<HTMLInputElement>>;
+declare const PasswordInput: ({ onValueVisibilityChange, ref, showValue, ...props }: PasswordInputProps) => import("react").JSX.Element;
 //#endregion
 //#region src/components/input/is-input.d.ts
 /**

package/dist/input.js

@@ -1 +1 @@
-import{t as e}from"./icon-CDtYjF_H.js";import{n as t,t as n}from"./input-Ct1YOqSy.js";import{t as r}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as i}from"./is-input-CXmS0OFN.js";import{forwardRef as a,useEffect as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";import{flushSync as p}from"react-dom";const m=a(({onValueVisibilityChange:i,showValue:a=!1,...m},h)=>{let[g,_]=c(a),v=g?`text`:`password`,y=g?d:f,b=s(null),x=s(null);return o(()=>{_(a)},[a]),u(n,{"data-slot":`password-input`,type:v,ref:h,...m,children:[l(t,{}),u(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;p(()=>{_(e)}),i?.(e);let t=b.current;t&&!r()&&(x.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),x.current.onfinish=()=>{x.current=null})},children:[u(`span`,{className:`sr-only`,children:[`Turn password visibility `,g?`off`:`on`]}),l(e,{ref:b,svg:l(y,{"aria-hidden":!0})})]})]})});m.displayName=`PasswordInput`;export{n as Input,t as InputCapture,m as PasswordInput,i as isInput};
+import{t as e}from"./icon-CGgMKpJg.js";import{n as t,t as n}from"./input-CVyAVbim.js";import{t as r}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as i}from"./is-input-CXmS0OFN.js";import{useEffect as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{EyeIcon as u}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as d}from"@phosphor-icons/react/EyeClosed";import{flushSync as f}from"react-dom";const p=({onValueVisibilityChange:i,ref:p,showValue:m=!1,...h})=>{let[g,_]=s(m),v=g?`text`:`password`,y=g?u:d,b=o(null),x=o(null);return a(()=>{_(m)},[m]),l(n,{"data-slot":`password-input`,type:v,ref:p,...h,children:[c(t,{}),l(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;f(()=>{_(e)}),i?.(e);let t=b.current;t&&!r()&&(x.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),x.current.onfinish=()=>{x.current=null})},children:[l(`span`,{className:`sr-only`,children:[`Turn password visibility `,g?`off`:`on`]}),c(e,{ref:b,svg:c(y,{"aria-hidden":!0})})]})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};

package/dist/{label-v2-bv98k.d.ts → label-C6YH9skg.d.ts}

@@ -1,4 +1,11 @@
+import { ComponentProps } from "react";
 //#region src/components/label/label.d.ts
+type LabelProps = ComponentProps<"label"> & {
+  /**
+   * If set, the label will appear disabled.
+   */
+  disabled?: boolean;
+};
 /**
  * A caption for a form control — input, checkbox, radio, switch, select.
  * Renders a native `<label>`. Pair every form control with a `Label` so the
@@ -59,11 +66,6 @@
  * </Label>
  * ```
  */
-declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-  /**
-   * If set, the label will appear disabled.
-   */
-  disabled?: boolean;
-} & import("react").RefAttributes<HTMLLabelElement>>;
+declare const Label: ({ "aria-disabled": _ariaDisabled, children, className, disabled, onMouseDown, ref, ...props }: LabelProps) => import("react").JSX.Element;
 //#endregion
 export { Label as t };

package/dist/label-D-D11mlp.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";const n=({"aria-disabled":n,children:r,className:i,disabled:a,onMouseDown:o,ref:s,...c})=>t(`label`,{"aria-disabled":a??n,"data-slot":`label`,className:e(`text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans`,`[:where(&:not(:has(input,textarea,select,button,[contenteditable])))]:font-medium`,i),onMouseDown:e=>{e.target.closest(`button, input, select, textarea`)||(o?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault())},ref:s,...c,children:r});export{n as t};

package/dist/label.d.ts

@@ -1,2 +1,2 @@
-import { t as Label } from "./label-v2-bv98k.js";
+import { t as Label } from "./label-C6YH9skg.js";
 export { Label };

package/dist/label.js

@@ -1 +1 @@
-import{t as e}from"./label-BMlHW_2D.js";export{e as Label};
+import{t as e}from"./label-D-D11mlp.js";export{e as Label};

package/dist/list.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 //#region src/components/list/primitive.d.ts
 /**
@@ -113,6 +113,38 @@ type VirtualRootProps = ListRootProps$1 & {
  * ```
  */
 type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
+/**
+ * The scrollable container for a `List`: a `role="list"` of clickable items
+ * inside the bordered, rounded `bg-popover` viewport (styled after the
+ * `MultiSelect` popover). Renders **every** item — the non-virtualized default.
+ * Compose `List.Item` children directly. **Bound its height**
+ * (`max-h-*`, `h-*`, or `min-h-0 flex-1`) so long lists scroll.
+ *
+ * Keyboard: items keep their native tab order, and `ArrowUp` / `ArrowDown` /
+ * `Home` / `End` also move focus between items (skipping disabled ones); the
+ * focused item lights up with the hover tint rather than a focus ring.
+ *
+ * For very long lists, swap in `List.VirtualRoot`, which windows the same
+ * `Item` children — the call site is otherwise identical.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   {accounts.map((account) => (
+ *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+ *       <List.ItemTitle>{account.name}</List.ItemTitle>
+ *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+ *     </List.Item>
+ *   ))}
+ * </List.Root>
+ * ```
+ */
+declare const Root: {
+  (props: ListRootProps): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * Props for `List.VirtualRoot` — the internal list primitive's
  * `VirtualRoot` props (viewport props plus `estimateItemHeight` / `overscan`),
@@ -131,6 +163,32 @@ type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId"
  * ```
  */
 type ListVirtualRootProps = Omit<VirtualRootProps, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
+/**
+ * The windowed counterpart to `List.Root`: renders only the visible slice
+ * of its `List.Item` children via `@tanstack/react-virtual`. Authored
+ * identically to `Root` — same `Item` children — so opting into
+ * virtualization never changes the call site. Reach for it only when a list is
+ * long enough to need it; **bound its height** so the virtualizer has a
+ * viewport to measure.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <List.VirtualRoot aria-label="Your accounts" className="max-h-80">
+ *   {accounts.map((account) => (
+ *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+ *       <List.ItemTitle>{account.name}</List.ItemTitle>
+ *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+ *     </List.Item>
+ *   ))}
+ * </List.VirtualRoot>
+ * ```
+ */
+declare const VirtualRoot: {
+  (props: ListVirtualRootProps): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * Props for `List.Item`. Extends `<button>` props (minus `type`, which is fixed
  * to `"button"`) with `asChild` and the optional `current` accent.
@@ -155,6 +213,92 @@ type ListItemProps = Omit<ComponentProps<"button">, "type"> & WithAsChild & {
    */
   current?: boolean;
 };
+/**
+ * A single clickable item in a `List`. Sits inside a `role="listitem"` pill
+ * from the internal list primitive; renders a `<button>` by default (with
+ * `onClick`), or your own element via `asChild` — e.g. an `<a>` for navigation
+ * (account switching, SSO selection). The button/link fills its pill, so
+ * clicking anywhere on the item triggers it, and the pill's hover / `current`
+ * accent is provided by the enclosing listitem.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * // Action items.
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   {accounts.map((account) => (
+ *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+ *       <List.ItemTitle>{account.name}</List.ItemTitle>
+ *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+ *     </List.Item>
+ *   ))}
+ * </List.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Navigation items via asChild.
+ * <List.Root aria-label="SSO providers" className="max-h-80">
+ *   {providers.map((provider) => (
+ *     <List.Item key={provider.id} asChild>
+ *       <a href={`/sso/${provider.id}`}>
+ *         <List.ItemTitle>{provider.name}</List.ItemTitle>
+ *         <List.ItemDescription>{provider.domain}</List.ItemDescription>
+ *       </a>
+ *     </List.Item>
+ *   ))}
+ * </List.Root>
+ * ```
+ */
+declare const Item: {
+  ({ asChild, className, current, disabled, onClick, ref, ...props }: ListItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The emphasized title line inside a `List.Item`, in the stronger foreground
+ * color. A styled `<span>`.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   {accounts.map((account) => (
+ *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+ *       <List.ItemTitle>{account.name}</List.ItemTitle>
+ *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+ *     </List.Item>
+ *   ))}
+ * </List.Root>
+ * ```
+ */
+declare const ItemTitle: {
+  ({ className, ref, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The de-emphasized sub-line inside a `List.Item`, in the muted body color. A
+ * styled `<span>`.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   {accounts.map((account) => (
+ *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+ *       <List.ItemTitle>{account.name}</List.ItemTitle>
+ *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+ *     </List.Item>
+ *   ))}
+ * </List.Root>
+ * ```
+ */
+declare const ItemDescription: {
+  ({ className, ref, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A scrollable, optionally-virtualized list of clickable items — the action /
  * navigation counterpart to `SelectableList` (e.g. an account switcher or SSO
@@ -215,7 +359,7 @@ declare const List: {
    * </List.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<ListRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * The virtualized container — windows the same `Item` children. Opt in for
    * long lists; authored identically to `Root`.
@@ -234,7 +378,7 @@ declare const List: {
    * </List.VirtualRoot>
    * ```
    */
-  readonly VirtualRoot: import("react").ForwardRefExoticComponent<Omit<ListVirtualRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly VirtualRoot: typeof VirtualRoot;
   /**
    * A clickable item — a `<button>` by default, or your own element via
    * `asChild` (e.g. an `<a>`). Optional `current` gives the accent treatment.
@@ -253,7 +397,7 @@ declare const List: {
    * </List.Root>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Item: typeof Item;
   /**
    * Emphasized title line inside a `List.Item`.
    *
@@ -271,7 +415,7 @@ declare const List: {
    * </List.Root>
    * ```
    */
-  readonly ItemTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly ItemTitle: typeof ItemTitle;
   /**
    * De-emphasized sub-line inside a `List.Item`.
    *
@@ -289,7 +433,7 @@ declare const List: {
    * </List.Root>
    * ```
    */
-  readonly ItemDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly ItemDescription: typeof ItemDescription;
 };
 //#endregion
 export { List, type ListItemProps, type ListRootProps, type ListVirtualRootProps };

package/dist/list.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{n,r,t as i}from"./virtual-DZMBu7Ch.js";import{forwardRef as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=a((e,t)=>o(r,{ref:t,semantics:`list`,...e}));s.displayName=`ListRoot`;const c=a((e,t)=>o(i,{ref:t,semantics:`list`,...e}));c.displayName=`ListVirtualRoot`;const l=a(({asChild:r,className:i,current:a,disabled:s,onClick:c,...l},u)=>o(n,{selected:a,disabled:s,children:o(r?t:`button`,{ref:u,"data-slot":`list-item-control`,"aria-current":a||void 0,...r?{"aria-disabled":s||void 0,tabIndex:s?-1:void 0}:{type:`button`,disabled:s},onClick:e=>{if(r&&s){e.preventDefault(),e.stopPropagation();return}c?.(e)},className:e(`flex w-full cursor-pointer flex-col gap-0.5 rounded-md bg-transparent px-2 py-1.5 text-left text-sm`,`disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:pointer-events-none`,`focus-visible:outline-hidden`,i),...l,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:l.onClickCapture})}));l.displayName=`ListItem`;const u=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...n}));u.displayName=`ListItemTitle`;const d=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...n}));d.displayName=`ListItemDescription`;const f={Root:s,VirtualRoot:c,Item:l,ItemTitle:u,ItemDescription:d};export{f as List};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{n,r,t as i}from"./virtual-UrzmaSQm.js";import{jsx as a}from"react/jsx-runtime";const o=e=>a(r,{semantics:`list`,...e});o.displayName=`ListRoot`;const s=e=>a(i,{semantics:`list`,...e});s.displayName=`ListVirtualRoot`;const c=({asChild:r,className:i,current:o,disabled:s,onClick:c,ref:l,...u})=>a(n,{selected:o,disabled:s,children:a(r?t:`button`,{ref:l,"data-slot":`list-item-control`,"aria-current":o||void 0,...r?{"aria-disabled":s||void 0,tabIndex:s?-1:void 0}:{type:`button`,disabled:s},onClick:e=>{if(r&&s){e.preventDefault(),e.stopPropagation();return}c?.(e)},className:e(`flex w-full cursor-pointer flex-col gap-0.5 rounded-md bg-transparent px-2 py-1.5 text-left text-sm`,`disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:pointer-events-none`,`focus-visible:outline-hidden`,i),...u,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:u.onClickCapture})});c.displayName=`ListItem`;const l=({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...r});l.displayName=`ListItemTitle`;const u=({className:t,ref:n,...r})=>a(`span`,{ref:n,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...r});u.displayName=`ListItemDescription`;const d={Root:o,VirtualRoot:s,Item:c,ItemTitle:l,ItemDescription:u};export{d as List};