@ngrok/mantle 0.1.13 → 0.1.15

package/README.md

@@ -25,7 +25,7 @@ export default {
 } satisfies Config;
 ```
 
-Next, check out the [Setup](https://mantle.ngrok.com/setup) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
+Next, check out the [Overview & Setup](https://mantle.ngrok.com/) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
 
 ## Development
 

package/assets/mantle.css

@@ -1484,6 +1484,10 @@
 	strong {
 		@apply font-medium;
 	}
+
+	th {
+		text-align: inherit;
+	}
 }
 
 @layer utilities {
@@ -1522,7 +1526,7 @@
 	}
 
 	.scrollbar {
-		scrollbar-color: hsl(var(--gray-600) / 0.5) transparent;
+		scrollbar-color: hsl(var(--gray-800) / 0.5) transparent;
 		scrollbar-width: thin;
 	}
 }

package/dist/anchor.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributeAnchorTarget, AnchorHTMLAttributes } from 'react';
-import { W as WithAsChild } from './as-child-BjnPZ1DU.js';
+import { W as WithAsChild } from './as-child-Cvu56SuO.js';
 
 /**
  * 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.

package/dist/anchor.js

@@ -1,2 +1,2 @@
-import{a as o}from"./chunk-A5H52ODC.js";import{Slot as p}from"@radix-ui/react-slot";import{forwardRef as a}from"react";import{jsx as d}from"react/jsx-runtime";var s=e=>o("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",e),i=a(({asChild:e,className:n,rel:t,...r},c)=>{let u=e?p:"a",f=l(t);return d(u,{className:s(n),ref:c,rel:f,...r})});i.displayName="Anchor";function l(e){return Array.isArray(e)?[...new Set(e)].map(r=>r?.trim()).filter(Boolean).sort().join(" ")||void 0:e?.trim()||void 0}export{i as Anchor,s as anchorClassNames,l as resolveRel};
+import{a as o}from"./chunk-A5H52ODC.js";import{Slot as a}from"@radix-ui/react-slot";import{forwardRef as f}from"react";import{jsx as m}from"react/jsx-runtime";var s=e=>o("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",e),i=f(({asChild:e,className:n,rel:t,...r},c)=>{let p=e?a:"a",u=l(t);return m(p,{className:s(n),ref:c,rel:u,...r})});i.displayName="Anchor";function l(e){return Array.isArray(e)?[...new Set(e)].map(r=>r?.trim()).filter(Boolean).sort().join(" ")||void 0:e?.trim()||void 0}export{i as Anchor,s as anchorClassNames,l as resolveRel};
 //# sourceMappingURL=anchor.js.map

package/dist/anchor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\nimport type { Rel, Target } from \"./types\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className: string | undefined) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"rel\" | \"target\"> &\n\tWithAsChild & {\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\t/**\n\t\t * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).\n\t\t *\n\t\t * Note: Setting `target=\"_blank\"` on <a> elements implicitly provides the same rel behavior as setting `rel=\"noopener\"` which does not set `window.opener`.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n\t\t *\n\t\t * @default \"_self\"\n\t\t */\n\t\ttarget?: Target | undefined;\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, rel: propRel, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"a\";\n\tconst rel = resolveRel(propRel);\n\n\treturn <Component className={anchorClassNames(className)} ref={ref} rel={rel} {...props} />;\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(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]) {\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.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\treturn rel?.trim() || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAA+B,cAAAC,MAAkB,QAoDzC,cAAAC,MAAA,oBA5CR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAoCKE,EAASC,EAA2C,CAAC,CAAE,QAAAC,EAAS,UAAAJ,EAAW,IAAKK,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAClH,IAAMC,EAAYJ,EAAUK,EAAO,IAC7BC,EAAMC,EAAWN,CAAO,EAE9B,OAAOP,EAACU,EAAA,CAAU,UAAWT,EAAiBC,CAAS,EAAG,IAAKO,EAAK,IAAKG,EAAM,GAAGJ,EAAO,CAC1F,CAAC,EACDJ,EAAO,YAAc,SAOrB,SAASS,EAAWD,EAA0F,CAC7G,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKE,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAIXF,GAAK,KAAK,GAAK,MACvB","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","propRel","props","ref","Component","Slot","rel","resolveRel","item"]}
+{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport type { AnchorHTMLAttributes } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithAsChild } from \"../../types/src/as-child\";\nimport type { Rel, Target } from \"./types\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className: string | undefined) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"rel\" | \"target\"> &\n\tWithAsChild & {\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\t/**\n\t\t * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).\n\t\t *\n\t\t * Note: Setting `target=\"_blank\"` on <a> elements implicitly provides the same rel behavior as setting `rel=\"noopener\"` which does not set `window.opener`.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n\t\t *\n\t\t * @default \"_self\"\n\t\t */\n\t\ttarget?: Target | undefined;\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, rel: propRel, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"a\";\n\tconst rel = resolveRel(propRel);\n\n\treturn <Component className={anchorClassNames(className)} ref={ref} rel={rel} {...props} />;\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(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]) {\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.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\treturn rel?.trim() || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAAS,cAAAC,MAAkB,QAqDnB,cAAAC,MAAA,oBA5CR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAoCKE,EAASC,EAA2C,CAAC,CAAE,QAAAC,EAAS,UAAAJ,EAAW,IAAKK,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAClH,IAAMC,EAAYJ,EAAUK,EAAO,IAC7BC,EAAMC,EAAWN,CAAO,EAE9B,OAAOP,EAACU,EAAA,CAAU,UAAWT,EAAiBC,CAAS,EAAG,IAAKO,EAAK,IAAKG,EAAM,GAAGJ,EAAO,CAC1F,CAAC,EACDJ,EAAO,YAAc,SAOrB,SAASS,EAAWD,EAA0F,CAC7G,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKE,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAIXF,GAAK,KAAK,GAAK,MACvB","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","propRel","props","ref","Component","Slot","rel","resolveRel","item"]}

package/dist/{as-child-BjnPZ1DU.d.ts → as-child-Cvu56SuO.d.ts}

@@ -1,5 +1,5 @@
 /**
- * Utility type for adding the `asChild` boolean prop to a component.
+ * Utility type for adding the optional `asChild` boolean prop to a component.
  */
 type WithAsChild = {
     /**

package/dist/badge.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ReactNode } from 'react';
+import { Color } from './color.js';
+
+declare const appearances: readonly ["muted"];
+type Appearance = (typeof appearances)[number];
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * 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 information or to visually indicate the status of an item.
+ */
+declare const Badge: ({ appearance, children, className, color, icon, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps };

package/dist/badge.js

@@ -0,0 +1,2 @@
+import{a as n}from"./chunk-GJVJTVHQ.js";import{a as o}from"./chunk-A5H52ODC.js";import s from"tiny-invariant";import{jsx as x,jsxs as y}from"react/jsx-runtime";var p=({appearance:t,children:e,className:g,color:a="neutral",icon:r,...l})=>{let i=d(a,t),c=b(a,t);return y("span",{className:o("inline-flex w-fit shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs",r&&"ps-1",i,c,g),...l,children:[r&&x(n,{className:"size-5 sm:size-4",svg:r}),e]})};var u={amber:"bg-amber-700/20",blue:"bg-blue-700/20",cyan:"bg-cyan-700/20",emerald:"bg-emerald-700/20",fuchsia:"bg-fuchsia-700/20",gray:"bg-gray-700/20",green:"bg-green-700/20",indigo:"bg-indigo-700/20",lime:"bg-lime-700/20",orange:"bg-orange-700/20",pink:"bg-pink-700/20",purple:"bg-purple-700/20",red:"bg-red-700/20",rose:"bg-rose-700/20",sky:"bg-sky-700/20",teal:"bg-teal-700/20",violet:"bg-violet-700/20",yellow:"bg-yellow-700/20",accent:"bg-accent-700/20",danger:"bg-danger-700/20",neutral:"bg-neutral-700/20",success:"bg-success-700/20",warning:"bg-warning-700/20"};function d(t,e){switch(e){case"muted":return u[t];default:s(!1,`Invalid appearance: ${String(e)}`)}}var m={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",neutral:"text-neutral-700",success:"text-success-700",warning:"text-warning-700"};function b(t,e){switch(e){case"muted":return m[t];default:s(!1,`Invalid appearance: ${String(e)}`)}}export{p as Badge};
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/badge/src/badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { Color } from \"../../color\";\nimport { cx } from \"../../cx\";\nimport { IconBase } from \"../../icon/src/_icon-base\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n\t/**\n\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t */\n\tcolor?: Color;\n\t/**\n\t * The icon to render inside the badge.\n\t */\n\ticon?: ReactNode;\n\t/**\n\t * The visual style of the badge.\n\t */\n\tappearance: Appearance;\n};\n\n/**\n * A Badge is a non-interactive component used to highlight important information or to visually indicate the status of an item.\n */\nconst Badge = ({ appearance, children, className, color = \"neutral\", icon, ...props }: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\n\t\t\t\t\"inline-flex w-fit shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs\",\n\t\t\t\ticon && \"ps-1\",\n\t\t\t\tbgColor,\n\t\t\t\ttextColor,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <IconBase className=\"size-5 sm:size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\n\n// MARK: - Exports\n\nexport { Badge };\n\nexport type { BadgeProps };\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-700/20\",\n\tblue: \"bg-blue-700/20\",\n\tcyan: \"bg-cyan-700/20\",\n\temerald: \"bg-emerald-700/20\",\n\tfuchsia: \"bg-fuchsia-700/20\",\n\tgray: \"bg-gray-700/20\",\n\tgreen: \"bg-green-700/20\",\n\tindigo: \"bg-indigo-700/20\",\n\tlime: \"bg-lime-700/20\",\n\torange: \"bg-orange-700/20\",\n\tpink: \"bg-pink-700/20\",\n\tpurple: \"bg-purple-700/20\",\n\tred: \"bg-red-700/20\",\n\trose: \"bg-rose-700/20\",\n\tsky: \"bg-sky-700/20\",\n\tteal: \"bg-teal-700/20\",\n\tviolet: \"bg-violet-700/20\",\n\tyellow: \"bg-yellow-700/20\",\n\taccent: \"bg-accent-700/20\",\n\tdanger: \"bg-danger-700/20\",\n\tneutral: \"bg-neutral-700/20\",\n\tsuccess: \"bg-success-700/20\",\n\twarning: \"bg-warning-700/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\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":"gFACA,OAAOA,MAAe,iBA+BpB,OAUU,OAAAC,EAVV,QAAAC,MAAA,oBALF,IAAMC,EAAQ,CAAC,CAAE,WAAAC,EAAY,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,UAAW,KAAAC,EAAM,GAAGC,CAAM,IAAkB,CACrG,IAAMC,EAAUC,EAAeJ,EAAOH,CAAU,EAC1CQ,EAAYC,EAAiBN,EAAOH,CAAU,EAEpD,OACCU,EAAC,QACA,UAAWC,EACV,qGACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EACC,GAAGG,EAEH,UAAAD,GAAQQ,EAACC,EAAA,CAAS,UAAU,mBAAmB,IAAKT,EAAM,EAC1DH,GACF,CAEF,EAUA,IAAMa,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,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOH,EAAmBE,CAAK,EAChC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD,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,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOE,EAAqBH,CAAK,EAClC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD","names":["invariant","jsx","jsxs","Badge","appearance","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","jsxs","cx","jsx","IconBase","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}

package/dist/button.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { W as WithAsChild } from './as-child-BjnPZ1DU.js';
-import { V as VariantProps } from './variant-props-Dc9PJLzN.js';
-import { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.js';
-import * as class_variance_authority from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
+import { V as VariantProps } from './variant-props-Dc9PJLzN.js';
+import { W as WithAsChild } from './as-child-Cvu56SuO.js';
+import 'class-variance-authority';
+import './deep-non-nullable-SmpSvoSd.js';
 
 declare const buttonVariants: (props?: ({
     appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
@@ -15,7 +15,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 /**
  * The props for the `Button` component.
  */
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & ButtonVariants & {
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
     /**
      * An icon to render inside the button. If the `state` is `"pending"`, then
      * the icon will automatically be replaced with a spinner.
@@ -26,16 +26,54 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Butto
      * then the loading icon will also render on this side.
      */
     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?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+} | {
+    asChild?: false | undefined;
     /**
      * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
-     * Unlike the native `<button>` element, this prop is required and has no default value.
+     *
+     * 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<ButtonHTMLAttributes<HTMLButtonElement>["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
@@ -44,31 +82,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Butto
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
  */
-declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.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.
-     */
-    iconPlacement?: "end" | "start" | undefined;
-    /**
-     * The default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
-     * Unlike the native `<button>` element, this prop is required and has no default value.
-     * - `"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<ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
-} & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare const iconButtonVariants: (props?: ({
     appearance?: "ghost" | "outlined" | null | undefined;
@@ -89,17 +103,54 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
      * the icon will automatically be replaced with a spinner.
      */
     icon: ReactNode;
+} & ({
+    /**
+     * 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"`.
-     * Unlike the native `<button>` element, this prop defaults to `"button"`.
+     *
+     * 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
-     * @default "button"
      */
     type?: ButtonHTMLAttributes<HTMLButtonElement>["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<ButtonHTMLAttributes<HTMLButtonElement>["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
@@ -109,30 +160,6 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
  */
-declare const IconButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    size?: "xs" | "sm" | "md" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
-    /**
-     * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
-     */
-    label: 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 default behavior of the button. Possible values are: `"button"`, `"submit"`, and `"reset"`.
-     * Unlike the native `<button>` element, this prop defaults to `"button"`.
-     * - `"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
-     * @default "button"
-     */
-    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-} & react.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 export { Button, type ButtonProps, IconButton, type IconButtonProps };

package/dist/button.js

@@ -1,2 +1,2 @@
-import{a,b}from"./chunk-WFVD5X7N.js";import"./chunk-VT3Y7SNW.js";import"./chunk-A5H52ODC.js";export{a as Button,b as IconButton};
+import{a,b}from"./chunk-K5GCPATB.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import"./chunk-A5H52ODC.js";export{a as Button,b as IconButton};
 //# sourceMappingURL=button.js.map

package/dist/card.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
-import { W as WithAsChild } from './as-child-BjnPZ1DU.js';
+import { W as WithAsChild } from './as-child-Cvu56SuO.js';
 
 type CardProps = HTMLAttributes<HTMLDivElement>;
 /**

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/checkbox/src/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithStyleProps } from \"../../types\";\n\ntype Props = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, Props>(({ className, ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"size-4 shrink-0 appearance-none rounded border border-form bg-form focus:border-accent-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-focus-accent disabled:cursor-not-allowed disabled:opacity-50 data-state-checked:border-transparent data-state-checked:bg-filled-accent data-state-indeterminate:border-transparent data-state-indeterminate:bg-filled-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className=\"hidden items-center justify-center leading-none text-on-filled data-state-checked:flex\">\n\t\t\t<CheckedIcon className=\"size-3\" />\n\t\t</CheckboxPrimitive.Indicator>\n\t\t<CheckboxPrimitive.Indicator className=\"hidden items-center justify-center text-on-filled data-state-indeterminate:flex\">\n\t\t\t<IndeterminateIcon className=\"size-3\" />\n\t\t</CheckboxPrimitive.Indicator>\n\t\t<CheckboxPrimitive.Indicator />\n\t</CheckboxPrimitive.Root>\n));\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n\nconst CheckedIcon = ({ className, style }: WithStyleProps) => (\n\t<svg className={className} style={style} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\td=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L3.29289 9.70711C2.90237 9.31658 2.90237 8.68342 3.29289 8.29289C3.68342 7.90237 4.31658 7.90237 4.70711 8.29289L6 9.58579L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n\t\t\tfill=\"currentColor\"\n\t\t/>\n\t</svg>\n);\n\nconst IndeterminateIcon = ({ className, style }: WithStyleProps) => (\n\t<svg className={className} style={style} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\td=\"M4 8C4 7.44772 4.44772 7 5 7H11C11.5523 7 12 7.44772 12 8C12 8.55228 11.5523 9 11 9H5C4.44772 9 4 8.55228 4 8Z\"\n\t\t\tfill=\"currentColor\"\n\t\t/>\n\t</svg>\n);\n"],"mappings":"wCAAA,UAAYA,MAAuB,2BACnC,OAAS,cAAAC,MAAkB,QAQ1B,OASE,OAAAC,EATF,QAAAC,MAAA,oBADD,IAAMC,EAAWC,EAA6D,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACvGL,EAAmB,OAAlB,CACA,IAAKK,EACL,UAAWC,EACV,6XACAH,CACD,EACC,GAAGC,EAEJ,UAAAL,EAAmB,YAAlB,CAA4B,UAAU,yFACtC,SAAAA,EAACQ,EAAA,CAAY,UAAU,SAAS,EACjC,EACAR,EAAmB,YAAlB,CAA4B,UAAU,kFACtC,SAAAA,EAACS,EAAA,CAAkB,UAAU,SAAS,EACvC,EACAT,EAAmB,YAAlB,EAA4B,GAC9B,CACA,EACDE,EAAS,YAAc,WAIvB,IAAMQ,EAAc,CAAC,CAAE,UAAAC,EAAW,MAAAC,CAAM,IACvCC,EAAC,OAAI,UAAWF,EAAW,MAAOC,EAAO,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAC9E,SAAAC,EAAC,QACA,EAAE,8TACF,KAAK,eACN,EACD,EAGKC,EAAoB,CAAC,CAAE,UAAAH,EAAW,MAAAC,CAAM,IAC7CC,EAAC,OAAI,UAAWF,EAAW,MAAOC,EAAO,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAC9E,SAAAC,EAAC,QACA,EAAE,iHACF,KAAK,eACN,EACD","names":["CheckboxPrimitive","forwardRef","jsx","jsxs","Checkbox","forwardRef","className","props","ref","cx","CheckedIcon","IndeterminateIcon","CheckedIcon","className","style","jsx","IndeterminateIcon"]}
+{"version":3,"sources":["../packages/checkbox/src/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithStyleProps } from \"../../types\";\n\ntype Props = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, Props>(({ className, ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"size-4 shrink-0 appearance-none rounded border border-form bg-form focus:border-accent-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-focus-accent disabled:cursor-not-allowed disabled:opacity-50 data-state-checked:border-transparent data-state-checked:bg-filled-accent data-state-indeterminate:border-transparent data-state-indeterminate:bg-filled-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className=\"hidden items-center justify-center leading-none text-on-filled data-state-checked:flex\">\n\t\t\t<CheckedIcon className=\"size-3\" />\n\t\t</CheckboxPrimitive.Indicator>\n\t\t<CheckboxPrimitive.Indicator className=\"hidden items-center justify-center text-on-filled data-state-indeterminate:flex\">\n\t\t\t<IndeterminateIcon className=\"size-3\" />\n\t\t</CheckboxPrimitive.Indicator>\n\t\t<CheckboxPrimitive.Indicator />\n\t</CheckboxPrimitive.Root>\n));\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n\nconst CheckedIcon = ({ className, style }: WithStyleProps) => (\n\t<svg className={className} style={style} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\td=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L3.29289 9.70711C2.90237 9.31658 2.90237 8.68342 3.29289 8.29289C3.68342 7.90237 4.31658 7.90237 4.70711 8.29289L6 9.58579L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n\t\t\tfill=\"currentColor\"\n\t\t/>\n\t</svg>\n);\n\nconst IndeterminateIcon = ({ className, style }: WithStyleProps) => (\n\t<svg className={className} style={style} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\td=\"M4 8C4 7.44772 4.44772 7 5 7H11C11.5523 7 12 7.44772 12 8C12 8.55228 11.5523 9 11 9H5C4.44772 9 4 8.55228 4 8Z\"\n\t\t\tfill=\"currentColor\"\n\t\t/>\n\t</svg>\n);\n"],"mappings":"wCAAA,UAAYA,MAAuB,2BACnC,OAAS,cAAAC,MAAkB,QAQ1B,OASE,OAAAC,EATF,QAAAC,MAAA,oBADD,IAAMC,EAAWC,EAA6D,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACvGL,EAAmB,OAAlB,CACA,IAAKK,EACL,UAAWC,EACV,6XACAH,CACD,EACC,GAAGC,EAEJ,UAAAL,EAAmB,YAAlB,CAA4B,UAAU,yFACtC,SAAAA,EAACQ,EAAA,CAAY,UAAU,SAAS,EACjC,EACAR,EAAmB,YAAlB,CAA4B,UAAU,kFACtC,SAAAA,EAACS,EAAA,CAAkB,UAAU,SAAS,EACvC,EACAT,EAAmB,YAAlB,EAA4B,GAC9B,CACA,EACDE,EAAS,YAAc,WAIvB,IAAMQ,EAAc,CAAC,CAAE,UAAAC,EAAW,MAAAC,CAAM,IACvCC,EAAC,OAAI,UAAWF,EAAW,MAAOC,EAAO,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAC9E,SAAAC,EAAC,QACA,EAAE,8TACF,KAAK,eACN,EACD,EAGKC,EAAoB,CAAC,CAAE,UAAAH,EAAW,MAAAC,CAAM,IAC7CC,EAAC,OAAI,UAAWF,EAAW,MAAOC,EAAO,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAC9E,SAAAC,EAAC,QACA,EAAE,iHACF,KAAK,eACN,EACD","names":["CheckboxPrimitive","forwardRef","jsx","jsxs","Checkbox","forwardRef","className","props","ref","cx","CheckedIcon","IndeterminateIcon","CheckedIcon","className","style","jsx","IndeterminateIcon"]}

package/dist/chunk-GJVJTVHQ.js

@@ -0,0 +1,2 @@
+import{a as e}from"./chunk-A5H52ODC.js";import{Children as p,cloneElement as a,isValidElement as n}from"react";import i from"tiny-invariant";import{Fragment as m,jsx as c}from"react/jsx-runtime";var S=({className:o,style:s,svg:r})=>{let t=p.only(r);return i(n(t),"Icon must be passed a single SVG icon as a JSX tag."),c(m,{children:a(t,{className:e("shrink-0",t.props.className,o),style:{...t.props.style,...s}})})};export{S as a};
+//# sourceMappingURL=chunk-GJVJTVHQ.js.map

package/dist/chunk-GJVJTVHQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/icon/src/_icon-base.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../cx\";\nimport type { WithStyleProps } from \"../../types\";\nimport type { SvgAttributes } from \"./types\";\n\ntype IconBaseProps = WithStyleProps & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * @private Internal component for Icon, should not be exported from mantle. Can be used in other mantle components if needed.\n * The main difference between Icon and IconBase is that IconBase does not apply any default sizing styles, only `shrink-0`.\n *\n * Decorates an svg icon with automatic sizing styles.\n * Merges `className` selectors with the following order of precedence (last one wins):\n * 1. Icon base classes\n * 2. svg className\n * 3. Icon className\n */\nconst IconBase = ({ className, style, svg }: IconBaseProps) => {\n\tconst icon = Children.only(svg) as ReactElement;\n\tinvariant(isValidElement<SvgAttributes>(icon), \"Icon must be passed a single SVG icon as a JSX tag.\");\n\n\treturn (\n\t\t<>\n\t\t\t{cloneElement(icon, {\n\t\t\t\tclassName: cx(\"shrink-0\", icon.props.className, className),\n\t\t\t\tstyle: { ...icon.props.style, ...style },\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport { IconBase };\n"],"mappings":"wCACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,kBAAAC,MAAsB,QACvD,OAAOC,MAAe,iBA2BpB,mBAAAC,EAAA,OAAAC,MAAA,oBALF,IAAMC,EAAW,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,IAAAC,CAAI,IAAqB,CAC9D,IAAMC,EAAOC,EAAS,KAAKF,CAAG,EAC9B,OAAAG,EAAUC,EAA8BH,CAAI,EAAG,qDAAqD,EAGnGL,EAAAD,EAAA,CACE,SAAAU,EAAaJ,EAAM,CACnB,UAAWK,EAAG,WAAYL,EAAK,MAAM,UAAWH,CAAS,EACzD,MAAO,CAAE,GAAGG,EAAK,MAAM,MAAO,GAAGF,CAAM,CACxC,CAAC,EACF,CAEF","names":["Children","cloneElement","isValidElement","invariant","Fragment","jsx","IconBase","className","style","svg","icon","Children","invariant","isValidElement","cloneElement","cx"]}

package/dist/chunk-K5GCPATB.js

@@ -0,0 +1,2 @@
+import{a as d}from"./chunk-YPS473FU.js";import{a as g}from"./chunk-A5H52ODC.js";import{CircleNotch as L}from"@phosphor-icons/react/CircleNotch";import{Slot as N}from"@radix-ui/react-slot";import{cva as k}from"class-variance-authority";import E from"clsx";import{Children as A,cloneElement as w,forwardRef as z,isValidElement as R}from"react";import S from"tiny-invariant";function m(e){return typeof e=="boolean"?e:e==="true"}import{jsx as l,jsxs as D}from"react/jsx-runtime";var W=k("inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 aria-disabled:opacity-50 sm:text-sm [&>*]:focus-within:outline-none",{variants:{appearance:{filled:"h-11 border border-transparent bg-filled-accent px-3 font-medium text-on-filled hover:bg-filled-accent-hover focus-visible:border-accent-600 focus-visible:ring-focus-accent active:bg-filled-accent-active sm:h-9",ghost:"h-11 border border-transparent px-3 font-medium text-accent-600 hover:bg-accent-500/10 hover:text-accent-700 focus-visible:ring-focus-accent active:bg-accent-500/15 active:text-accent-700 sm:h-9",outlined:"h-11 border border-accent-600 bg-form px-3 font-medium text-accent-600 hover:border-accent-700 hover:bg-accent-500/10 hover:text-accent-700 focus-visible:ring-focus-accent active:border-accent-700 active:bg-accent-500/15 active:text-accent-700 sm:h-9",link:"group border-transparent text-accent-600 hover:underline focus-visible:ring-focus-accent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"border-transparent text-danger-600 hover:bg-danger-500/10 hover:text-danger-700 focus-visible:ring-focus-danger active:bg-danger-500/15 active:text-danger-700"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 hover:border-danger-700 hover:bg-danger-500/10 hover:text-danger-700 focus-visible:ring-focus-danger active:border-danger-700 active:bg-danger-500/15 active:text-danger-700"},{appearance:"filled",priority:"danger",class:"border-transparent bg-filled-danger hover:bg-filled-danger-hover focus-visible:border-danger-600 focus-visible:ring-focus-danger active:bg-filled-danger-active"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"border-transparent text-strong hover:bg-neutral-500/10 hover:text-strong focus-visible:ring-focus-accent active:bg-neutral-500/15 active:text-strong"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"border-transparent bg-filled-neutral hover:bg-filled-neutral-hover focus-visible:border-neutral-600 focus-visible:ring-focus-neutral active:bg-filled-neutral-active"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),T=z(({"aria-disabled":e,appearance:r="outlined",asChild:a,children:i,className:v,disabled:h,icon:y,iconPlacement:t="start",isLoading:s=!1,onClick:x,priority:B="default",type:C,...P},M)=>{let u=m(e??h??s),c=s?l(L,{className:"animate-spin"}):y,f=c&&r!=="link",b=o=>{if(u){o.preventDefault();return}x?.(o)},n={"aria-disabled":u,className:g(W({appearance:r,priority:B,isLoading:s}),f&&t==="start"&&"ps-2.5",f&&t==="end"&&"pe-2.5",v),"data-loading":s,onClick:b,ref:M,...P};if(a){let o=A.only(i);S(R(o),"When using `asChild`, Button must be passed a single child as a JSX tag.");let I=o.props?.children;return l(N,{...n,children:w(o,{},l(H,{appearance:r,icon:c,iconPlacement:t,children:I}))})}return l("button",{...n,type:C,children:l(H,{appearance:r,icon:c,iconPlacement:t,children:i})})});T.displayName="Button";var H=({appearance:e,children:r,icon:a,iconPlacement:i})=>D("span",{className:E("inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none",e==="link"&&"group-hover:underline"),children:[a&&l(d,{svg:a,className:E(i==="end"&&"order-last")}),r]});import{CircleNotch as J}from"@phosphor-icons/react/CircleNotch";import{Slot as X}from"@radix-ui/react-slot";import{cva as j}from"class-variance-authority";import{Children as q,cloneElement as F,forwardRef as G,isValidElement as K}from"react";import{jsx as p,jsxs as Q}from"react/jsx-runtime";var O=j("inline-flex cursor-pointer items-center justify-center rounded-md border focus-within:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50",{variants:{appearance:{ghost:"border-transparent text-strong hover:bg-neutral-500/10 hover:text-strong focus-visible:ring-focus-accent active:bg-neutral-500/15 active:text-strong",outlined:"border-form bg-form text-strong hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-7 sm:size-6",sm:"size-9 sm:size-7",md:"size-11 sm:size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),V=G(({"aria-disabled":e,appearance:r,asChild:a=!1,children:i,className:v,disabled:h,icon:y,isLoading:t=!1,label:s,onClick:x,size:B,type:C,...P},M)=>{let u=m(e??h??t),c=t?p(J,{className:"animate-spin"}):y,f=n=>{if(u){n.preventDefault();return}x?.(n)},b={"aria-disabled":u,className:g(O({appearance:r,isLoading:t,size:B}),v),"data-loading":t,onClick:f,ref:M,...P};if(a){let n=q.only(i),o=K(n);return p(X,{...b,children:o&&F(n,{},p(d,{svg:c}))})}return Q("button",{...b,type:C,children:[p("span",{className:"sr-only",children:s}),p(d,{svg:c})]})});V.displayName="IconButton";export{T as a,V as b};
+//# sourceMappingURL=chunk-K5GCPATB.js.map

package/dist/chunk-K5GCPATB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/button/src/button.tsx","../packages/button/src/parse-booleanish.tsx","../packages/button/src/icon-button.tsx"],"sourcesContent":["import { CircleNotch } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, MouseEvent, PropsWithChildren, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../cx\";\nimport { Icon } from \"../../icon\";\nimport type { VariantProps } from \"../../types/src/variant-props\";\nimport { parseBooleanish } from \"./parse-booleanish\";\n\nconst buttonVariants = cva(\n\t\"inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 aria-disabled:opacity-50 sm:text-sm [&>*]:focus-within:outline-none\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tfilled:\n\t\t\t\t\t\"h-11 border border-transparent bg-filled-accent px-3 font-medium text-on-filled hover:bg-filled-accent-hover focus-visible:border-accent-600 focus-visible:ring-focus-accent active:bg-filled-accent-active sm:h-9\",\n\t\t\t\tghost:\n\t\t\t\t\t\"h-11 border border-transparent px-3 font-medium text-accent-600 hover:bg-accent-500/10 hover:text-accent-700 focus-visible:ring-focus-accent active:bg-accent-500/15 active:text-accent-700 sm:h-9\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"h-11 border border-accent-600 bg-form px-3 font-medium text-accent-600 hover:border-accent-700 hover:bg-accent-500/10 hover:text-accent-700 focus-visible:ring-focus-accent active:border-accent-700 active:bg-accent-500/15 active:text-accent-700 sm:h-9\",\n\t\t\t\tlink: \"group border-transparent text-accent-600 hover:underline focus-visible:ring-focus-accent\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t\t * 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\tdefault: \"\",\n\t\t\t\tneutral: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tisLoading: false,\n\t\t\tpriority: \"default\",\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-transparent text-danger-600 hover:bg-danger-500/10 hover:text-danger-700 focus-visible:ring-focus-danger active:bg-danger-500/15 active:text-danger-700\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-danger-600 bg-form text-danger-600 hover:border-danger-700 hover:bg-danger-500/10 hover:text-danger-700 focus-visible:ring-focus-danger active:border-danger-700 active:bg-danger-500/15 active:text-danger-700\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-transparent bg-filled-danger hover:bg-filled-danger-hover focus-visible:border-danger-600 focus-visible:ring-focus-danger active:bg-filled-danger-active\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-transparent text-strong hover:bg-neutral-500/10 hover:text-strong focus-visible:ring-focus-accent active:bg-neutral-500/15 active:text-strong\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-form bg-form text-strong hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-transparent bg-filled-neutral hover:bg-filled-neutral-hover focus-visible:border-neutral-600 focus-visible:ring-focus-neutral active:bg-filled-neutral-active\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\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 */\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?: ButtonHTMLAttributes<HTMLButtonElement>[\"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<ButtonHTMLAttributes<HTMLButtonElement>[\"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://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\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,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tonClick: propsOnClick,\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 ariaDisabled = parseBooleanish(_ariaDisabled ?? disabled ?? isLoading);\n\t\tconst icon = isLoading ? <CircleNotch 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 onClick = (event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tif (ariaDisabled) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tpropsOnClick?.(event);\n\t\t};\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": ariaDisabled,\n\t\t\tclassName: cx(\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\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-loading\": isLoading,\n\t\t\tonClick,\n\t\t\tref,\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<ButtonProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Button 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 {...buttonProps}>\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<InnerContent appearance={appearance} icon={icon} iconPlacement={iconPlacement}>\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</InnerContent>,\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<InnerContent appearance={appearance} icon={icon} iconPlacement={iconPlacement}>\n\t\t\t\t\t{children}\n\t\t\t\t</InnerContent>\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\nexport type { ButtonProps };\n\ntype InnerContentProps = PropsWithChildren & Pick<ButtonProps, \"appearance\" | \"icon\" | \"iconPlacement\">;\n\nconst InnerContent = ({ appearance, children, icon, iconPlacement }: InnerContentProps) => (\n\t<span\n\t\tclassName={clsx(\n\t\t\t\"inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none\",\n\t\t\tappearance === \"link\" && \"group-hover:underline\",\n\t\t)}\n\t>\n\t\t{icon && <Icon svg={icon} className={clsx(iconPlacement === \"end\" && \"order-last\")} />}\n\t\t{children}\n\t</span>\n);\n","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 & {})): boolean {\n\tif (typeof value === \"boolean\") {\n\t\treturn value;\n\t} else {\n\t\treturn value === \"true\";\n\t}\n}\n","import { CircleNotch } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport { Icon } from \"../../icon\";\nimport type { VariantProps, WithAsChild } from \"../../types\";\nimport { parseBooleanish } from \"./parse-booleanish\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex cursor-pointer items-center justify-center rounded-md border focus-within:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tghost:\n\t\t\t\t\t\"border-transparent text-strong hover:bg-neutral-500/10 hover:text-strong focus-visible:ring-focus-accent active:bg-neutral-500/15 active:text-strong\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-form bg-form text-strong hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace the `icon` with a spinner.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * The size of the IconButton.\n\t\t\t */\n\t\t\tsize: {\n\t\t\t\txs: \"size-7 sm:size-6\",\n\t\t\t\tsm: \"size-9 sm:size-7\",\n\t\t\t\tmd: \"size-11 sm:size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\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} & (\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?: ButtonHTMLAttributes<HTMLButtonElement>[\"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<ButtonHTMLAttributes<HTMLButtonElement>[\"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 * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tonClick: propsOnClick,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ariaDisabled = parseBooleanish(_ariaDisabled ?? disabled ?? isLoading);\n\t\tconst icon = isLoading ? <CircleNotch className=\"animate-spin\" /> : propIcon;\n\n\t\tconst onClick = (event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tif (ariaDisabled) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tpropsOnClick?.(event);\n\t\t};\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": ariaDisabled,\n\t\t\tclassName: cx(iconButtonVariants({ appearance, isLoading, size }), className),\n\t\t\t\"data-loading\": isLoading,\n\t\t\tonClick,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn <Slot {...buttonProps}>{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}</Slot>;\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],"mappings":"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","names":["CircleNotch","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","parseBooleanish","value","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","disabled","propIcon","iconPlacement","isLoading","propsOnClick","priority","type","props","ref","ariaDisabled","parseBooleanish","icon","CircleNotch","hasSpecialIconPadding","onClick","event","buttonProps","cx","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","InnerContent","InnerContent","appearance","children","icon","iconPlacement","jsxs","clsx","jsx","Icon","CircleNotch","Slot","cva","Children","cloneElement","forwardRef","isValidElement","jsx","jsxs","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","disabled","propIcon","isLoading","label","propsOnClick","size","type","props","ref","ariaDisabled","parseBooleanish","icon","CircleNotch","onClick","event","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon"]}

package/dist/chunk-YPS473FU.js

@@ -0,0 +1,2 @@
+import{a as t}from"./chunk-GJVJTVHQ.js";import{a as o}from"./chunk-A5H52ODC.js";import{jsx as c}from"react/jsx-runtime";var s=({className:e,style:r,svg:p})=>c(t,{className:o("size-6 sm:size-5",e),style:r,svg:p});export{s as a};
+//# sourceMappingURL=chunk-YPS473FU.js.map

package/dist/chunk-YPS473FU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/icon/src/icon.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithStyleProps } from \"../../types\";\nimport { IconBase } from \"./_icon-base\";\n\ntype IconProps = WithStyleProps & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n/**\n * Decorates an svg icon with automatic sizing styles.\n * Merges `className` selectors with the following order of precedence (last one wins):\n * 1. Icon base classes\n * 2. svg className\n * 3. Icon className\n */\nconst Icon = ({ className, style, svg }: IconProps) => (\n\t<IconBase className={cx(\"size-6 sm:size-5\", className)} style={style} svg={svg} />\n);\n\nexport { Icon };\nexport type { IconProps };\n"],"mappings":"gFAmBC,cAAAA,MAAA,oBADD,IAAMC,EAAO,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,IAAAC,CAAI,IACrCJ,EAACK,EAAA,CAAS,UAAWC,EAAG,mBAAoBJ,CAAS,EAAG,MAAOC,EAAO,IAAKC,EAAK","names":["jsx","Icon","className","style","svg","IconBase","cx"]}

package/dist/code-block.d.ts

@@ -56,13 +56,13 @@ declare const metaSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     collapsible: boolean;
     disableCopy: boolean;
-    mode?: "file" | "cli" | undefined;
     title?: string | undefined;
+    mode?: "file" | "cli" | undefined;
 }, {
+    title?: string | undefined;
+    mode?: "file" | "cli" | undefined;
     collapsible?: boolean | undefined;
     disableCopy?: boolean | undefined;
-    mode?: "file" | "cli" | undefined;
-    title?: string | undefined;
 }>;
 type MetaInput = z.input<typeof metaSchema>;
 type Meta = z.infer<typeof metaSchema>;