@ngrok/mantle 0.77.0 → 0.79.0

package/dist/alert.d.ts

@@ -1,19 +1,19 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { t as SvgAttributes } from "./types-BvUzforF.js";
-import { n as IconButtonProps } from "./icon-button-D7hs6bX2.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import "./index-D47aqlpz.js";
+import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-B7uEj1qq.js";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
-
 //#region src/components/alert/alert.d.ts
-declare const priorities: readonly ["danger", "important", "info", "success", "warning"];
-type Priority = (typeof priorities)[number];
+declare const intents: readonly ["danger", "important", "info", "success", "warning"];
+type AlertIntent = (typeof intents)[number];
 declare const appearances: readonly ["banner", "default"];
 type Appearance = (typeof appearances)[number];
 type AlertProps = ComponentProps<"div"> & {
   /**
-   * Indicates the importance or impact level of the Alert, affecting its
-   * color and styling to communicate its purpose to the user.
+   * The intent of the Alert — the status its color communicates to the user,
+   * determining the color and styling of the Alert.
    */
-  priority: Priority;
+  intent: AlertIntent;
   /**
    * Controls the visual style of the Alert.
    * - "default" provides standard rounded corners and borders.
@@ -25,21 +25,33 @@ type AlertProps = ComponentProps<"div"> & {
 };
 type AlertIconProps = Omit<SvgAttributes, "children"> & {
   /**
-   * An optional icon that renders in place of the default icon for the Alert priority.
+   * An optional icon that renders in place of the default icon for the Alert intent.
    */
   svg?: ReactNode;
 };
 type AlertDescriptionProps = ComponentProps<"div"> & WithAsChild;
-type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
+type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "appearance" | "icon" | "intent">> & {
+  /**
+   * The visual style of the dismiss button. Optional here —
+   * `Alert.DismissIconButton` defaults to `"ghost"` so the dismiss affordance
+   * stays visually quiet inside the Alert.
+   *
+   * @default "ghost"
+   */
+  appearance?: IconButtonAppearance;
   /**
    * An optional icon to render inside the dismiss button. Defaults to an X icon.
    */
   icon?: ReactNode;
 };
+declare const DismissIconButton: {
+  ({ size, type, label, appearance, className, icon, style, ...props }: AlertDismissIconButtonProps): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * Displays a callout for user attention.
  *
- * @see https://mantle.ngrok.com/components/alert
+ * @see https://mantle.ngrok.com/components/feedback/alert
  *
  * @example
  * Composition:
@@ -54,7 +66,7 @@ type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
  *
  * @example
  * ```tsx
- * <Alert priority="info">
+ * <Alert intent="info">
  *   <AlertIcon />
  *   <AlertContent>
  *     <AlertTitle>Alert Title</AlertTitle>
@@ -70,11 +82,11 @@ declare const Alert: {
   /**
    * The root container of the alert component.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertroot
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertroot
    *
    * @example
    * ```tsx
-   * <Alert.Root priority="info">
+   * <Alert.Root intent="info">
    *   <Alert.Icon />
    *   <Alert.Content>
    *     <Alert.Title>Alert Title</Alert.Title>
@@ -87,11 +99,11 @@ declare const Alert: {
   /**
    * The container for the content slot of an alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertcontent
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertcontent
    *
    * @example
    * ```tsx
-   * <Alert.Root priority="info">
+   * <Alert.Root intent="info">
    *   <Alert.Icon />
    *   <Alert.Content>
    *     <Alert.Title>Alert Title</Alert.Title>
@@ -104,11 +116,11 @@ declare const Alert: {
   /**
    * The optional description of an alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertdescription
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdescription
    *
    * @example
    * ```tsx
-   * <Alert.Root priority="info">
+   * <Alert.Root intent="info">
    *   <Alert.Icon />
    *   <Alert.Content>
    *     <Alert.Title>Alert Title</Alert.Title>
@@ -121,11 +133,11 @@ declare const Alert: {
   /**
    * An optional dismiss button that can be used to close the alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdismissiconbutton
    *
    * @example
    * ```tsx
-   * <Alert.Root priority="info">
+   * <Alert.Root intent="info">
    *   <Alert.Icon />
    *   <Alert.Content>
    *     <Alert.Title>Alert Title</Alert.Title>
@@ -135,27 +147,15 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly DismissIconButton: {
-    ({
-      size,
-      type,
-      label,
-      appearance,
-      className,
-      icon,
-      style,
-      ...props
-    }: AlertDismissIconButtonProps): import("react").JSX.Element;
-    displayName: string;
-  };
+  readonly DismissIconButton: typeof DismissIconButton;
   /**
-   * An optional icon that visually represents the priority of the Alert.
+   * An optional icon that visually represents the intent of the Alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alerticon
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
    *
    * @example
    * ```tsx
-   * <Alert.Root priority="info">
+   * <Alert.Root intent="info">
    *   <Alert.Icon />
    *   <Alert.Content>
    *     <Alert.Title>Alert Title</Alert.Title>
@@ -168,11 +168,11 @@ declare const Alert: {
   /**
    * The title of an alert.
    *
-   * @see https://mantle.ngrok.com/components/alert#alerttitle
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerttitle
    *
    * @example
    * ```tsx
-   * <Alert.Root priority="info">
+   * <Alert.Root intent="info">
    *   <Alert.Icon />
    *   <Alert.Content>
    *     <Alert.Title>Alert Title</Alert.Title>

package/dist/alert.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./icon-button-DiX9iZ9n.js";import{createContext as a,forwardRef as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";import{CheckCircleIcon as d}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as f}from"@phosphor-icons/react/Info";import{MegaphoneIcon as p}from"@phosphor-icons/react/Megaphone";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{XIcon as g}from"@phosphor-icons/react/X";import{cva as _}from"class-variance-authority";const v=a(null),y=u(g,{});function b(){let e=s(v);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const x=_(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{priority:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a]:text-danger-700 [&_a]:underline`,important:`border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a]:text-important-700 [&_a]:underline`,info:`border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a]:text-info-700 [&_a]:underline`,success:`border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a]:text-success-700 [&_a]:underline`,warning:`border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a]:text-warning-700 [&_a]:underline`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}},compoundVariants:[{priority:`danger`,appearance:`banner`,className:``},{priority:`important`,appearance:`banner`,className:``},{priority:`info`,appearance:`banner`,className:``},{priority:`success`,appearance:`banner`,className:``},{priority:`warning`,appearance:`banner`,className:``}]}),S=o(({appearance:t=`default`,className:n,priority:r,...i},a)=>{let o=c(()=>({priority:r}),[r]);return u(v.Provider,{value:o,children:u(`div`,{ref:a,"data-slot":`alert`,className:e(x({appearance:t,priority:r}),n),...i})})});S.displayName=`Alert`;const C={danger:u(m,{}),important:u(p,{mirrored:!0}),info:u(f,{}),success:u(d,{}),warning:u(h,{})},w=o(({className:n,svg:r,...i},a)=>{let o=C[b().priority];return u(t,{ref:a,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:r??o,...i})});w.displayName=`AlertIcon`;const T=o(({className:t,...n},r)=>u(`div`,{ref:r,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));T.displayName=`AlertContent`;const E=o(({asChild:t=!1,className:r,...i},a)=>u(t?n:`h5`,{ref:a,"data-slot":`alert-title`,className:e(`font-medium`,r),...i}));E.displayName=`AlertTitle`;const D=o(({asChild:t=!1,className:r,...i},a)=>u(t?n:`div`,{ref:a,"data-slot":`alert-description`,className:e(`text-sm`,r),...i}));D.displayName=`AlertDescription`;const O=e=>`var(--color-${e}-700)`,k=e=>`var(--color-${e}-800)`,A=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,j=({size:t=`sm`,type:n=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=y,style:l,...d})=>{let f=b();return u(i,{appearance:o,icon:c,label:a,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,s),type:n,style:r({...l,"--alert-dismiss-icon-color":O(f.priority),"--alert-dismiss-icon-hover-color":k(f.priority),"--alert-dismiss-hover-bg":A(f.priority)}),...d})};j.displayName=`AlertDismissIconButton`;const M={Root:S,Content:T,Description:D,DismissIconButton:j,Icon:w,Title:E};export{M as Alert};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-DDx6FtJd.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./types-D85fCNV3.js";import{t as i}from"./icon-button-DV2-GZHf.js";import{createContext as a,forwardRef as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";import{CheckCircleIcon as d}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as f}from"@phosphor-icons/react/Info";import{MegaphoneIcon as p}from"@phosphor-icons/react/Megaphone";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{XIcon as g}from"@phosphor-icons/react/X";import{cva as _}from"class-variance-authority";const v=a(null),y=u(g,{});function b(){let e=s(v);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const x=_(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{intent:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a]:text-danger-700 [&_a]:underline`,important:`border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a]:text-important-700 [&_a]:underline`,info:`border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a]:text-info-700 [&_a]:underline`,success:`border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a]:text-success-700 [&_a]:underline`,warning:`border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a]:text-warning-700 [&_a]:underline`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}}}),S=o(({appearance:t=`default`,className:n,intent:r,...i},a)=>{let o=c(()=>({intent:r}),[r]);return u(v.Provider,{value:o,children:u(`div`,{ref:a,"data-slot":`alert`,className:e(x({appearance:t,intent:r}),n),...i})})});S.displayName=`Alert`;const C={danger:u(m,{}),important:u(p,{mirrored:!0}),info:u(f,{}),success:u(d,{}),warning:u(h,{})},w=o(({className:n,svg:r,...i},a)=>{let o=b(),s=C[o.intent];return u(t,{ref:a,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:r??s,...i})});w.displayName=`AlertIcon`;const T=o(({className:t,...n},r)=>u(`div`,{ref:r,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));T.displayName=`AlertContent`;const E=o(({asChild:t=!1,className:r,...i},a)=>u(t?n:`h5`,{ref:a,"data-slot":`alert-title`,className:e(`font-medium`,r),...i}));E.displayName=`AlertTitle`;const D=o(({asChild:t=!1,className:r,...i},a)=>u(t?n:`div`,{ref:a,"data-slot":`alert-description`,className:e(`text-sm`,r),...i}));D.displayName=`AlertDescription`;const O=e=>`var(--color-${e}-700)`,k=e=>`var(--color-${e}-800)`,A=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,j=({size:t=`sm`,type:n=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=y,style:l,...d})=>{let f=b();return u(i,{appearance:o,icon:c,intent:`neutral`,label:a,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,s),type:n,style:r({...l,"--alert-dismiss-icon-color":O(f.intent),"--alert-dismiss-icon-hover-color":k(f.intent),"--alert-dismiss-hover-bg":A(f.intent)}),...d})};j.displayName=`AlertDismissIconButton`;const M={Root:S,Content:T,Description:D,DismissIconButton:j,Icon:w,Title:E};export{M as Alert};

package/dist/{anchor-BtgEJoPN.js → anchor-C_tjSVy6.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-SUx16Sl3.js";import{t as n}from"./slot-DT_E5BQx.js";import{Children as r,cloneElement as i,forwardRef as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),f=a(({asChild:e,children:a,className:f,rel:m,icon:h,iconPlacement:g=`start`,..._},v)=>{let y=p(m),b={"data-slot":`anchor`,className:d(f),ref:v,rel:y,..._};if(e){let e=r.only(a);s(o(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let d=e.props?.children;return l(n,{...b,children:i(e,{},u(c,{children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return u(`a`,{...b,children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),a,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]})});f.displayName=`Anchor`;function p(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{d as n,p as r,f as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{t as n}from"./slot-DmPrjM7N.js";import{Children as r,cloneElement as i,forwardRef as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),f=a(({asChild:e,children:a,className:f,rel:m,icon:h,iconPlacement:g=`start`,..._},v)=>{let y=p(m),b={"data-slot":`anchor`,className:d(f),ref:v,rel:y,..._};if(e){let e=r.only(a);s(o(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let d=e.props?.children;return l(n,{...b,children:i(e,{},u(c,{children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return u(`a`,{...b,children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),a,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]})});f.displayName=`Anchor`;function p(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{d as n,p as r,f as t};

package/dist/anchor.d.ts

@@ -1,6 +1,5 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/anchor/types.d.ts
 /**
  * The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
@@ -53,7 +52,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  *   primitive ({@link https://reactrouter.com/en/main/components/link `react-router` `<Link>`})
  *   so client-side navigation kicks in. You can keep mantle's styling by
  *   composing: `<Anchor asChild><Link to="/foo">…</Link></Anchor>`.
- * - For triggering an action — use a {@link https://mantle.ngrok.com/components/button Button}
+ * - For triggering an action — use a {@link https://mantle.ngrok.com/components/actions/button Button}
  *   instead. If it doesn't navigate, it's not a link.
  *
  * **Icons.** Pass `icon` (a phosphor or custom SVG) and optionally
@@ -69,7 +68,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  * here" / "read more". For purely decorative icons, no extra labeling is
  * needed; for icon-only links, provide an `aria-label`.
  *
- * @see https://mantle.ngrok.com/components/anchor
+ * @see https://mantle.ngrok.com/components/navigation/anchor
  *
  * @example
  * ```tsx

package/dist/anchor.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./anchor-BtgEJoPN.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};
+import{n as e,r as t,t as n}from"./anchor-C_tjSVy6.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};

package/dist/{as-child-uN_018tj.d.ts → as-child-CYEVu1WY.d.ts}

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/types/as-child.d.ts
 /**
  * Utility type for adding the optional `asChild` boolean prop to a component.
@@ -20,11 +19,5 @@ type WithAsChild = {
    */
   asChild?: boolean;
 };
-/**
- * Utility type for adding the optional `asChild` boolean prop to a component
- * that is self-closing.
- * This is useful for components that do not have children, but still need to
- * support the `asChild` prop.
- */
 //#endregion
 export { WithAsChild as t };

package/dist/badge.d.ts

@@ -1,7 +1,6 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
 import { t as Color } from "./index-DorCusfG.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/badge/badge.d.ts
 declare const appearances: readonly ["muted"];
 type Appearance = (typeof appearances)[number];
@@ -19,59 +18,9 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
    */
   appearance: Appearance;
 };
-/**
- * A non-interactive label used to highlight short, scannable information —
- * a status, a category tag, or a count — in the smallest possible footprint.
- *
- * **When to use**
- * - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`.
- * - Category or tag chips alongside list items, table rows, or cards.
- * - Counts (e.g. `12 new`) when paired with brief context.
- *
- * **When not to use**
- * - For interactive UI. Badges are not buttons or links — use {@link https://mantle.ngrok.com/components/button Button}
- *   or {@link https://mantle.ngrok.com/components/anchor Anchor} (optionally with `asChild` styling) instead.
- * - For long-form text. Keep labels to one or two short words.
- * - As the sole signal of meaning. Pair color with a label or icon so the
- *   distinction works without color (color blindness, monochrome themes).
- *
- * **Choosing a `color`.** Prefer functional colors (`success`, `warning`,
- * `danger`, `info`, `accent`, `neutral`) for status meaning so theming
- * stays coherent. Reach for named hues only when the badge's semantic role
- * isn't already covered.
- *
- * **Polymorphism.** Pass `asChild` to render the badge as a single child
- * element — useful when the badge wraps a link or other semantic element
- * while keeping the badge styling.
- *
- * @see https://mantle.ngrok.com/components/badge
- *
- * @example
- * ```tsx
- * import { Badge } from "@ngrok/mantle/badge";
- * import { CheckCircleIcon } from "@phosphor-icons/react/CheckCircle";
- *
- * <Badge appearance="muted" color="success" icon={<CheckCircleIcon />}>
- *   Succeeded
- * </Badge>
- *
- * // Polymorphic — render the badge as a link, preserving its styling.
- * <Badge appearance="muted" color="info" asChild>
- *   <a href="/status">Operational</a>
- * </Badge>
- * ```
- */
-declare const Badge: {
-  ({
-    appearance,
-    asChild,
-    children,
-    className,
-    color,
-    icon,
-    ...props
-  }: BadgeProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare function Badge({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps): import("react").JSX.Element;
+declare namespace Badge {
+  var displayName: string;
+}
 //#endregion
 export { Badge, type BadgeProps };

package/dist/badge.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})};u.displayName=`Badge`;const d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-DDx6FtJd.js";import{t as n}from"./slot-DmPrjM7N.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})};u.displayName=`Badge`;const d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};

package/dist/breadcrumb.d.ts

@@ -0,0 +1,212 @@
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ReactNode } from "react";
+//#region src/components/breadcrumb/breadcrumb.d.ts
+/**
+ * Compound component for WAI-ARIA breadcrumb navigation — the path from a
+ * root to the current page as an ordered list of links inside a labeled
+ * `<nav>` landmark. Router-agnostic: compose `Breadcrumb.Link` onto your app
+ * router's link via `asChild`.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ *
+ * @example
+ * Composition:
+ * ```
+ * Breadcrumb.Root
+ * └── Breadcrumb.List
+ *     ├── Breadcrumb.Item
+ *     │   └── Breadcrumb.Link
+ *     ├── Breadcrumb.Separator
+ *     └── Breadcrumb.Item
+ *         └── Breadcrumb.Page
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const Breadcrumb: {
+  /**
+   * The breadcrumb landmark. Renders a `<nav>` with a default
+   * `aria-label="Breadcrumb"` — pass your own `aria-label` to override it.
+   * Carries no visual styling of its own.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+   * 		</Breadcrumb.Item>
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  /**
+   * The ordered list of crumbs. Renders an `<ol>` — the order of the items
+   * is the hierarchy, from the root to the current page.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+   * 		</Breadcrumb.Item>
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLOListElement> & import("react").OlHTMLAttributes<HTMLOListElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+  /**
+   * A single crumb. Renders an `<li>` containing a `Breadcrumb.Link` or
+   * `Breadcrumb.Page`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+   * 		</Breadcrumb.Item>
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly Item: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  /**
+   * A link to an ancestor page. Renders an `<a>` by default; use `asChild`
+   * to compose onto your app router's link (e.g. react-router's `<Link>`).
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+   * 		</Breadcrumb.Item>
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly Link: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+  /**
+   * The current page — the last crumb. Renders a `<span>` (not a link) with
+   * `aria-current="page"`; the ARIA is the part's whole contract and is not
+   * overridable.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+   * 		</Breadcrumb.Item>
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly Page: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  /**
+   * A purely visual divider between crumbs, hidden from assistive
+   * technology (`role="presentation"` + `aria-hidden`). Children default to
+   * a caret icon; pass your own (e.g. a slash) to replace it.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/endpoints">Endpoints</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Page>ep_2h8…</Breadcrumb.Page>
+   * 		</Breadcrumb.Item>
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly Separator: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children"> & {
+    asChild: true;
+    children: ReactNode;
+  } & WithDataSlot, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children"> & {
+    asChild?: false | undefined;
+    children?: ReactNode;
+  } & WithDataSlot, "ref">) & import("react").RefAttributes<HTMLLIElement>>;
+};
+//#endregion
+export { Breadcrumb };

package/dist/breadcrumb.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{n,t as r}from"./slot-DmPrjM7N.js";import{cloneElement as i,forwardRef as a,isValidElement as o}from"react";import{jsx as s}from"react/jsx-runtime";import{CaretRightIcon as c}from"@phosphor-icons/react/CaretRight";const l=a(({asChild:e,children:t,"data-slot":i,...a},o)=>s(e?r:`nav`,{ref:o,"data-slot":n(i,`breadcrumb`),"aria-label":`Breadcrumb`,...a,children:t}));l.displayName=`Breadcrumb`;const u=a(({asChild:t,children:i,className:a,"data-slot":o,...c},l)=>s(t?r:`ol`,{ref:l,"data-slot":n(o,`breadcrumb-list`),className:e(`text-muted flex flex-wrap items-center gap-1.5 text-sm`,a),...c,children:i}));u.displayName=`BreadcrumbList`;const d=a(({asChild:t,children:i,className:a,"data-slot":o,...c},l)=>s(t?r:`li`,{ref:l,"data-slot":n(o,`breadcrumb-item`),className:e(`inline-flex items-center gap-1.5`,a),...c,children:i}));d.displayName=`BreadcrumbItem`;const f=a(({asChild:t,children:i,className:a,"data-slot":o,...c},l)=>s(t?r:`a`,{ref:l,"data-slot":n(o,`breadcrumb-link`),className:e(`hover:text-strong transition-colors`,a),...c,children:i}));f.displayName=`BreadcrumbLink`;const p=a(({asChild:t,children:a,className:c,"data-slot":l,...u},d)=>{let f=t?r:`span`,p=t&&o(a)?i(a,{"aria-current":`page`}):a;return s(f,{ref:d,"data-slot":n(l,`breadcrumb-page`),className:e(`text-strong`,c),...u,"aria-current":`page`,children:p})});p.displayName=`BreadcrumbPage`;const m=a(({asChild:e,children:a,className:l,"data-slot":u,...d},f)=>{let p=e?r:`li`,m=e&&o(a)?i(a,{role:`presentation`,"aria-hidden":`true`}):a??s(t,{svg:s(c,{}),className:`size-3.5`});return s(p,{ref:f,"data-slot":n(u,`breadcrumb-separator`),className:l,...d,role:`presentation`,"aria-hidden":`true`,children:m})});m.displayName=`BreadcrumbSeparator`;const h={Root:l,List:u,Item:d,Link:f,Page:p,Separator:m};export{h as Breadcrumb};

package/dist/browser-only.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/components/browser-only/browser-only.d.ts
 type Props = {
   /**
@@ -27,7 +26,7 @@ type Props = {
  *   the `fallback` is rendered.
  * - On the client, after hydration, the `children` render function is called.
  *
- * @see https://mantle.ngrok.com/components/browser-only
+ * @see https://mantle.ngrok.com/components/primitives/browser-only
  *
  * @example
  * ```tsx
@@ -38,10 +37,7 @@ type Props = {
  *
  * @see useIsHydrated
  */
-declare function BrowserOnly({
-  children,
-  fallback
-}: Props): ReactNode;
+declare function BrowserOnly({ children, fallback }: Props): ReactNode;
 /**
  * Detects whether DOM APIs are available.
  *

package/dist/{button-CERx95KE.js → button-5t6-JS_I.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`border-form inline-flex items-center rounded-md`,{variants:{appearance:{panel:`bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px`,ghost:`gap-0.5`,outlined:``}}}),o=n(({appearance:n,asChild:i,className:o,children:s,...c},l)=>r(i?t:`div`,{"data-slot":`button-group`,className:e(a({appearance:n}),o),ref:l,...c,children:s}));o.displayName=`ButtonGroup`;export{o as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`border-form inline-flex items-center rounded-md`,{variants:{appearance:{panel:`bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px`,ghost:`gap-0.5`,outlined:``}}}),o=n(({appearance:n,asChild:i,className:o,children:s,...c},l)=>r(i?t:`div`,{"data-slot":`button-group`,className:e(a({appearance:n}),o),ref:l,...c,children:s}));o.displayName=`ButtonGroup`;export{o as t};

package/dist/button-ClC60Nzg.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./clsx-DUGZgXfJ.js";import{Children as a,cloneElement as o,forwardRef as s,isValidElement as c}from"react";import l from"tiny-invariant";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{CircleNotchIcon as m}from"@phosphor-icons/react/CircleNotch";const h=p(``,{variants:{appearance:{filled:`bg-filled-accent text-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover border border-transparent text-sm font-medium`,ghost:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border border-transparent text-sm font-medium`,outlined:`border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 border text-sm font-medium`,link:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent`},isLoading:{false:``,true:`opacity-50`},intent:{accent:``,danger:``,neutral:``},size:{xs:``,sm:``,md:``,lg:``,xl:``}},defaultVariants:{isLoading:!1,size:`md`},compoundVariants:[{appearance:[`filled`,`ghost`,`outlined`],size:`xs`,class:`h-6 px-2`},{appearance:[`filled`,`ghost`,`outlined`],size:`sm`,class:`h-7 px-2.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`md`,class:`h-9 px-3`},{appearance:[`filled`,`ghost`,`outlined`],size:`lg`,class:`h-10 px-3.5`},{appearance:[`filled`,`ghost`,`outlined`],size:`xl`,class:`h-12 px-4`},{appearance:`ghost`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 border-transparent`},{appearance:`outlined`,intent:`danger`,class:`border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700`},{appearance:`filled`,intent:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`},{appearance:`outlined`,intent:`neutral`,class:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600`},{appearance:`filled`,intent:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),g={xs:`ps-1.5`,sm:`ps-2`,md:`ps-2.5`,lg:`ps-3`,xl:`ps-3.5`},_={xs:`pe-1.5`,sm:`pe-2`,md:`pe-2.5`,lg:`pe-3`,xl:`pe-3.5`},v=s(({"aria-disabled":s,appearance:p,asChild:v,children:y,className:b,disabled:x,icon:S,iconPlacement:C=`start`,intent:w,isLoading:T=!1,size:E=`md`,type:D,...O},k)=>{let A=r(s??x??T),j=T?d(m,{className:`animate-spin`}):S,M=j&&p!==`link`,N={"aria-disabled":A,"data-slot":`button`,className:e(`inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`,h({appearance:p,intent:w,isLoading:T,size:E}),p!==`link`&&`font-sans`,M&&C===`start`&&g[E],M&&C===`end`&&_[E],b),"data-appearance":p,"data-disabled":A,"data-intent":w,"data-loading":T,"data-size":p===`link`?void 0:E,disabled:A,ref:k,...O};return v?(l(c(y)&&a.only(y),"When using `asChild`, Button must be passed a single child as a JSX tag."),d(n,{...N,children:o(y,{},f(u,{children:[j&&d(t,{svg:j,className:i(C===`end`&&`order-last`)}),y.props.children]}))})):f(`button`,{...N,type:D??`button`,children:[j&&d(t,{svg:j,className:i(C===`end`&&`order-last`)}),y]})});v.displayName=`Button`;export{v as t};