@ngrok/mantle 0.73.2 → 0.73.4

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A non-interactive label used to highlight short, scannable information —\n * a status, a category tag, or a count — in the smallest possible footprint.\n *\n * **When to use**\n * - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`.\n * - Category or tag chips alongside list items, table rows, or cards.\n * - Counts (e.g. `12 new`) when paired with brief context.\n *\n * **When not to use**\n * - For interactive UI. Badges are not buttons or links — use {@link https://mantle.ngrok.com/components/button Button}\n *   or {@link https://mantle.ngrok.com/components/anchor Anchor} (optionally with `asChild` styling) instead.\n * - For long-form text. Keep labels to one or two short words.\n * - As the sole signal of meaning. Pair color with a label or icon so the\n *   distinction works without color (color blindness, monochrome themes).\n *\n * **Choosing a `color`.** Prefer functional colors (`success`, `warning`,\n * `danger`, `info`, `accent`, `neutral`) for status meaning so theming\n * stays coherent. Reach for named hues only when the badge's semantic role\n * isn't already covered.\n *\n * **Polymorphism.** Pass `asChild` to render the badge as a single child\n * element — useful when the badge wraps a link or other semantic element\n * while keeping the badge styling.\n *\n * @see https://mantle.ngrok.com/components/badge\n *\n * @example\n * ```tsx\n * import { Badge } from \"@ngrok/mantle/badge\";\n * import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\n *\n * <Badge appearance=\"muted\" color=\"success\" icon={<CheckCircleIcon />}>\n *   Succeeded\n * </Badge>\n *\n * // Polymorphic — render the badge as a link, preserving its styling.\n * <Badge appearance=\"muted\" color=\"info\" asChild>\n *   <a href=\"/status\">Operational</a>\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 data-slot=\"badge\" 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 data-slot=\"badge\" className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\timportant: \"bg-important-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\timportant: \"text-important-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"uRAqEA,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,YAAU,QAAQ,UAAW,EAAc,GAAI,WACnD,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,YAAU,QAAQ,UAAW,EAAc,GAAI,WAArD,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACK,IAGT,EAAM,YAAc,QAgBpB,MAAM,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,UAAW,sBACX,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,oBACT,CAED,SAAS,EAAe,EAAc,EAAwB,CAC7D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAmB,GAC3B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG,EAIhE,MAAM,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,UAAW,qBACX,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,mBACT,CAED,SAAS,EAAiB,EAAc,EAAwB,CAC/D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAqB,GAC7B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG"}
+{"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 non-interactive label used to highlight short, scannable information —\n * a status, a category tag, or a count — in the smallest possible footprint.\n *\n * **When to use**\n * - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`.\n * - Category or tag chips alongside list items, table rows, or cards.\n * - Counts (e.g. `12 new`) when paired with brief context.\n *\n * **When not to use**\n * - For interactive UI. Badges are not buttons or links — use {@link https://mantle.ngrok.com/components/button Button}\n *   or {@link https://mantle.ngrok.com/components/anchor Anchor} (optionally with `asChild` styling) instead.\n * - For long-form text. Keep labels to one or two short words.\n * - As the sole signal of meaning. Pair color with a label or icon so the\n *   distinction works without color (color blindness, monochrome themes).\n *\n * **Choosing a `color`.** Prefer functional colors (`success`, `warning`,\n * `danger`, `info`, `accent`, `neutral`) for status meaning so theming\n * stays coherent. Reach for named hues only when the badge's semantic role\n * isn't already covered.\n *\n * **Polymorphism.** Pass `asChild` to render the badge as a single child\n * element — useful when the badge wraps a link or other semantic element\n * while keeping the badge styling.\n *\n * @see https://mantle.ngrok.com/components/badge\n *\n * @example\n * ```tsx\n * import { Badge } from \"@ngrok/mantle/badge\";\n * import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\n *\n * <Badge appearance=\"muted\" color=\"success\" icon={<CheckCircleIcon />}>\n *   Succeeded\n * </Badge>\n *\n * // Polymorphic — render the badge as a link, preserving its styling.\n * <Badge appearance=\"muted\" color=\"info\" asChild>\n *   <a href=\"/status\">Operational</a>\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 data-slot=\"badge\" 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 data-slot=\"badge\" className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\timportant: \"bg-important-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\timportant: \"text-important-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"uRAqEA,MAAM,GAAS,CACd,aACA,UAAU,GACV,WACA,YACA,QAAQ,UACR,OACA,GAAG,KACc,CACjB,IAAM,EAAU,EAAe,EAAO,CAAU,EAC1C,EAAY,EAAiB,EAAO,CAAU,EAE9C,EAAe,EACpB,mHACA,GAAQ,OACR,EACA,EACA,CACD,EAEA,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,CAAQ,EAC1C,EACC,EAA2B,CAAW,EACtC,yEACD,EACA,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,YAAU,QAAQ,UAAW,EAAc,GAAI,WACnD,EACA,EACA,CAAC,EACD,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,CAAO,CAAA,EAChD,CACA,CAAA,CAAA,CACH,CACK,CAAA,CAER,CAEA,OACC,EAAC,OAAD,CAAM,YAAU,QAAQ,UAAW,EAAc,GAAI,WAArD,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,CAAO,CAAA,EAChD,CACI,GAER,EACA,EAAM,YAAc,QAgBpB,MAAM,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,UAAW,sBACX,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAAS,EAAe,EAAc,EAAwB,CAC7D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAmB,GAC3B,QACC,EAAU,GAAO,uBAAuB,OAAO,CAAU,GAAG,CAC9D,CACD,CAEA,MAAM,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,UAAW,qBACX,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAAS,EAAiB,EAAc,EAAwB,CAC/D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAqB,GAC7B,QACC,EAAU,GAAO,uBAAuB,OAAO,CAAU,GAAG,CAC9D,CACD"}

package/dist/{booleanish-CBGdPL3Q.js → booleanish-BfvnW6vy.js}

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

package/dist/{booleanish-CBGdPL3Q.js.map → booleanish-BfvnW6vy.js.map}

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

package/dist/{browser-only-QPyyfLaB.js → browser-only-BSl_hruR.js}

@@ -1,2 +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
+//# sourceMappingURL=browser-only-BSl_hruR.js.map

package/dist/{browser-only-QPyyfLaB.js.map → browser-only-BSl_hruR.js.map}

@@ -1 +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"}
+{"version":3,"file":"browser-only-BSl_hruR.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,EACP,CACD,CAeA,SAAS,GAAiB,CACzB,UAAa,CAAC,CACf,CCRA,SAAS,EAAY,CAAE,WAAU,WAAW,MAAe,CAC1D,OAAO,EAAc,EAAI,EAAS,EAAI,CACvC,CAkBA,SAAS,GAAqB,CAC7B,OAAO,OAAO,OAAW,KAAe,OAAO,SAAa,GAC7D"}

package/dist/browser-only.js

@@ -1 +1 @@
-import{n as e,t}from"./browser-only-QPyyfLaB.js";export{t as BrowserOnly,e as canUseDOM};
+import{n as e,t}from"./browser-only-BSl_hruR.js";export{t as BrowserOnly,e as canUseDOM};

package/dist/{button-POMJ-20y.js → button-BAxneEMu.js}

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

package/dist/{button-POMJ-20y.js.map → button-BAxneEMu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-POMJ-20y.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 type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.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 & WithAsChild;\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, asChild, className, children, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"button-group\"\n\t\t\t\tclassName={cx(buttonGroupVariants({ appearance }), className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\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":"iMAOA,MAAM,EAAsB,EAAI,kDAAmD,CAClF,SAAU,CAIT,WAAY,CACX,MACC,4FACD,MAAO,UACP,SAAU,GACV,CACD,CACD,CAAC,CAoBI,EAAc,GAClB,CAAE,aAAY,UAAS,YAAW,WAAU,GAAG,GAAS,IAGvD,EAFY,EAAU,EAAO,MAE7B,CACC,YAAU,eACV,UAAW,EAAG,EAAoB,CAAE,aAAY,CAAC,CAAE,EAAU,CACxD,MACL,GAAI,EAEH,WACK,CAAA,CAGT,CACD,EAAY,YAAc"}
+{"version":3,"file":"button-BAxneEMu.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 type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.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 & WithAsChild;\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, asChild, className, children, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"button-group\"\n\t\t\t\tclassName={cx(buttonGroupVariants({ appearance }), className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\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":"iMAOA,MAAM,EAAsB,EAAI,kDAAmD,CAClF,SAAU,CAIT,WAAY,CACX,MACC,4FACD,MAAO,UACP,SAAU,EACX,CACD,CACD,CAAC,EAoBK,EAAc,GAClB,CAAE,aAAY,UAAS,YAAW,WAAU,GAAG,GAAS,IAGvD,EAFY,EAAU,EAAO,MAE7B,CACC,YAAU,eACV,UAAW,EAAG,EAAoB,CAAE,YAAW,CAAC,EAAG,CAAS,EACvD,MACL,GAAI,EAEH,UACI,CAAA,CAGT,EACA,EAAY,YAAc"}

package/dist/{button-DbHFERMB.d.ts → button-BYZOBUgj.d.ts}

@@ -1,17 +1,14 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-Xu7ckQM6.js";
-import { t as VariantProps$1 } from "./variant-props-BZbM__kQ.js";
-import * as _$react from "react";
+import { t as DeepNonNullable } from "./deep-non-nullable-BxRoySYR.js";
+import { t as VariantProps } from "./variant-props-CVymuSfa.js";
 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?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
+  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "default" | "danger" | "neutral" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-type ButtonVariants = VariantProps$1<typeof buttonVariants>;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
 /**
  * The props for the `Button` component.
  */
@@ -90,11 +87,11 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
  * </Button>
  * ```
  */
-declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
-  appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
+declare const Button: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("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_types0.ClassProp) | undefined) => string>>> & {
+  priority?: "danger" | "neutral" | "default" | null | undefined;
+} & import("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.
@@ -136,11 +133,11 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
    * @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?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
+}, "ref"> | Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("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_types0.ClassProp) | undefined) => string>>> & {
+  priority?: "danger" | "neutral" | "default" | null | undefined;
+} & import("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.
@@ -169,7 +166,7 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
    */
   type: Exclude<ComponentProps<"button">["type"], undefined>;
-}, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-DbHFERMB.d.ts.map
+//# sourceMappingURL=button-BYZOBUgj.d.ts.map

package/dist/{button-GokecthL.js → button-uMIZVKit.js}

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./booleanish-CBGdPL3Q.js";import{t as r}from"./slot-D_ZUrdEW.js";import{Children as i,cloneElement as a,forwardRef as o,isValidElement as s}from"react";import c from"clsx";import l from"tiny-invariant";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{CircleNotchIcon as m}from"@phosphor-icons/react/CircleNotch";const h=p(``,{variants:{appearance:{filled:`bg-filled-accent text-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover h-9 border border-transparent px-3 text-sm font-medium`,ghost:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium`,outlined:`border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 h-9 border px-3 text-sm font-medium`,link:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent`},isLoading:{false:``,true:`opacity-50`},priority:{danger:``,default:``,neutral:``}},defaultVariants:{appearance:`outlined`,isLoading:!1,priority:`default`},compoundVariants:[{appearance:`ghost`,priority:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 border-transparent`},{appearance:`outlined`,priority:`danger`,class:`border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700`},{appearance:`filled`,priority:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,priority:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,priority:`neutral`,class:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`},{appearance:`outlined`,priority:`neutral`,class:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600`},{appearance:`filled`,priority:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,priority:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),g=o(({"aria-disabled":o,appearance:p=`outlined`,asChild:g,children:_,className:v,disabled:y,icon:b,iconPlacement:x=`start`,isLoading:S=!1,priority:C=`default`,type:w,...T},E)=>{let D=n(o??y??S),O=S?d(m,{className:`animate-spin`}):b,k=O&&p!==`link`,A={"aria-disabled":D,"data-slot":`button`,className:e(`inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`,h({appearance:p,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-GokecthL.js.map
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-C8bYBIHW.js";import{t as n}from"./booleanish-BfvnW6vy.js";import{t as r}from"./slot-CV5fmqFr.js";import{Children as i,cloneElement as a,forwardRef as o,isValidElement as s}from"react";import c from"clsx";import l from"tiny-invariant";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{CircleNotchIcon as m}from"@phosphor-icons/react/CircleNotch";const h=p(``,{variants:{appearance:{filled:`bg-filled-accent text-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover h-9 border border-transparent px-3 text-sm font-medium`,ghost:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium`,outlined:`border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 h-9 border px-3 text-sm font-medium`,link:`text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent`},isLoading:{false:``,true:`opacity-50`},priority:{danger:``,default:``,neutral:``}},defaultVariants:{appearance:`outlined`,isLoading:!1,priority:`default`},compoundVariants:[{appearance:`ghost`,priority:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 border-transparent`},{appearance:`outlined`,priority:`danger`,class:`border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700`},{appearance:`filled`,priority:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,priority:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,priority:`neutral`,class:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`},{appearance:`outlined`,priority:`neutral`,class:`border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong focus-visible:not-disabled:hover:border-accent-600`},{appearance:`filled`,priority:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,priority:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),g=o(({"aria-disabled":o,appearance:p=`outlined`,asChild:g,children:_,className:v,disabled:y,icon:b,iconPlacement:x=`start`,isLoading:S=!1,priority:C=`default`,type:w,...T},E)=>{let D=n(o??y??S),O=S?d(m,{className:`animate-spin`}):b,k=O&&p!==`link`,A={"aria-disabled":D,"data-slot":`button`,className:e(`inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`,h({appearance:p,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-uMIZVKit.js.map

package/dist/{button-GokecthL.js.map → button-uMIZVKit.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-GokecthL.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-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover 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 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 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 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\",\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:ring-focus-danger not-disabled:hover:bg-filled-danger-hover 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 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 focus-visible:not-disabled:hover: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 not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50\",\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\t\"data-slot\": \"button\",\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,+JACD,MACC,gLACD,SACC,4NACD,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,4IACD,CACD,CACC,WAAY,WACZ,SAAU,SACV,MACC,wLACD,CACD,CACC,WAAY,SACZ,SAAU,SACV,MACC,gHACD,CACD,CACC,WAAY,OACZ,SAAU,SACV,MAAO,kDACP,CACD,CACC,WAAY,QACZ,SAAU,UACV,MACC,qIACD,CACD,CACC,WAAY,WACZ,SAAU,UACV,MACC,2PACD,CACD,CACC,WAAY,SACZ,SAAU,UACV,MACC,mIACD,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,YAAa,SACb,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"}
+{"version":3,"file":"button-uMIZVKit.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-white focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover 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 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 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 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\",\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:ring-focus-danger not-disabled:hover:bg-filled-danger-hover 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 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 focus-visible:not-disabled:hover: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 not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50\",\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\t\"data-slot\": \"button\",\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// oxlint-disable-next-line react/button-has-type -- `type` is resolved at runtime from the `type` prop (defaulted to \"button\"); the static analyzer can't see that.\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,+JACD,MACC,gLACD,SACC,4NACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,2IACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,uLACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,+GACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,oIACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,0PACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,kIACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CAAC,EA0FK,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,CAAS,EAClE,EAAO,EAAY,EAAC,EAAD,CAAiB,UAAU,cAAgB,CAAA,EAAI,EAKlE,EAAwB,GAAQ,IAAe,OAE/C,EAAc,CACnB,gBAAiB,EACjB,YAAa,SACb,UAAW,EACV,+EACA,4CACA,8CACA,0EACA,EAAe,CAAE,aAAY,WAAU,WAAU,CAAC,EAClD,IAAe,QAAU,YACzB,GAAyB,IAAkB,SAAW,SACtD,GAAyB,IAAkB,OAAS,SACpD,CACD,EACA,kBAAmB,EACnB,gBAAiB,EACjB,eAAgB,EAChB,gBAAiB,EACjB,WACA,MACA,GAAG,CACJ,EAwBA,OAtBI,GACH,EACC,EAAyC,CAAQ,GAAK,EAAS,KAAK,CAAQ,EAC5E,0EACD,EAGC,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,CAAC,EACD,EAAA,EAAA,CAAA,SAAA,CACE,GACA,EAAC,EAAD,CAAM,IAAK,EAAM,UAAWA,EAAK,IAAkB,OAAS,YAAY,CAAI,CAAA,EAE5E,EAAS,MAAM,QACf,CAAA,CAAA,CACH,CACK,CAAA,GAMP,EAAC,SAAD,CAAQ,GAAI,EAAmB,gBAA/B,CACE,GAAQ,EAAC,EAAD,CAAM,IAAK,EAAM,UAAWA,EAAK,IAAkB,OAAS,YAAY,CAAI,CAAA,EACpF,CACM,GAEV,CACD,EACA,EAAO,YAAc"}

package/dist/button.d.ts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps, t as IconButton } from "./icon-button-BDTb-lxs.js";
-import { n as ButtonProps, t as Button } from "./button-DbHFERMB.js";
-import { n as ButtonGroupProps, t as ButtonGroup } from "./index-CWXKBva-.js";
-export { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, IconButtonProps };
+import { n as IconButtonProps, t as IconButton } from "./icon-button-ntupABbM.js";
+import { n as ButtonProps, t as Button } from "./button-BYZOBUgj.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DBZ3eRsl.js";
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps };

package/dist/button.js

@@ -1 +1 @@
-import{t as e}from"./icon-button-ZKN0sRIJ.js";import{t}from"./button-GokecthL.js";import{t as n}from"./button-POMJ-20y.js";export{t as Button,n as ButtonGroup,e as IconButton};
+import{t as e}from"./icon-button-C_Ht_g1C.js";import{t}from"./button-uMIZVKit.js";import{t as n}from"./button-BAxneEMu.js";export{t as Button,n as ButtonGroup,e as IconButton};

package/dist/calendar.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateRange, DayPicker } from "react-day-picker";
 
 //#region src/components/calendar/calendar.d.ts
@@ -34,7 +33,7 @@ declare function Calendar({
   classNames,
   showOutsideDays,
   ...props
-}: CalendarProps): _$react_jsx_runtime0.JSX.Element;
+}: CalendarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Calendar {
   var displayName: string;
 }

package/dist/calendar.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{n,r}from"./icon-button-ZKN0sRIJ.js";import{jsx as i}from"react/jsx-runtime";import{CaretLeftIcon as a}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as o}from"@phosphor-icons/react/CaretRight";import{DayPicker as s}from"react-day-picker";function c({className:c,classNames:l,showOutsideDays:u=!1,...d}){return i(s,{"data-slot":`calendar`,animate:!1,components:{Chevron:e=>i(t,{svg:e.orientation===`left`?i(a,{}):i(o,{}),className:`size-4`})},classNames:{root:e(`isolate`,c),button_next:e(n,r({appearance:`ghost`,size:`sm`}),`absolute right-0`),button_previous:e(n,r({appearance:`ghost`,size:`sm`}),`absolute left-0`),caption_label:`text-sm font-medium`,day:e(`overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md`,d.mode===`range`?`first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md`:``),day_button:`day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15`,disabled:`text-muted opacity-50`,hidden:`invisible`,month:`space-y-4`,month_caption:`flex justify-center pt-1 relative items-center`,month_grid:`w-full border-collapse space-y-1`,months:`flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min`,nav:`flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10`,outside:`day-outside aria-selected:text-on-filled opacity-50 text-muted`,range_end:`day-range-end [&:not(.day-range-start)]:rounded-l-none`,range_middle:`day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25`,range_start:`day-range-start [&:not(.day-range-end)]:rounded-r-none`,selected:`not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent`,today:`not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md`,week:`flex w-full mt-1`,weekday:`text-body w-7 text-[0.8rem] text-center font-normal`,weekdays:`flex`,...l},showOutsideDays:u,...d})}c.displayName=`Calendar`;export{c as Calendar};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-C8bYBIHW.js";import{n,r}from"./icon-button-C_Ht_g1C.js";import{jsx as i}from"react/jsx-runtime";import{CaretLeftIcon as a}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as o}from"@phosphor-icons/react/CaretRight";import{DayPicker as s}from"react-day-picker";function c({className:c,classNames:l,showOutsideDays:u=!1,...d}){return i(s,{"data-slot":`calendar`,animate:!1,components:{Chevron:e=>i(t,{svg:e.orientation===`left`?i(a,{}):i(o,{}),className:`size-4`})},classNames:{root:e(`isolate`,c),button_next:e(n,r({appearance:`ghost`,size:`sm`}),`absolute right-0`),button_previous:e(n,r({appearance:`ghost`,size:`sm`}),`absolute left-0`),caption_label:`text-sm font-medium`,day:e(`overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md`,d.mode===`range`?`first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md`:``),day_button:`day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15`,disabled:`text-muted opacity-50`,hidden:`invisible`,month:`space-y-4`,month_caption:`flex justify-center pt-1 relative items-center`,month_grid:`w-full border-collapse space-y-1`,months:`flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min`,nav:`flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10`,outside:`day-outside aria-selected:text-on-filled opacity-50 text-muted`,range_end:`day-range-end [&:not(.day-range-start)]:rounded-l-none`,range_middle:`day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25`,range_start:`day-range-start [&:not(.day-range-end)]:rounded-r-none`,selected:`not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent`,today:`not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md`,week:`flex w-full mt-1`,weekday:`text-body w-7 text-[0.8rem] text-center font-normal`,weekdays:`flex`,...l},showOutsideDays:u,...d})}c.displayName=`Calendar`;export{c as Calendar};
 //# sourceMappingURL=calendar.js.map

package/dist/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","names":[],"sources":["../src/components/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { baseIconButtonClasses, iconButtonVariants } from \"../button/icon-button.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype CalendarProps = ComponentProps<typeof DayPicker>;\n\n/**\n * A calendar component that allows users to select a date or a range of dates.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * @see https://mantle.ngrok.com/components/calendar#api-calendar\n *\n * @example\n * ```tsx\n * <Calendar\n *   mode=\"single\"\n *   selected={selectedDate}\n *   onSelect={setSelectedDate}\n * />\n *\n * <Calendar\n *   mode=\"range\"\n *   selected={dateRange}\n *   onSelect={setDateRange}\n * />\n * ```\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nfunction Calendar({ className, classNames, showOutsideDays = false, ...props }: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tdata-slot=\"calendar\"\n\t\t\tanimate={false}\n\t\t\tcomponents={{\n\t\t\t\tChevron: (iconProps) => {\n\t\t\t\t\tconst icon = iconProps.orientation === \"left\" ? <CaretLeftIcon /> : <CaretRightIcon />;\n\n\t\t\t\t\treturn <Icon svg={icon} className=\"size-4\" />;\n\t\t\t\t},\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cx(\"isolate\", className),\n\t\t\t\tbutton_next: cx(\n\t\t\t\t\tbaseIconButtonClasses,\n\t\t\t\t\ticonButtonVariants({ appearance: \"ghost\", size: \"sm\" }),\n\t\t\t\t\t\"absolute right-0\",\n\t\t\t\t),\n\t\t\t\tbutton_previous: cx(\n\t\t\t\t\tbaseIconButtonClasses,\n\t\t\t\t\ticonButtonVariants({ appearance: \"ghost\", size: \"sm\" }),\n\t\t\t\t\t\"absolute left-0\",\n\t\t\t\t),\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tday: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md\",\n\t\t\t\t\tprops.mode === \"range\"\n\t\t\t\t\t\t? \"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md\"\n\t\t\t\t\t\t: \"\",\n\t\t\t\t),\n\t\t\t\tday_button:\n\t\t\t\t\t\"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15\",\n\t\t\t\tdisabled: \"text-muted opacity-50\",\n\t\t\t\thidden: \"invisible\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tmonth_caption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tmonth_grid: \"w-full border-collapse space-y-1\",\n\t\t\t\tmonths: \"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min\",\n\t\t\t\tnav: \"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10\",\n\t\t\t\toutside: \"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\trange_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\trange_middle:\n\t\t\t\t\t\"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25\",\n\t\t\t\trange_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tselected:\n\t\t\t\t\t\"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent\",\n\t\t\t\ttoday:\n\t\t\t\t\t\"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md\",\n\t\t\t\tweek: \"flex w-full mt-1\",\n\t\t\t\tweekday: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\tweekdays: \"flex\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport {\n\t//,\n\tCalendar,\n};\n\nexport type {\n\t//,\n\tCalendarProps,\n};\n\nexport type {\n\t//,\n\tDateRange,\n} from \"react-day-picker\";\n"],"mappings":"yUAqCA,SAAS,EAAS,CAAE,YAAW,aAAY,kBAAkB,GAAO,GAAG,GAAwB,CAC9F,OACC,EAAC,EAAD,CACC,YAAU,WACV,QAAS,GACT,WAAY,CACX,QAAU,GAGF,EAAC,EAAD,CAAM,IAFA,EAAU,cAAgB,OAAS,EAAC,EAAD,EAAiB,CAAA,CAAG,EAAC,EAAD,EAAkB,CAAA,CAE9D,UAAU,SAAW,CAAA,CAE9C,CACD,WAAY,CACX,KAAM,EAAG,UAAW,EAAU,CAC9B,YAAa,EACZ,EACA,EAAmB,CAAE,WAAY,QAAS,KAAM,KAAM,CAAC,CACvD,mBACA,CACD,gBAAiB,EAChB,EACA,EAAmB,CAAE,WAAY,QAAS,KAAM,KAAM,CAAC,CACvD,kBACA,CACD,cAAe,sBACf,IAAK,EACJ,6GACA,EAAM,OAAS,QACZ,2EACA,GACH,CACD,WACC,oFACD,SAAU,wBACV,OAAQ,YACR,MAAO,YACP,cAAe,iDACf,WAAY,mCACZ,OAAQ,6EACR,IAAK,sEACL,QAAS,iEACT,UAAW,yDACX,aACC,8JACD,YAAa,yDACb,SACC,mFACD,MACC,2HACD,KAAM,mBACN,QAAS,sDACT,SAAU,OACV,GAAG,EACH,CACgB,kBACjB,GAAI,EACH,CAAA,CAGJ,EAAS,YAAc"}
+{"version":3,"file":"calendar.js","names":[],"sources":["../src/components/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { baseIconButtonClasses, iconButtonVariants } from \"../button/icon-button.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype CalendarProps = ComponentProps<typeof DayPicker>;\n\n/**\n * A calendar component that allows users to select a date or a range of dates.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * @see https://mantle.ngrok.com/components/calendar#api-calendar\n *\n * @example\n * ```tsx\n * <Calendar\n *   mode=\"single\"\n *   selected={selectedDate}\n *   onSelect={setSelectedDate}\n * />\n *\n * <Calendar\n *   mode=\"range\"\n *   selected={dateRange}\n *   onSelect={setDateRange}\n * />\n * ```\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nfunction Calendar({ className, classNames, showOutsideDays = false, ...props }: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tdata-slot=\"calendar\"\n\t\t\tanimate={false}\n\t\t\tcomponents={{\n\t\t\t\tChevron: (iconProps) => {\n\t\t\t\t\tconst icon = iconProps.orientation === \"left\" ? <CaretLeftIcon /> : <CaretRightIcon />;\n\n\t\t\t\t\treturn <Icon svg={icon} className=\"size-4\" />;\n\t\t\t\t},\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cx(\"isolate\", className),\n\t\t\t\tbutton_next: cx(\n\t\t\t\t\tbaseIconButtonClasses,\n\t\t\t\t\ticonButtonVariants({ appearance: \"ghost\", size: \"sm\" }),\n\t\t\t\t\t\"absolute right-0\",\n\t\t\t\t),\n\t\t\t\tbutton_previous: cx(\n\t\t\t\t\tbaseIconButtonClasses,\n\t\t\t\t\ticonButtonVariants({ appearance: \"ghost\", size: \"sm\" }),\n\t\t\t\t\t\"absolute left-0\",\n\t\t\t\t),\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tday: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md\",\n\t\t\t\t\tprops.mode === \"range\"\n\t\t\t\t\t\t? \"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md\"\n\t\t\t\t\t\t: \"\",\n\t\t\t\t),\n\t\t\t\tday_button:\n\t\t\t\t\t\"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15\",\n\t\t\t\tdisabled: \"text-muted opacity-50\",\n\t\t\t\thidden: \"invisible\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tmonth_caption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tmonth_grid: \"w-full border-collapse space-y-1\",\n\t\t\t\tmonths: \"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min\",\n\t\t\t\tnav: \"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10\",\n\t\t\t\toutside: \"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\trange_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\trange_middle:\n\t\t\t\t\t\"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25\",\n\t\t\t\trange_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tselected:\n\t\t\t\t\t\"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent\",\n\t\t\t\ttoday:\n\t\t\t\t\t\"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md\",\n\t\t\t\tweek: \"flex w-full mt-1\",\n\t\t\t\tweekday: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\tweekdays: \"flex\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport {\n\t//,\n\tCalendar,\n};\n\nexport type {\n\t//,\n\tCalendarProps,\n};\n\nexport type {\n\t//,\n\tDateRange,\n} from \"react-day-picker\";\n"],"mappings":"yUAqCA,SAAS,EAAS,CAAE,YAAW,aAAY,kBAAkB,GAAO,GAAG,GAAwB,CAC9F,OACC,EAAC,EAAD,CACC,YAAU,WACV,QAAS,GACT,WAAY,CACX,QAAU,GAGF,EAAC,EAAD,CAAM,IAFA,EAAU,cAAgB,OAAS,EAAC,EAAD,CAAgB,CAAA,EAAI,EAAC,EAAD,CAAiB,CAAA,EAE7D,UAAU,QAAU,CAAA,CAE9C,EACA,WAAY,CACX,KAAM,EAAG,UAAW,CAAS,EAC7B,YAAa,EACZ,EACA,EAAmB,CAAE,WAAY,QAAS,KAAM,IAAK,CAAC,EACtD,kBACD,EACA,gBAAiB,EAChB,EACA,EAAmB,CAAE,WAAY,QAAS,KAAM,IAAK,CAAC,EACtD,iBACD,EACA,cAAe,sBACf,IAAK,EACJ,6GACA,EAAM,OAAS,QACZ,2EACA,EACJ,EACA,WACC,oFACD,SAAU,wBACV,OAAQ,YACR,MAAO,YACP,cAAe,iDACf,WAAY,mCACZ,OAAQ,6EACR,IAAK,sEACL,QAAS,iEACT,UAAW,yDACX,aACC,8JACD,YAAa,yDACb,SACC,mFACD,MACC,2HACD,KAAM,mBACN,QAAS,sDACT,SAAU,OACV,GAAG,CACJ,EACiB,kBACjB,GAAI,CACJ,CAAA,CAEH,CACA,EAAS,YAAc"}

package/dist/card.d.ts

@@ -1,5 +1,4 @@
-import { t as WithAsChild } from "./as-child-CpZKMqTE.js";
-import * as _$react from "react";
+import { t as WithAsChild } from "./as-child-uN_018tj.js";
 import { ComponentProps, HTMLAttributes } from "react";
 
 //#region src/components/card/card.d.ts
@@ -57,7 +56,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Root: _$react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The main content of a card.
    *
@@ -72,7 +71,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Body: _$react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Body: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The footer container of a card.
    *
@@ -93,7 +92,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Footer: _$react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Footer: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The header container of a card.
    *
@@ -114,7 +113,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Header: _$react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Header: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The title of a card.
    *
@@ -135,7 +134,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Title: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & _$react.RefAttributes<HTMLHeadingElement>>;
+  readonly Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & import("react").RefAttributes<HTMLHeadingElement>>;
 };
 //#endregion
 export { Card, type CardProps, type CardTitleProps };

package/dist/card.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card`,className:e(`border-card bg-card relative rounded-md border`,i),...o,children:a}));i.displayName=`Card`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-body`,className:e(`p-6 border-t border-card-muted first:border-t-0`,i),...o,children:a}));a.displayName=`CardBody`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-footer`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));o.displayName=`CardFooter`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-header`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));s.displayName=`CardHeader`;const c=n(({className:n,asChild:i,...a},o)=>r(i?t:`h3`,{ref:o,"data-slot":`card-title`,className:e(`text-strong text-base font-medium`,n),...a}));c.displayName=`CardTitle`;const l={Root:i,Body:a,Footer:o,Header:s,Title:c};export{l as Card};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card`,className:e(`border-card bg-card relative rounded-md border`,i),...o,children:a}));i.displayName=`Card`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-body`,className:e(`p-6 border-t border-card-muted first:border-t-0`,i),...o,children:a}));a.displayName=`CardBody`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-footer`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));o.displayName=`CardFooter`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`card-header`,className:e(`px-6 py-3 border-t border-card-muted first:border-t-0`,i),...o,children:a}));s.displayName=`CardHeader`;const c=n(({className:n,asChild:i,...a},o)=>r(i?t:`h3`,{ref:o,"data-slot":`card-title`,className:e(`text-strong text-base font-medium`,n),...a}));c.displayName=`CardTitle`;const l={Root:i,Body:a,Footer:o,Header:s,Title:c};export{l as Card};
 //# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/components/card/card.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#cardroot\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card\"\n\t\t\t\tclassName={cx(\"border-card bg-card relative rounded-md border\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardbody\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-body\"\n\t\t\t\tclassName={cx(\"p-6 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardfooter\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-footer\"\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardheader\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-header\"\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `Card.Header`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#cardtitle\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Title = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-title\"\n\t\t\t\tclassName={cx(\"text-strong text-base font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTitle.displayName = \"CardTitle\";\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card.\n *\n * @see https://mantle.ngrok.com/components/card\n *\n * @example\n * Composition:\n * ```\n * Card.Root\n * ├── Card.Header\n * │   └── Card.Title\n * ├── Card.Body\n * └── Card.Footer\n * ```\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Card = {\n\t/**\n\t * A container that can be used to display content in a box resembling a physical card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The main content of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The footer container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCard,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"kJAmCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,OACV,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,OA4BnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,YACV,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,WAsBnB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,cACV,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAO,YAAc,aAsBrB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,cACV,UAAW,EAAG,wDAAyD,EAAU,CACjF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAO,YAAc,aA4BrB,MAAM,EAAQ,GACZ,CAAE,YAAW,UAAS,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,KAE7B,CACM,MACL,YAAU,aACV,UAAW,EAAG,oCAAqC,EAAU,CAC7D,GAAI,EACH,CAAA,CAGJ,CACD,EAAM,YAAc,YAuCpB,MAAM,EAAO,CAeZ,OAeA,OAqBA,SAqBA,SAqBA,QACA"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/components/card/card.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#cardroot\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card\"\n\t\t\t\tclassName={cx(\"border-card bg-card relative rounded-md border\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardbody\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-body\"\n\t\t\t\tclassName={cx(\"p-6 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardfooter\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-footer\"\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#cardheader\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-header\"\n\t\t\t\tclassName={cx(\"px-6 py-3 border-t border-card-muted first:border-t-0\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `Card.Header`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#cardtitle\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Title = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"card-title\"\n\t\t\t\tclassName={cx(\"text-strong text-base font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTitle.displayName = \"CardTitle\";\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card.\n *\n * @see https://mantle.ngrok.com/components/card\n *\n * @example\n * Composition:\n * ```\n * Card.Root\n * ├── Card.Header\n * │   └── Card.Title\n * ├── Card.Body\n * └── Card.Footer\n * ```\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Card = {\n\t/**\n\t * A container that can be used to display content in a box resembling a physical card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The main content of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The footer container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#cardtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCard,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"kJAmCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,OACV,UAAW,EAAG,iDAAkD,CAAS,EACzE,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAK,YAAc,OA4BnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,YACV,UAAW,EAAG,kDAAmD,CAAS,EAC1E,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAK,YAAc,WAsBnB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,cACV,UAAW,EAAG,wDAAyD,CAAS,EAChF,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAO,YAAc,aAsBrB,MAAM,EAAS,GACb,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,cACV,UAAW,EAAG,wDAAyD,CAAS,EAChF,GAAI,EAEH,UACS,CAAA,CAGd,EACA,EAAO,YAAc,aA4BrB,MAAM,EAAQ,GACZ,CAAE,YAAW,UAAS,GAAG,GAAS,IAGjC,EAFY,EAAU,EAAO,KAE7B,CACM,MACL,YAAU,aACV,UAAW,EAAG,oCAAqC,CAAS,EAC5D,GAAI,CACJ,CAAA,CAGJ,EACA,EAAM,YAAc,YAuCpB,MAAM,EAAO,CAeZ,OAeA,OAqBA,SAqBA,SAqBA,OACD"}

package/dist/checkbox.d.ts

@@ -1,5 +1,4 @@
-import { o as WithValidation } from "./validation-CBSOmooP.js";
-import * as _$react from "react";
+import { o as WithValidation } from "./validation-xyX_6kph.js";
 
 //#region src/components/checkbox/checkbox.d.ts
 type CheckedState = boolean | "indeterminate";
@@ -19,7 +18,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "type" | "checked"> & WithValidation & {
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "type" | "checked"> & WithValidation & {
   /**
    * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
    */
@@ -28,7 +27,7 @@ declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.Deta
    * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
    */
   defaultChecked?: CheckedState;
-} & _$react.RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Checkbox };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox.js

@@ -1,2 +1,2 @@
-import{t as e}from"./compose-refs-DZ3cPi47.js";import{a as t,r as n}from"./validation-BYME8rWN.js";import{forwardRef as r,useEffect as i,useRef as a,useState as o}from"react";import s from"clsx";import{jsx as c}from"react/jsx-runtime";const l=e=>e===`indeterminate`,u=r(({"aria-invalid":r,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,validation:g,..._},v)=>{let y=a(null),[b]=o(f),x=t(),{ariaInvalid:S,validation:C}=n({"aria-invalid":r,validation:g??x});return i(()=>{y.current&&(y.current.indeterminate=l(d))},[d]),i(()=>{y.current&&(y.current.indeterminate=l(b))},[b]),c(`input`,{"aria-checked":l(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:s(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,u),checked:l(d)?void 0:d,"data-validation":C||void 0,defaultChecked:l(b)?void 0:b,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,v),type:`checkbox`,..._})});u.displayName=`Checkbox`;export{u as Checkbox};
+import{t as e}from"./compose-refs-Cjf2gfB8.js";import{a as t,r as n}from"./validation-DCyx-ceH.js";import{forwardRef as r,useEffect as i,useRef as a,useState as o}from"react";import s from"clsx";import{jsx as c}from"react/jsx-runtime";const l=e=>e===`indeterminate`,u=r(({"aria-invalid":r,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,validation:g,..._},v)=>{let y=a(null),[b]=o(f),x=t(),{ariaInvalid:S,validation:C}=n({"aria-invalid":r,validation:g??x});i(()=>{y.current&&(y.current.indeterminate=l(d))},[d]),i(()=>{y.current&&(y.current.indeterminate=l(b))},[b]);let w=d===void 0?{defaultChecked:l(b)?void 0:b}:{checked:l(d)?void 0:d};return c(`input`,{"aria-checked":l(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:s(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,u),...w,"data-validation":C||void 0,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,v),type:`checkbox`,..._})});u.displayName=`Checkbox`;export{u as Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["clsx"],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst { ariaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"checkbox\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"2OAWA,MAAM,EAAmB,GACxB,IAAY,gBA8BP,EAAW,GAEf,CACC,eAAgB,EAChB,YACA,QAAS,EACT,eAAgB,EAChB,eAAe,KACf,UACA,WACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAA8B,KAAK,CAC9C,CAAC,GAAkB,EAAS,EAAgB,CAC5C,EAAkB,GAAoB,CACtC,CAAE,cAAa,cAAe,EAAgB,CACnD,eAAgB,EAChB,WAAY,GAAe,EAC3B,CAAC,CAcF,OAZA,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,EAAS,GAEzD,CAAC,EAAS,CAAC,CAEd,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,EAAe,GAE/D,CAAC,EAAe,CAAC,CAGnB,EAAC,QAAD,CACC,eAAc,EAAgB,EAAS,CAAG,QAAU,EACpD,eAAc,EACd,YAAU,WACV,UAAWA,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACA,EACA,CACD,QAAS,EAAgB,EAAS,CAAG,IAAA,GAAY,EACjD,kBAAiB,GAAc,IAAA,GAC/B,eAAgB,EAAgB,EAAe,CAAG,IAAA,GAAY,EAChD,eACd,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,gBAAgB,CACtB,OAED,IAAU,EAAM,EAEP,WACV,IAAK,EAAY,EAAU,EAAI,CAC/B,KAAK,WACL,GAAI,EACH,CAAA,EAGJ,CACD,EAAS,YAAc"}
+{"version":3,"file":"checkbox.js","names":["clsx"],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport { parseValidation, useFieldValidation } from \"../field/validation.js\";\nimport type { WithValidation } from \"../field/validation.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n *     <Checkbox name=\"terms\" id=\"terms\" />\n *     Accept terms and conditions\n *   </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst fieldValidation = useFieldValidation();\n\t\tconst { ariaInvalid, validation } = parseValidation({\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tvalidation: _validation ?? fieldValidation,\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\t// React warns (and the linter flags) when both `checked` and `defaultChecked` are\n\t\t// passed on the same input. Pick exactly one based on whether the consumer is in\n\t\t// controlled mode (`_checked !== undefined`). Indeterminate is still applied to the\n\t\t// DOM node via the `useEffect`s above on both paths.\n\t\tconst checkedProp =\n\t\t\t_checked !== undefined\n\t\t\t\t? { checked: isIndeterminate(_checked) ? undefined : _checked }\n\t\t\t\t: { defaultChecked: isIndeterminate(defaultChecked) ? undefined : defaultChecked };\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-slot=\"checkbox\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...checkedProp}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"2OAWA,MAAM,EAAmB,GACxB,IAAY,gBA8BP,EAAW,GAEf,CACC,eAAgB,EAChB,YACA,QAAS,EACT,eAAgB,EAChB,eAAe,KACf,UACA,WACA,WAAY,EACZ,GAAG,GAEJ,IACI,CACJ,IAAM,EAAW,EAA8B,IAAI,EAC7C,CAAC,GAAkB,EAAS,CAAe,EAC3C,EAAkB,EAAmB,EACrC,CAAE,cAAa,cAAe,EAAgB,CACnD,eAAgB,EAChB,WAAY,GAAe,CAC5B,CAAC,EAED,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,CAAQ,EAE3D,EAAG,CAAC,CAAQ,CAAC,EAEb,MAAgB,CACX,EAAS,UACZ,EAAS,QAAQ,cAAgB,EAAgB,CAAc,EAEjE,EAAG,CAAC,CAAc,CAAC,EAMnB,IAAM,EACL,IAAa,IAAA,GAEV,CAAE,eAAgB,EAAgB,CAAc,EAAI,IAAA,GAAY,CAAe,EAD/E,CAAE,QAAS,EAAgB,CAAQ,EAAI,IAAA,GAAY,CAAS,EAGhE,OACC,EAAC,QAAD,CACC,eAAc,EAAgB,CAAQ,EAAI,QAAU,EACpD,eAAc,EACd,YAAU,WACV,UAAWA,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACA,CACD,EACA,GAAI,EACJ,kBAAiB,GAAc,IAAA,GACjB,eACd,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,eAAe,EACrB,MACD,CACA,IAAU,CAAK,CAChB,EACU,WACV,IAAK,EAAY,EAAU,CAAG,EAC9B,KAAK,WACL,GAAI,CACJ,CAAA,CAEH,CACD,EACA,EAAS,YAAc"}