@ngrok/mantle 0.65.0 → 0.66.1

package/dist/button-CKL-3sIr.d.ts

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

package/dist/button-CRRPesae.js

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

package/dist/button-CRRPesae.js.map

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

package/dist/button-DA2p0_5F.js

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

package/dist/button-DA2p0_5F.js.map

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

package/dist/button.d.ts

@@ -1,9 +1,4 @@
-export { B as Button, a as ButtonProps } from './button-DLUUf_c-.js';
-export { I as IconButton, a as IconButtonProps } from './icon-button-CT71Ti9V.js';
-export { B as ButtonGroup, a as ButtonGroupProps } from './button-group-BFnqgdtl.js';
-import './deep-non-nullable-SmpSvoSd.js';
-import 'class-variance-authority';
-import 'react';
-import 'class-variance-authority/types';
-import './variant-props-oDo2u-We.js';
-import './as-child-DJ7x3JFV.js';
+import { n as IconButtonProps, t as IconButton } from "./icon-button-2r6S3HVA.js";
+import { n as ButtonProps, t as Button } from "./button-CKL-3sIr.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-ViSCOUrU.js";
+export { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, IconButtonProps };

package/dist/button.js

@@ -1,2 +1 @@
-import{a as c}from"./chunk-OHPGAB7U.js";import{a as b}from"./chunk-W5A5HSFE.js";import{c as a}from"./chunk-CBRSMQ26.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import"./chunk-PFXFESEN.js";export{b as Button,c as ButtonGroup,a as IconButton};
-//# sourceMappingURL=button.js.map
+import{t as e}from"./icon-button-D4e9-dq-.js";import{t}from"./button-CRRPesae.js";import{t as n}from"./button-DA2p0_5F.js";export{t as Button,n as ButtonGroup,e as IconButton};

package/dist/calendar.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps } from 'react';
-import { DayPicker } from 'react-day-picker';
-export { DateRange } from 'react-day-picker';
+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
 type CalendarProps = ComponentProps<typeof DayPicker>;
 /**
  * A calendar component that allows users to select a date or a range of dates.
@@ -29,9 +29,15 @@ type CalendarProps = ComponentProps<typeof DayPicker>;
  *
  * https://github.com/ngrok-oss/mantle/issues
  */
-declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({
+  className,
+  classNames,
+  showOutsideDays,
+  ...props
+}: CalendarProps): react_jsx_runtime0.JSX.Element;
 declare namespace Calendar {
-    var displayName: string;
+  var displayName: string;
 }
-
-export { Calendar, type CalendarProps };
+//#endregion
+export { Calendar, type CalendarProps, type DateRange };
+//# sourceMappingURL=calendar.d.ts.map

package/dist/calendar.js

@@ -1,2 +1,2 @@
-import{a,b as o}from"./chunk-CBRSMQ26.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import{a as r}from"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as e}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({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",n.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",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./icon-B5oNYYrJ.js";import{n,r}from"./icon-button-D4e9-dq-.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,{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,"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\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":"sQAEA,OAAS,iBAAAA,MAAqB,kCAC9B,OAAS,kBAAAC,MAAsB,mCAE/B,OAAS,aAAAC,MAAiB,mBAsC2B,cAAAC,MAAA,oBANrD,SAASC,EAAS,CAAE,UAAAC,EAAW,WAAAC,EAAY,gBAAAC,EAAkB,GAAO,GAAGC,CAAM,EAAkB,CAC9F,OACCL,EAACM,EAAA,CACA,QAAS,GACT,WAAY,CACX,QAAUC,GAAc,CACvB,IAAMC,EAAOD,EAAU,cAAgB,OAASP,EAACS,EAAA,EAAc,EAAKT,EAACU,EAAA,EAAe,EAEpF,OAAOV,EAACW,EAAA,CAAK,IAAKH,EAAM,UAAU,SAAS,CAC5C,CACD,EACA,WAAY,CACX,KAAMI,EAAG,UAAWV,CAAS,EAC7B,YAAaU,EACZC,EACAC,EAAmB,CAAE,WAAY,QAAS,KAAM,IAAK,CAAC,EACtD,kBACD,EACA,gBAAiBF,EAChBC,EACAC,EAAmB,CAAE,WAAY,QAAS,KAAM,IAAK,CAAC,EACtD,iBACD,EACA,cAAe,sBACf,IAAKF,EACJ,6GACAP,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,GAAGF,CACJ,EACA,gBAAiBC,EAChB,GAAGC,EACL,CAEF,CACAJ,EAAS,YAAc","names":["CaretLeftIcon","CaretRightIcon","DayPicker","jsx","Calendar","className","classNames","showOutsideDays","props","DayPicker","iconProps","icon","CaretLeftIcon","CaretRightIcon","Icon","cx","baseIconButtonClasses","iconButtonVariants"]}
+{"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\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,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"}

package/dist/card.d.ts

@@ -1,7 +1,8 @@
-import * as react from 'react';
-import { ComponentProps, HTMLAttributes } from 'react';
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
+import { t as WithAsChild } from "./as-child-XMVTepJu.js";
+import * as react from "react";
+import { ComponentProps, HTMLAttributes } from "react";
 
+//#region src/components/card/card.d.ts
 type CardProps = ComponentProps<"div"> & WithAsChild;
 type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
 /**
@@ -32,99 +33,100 @@ type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
  * ```
  */
 declare const Card: {
-    /**
-     * A container that can be used to display content in a box resembling a physical card.
-     *
-     * @see https://mantle.ngrok.com/components/card#cardroot
-     *
-     * @example
-     * ```tsx
-     * <Card.Root>
-     *   <Card.Body>
-     *     <p>Laborum in aute officia adipisicing elit velit.</p>
-     *   </Card.Body>
-     * </Card.Root>
-     * ```
-     */
-    readonly Root: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The main content of a card.
-     *
-     * @see https://mantle.ngrok.com/components/card#cardbody
-     *
-     * @example
-     * ```tsx
-     * <Card.Root>
-     *   <Card.Body>
-     *     <p>Laborum in aute officia adipisicing elit velit.</p>
-     *   </Card.Body>
-     * </Card.Root>
-     * ```
-     */
-    readonly Body: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The footer container of a card.
-     *
-     * @see https://mantle.ngrok.com/components/card#cardfooter
-     *
-     * @example
-     * ```tsx
-     * <Card.Root>
-     *   <Card.Header>
-     *     <Card.Title>Card Title Here</Card.Title>
-     *   </Card.Header>
-     *   <Card.Body>
-     *     <p>Laborum in aute officia adipisicing elit velit.</p>
-     *   </Card.Body>
-     *   <Card.Footer>
-     *     <p>Card footer</p>
-     *   </Card.Footer>
-     * </Card.Root>
-     * ```
-     */
-    readonly Footer: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The header container of a card.
-     *
-     * @see https://mantle.ngrok.com/components/card#cardheader
-     *
-     * @example
-     * ```tsx
-     * <Card.Root>
-     *   <Card.Header>
-     *     <Card.Title>Card Title Here</Card.Title>
-     *   </Card.Header>
-     *   <Card.Body>
-     *     <p>Laborum in aute officia adipisicing elit velit.</p>
-     *   </Card.Body>
-     *   <Card.Footer>
-     *     <p>Card footer</p>
-     *   </Card.Footer>
-     * </Card.Root>
-     * ```
-     */
-    readonly Header: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The title of a card.
-     *
-     * @see https://mantle.ngrok.com/components/card#cardtitle
-     *
-     * @example
-     * ```tsx
-     * <Card.Root>
-     *   <Card.Header>
-     *     <Card.Title>Card Title Here</Card.Title>
-     *   </Card.Header>
-     *   <Card.Body>
-     *     <p>Laborum in aute officia adipisicing elit velit.</p>
-     *   </Card.Body>
-     *   <Card.Footer>
-     *     <p>Card footer</p>
-     *   </Card.Footer>
-     * </Card.Root>
-     * ```
-     */
-    readonly Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
+  /**
+   * A container that can be used to display content in a box resembling a physical card.
+   *
+   * @see https://mantle.ngrok.com/components/card#cardroot
+   *
+   * @example
+   * ```tsx
+   * <Card.Root>
+   *   <Card.Body>
+   *     <p>Laborum in aute officia adipisicing elit velit.</p>
+   *   </Card.Body>
+   * </Card.Root>
+   * ```
+   */
+  readonly Root: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The main content of a card.
+   *
+   * @see https://mantle.ngrok.com/components/card#cardbody
+   *
+   * @example
+   * ```tsx
+   * <Card.Root>
+   *   <Card.Body>
+   *     <p>Laborum in aute officia adipisicing elit velit.</p>
+   *   </Card.Body>
+   * </Card.Root>
+   * ```
+   */
+  readonly Body: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The footer container of a card.
+   *
+   * @see https://mantle.ngrok.com/components/card#cardfooter
+   *
+   * @example
+   * ```tsx
+   * <Card.Root>
+   *   <Card.Header>
+   *     <Card.Title>Card Title Here</Card.Title>
+   *   </Card.Header>
+   *   <Card.Body>
+   *     <p>Laborum in aute officia adipisicing elit velit.</p>
+   *   </Card.Body>
+   *   <Card.Footer>
+   *     <p>Card footer</p>
+   *   </Card.Footer>
+   * </Card.Root>
+   * ```
+   */
+  readonly Footer: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The header container of a card.
+   *
+   * @see https://mantle.ngrok.com/components/card#cardheader
+   *
+   * @example
+   * ```tsx
+   * <Card.Root>
+   *   <Card.Header>
+   *     <Card.Title>Card Title Here</Card.Title>
+   *   </Card.Header>
+   *   <Card.Body>
+   *     <p>Laborum in aute officia adipisicing elit velit.</p>
+   *   </Card.Body>
+   *   <Card.Footer>
+   *     <p>Card footer</p>
+   *   </Card.Footer>
+   * </Card.Root>
+   * ```
+   */
+  readonly Header: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The title of a card.
+   *
+   * @see https://mantle.ngrok.com/components/card#cardtitle
+   *
+   * @example
+   * ```tsx
+   * <Card.Root>
+   *   <Card.Header>
+   *     <Card.Title>Card Title Here</Card.Title>
+   *   </Card.Header>
+   *   <Card.Body>
+   *     <p>Laborum in aute officia adipisicing elit velit.</p>
+   *   </Card.Body>
+   *   <Card.Footer>
+   *     <p>Card footer</p>
+   *   </Card.Footer>
+   * </Card.Root>
+   * ```
+   */
+  readonly Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
 };
-
+//#endregion
 export { Card, type CardProps, type CardTitleProps };
+//# sourceMappingURL=card.d.ts.map

package/dist/card.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-ADF5DAYG.js";import{a as n}from"./chunk-PFXFESEN.js";import{forwardRef as s}from"react";import{jsx as a}from"react/jsx-runtime";var C=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("border-card bg-card relative rounded-md border",r),...t,children:e}));C.displayName="Card";var i=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("p-6 border-t border-card-muted first:border-t-0",r),...t,children:e}));i.displayName="CardBody";var f=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("px-6 py-3 border-t border-card-muted first:border-t-0",r),...t,children:e}));f.displayName="CardFooter";var l=s(({asChild:o=!1,className:r,children:e,...t},d)=>a(o?p:"div",{ref:d,className:n("px-6 py-3 border-t border-card-muted first:border-t-0",r),...t,children:e}));l.displayName="CardHeader";var c=s(({className:o,asChild:r,...e},t)=>a(r?p:"h3",{ref:t,className:n("text-strong text-base font-medium",o),...e}));c.displayName="CardTitle";var y={Root:C,Body:i,Footer:f,Header:l,Title:c};export{y as Card};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./slot-DdnjeV2n.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,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,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,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,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,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