@ngrok/mantle 0.66.0 → 0.66.2

package/dist/anchor.d.ts

@@ -1,7 +1,8 @@
-import * as react from 'react';
-import { ComponentProps, ReactNode } from 'react';
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
+import { t as WithAsChild } from "./as-child-XMVTepJu.js";
+import * as react from "react";
+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.
  *
@@ -10,7 +11,8 @@ import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
  */
 type Rel = "alternate" | "author" | "bookmark" | "canonical" | "dns-prefetch" | "external" | "help" | "icon" | "license" | "manifest" | "me" | "modulepreload" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "pingback" | "preconnect" | "prefetch" | "preload" | "prerender" | "prev" | "privacy-policy" | "search" | "stylesheet" | "tag" | "terms-of-service";
-
+//#endregion
+//#region src/components/anchor/anchor.d.ts
 /**
  * The class names for the `Anchor` component which define the styles for the component.
  */
@@ -19,23 +21,23 @@ declare const anchorClassNames: (className?: string) => string;
  * The props for the `Anchor` component.
  */
 type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
-    /**
-     * An icon to render inside the anchor
-     */
-    icon?: ReactNode;
-    /**
-     * The side that the icon will render on, if one is present
-     * @default "start"
-     */
-    iconPlacement?: "start" | "end";
-    /**
-     * The rel attribute defines the relationship between a linked resource and the current document.
-     *
-     * Every keyword within a space-separated value should be unique within that value.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
-     */
-    rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
+  /**
+   * An icon to render inside the anchor
+   */
+  icon?: ReactNode;
+  /**
+   * The side that the icon will render on, if one is present
+   * @default "start"
+   */
+  iconPlacement?: "start" | "end";
+  /**
+   * The rel attribute defines the relationship between a linked resource and the current document.
+   *
+   * Every keyword within a space-separated value should be unique within that value.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+   */
+  rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
 };
 /**
  * Fundamental component for rendering links to external addresses.
@@ -61,5 +63,6 @@ declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorProps, "ref"> &
  * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.
  */
 declare function resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]): string | undefined;
-
+//#endregion
 export { Anchor, type AnchorProps, type Rel, anchorClassNames, resolveRel };
+//# sourceMappingURL=anchor.d.ts.map

package/dist/anchor.js

@@ -1,2 +1,2 @@
-import{a as n}from"./chunk-IVQ626TU.js";import{a as c}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as m}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as v,forwardRef as N,isValidElement as b}from"react";import x from"tiny-invariant";import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";var f=r=>m("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent",r),u=N(({asChild:r,children:s,className:a,rel:l,icon:e,iconPlacement:t="start",...g},R)=>{let y=h(l),p={className:f(a),ref:R,rel:y,...g};if(r){let i=C.only(s);x(b(i),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let A=i.props?.children;return o(c,{...p,children:v(i,{},d(P,{children:[e&&t==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),A,e&&t==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]}))})}return d("a",{...p,children:[e&&t==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),s,e&&t==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]})});u.displayName="Anchor";function h(r){return Array.isArray(r)?[...new Set(r)].map(l=>l?.trim()).filter(Boolean).toSorted().join(" ")||void 0:r?.trim()||void 0}export{u as Anchor,f as anchorClassNames,h as resolveRel};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./icon-B5oNYYrJ.js";import{t as n}from"./slot-DdnjeV2n.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={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{f as Anchor,d as anchorClassNames,p as resolveRel};
 //# sourceMappingURL=anchor.js.map

package/dist/anchor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n *   ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"oJACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAmFhB,mBAAAC,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAzEN,IAAMC,EAAoBC,GACzBC,EACC,kJACAD,CACD,EA2CKE,EAASC,EACd,CACC,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAL,EAAW,IAAKM,EAAS,KAAAC,EAAM,cAAAC,EAAgB,QAAS,GAAGC,CAAM,EACtFC,IACI,CACJ,IAAMC,EAAMC,EAAWN,CAAO,EACxBO,EAAiB,CACtB,UAAWd,EAAiBC,CAAS,EACrC,IAAAU,EACA,IAAAC,EACA,GAAGF,CACJ,EAEA,GAAIL,EAAS,CACZ,IAAMU,EAAcC,EAAS,KAAKV,CAAQ,EAC1CW,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCjB,EAACsB,EAAA,CAAM,GAAGN,EACR,SAAAO,EACAN,EACA,CAAC,EACDhB,EAAAF,EAAA,CACE,UAAAW,GAAQC,IAAkB,SAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EAEjDW,EACAX,GAAQC,IAAkB,OAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GAEnD,CACD,EACD,CAEF,CAEA,OACCT,EAAC,KAAG,GAAGe,EACL,UAAAN,GAAQC,IAAkB,SAAWX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EACtFF,EACAE,GAAQC,IAAkB,OAASX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GACtF,CAEF,CACD,EACAL,EAAO,YAAc,SAOrB,SAASU,EACRD,EACC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKW,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,SAAS,EACT,KAAK,GAAG,GACO,OAGXX,GAAK,KAAK,GAAK,MACvB","names":["Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","anchorClassNames","className","cx","Anchor","forwardRef","asChild","children","propRel","icon","iconPlacement","props","ref","rel","resolveRel","componentProps","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","Icon","item"]}
+{"version":3,"file":"anchor.js","names":[],"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n *   ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"mSAYA,MAAM,EAAoB,GACzB,EACC,kJACA,EACA,CA2CI,EAAS,GAEb,CAAE,UAAS,WAAU,YAAW,IAAK,EAAS,OAAM,gBAAgB,QAAS,GAAG,GAChF,IACI,CACJ,IAAM,EAAM,EAAW,EAAQ,CACzB,EAAiB,CACtB,UAAW,EAAiB,EAAU,CACtC,MACA,MACA,GAAG,EACH,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA4B,EAAY,CACxC,2EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,IAAkB,SAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAEnD,EACA,GAAQ,IAAkB,OAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAElD,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,IAAD,CAAG,GAAI,WAAP,CACE,GAAQ,IAAkB,SAAW,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACxF,EACA,GAAQ,IAAkB,OAAS,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACpF,IAGN,CACD,EAAO,YAAc,SAOrB,SAAS,EACR,EACC,CAWD,OAVI,MAAM,QAAQ,EAAI,CAEN,CAAC,GADE,IAAI,IAAI,EAAI,CACD,CAC3B,IAAK,GAAS,GAAM,MAAM,CAAC,CAC3B,OAAO,QAAQ,CACf,UAAU,CACV,KAAK,IAAI,EACM,IAAA,GAGX,GAAK,MAAM,EAAI,IAAA"}

package/dist/as-child-XMVTepJu.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+
+//#region src/types/as-child.d.ts
+/**
+ * Utility type for adding the optional `asChild` boolean prop to a component.
+ */
+type WithAsChild = {
+  /**
+   * Use the `asChild` prop to compose component functionality onto alternative
+   * element types or your own React components.
+   *
+   * When `asChild` is set to `true`, mantle will not render a default DOM
+   * element, instead cloning the part's child and passing it the props and
+   * behavior required to make it functional.
+   *
+   * `asChild` can be used as deeply as you need to. This means it is a great way
+   * to compose multiple primitive's behavior together.
+   *
+   * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+   */
+  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 };
+//# sourceMappingURL=as-child-XMVTepJu.d.ts.map

package/dist/badge.d.ts

@@ -1,23 +1,24 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps, ReactNode } from 'react';
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
-import { Color } from './color.js';
+import { t as WithAsChild } from "./as-child-XMVTepJu.js";
+import { t as Color } from "./index-BLCvtjLi.js";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/components/badge/badge.d.ts
 declare const appearances: readonly ["muted"];
 type Appearance = (typeof appearances)[number];
 type BadgeProps = ComponentProps<"span"> & WithAsChild & {
-    /**
-     * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.
-     */
-    color?: Color;
-    /**
-     * The icon to render inside the badge.
-     */
-    icon?: ReactNode;
-    /**
-     * The visual style of the badge.
-     */
-    appearance: Appearance;
+  /**
+   * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.
+   */
+  color?: Color;
+  /**
+   * The icon to render inside the badge.
+   */
+  icon?: ReactNode;
+  /**
+   * The visual style of the badge.
+   */
+  appearance: Appearance;
 };
 /**
  * A Badge is a non-interactive component used to highlight important
@@ -33,8 +34,17 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
  * ```
  */
 declare const Badge: {
-    ({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
+  ({
+    appearance,
+    asChild,
+    children,
+    className,
+    color,
+    icon,
+    ...props
+  }: BadgeProps): react_jsx_runtime0.JSX.Element;
+  displayName: string;
 };
-
+//#endregion
 export { Badge, type BadgeProps };
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge.js

@@ -1,2 +1,2 @@
-import{a as d}from"./chunk-ADF5DAYG.js";import{a as o}from"./chunk-SBQHQ2SJ.js";import{a as c}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as h,isValidElement as k}from"react";import s from"tiny-invariant";import{Fragment as P,jsx as n,jsxs as m}from"react/jsx-runtime";var u=({appearance:t,asChild:e=!1,children:l,className:b,color:i="neutral",icon:r,...g})=>{let x=B(i,t),f=N(i,t),p=c("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",r&&"ps-1",x,f,b);if(e){let a=C.only(l);s(k(a),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let y=a.props?.children;return n(d,{className:p,...g,children:h(a,{},m(P,{children:[r&&n(o,{className:"size-4",svg:r}),y]}))})}return m("span",{className:p,...g,children:[r&&n(o,{className:"size-4",svg:r}),l]})};u.displayName="Badge";var w={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 B(t,e){if(e==="muted")return w[t];s(!1,`Invalid appearance: ${String(e)}`)}var v={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 N(t,e){if(e==="muted")return v[t];s(!1,`Invalid appearance: ${String(e)}`)}export{u as Badge};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./svg-only-BVLlbQ4e.js";import{t as n}from"./slot-DdnjeV2n.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};
 //# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"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":"wHAAA,OAAS,YAAAA,EAA+C,gBAAAC,EAAc,kBAAAC,MAAsB,QAC5F,OAAOC,MAAe,iBAwEjB,mBAAAC,EACU,OAAAC,EADV,QAAAC,MAAA,oBAjCL,IAAMC,EAAQ,CAAC,CACd,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,UACR,KAAAC,EACA,GAAGC,CACJ,IAAkB,CACjB,IAAMC,EAAUC,EAAeJ,EAAOJ,CAAU,EAC1CS,EAAYC,EAAiBN,EAAOJ,CAAU,EAE9CW,EAAeC,EACpB,mHACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EAEA,GAAIF,EAAS,CACZ,IAAMY,EAAcC,EAAS,KAAKZ,CAAQ,EAC1Ca,EACCC,EAA2BH,CAAW,EACtC,yEACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCK,EAACC,EAAA,CAAK,UAAWR,EAAe,GAAGL,EACjC,SAAAc,EACAP,EACA,CAAC,EACDQ,EAAAC,EAAA,CACE,UAAAjB,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CY,GACF,CACD,EACD,CAEF,CAEA,OACCI,EAAC,QAAK,UAAWV,EAAe,GAAGL,EACjC,UAAAD,GAAQa,EAACK,EAAA,CAAQ,UAAU,SAAS,IAAKlB,EAAM,EAC/CH,GACF,CAEF,EACAH,EAAM,YAAc,QAgBpB,IAAMyB,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,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,GAAQA,IACF,QACJ,OAAOH,EAAmBE,CAAK,EAE/BE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D,CAEA,IAAME,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,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,GAAQA,IACF,QACJ,OAAOE,EAAqBH,CAAK,EAEjCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAE/D","names":["Children","cloneElement","isValidElement","invariant","Fragment","jsx","jsxs","Badge","appearance","asChild","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","badgeClasses","cx","singleChild","Children","invariant","isValidElement","grandchildren","jsx","Slot","cloneElement","jsxs","Fragment","SvgOnly","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}
+{"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"}

package/dist/booleanish-CBGdPL3Q.js

@@ -0,0 +1,2 @@
+function e(e){return typeof e==`boolean`?e:e===`true`}export{e as t};
+//# sourceMappingURL=booleanish-CBGdPL3Q.js.map

package/dist/booleanish-CBGdPL3Q.js.map

@@ -0,0 +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"}

package/dist/browser-only-QPyyfLaB.js

@@ -0,0 +1,2 @@
+import{useSyncExternalStore as e}from"react";function t(){return e(n,()=>!0,()=>!1)}function n(){return()=>{}}function r({children:e,fallback:n=null}){return t()?e():n}function i(){return typeof window<`u`&&typeof document<`u`}export{i as n,t as r,r as t};
+//# sourceMappingURL=browser-only-QPyyfLaB.js.map

package/dist/browser-only-QPyyfLaB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-only-QPyyfLaB.js","names":[],"sources":["../src/hooks/use-is-hydrated.tsx","../src/components/browser-only/browser-only.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * React hook that returns whether the component tree has been hydrated\n * on the client.\n *\n * Uses `useSyncExternalStore` to ensure the value is consistent between\n * server and client rendering, preventing hydration mismatches.\n *\n * - On the server, it always returns `false`.\n * - On the client (after hydration), it returns `true`.\n *\n * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store\n *\n * @returns {boolean} `true` once hydration has occurred on the client,\n * otherwise `false`.\n *\n * @example\n * const isHydrated = useIsHydrated();\n *\n * if (!isHydrated) {\n *   return <span style={{ visibility: \"hidden\" }}>Loading…</span>;\n * }\n *\n * return <span>Ready!</span>;\n */\nfunction useIsHydrated() {\n\treturn useSyncExternalStore(\n\t\temptySubscribe,\n\t\t() => true,\n\t\t() => false,\n\t);\n}\n\nexport {\n\t//,\n\tuseIsHydrated,\n};\n\n/**\n * No-op subscription function required by `useSyncExternalStore`.\n *\n * Since hydration state never changes after mount, this effectively\n * does nothing.\n *\n * @private\n */\nfunction emptySubscribe() {\n\treturn () => {};\n}\n","import type { ReactNode } from \"react\";\nimport { useIsHydrated } from \"../../hooks/use-is-hydrated.js\";\n\ntype Props = {\n\t/**\n\t * Children must be a render function so that evaluation is deferred\n\t * until after hydration has occurred.\n\t */\n\tchildren: () => ReactNode;\n\t/**\n\t * Optional fallback to render on the server (and during hydration)\n\t * before the client-only children are mounted.\n\t * Ideally, this should be the same dimensions as the eventual children\n\t * to avoid layout shift.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * A wrapper component that ensures its children only render in the browser,\n * after hydration has completed.\n *\n * This is useful for components that rely on browser-only APIs\n * (e.g. `window`, `document`, `localStorage`, media queries) or that\n * cannot safely be rendered during server-side rendering (SSR).\n *\n * - On the server, and during the initial hydration pass,\n *   the `fallback` is rendered.\n * - On the client, after hydration, the `children` render function is called.\n *\n * @see https://mantle.ngrok.com/components/browser-only\n *\n * @example\n * ```tsx\n * <BrowserOnly fallback={<div style={{ height: 200 }} />} >\n *   {() => <ExpensiveChart />}\n * </BrowserOnly>\n * ```\n *\n * @see useIsHydrated\n */\nfunction BrowserOnly({ children, fallback = null }: Props) {\n\treturn useIsHydrated() ? children() : fallback;\n}\n\n/**\n * Detects whether DOM APIs are available.\n *\n * @description\n * Returns `true` when running in a windowed browser context where both\n * `window` and a real `document` exist. This will be `false` in SSR/Node.\n *\n * Note: Test environments that provide a DOM shim (e.g. JSDOM) will return `true`.\n *\n * @returns {boolean} `true` if DOM APIs are available; otherwise `false`.\n *\n * @example\n * if (canUseDOM()) {\n *   localStorage.setItem(\"foo\", \"bar\");\n * }\n */\nfunction canUseDOM(): boolean {\n\treturn typeof window !== \"undefined\" && typeof document !== \"undefined\";\n}\n\nexport {\n\t//,\n\tcanUseDOM,\n\tBrowserOnly,\n};\n"],"mappings":"6CA0BA,SAAS,GAAgB,CACxB,OAAO,EACN,MACM,OACA,GACN,CAgBF,SAAS,GAAiB,CACzB,UAAa,GCPd,SAAS,EAAY,CAAE,WAAU,WAAW,MAAe,CAC1D,OAAO,GAAe,CAAG,GAAU,CAAG,EAmBvC,SAAS,GAAqB,CAC7B,OAAO,OAAO,OAAW,KAAe,OAAO,SAAa"}

package/dist/browser-only.d.ts

@@ -1,18 +1,19 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
+//#region src/components/browser-only/browser-only.d.ts
 type Props = {
-    /**
-     * Children must be a render function so that evaluation is deferred
-     * until after hydration has occurred.
-     */
-    children: () => ReactNode;
-    /**
-     * Optional fallback to render on the server (and during hydration)
-     * before the client-only children are mounted.
-     * Ideally, this should be the same dimensions as the eventual children
-     * to avoid layout shift.
-     */
-    fallback?: ReactNode;
+  /**
+   * Children must be a render function so that evaluation is deferred
+   * until after hydration has occurred.
+   */
+  children: () => ReactNode;
+  /**
+   * Optional fallback to render on the server (and during hydration)
+   * before the client-only children are mounted.
+   * Ideally, this should be the same dimensions as the eventual children
+   * to avoid layout shift.
+   */
+  fallback?: ReactNode;
 };
 /**
  * A wrapper component that ensures its children only render in the browser,
@@ -37,7 +38,10 @@ type Props = {
  *
  * @see useIsHydrated
  */
-declare function BrowserOnly({ children, fallback }: Props): ReactNode;
+declare function BrowserOnly({
+  children,
+  fallback
+}: Props): ReactNode;
 /**
  * Detects whether DOM APIs are available.
  *
@@ -55,5 +59,6 @@ declare function BrowserOnly({ children, fallback }: Props): ReactNode;
  * }
  */
 declare function canUseDOM(): boolean;
-
+//#endregion
 export { BrowserOnly, canUseDOM };
+//# sourceMappingURL=browser-only.d.ts.map

package/dist/browser-only.js

@@ -1,2 +1 @@
-import{b as r,c as e}from"./chunk-5VDCC3YW.js";export{r as BrowserOnly,e as canUseDOM};
-//# sourceMappingURL=browser-only.js.map
+import{n as e,t}from"./browser-only-QPyyfLaB.js";export{t as BrowserOnly,e as canUseDOM};

package/dist/button-B6StZJsz.d.ts

@@ -0,0 +1,175 @@
+import { t as DeepNonNullable } from "./deep-non-nullable-BLM3Gz0I.js";
+import { t as VariantProps$1 } from "./variant-props-UE-phTwh.js";
+import * as react from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as class_variance_authority0 from "class-variance-authority";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/button/button.d.ts
+declare const buttonVariants: (props?: ({
+  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+  isLoading?: boolean | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps$1<typeof buttonVariants>;
+/**
+ * The props for the `Button` component.
+ */
+type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
+  /**
+   * An icon to render inside the button. If the `state` is `"pending"`, then
+   * the icon will automatically be replaced with a spinner.
+   */
+  icon?: ReactNode;
+  /**
+   * The side that the icon will render on, if one is present. If `state="pending"`,
+   * then the loading icon will also render on this side.
+   * @default "start"
+   */
+  iconPlacement?: "start" | "end";
+} & ({
+  /**
+   * Use the `asChild` prop to compose Radix's functionality onto alternative
+   * element types or your own React components.
+   *
+   * When `asChild` is set to `true`, mantle will not render a default DOM
+   * element, instead cloning the component's child and passing it the props and
+   * behavior required to make it functional.
+   *
+   * asChild can be used as deeply as you need to. This means it is a great way
+   * to compose multiple primitive's behavior together.
+   *
+   * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+   */
+  asChild: true;
+  /**
+   * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+   *
+   * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+   *
+   * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+   *
+   * @enum
+   * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+   * - `"reset"`: The button resets all the controls to their initial values.
+   * - `"submit"`: The button submits the form data to the server.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+   */
+  type?: ComponentProps<"button">["type"];
+} | {
+  asChild?: false | undefined;
+  /**
+   * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+   *
+   * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+   *
+   * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+   *
+   * @enum
+   * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+   * - `"reset"`: The button resets all the controls to their initial values.
+   * - `"submit"`: The button submits the form data to the server.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+   */
+  type: Exclude<ComponentProps<"button">["type"], undefined>;
+});
+/**
+ * Renders a button or a component that looks like a button, an interactive
+ * element activated by a user with a mouse, keyboard, finger, voice command, or
+ * other assistive technology. Once activated, it then performs an action, such
+ * as submitting a form or opening a dialog.
+ *
+ * @see https://mantle.ngrok.com/components/button
+ *
+ * @example
+ * ```tsx
+ * <Button type="button" appearance="filled" priority="default">
+ *   Click me
+ * </Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
+  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+  isLoading?: boolean | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
+  /**
+   * An icon to render inside the button. If the `state` is `"pending"`, then
+   * the icon will automatically be replaced with a spinner.
+   */
+  icon?: ReactNode;
+  /**
+   * The side that the icon will render on, if one is present. If `state="pending"`,
+   * then the loading icon will also render on this side.
+   * @default "start"
+   */
+  iconPlacement?: "start" | "end";
+} & {
+  /**
+   * Use the `asChild` prop to compose Radix's functionality onto alternative
+   * element types or your own React components.
+   *
+   * When `asChild` is set to `true`, mantle will not render a default DOM
+   * element, instead cloning the component's child and passing it the props and
+   * behavior required to make it functional.
+   *
+   * asChild can be used as deeply as you need to. This means it is a great way
+   * to compose multiple primitive's behavior together.
+   *
+   * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+   */
+  asChild: true;
+  /**
+   * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+   *
+   * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+   *
+   * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+   *
+   * @enum
+   * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+   * - `"reset"`: The button resets all the controls to their initial values.
+   * - `"submit"`: The button submits the form data to the server.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+   */
+  type?: ComponentProps<"button">["type"];
+}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
+  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+  isLoading?: boolean | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
+  /**
+   * An icon to render inside the button. If the `state` is `"pending"`, then
+   * the icon will automatically be replaced with a spinner.
+   */
+  icon?: ReactNode;
+  /**
+   * The side that the icon will render on, if one is present. If `state="pending"`,
+   * then the loading icon will also render on this side.
+   * @default "start"
+   */
+  iconPlacement?: "start" | "end";
+} & {
+  asChild?: false | undefined;
+  /**
+   * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
+   *
+   * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.
+   *
+   * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type
+   *
+   * @enum
+   * - `"button"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
+   * - `"reset"`: The button resets all the controls to their initial values.
+   * - `"submit"`: The button submits the form data to the server.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
+   */
+  type: Exclude<ComponentProps<"button">["type"], undefined>;
+}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ButtonProps as n, Button as t };
+//# sourceMappingURL=button-B6StZJsz.d.ts.map

package/dist/button-CRRPesae.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./icon-B5oNYYrJ.js";import{t as n}from"./booleanish-CBGdPL3Q.js";import{t as r}from"./slot-DdnjeV2n.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-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active 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 not-disabled:active:bg-accent-500/15 not-disabled:active: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 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active: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 not-disabled:active:bg-danger-500/15 not-disabled:active: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 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700`},{appearance:`filled`,priority:`danger`,class:`bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active 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 not-disabled:active:bg-neutral-500/15 not-disabled:active: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 not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:hover:border-accent-600 focus-visible:not-disabled:active:border-accent-600`},{appearance:`filled`,priority:`neutral`,class:`bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600`},{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-CRRPesae.js.map

package/dist/button-CRRPesae.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-CRRPesae.js","names":["clsx"],"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst buttonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tfilled:\n\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\tghost:\n\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\toutlined:\n\t\t\t\t\"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 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t * color and styling to communicate its purpose to the user\n\t\t */\n\t\tpriority: {\n\t\t\tdanger: \"\",\n\t\t\tdefault: \"\",\n\t\t\tneutral: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tisLoading: false,\n\t\tpriority: \"default\",\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"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 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"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 not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:hover:border-accent-600 focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t},\n\t],\n});\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ComponentProps<\"button\">[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ComponentProps<\"button\">[\"type\"], undefined>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://mantle.ngrok.com/components/button\n *\n * @example\n * ```tsx\n * <Button type=\"button\" appearance=\"filled\" priority=\"default\">\n *   Click me\n * </Button>\n * ```\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? <CircleNotchIcon className=\"animate-spin\" /> : propIcon;\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md\",\n\t\t\t\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\"not-disabled:active:scale-97 ease-out transition-transform duration-150\",\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\tappearance !== \"link\" && \"font-sans\", // only enforce font-sans on non-link button appearances\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-appearance\": appearance,\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-priority\": priority,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement<{ children?: ReactNode }>(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && (\n\t\t\t\t\t\t\t\t<Icon svg={icon} className={clsx(iconPlacement === \"end\" && \"order-last\")} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children.props.children}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{icon && <Icon svg={icon} className={clsx(iconPlacement === \"end\" && \"order-last\")} />}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n};\n\nexport type {\n\t//,\n\tButtonAppearance,\n\tButtonPriority,\n\tButtonProps,\n};\n"],"mappings":"udAYA,MAAM,EAAiB,EAAI,GAAI,CAC9B,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,oHACN,CAMD,UAAW,CACV,MAAO,GACP,KAAM,aACN,CAKD,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,GACT,CACD,CACD,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,UACV,CACD,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,qNACD,CACD,CACC,WAAY,WACZ,SAAU,SACV,MACC,uSACD,CACD,CACC,WAAY,SACZ,SAAU,SACV,MACC,4LACD,CACD,CACC,WAAY,OACZ,SAAU,SACV,MAAO,kDACP,CACD,CACC,WAAY,QACZ,SAAU,UACV,MACC,2MACD,CACD,CACC,WAAY,WACZ,SAAU,UACV,MACC,4ZACD,CACD,CACC,WAAY,SACZ,SAAU,UACV,MACC,iMACD,CACD,CACC,WAAY,OACZ,SAAU,UACV,MAAO,8CACP,CACD,CACD,CAAC,CA0FI,EAAS,GAEb,CACC,gBAAiB,EACjB,aAAa,WACb,UACA,WACA,YACA,SAAU,EACV,KAAM,EACN,gBAAgB,QAChB,YAAY,GACZ,WAAW,UACX,OACA,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAAgB,GAAiB,GAAa,EAAU,CACnE,EAAO,EAAY,EAAC,EAAD,CAAiB,UAAU,eAAiB,CAAA,CAAG,EAKlE,EAAwB,GAAQ,IAAe,OAE/C,EAAc,CACnB,gBAAiB,EACjB,UAAW,EACV,+EACA,4CACA,8CACA,0EACA,EAAe,CAAE,aAAY,WAAU,YAAW,CAAC,CACnD,IAAe,QAAU,YACzB,GAAyB,IAAkB,SAAW,SACtD,GAAyB,IAAkB,OAAS,SACpD,EACA,CACD,kBAAmB,EACnB,gBAAiB,EACjB,eAAgB,EAChB,gBAAiB,EACjB,WACA,MACA,GAAG,EACH,CAwBD,OAtBI,GACH,EACC,EAAyC,EAAS,EAAI,EAAS,KAAK,EAAS,CAC7E,2EACA,CAGA,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GACA,EAAC,EAAD,CAAM,IAAK,EAAM,UAAWA,EAAK,IAAkB,OAAS,aAAa,CAAI,CAAA,CAE7E,EAAS,MAAM,SACd,CAAA,CAAA,CACH,CACK,CAAA,EAKR,EAAC,SAAD,CAAQ,GAAI,EAAmB,gBAA/B,CACE,GAAQ,EAAC,EAAD,CAAM,IAAK,EAAM,UAAWA,EAAK,IAAkB,OAAS,aAAa,CAAI,CAAA,CACrF,EACO,IAGX,CACD,EAAO,YAAc"}

package/dist/button-DA2p0_5F.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-bKromGBh.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(`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:``}}}),a=t(({appearance:t,className:r,children:a,...o},s)=>n(`div`,{className:e(i({appearance:t}),r),ref:s,...o,children:a}));a.displayName=`ButtonGroup`;export{a as t};
+//# sourceMappingURL=button-DA2p0_5F.js.map

package/dist/button-DA2p0_5F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-DA2p0_5F.js","names":[],"sources":["../src/components/button/button-group.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { type ComponentProps, type ComponentRef, forwardRef } from \"react\";\nimport type { VariantProps } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\nconst buttonGroupVariants = cva(\"border-form inline-flex items-center rounded-md\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the ButtonGroup.\n\t\t */\n\t\tappearance: {\n\t\t\tpanel:\n\t\t\t\t\"bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px\",\n\t\t\tghost: \"gap-0.5\",\n\t\t\toutlined: \"\", // TODO(cody): implement me\n\t\t},\n\t},\n});\n\ntype ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;\n\ntype ButtonGroupProps = ComponentProps<\"div\"> & ButtonGroupVariants;\n\n/**\n * A contained group of related buttons.\n *\n * @see https://mantle.ngrok.com/components/button-group#api-button-group\n *\n * @example\n * ```tsx\n * <ButtonGroup appearance=\"panel\">\n *   <IconButton icon={<Bold />} label=\"Bold\" />\n *   <IconButton icon={<Italic />} label=\"Italic\" />\n *   <IconButton icon={<Underline />} label=\"Underline\" />\n * </ButtonGroup>\n * ```\n */\nconst ButtonGroup = forwardRef<ComponentRef<\"div\">, ButtonGroupProps>(\n\t({ appearance, className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div className={cx(buttonGroupVariants({ appearance }), className)} ref={ref} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nButtonGroup.displayName = \"ButtonGroup\";\n\nexport {\n\t//,\n\tButtonGroup,\n};\n\nexport type {\n\t//,\n\tButtonGroupProps,\n};\n"],"mappings":"+JAKA,MAAM,EAAsB,EAAI,kDAAmD,CAClF,SAAU,CAIT,WAAY,CACX,MACC,4FACD,MAAO,UACP,SAAU,GACV,CACD,CACD,CAAC,CAoBI,EAAc,GAClB,CAAE,aAAY,YAAW,WAAU,GAAG,GAAS,IAE9C,EAAC,MAAD,CAAK,UAAW,EAAG,EAAoB,CAAE,aAAY,CAAC,CAAE,EAAU,CAAO,MAAK,GAAI,EAChF,WACI,CAAA,CAGR,CACD,EAAY,YAAc"}