@ngrok/mantle 0.66.17 → 0.68.0

package/README.md

@@ -38,6 +38,38 @@ Also install the required `devDependencies`:
 
 Next, check out the [Overview & Setup](https://mantle.ngrok.com/) docs and start using mantle components in your application!
 
+## Code Block Tooling
+
+Mantle ships runtime components from `@ngrok/mantle`, while build-time and server-side tooling lives in `@ngrok/mantle-vite-plugins`:
+
+- `@ngrok/mantle/code-block`: runtime React components and `mantleCode` template tag
+- `@ngrok/mantle-vite-plugins`: Vite + rehype integration via `mantleCodeBlockPlugins()`
+- `@ngrok/mantle-server-syntax-highlighter`: server-side highlighting engine for API routes/actions
+
+This keeps Vite/Shiki/parser dependencies out of frontend installs that only need Mantle's runtime UI package.
+
+For a concrete service implementation, see [`apps/highlight-server`](../../apps/highlight-server/README.md), a Bun + Hono syntax-highlighting API that preloads Shiki and serves highlighted HTML for server-side use cases.
+
+### Vite + MDX
+
+```ts
+import { mantleCodeBlockPlugins } from "@ngrok/mantle-vite-plugins";
+
+const codeBlockPlugins = mantleCodeBlockPlugins();
+```
+
+### Server Highlighter
+
+```ts
+import { createMantleServerSyntaxHighlighter } from "@ngrok/mantle-server-syntax-highlighter";
+
+const highlighter = createMantleServerSyntaxHighlighter();
+const result = await highlighter.highlight({
+	code: "const x = 1",
+	language: "typescript",
+});
+```
+
 ## Git Hooks
 
 Pre-commit hooks run automatically via [husky](https://typicode.github.io/husky/) and [lint-staged](https://github.com/lint-staged/lint-staged). On every commit, staged files are formatted with oxfmt and linted with oxlint.

package/dist/accordion.d.ts

@@ -1,8 +1,8 @@
-import { n as IconProps } from "./icon-B1XLv02t.js";
+import { n as IconProps } from "./icon-Dh1ONyO_.js";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import * as react from "react";
+import * as _$react from "react";
 import { ComponentPropsWithoutRef } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/accordion/accordion.d.ts
 /**
@@ -51,7 +51,7 @@ declare const Accordion: {
    * </Accordion.Root>
    * ```
    */
-  readonly Root: react.ForwardRefExoticComponent<ComponentPropsWithoutRef<react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;
+  readonly Root: _$react.ForwardRefExoticComponent<ComponentPropsWithoutRef<_$react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & _$react.RefAttributes<HTMLDivElement>>> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Contains the collapsible content for an item.
    * The content area that is revealed when the accordion item is expanded.
@@ -75,7 +75,7 @@ declare const Accordion: {
    * </Accordion.Root>
    * ```
    */
-  readonly Content: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Content: _$react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Wraps an AccordionTrigger.
    * Contains the accordion trigger and provides proper heading semantics.
@@ -99,7 +99,7 @@ declare const Accordion: {
    * </Accordion.Root>
    * ```
    */
-  readonly Heading: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Heading: _$react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & _$react.RefAttributes<HTMLHeadingElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Contains all the parts of a collapsible section.
    * A single accordion item that can be expanded or collapsed.
@@ -123,7 +123,7 @@ declare const Accordion: {
    * </Accordion.Root>
    * ```
    */
-  readonly Item: react.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
+  readonly Item: _$react.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Toggles the collapsed state of its associated item.
    * The interactive element that expands or collapses the accordion content.
@@ -147,7 +147,7 @@ declare const Accordion: {
    * </Accordion.Root>
    * ```
    */
-  readonly Trigger: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: _$react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * An icon that indicates the expanded/collapsed state of the accordion trigger.
    * Rotates based on the accordion item state to provide visual feedback.
@@ -175,7 +175,7 @@ declare const Accordion: {
     ({
       className,
       ...props
-    }: Omit<IconProps, "svg">): react_jsx_runtime0.JSX.Element;
+    }: Omit<IconProps, "svg">): _$react_jsx_runtime0.JSX.Element;
     displayName: string;
   };
 };

package/dist/alert-dialog.d.ts

@@ -1,13 +1,13 @@
-import { t as SvgAttributes } from "./types-Dh4BVhXC.js";
-import { t as DeepNonNullable } from "./deep-non-nullable-BLM3Gz0I.js";
-import { t as WithAsChild } from "./as-child-XMVTepJu.js";
-import { t as Root$1 } from "./primitive-tuHqhoRE.js";
-import * as react from "react";
+import { t as SvgAttributes } from "./types-yU-Byhue.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-BBByg3-i.js";
+import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import { t as Root$1 } from "./primitive-BqLYh79k.js";
+import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as class_variance_authority0 from "class-variance-authority";
-import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$class_variance_authority0 from "class-variance-authority";
+import * as _$_radix_ui_react_dialog0 from "@radix-ui/react-dialog";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/alert-dialog/alert-dialog.d.ts
 declare const priorities: readonly ["info", "danger"];
@@ -59,7 +59,7 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
 declare function Root({
   priority,
   ...props
-}: AlertDialogProps): react_jsx_runtime0.JSX.Element;
+}: AlertDialogProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Root {
   var displayName: string;
 }
@@ -146,27 +146,27 @@ declare const AlertDialog: {
    * </AlertDialog.Footer>
    * ```
    */
-  readonly Action: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
+  readonly Action: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "default" | "danger" | "neutral" | null | undefined;
-  } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
+  } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
   } & {
     asChild: true;
     type?: ComponentProps<"button">["type"];
-  }, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
+  }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "default" | "danger" | "neutral" | null | undefined;
-  } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
+  } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
   } & {
     asChild?: false | undefined;
     type: Exclude<ComponentProps<"button">["type"], undefined>;
-  }, "ref">) & react.RefAttributes<HTMLButtonElement>>;
+  }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * Contains the main content of the alert dialog.
    *
@@ -189,7 +189,7 @@ declare const AlertDialog: {
    * </AlertDialog.Content>
    * ```
    */
-  readonly Body: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Body: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * A button that closes the dialog and cancels the action.
    *
@@ -203,27 +203,27 @@ declare const AlertDialog: {
    * </AlertDialog.Footer>
    * ```
    */
-  readonly Cancel: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
+  readonly Cancel: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "default" | "danger" | "neutral" | null | undefined;
-  } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
+  } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
   } & {
     asChild: true;
     type?: ComponentProps<"button">["type"];
-  }, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
+  }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
     priority?: "default" | "danger" | "neutral" | null | undefined;
-  } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
+  } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
   } & {
     asChild?: false | undefined;
     type: Exclude<ComponentProps<"button">["type"], undefined>;
-  }, "ref">) & react.RefAttributes<HTMLButtonElement>>;
+  }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * A button that closes the Alert Dialog. (Unstyled)
    *
@@ -241,7 +241,7 @@ declare const AlertDialog: {
    * </AlertDialog.Close>
    * ```
    */
-  readonly Close: react.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+  readonly Close: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogCloseProps & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * The popover alert dialog container.
    *
@@ -264,7 +264,7 @@ declare const AlertDialog: {
    * </AlertDialog.Content>
    * ```
    */
-  readonly Content: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog0.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+  readonly Content: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dialog0.DialogContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & {
     /**
      * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.
      *
@@ -274,7 +274,7 @@ declare const AlertDialog: {
      * @default `max-w-md`
      */
     preferredWidth?: `max-w-${string}`;
-  } & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * An accessible description to be announced when the dialog is opened.
    *
@@ -288,7 +288,7 @@ declare const AlertDialog: {
    * </AlertDialog.Header>
    * ```
    */
-  readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog0.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Description: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dialog0.DialogDescriptionProps & _$react.RefAttributes<HTMLParagraphElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Contains the footer content of the dialog, including the action and cancel buttons.
    *
@@ -302,7 +302,7 @@ declare const AlertDialog: {
    * </AlertDialog.Footer>
    * ```
    */
-  readonly Footer: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Footer: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Contains the header content of the dialog, including the title and description.
    *
@@ -316,7 +316,7 @@ declare const AlertDialog: {
    * </AlertDialog.Header>
    * ```
    */
-  readonly Header: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Header: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * An icon that visually represents the priority of the AlertDialog.
    *
@@ -335,7 +335,7 @@ declare const AlertDialog: {
    * </AlertDialog.Content>
    * ```
    */
-  readonly Icon: react.ForwardRefExoticComponent<Omit<AlertDialogIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  readonly Icon: _$react.ForwardRefExoticComponent<Omit<AlertDialogIconProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
   /**
    * An accessible name to be announced when the dialog is opened.
    *
@@ -349,7 +349,7 @@ declare const AlertDialog: {
    * </AlertDialog.Header>
    * ```
    */
-  readonly Title: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog0.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+  readonly Title: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTitleProps & _$react.RefAttributes<HTMLHeadingElement>, "ref"> & _$react.RefAttributes<HTMLHeadingElement>>;
   /**
    * A button that opens the Alert Dialog.
    *
@@ -364,7 +364,7 @@ declare const AlertDialog: {
    * </AlertDialog.Trigger>
    * ```
    */
-  readonly Trigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
 export { AlertDialog };

package/dist/alert-dialog.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./button-CdPMhyKg.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-pggbsddf.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=a;w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=d;I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./button-BKykcpgJ.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-pggbsddf.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=a;w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=d;I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
 //# sourceMappingURL=alert-dialog.js.map

package/dist/alert.d.ts

@@ -1,12 +1,12 @@
-import { t as SvgAttributes } from "./types-Dh4BVhXC.js";
-import { t as WithAsChild } from "./as-child-XMVTepJu.js";
-import { n as IconButtonProps } from "./icon-button-2r6S3HVA.js";
-import * as react from "react";
+import { t as SvgAttributes } from "./types-yU-Byhue.js";
+import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import { n as IconButtonProps } from "./icon-button-gO-7F_MZ.js";
+import * as _$react from "react";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/alert/alert.d.ts
-declare const priorities: readonly ["danger", "info", "success", "warning"];
+declare const priorities: readonly ["danger", "important", "info", "success", "warning"];
 type Priority = (typeof priorities)[number];
 declare const appearances: readonly ["banner", "default"];
 type Appearance = (typeof appearances)[number];
@@ -74,7 +74,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Root: react.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Root: _$react.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The container for the content slot of an alert.
    *
@@ -91,7 +91,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Content: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Content: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The optional description of an alert.
    *
@@ -108,7 +108,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Description: react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Description: _$react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * An optional dismiss button that can be used to close the alert.
    *
@@ -136,7 +136,7 @@ declare const Alert: {
       icon,
       style,
       ...props
-    }: AlertDismissIconButtonProps): react_jsx_runtime0.JSX.Element;
+    }: AlertDismissIconButtonProps): _$react_jsx_runtime0.JSX.Element;
     displayName: string;
   };
   /**
@@ -155,7 +155,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Icon: react.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  readonly Icon: _$react.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
   /**
    * The title of an alert.
    *
@@ -172,7 +172,7 @@ declare const Alert: {
    * </Alert.Root>
    * ```
    */
-  readonly Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
+  readonly Title: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & _$react.RefAttributes<HTMLHeadingElement>>;
 };
 //#endregion
 export { Alert };

package/dist/alert.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./types-884RJJqm.js";import{t as r}from"./slot-D_ZUrdEW.js";import{t as i}from"./icon-button-CeeHZOhh.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{WarningIcon as p}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as m}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{cva as g}from"class-variance-authority";const _=a(null);function v(){let e=s(_);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const y=g(`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`,info:`border-info-500/50 bg-info-500/10 text-info-700`,success:`border-success-500/50 bg-success-500/10 text-success-700`,warning:`border-warning-500/50 bg-warning-500/10 text-warning-700`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}},compoundVariants:[{priority:`danger`,appearance:`banner`,className:``},{priority:`info`,appearance:`banner`,className:``},{priority:`success`,appearance:`banner`,className:``},{priority:`warning`,appearance:`banner`,className:``}]}),b=o(({appearance:t=`default`,className:n,priority:r,...i},a)=>{let o=c(()=>({priority:r}),[r]);return u(_.Provider,{value:o,children:u(`div`,{ref:a,className:e(y({appearance:t,priority:r}),n),...i})})});b.displayName=`Alert`;const x={danger:u(p,{}),info:u(f,{}),success:u(d,{}),warning:u(m,{})},S=o(({className:n,svg:r,...i},a)=>{let o=x[v().priority];return u(t,{ref:a,className:e(`size-5`,n),svg:r??o,...i})});S.displayName=`AlertIcon`;const C=o(({className:t,...n},r)=>u(`div`,{ref:r,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));C.displayName=`AlertContent`;const w=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`h5`,{ref:a,className:e(`font-medium`,n),...i}));w.displayName=`AlertTitle`;const T=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`div`,{ref:a,className:e(`text-sm`,n),...i}));T.displayName=`AlertDescription`;const E=e=>`var(--color-${e}-700)`,D=e=>`var(--color-${e}-800)`,O=e=>`var(--color-${e}-900)`,k=({size:t=`sm`,type:r=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=u(h,{}),style:l,...d})=>{let f=v();return u(i,{appearance:o,icon:c,label:a,size:t,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,`not-disabled:active:text-(--alert-dismiss-icon-active-color)`,s),type:r,style:n({...l,"--alert-dismiss-icon-color":E(f.priority),"--alert-dismiss-icon-hover-color":D(f.priority),"--alert-dismiss-icon-active-color":O(f.priority)}),...d})};k.displayName=`AlertDismissIconButton`;const A={Root:b,Content:C,Description:T,DismissIconButton:k,Icon:S,Title:w};export{A as Alert};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./types-884RJJqm.js";import{t as r}from"./slot-D_ZUrdEW.js";import{t as i}from"./icon-button-CxxVPiKp.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);function y(){let e=s(v);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const b=_(`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`,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`,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`,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`,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`},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:``}]}),x=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,className:e(b({appearance:t,priority:r}),n),...i})})});x.displayName=`Alert`;const S={danger:u(m,{}),important:u(p,{mirrored:!0}),info:u(f,{}),success:u(d,{}),warning:u(h,{})},C=o(({className:n,svg:r,...i},a)=>{let o=S[y().priority];return u(t,{ref:a,className:e(`size-5`,n),svg:r??o,...i})});C.displayName=`AlertIcon`;const w=o(({className:t,...n},r)=>u(`div`,{ref:r,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));w.displayName=`AlertContent`;const T=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`h5`,{ref:a,className:e(`font-medium`,n),...i}));T.displayName=`AlertTitle`;const E=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`div`,{ref:a,className:e(`text-sm`,n),...i}));E.displayName=`AlertDescription`;const D=e=>`var(--color-${e}-700)`,O=e=>`var(--color-${e}-800)`,k=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,A=({size:t=`sm`,type:r=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=u(g,{}),style:l,...d})=>{let f=y();return u(i,{appearance:o,icon:c,label:a,size:t,"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:r,style:n({...l,"--alert-dismiss-icon-color":D(f.priority),"--alert-dismiss-icon-hover-color":O(f.priority),"--alert-dismiss-hover-bg":k(f.priority)}),...d})};A.displayName=`AlertDismissIconButton`;const j={Root:x,Content:w,Description:E,DismissIconButton:A,Icon:C,Title:T};export{j as Alert};
 //# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"border-danger-500/50 bg-danger-500/10 text-danger-700\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess: \"border-success-500/50 bg-success-500/10 text-success-700\",\n\t\t\t\twarning: \"border-warning-500/50 bg-warning-500/10 text-warning-700\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissActiveColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-900)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\t\"not-disabled:active:text-(--alert-dismiss-icon-active-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-active-color\": dismissActiveColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.DismissIconButton />\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { MegaphoneIcon } from \"@phosphor-icons/react/Megaphone\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"important\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger:\n\t\t\t\t\t\"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\",\n\t\t\t\timportant:\n\t\t\t\t\t\"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\",\n\t\t\t\tinfo: \"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\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"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\",\n\t\t\t\twarning:\n\t\t\t\t\t\"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\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"important\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\timportant: <MegaphoneIcon mirrored />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissHoverBgColor = <T extends Priority = Priority>(priority: T) =>\n\t`color-mix(in oklab, var(--color-${priority}-500) 10%, transparent)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-hover-bg\": dismissHoverBgColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.DismissIconButton />\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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"}

package/dist/anchor.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-XMVTepJu.js";
-import * as react from "react";
+import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/anchor/types.d.ts
@@ -56,7 +56,7 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
  * </Anchor>
  * ```
  */
-declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
+declare const Anchor: _$react.ForwardRefExoticComponent<Omit<AnchorProps, "ref"> & _$react.RefAttributes<HTMLAnchorElement>>;
 /**
  * Resolves the `rel` attribute to a string.
  *

package/dist/{as-child-XMVTepJu.d.ts → as-child-CRRsxi3Y.d.ts}

@@ -28,4 +28,4 @@ type WithAsChild = {
  */
 //#endregion
 export { WithAsChild as t };
-//# sourceMappingURL=as-child-XMVTepJu.d.ts.map
+//# sourceMappingURL=as-child-CRRsxi3Y.d.ts.map

package/dist/badge.d.ts

@@ -1,7 +1,7 @@
-import { t as WithAsChild } from "./as-child-XMVTepJu.js";
-import { t as Color } from "./index-BLCvtjLi.js";
+import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import { t as Color } from "./index-C3IiAC5H.js";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/badge/badge.d.ts
 declare const appearances: readonly ["muted"];
@@ -42,7 +42,7 @@ declare const Badge: {
     color,
     icon,
     ...props
-  }: BadgeProps): react_jsx_runtime0.JSX.Element;
+  }: BadgeProps): _$react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/badge.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.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,{className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{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`,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`,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-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.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,{className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{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};
 //# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important\n * information or to visually indicate the status of an item.\n *\n * @see https://mantle.ngrok.com/components/badge\n *\n * @example\n * ```tsx\n * <Badge appearance=\"muted\" color=\"success\">\n *   Succeeded\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"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\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"uRAwCA,MAAM,GAAS,CACd,aACA,UAAU,GACV,WACA,YACA,QAAQ,UACR,OACA,GAAG,KACc,CACjB,IAAM,EAAU,EAAe,EAAO,EAAW,CAC3C,EAAY,EAAiB,EAAO,EAAW,CAE/C,EAAe,EACpB,mHACA,GAAQ,OACR,EACA,EACA,EACA,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA2B,EAAY,CACvC,0EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,UAAW,EAAc,GAAI,WACjC,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACC,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,OAAD,CAAM,UAAW,EAAc,GAAI,WAAnC,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACK,IAGT,EAAM,YAAc,QAgBpB,MAAM,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,oBACT,CAED,SAAS,EAAe,EAAc,EAAwB,CAC7D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAmB,GAC3B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG,EAIhE,MAAM,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,mBACT,CAED,SAAS,EAAiB,EAAc,EAAwB,CAC/D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAqB,GAC7B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG"}
+{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important\n * information or to visually indicate the status of an item.\n *\n * @see https://mantle.ngrok.com/components/badge\n *\n * @example\n * ```tsx\n * <Badge appearance=\"muted\" color=\"success\">\n *   Succeeded\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"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\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\timportant: \"bg-important-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\timportant: \"text-important-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"uRAwCA,MAAM,GAAS,CACd,aACA,UAAU,GACV,WACA,YACA,QAAQ,UACR,OACA,GAAG,KACc,CACjB,IAAM,EAAU,EAAe,EAAO,EAAW,CAC3C,EAAY,EAAiB,EAAO,EAAW,CAE/C,EAAe,EACpB,mHACA,GAAQ,OACR,EACA,EACA,EACA,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA2B,EAAY,CACvC,0EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,UAAW,EAAc,GAAI,WACjC,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACC,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,OAAD,CAAM,UAAW,EAAc,GAAI,WAAnC,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACK,IAGT,EAAM,YAAc,QAgBpB,MAAM,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,UAAW,sBACX,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,oBACT,CAED,SAAS,EAAe,EAAc,EAAwB,CAC7D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAmB,GAC3B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG,EAIhE,MAAM,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,UAAW,qBACX,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,mBACT,CAED,SAAS,EAAiB,EAAc,EAAwB,CAC/D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAqB,GAC7B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG"}

package/dist/booleanish-CBGdPL3Q.js.map

@@ -1 +1 @@
-{"version":3,"file":"booleanish-CBGdPL3Q.js","names":[],"sources":["../src/types/booleanish.tsx"],"sourcesContent":["export type Booleanish = boolean | \"true\" | \"false\";\n\n/**\n * Parse/coerce a booleanish value (boolean | \"true\" | \"false\") into a boolean.\n * @default false if the value is not a boolean or \"true\"\n */\nexport function parseBooleanish(value: Booleanish | (string & {}) | undefined | null): boolean {\n\treturn typeof value === \"boolean\" ? value : value === \"true\";\n}\n"],"mappings":"AAMA,SAAgB,EAAgB,EAA+D,CAC9F,OAAO,OAAO,GAAU,UAAY,EAAQ,IAAU"}
+{"version":3,"file":"booleanish-CBGdPL3Q.js","names":[],"sources":["../src/types/booleanish.ts"],"sourcesContent":["export type Booleanish = boolean | \"true\" | \"false\";\n\n/**\n * Parse/coerce a booleanish value (boolean | \"true\" | \"false\") into a boolean.\n * @default false if the value is not a boolean or \"true\"\n */\nexport function parseBooleanish(value: Booleanish | (string & {}) | undefined | null): boolean {\n\treturn typeof value === \"boolean\" ? value : value === \"true\";\n}\n"],"mappings":"AAMA,SAAgB,EAAgB,EAA+D,CAC9F,OAAO,OAAO,GAAU,UAAY,EAAQ,IAAU"}

package/dist/button-BKykcpgJ.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./booleanish-CBGdPL3Q.js";import{t as r}from"./slot-D_ZUrdEW.js";import{Children as i,cloneElement as a,forwardRef as o,isValidElement as s}from"react";import c from"clsx";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 h-9 border border-transparent px-3 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 h-9 border border-transparent px-3 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 h-9 border px-3 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`},priority:{danger:``,default:``,neutral:``}},defaultVariants:{appearance:`outlined`,isLoading:!1,priority:`default`},compoundVariants:[{appearance:`ghost`,priority:`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`,priority:`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`,priority:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,priority:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,priority:`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`,priority:`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`,priority:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,priority:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),g=o(({"aria-disabled":o,appearance:p=`outlined`,asChild:g,children:_,className:v,disabled:y,icon:b,iconPlacement:x=`start`,isLoading:S=!1,priority:C=`default`,type:w,...T},E)=>{let D=n(o??y??S),O=S?d(m,{className:`animate-spin`}):b,k=O&&p!==`link`,A={"aria-disabled":D,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,priority:C,isLoading:S}),p!==`link`&&`font-sans`,k&&x===`start`&&`ps-2.5`,k&&x===`end`&&`pe-2.5`,v),"data-appearance":p,"data-disabled":D,"data-loading":S,"data-priority":C,disabled:D,ref:E,...T};return g?(l(s(_)&&i.only(_),"When using `asChild`, Button must be passed a single child as a JSX tag."),d(r,{...A,children:a(_,{},f(u,{children:[O&&d(t,{svg:O,className:c(x===`end`&&`order-last`)}),_.props.children]}))})):f(`button`,{...A,type:w,children:[O&&d(t,{svg:O,className:c(x===`end`&&`order-last`)}),_]})});g.displayName=`Button`;export{g as t};
+//# sourceMappingURL=button-BKykcpgJ.js.map