@kavagy/react 0.1.1

package/dist/badges/badges.js

@@ -0,0 +1,269 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { tv } from "../utils/tv.js";
+import { isReactComponent } from "../utils/is-react-component.js";
+import { X } from "@kavagy/icons";
+import { forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/badges/badges.tsx
+const badgeStyles = tv({
+	slots: {
+		root: "inline-flex w-max items-center gap-1 whitespace-nowrap font-medium",
+		addon: "",
+		dismissButton: "flex cursor-pointer items-center justify-center transition duration-100 ease-linear outline-focus-ring focus-visible:outline-2"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "px-2 py-0.5 text-xs",
+				dismissButton: "p-0.5"
+			},
+			md: {
+				root: "px-2.5 py-0.5 text-sm",
+				dismissButton: "p-0.5"
+			},
+			lg: {
+				root: "gap-1.5 px-3 py-1 text-sm",
+				dismissButton: "p-0.5"
+			}
+		},
+		type: {
+			"pill-color": { root: "rounded-full ring-1 ring-inset" },
+			color: { root: "rounded-md ring-1 ring-inset" },
+			modern: { root: "rounded-md bg-primary text-secondary ring-1 ring-primary shadow-xs" }
+		},
+		color: {
+			gray: {},
+			brand: {},
+			error: {},
+			warning: {},
+			success: {},
+			blue: {},
+			indigo: {},
+			pink: {},
+			orange: {}
+		}
+	},
+	compoundVariants: [
+		{
+			type: ["pill-color", "color"],
+			color: "gray",
+			class: {
+				root: "bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200",
+				addon: "text-utility-neutral-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "brand",
+			class: {
+				root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200",
+				addon: "text-utility-brand-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "error",
+			class: {
+				root: "bg-utility-red-50 text-utility-red-700 ring-utility-red-200",
+				addon: "text-utility-red-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "warning",
+			class: {
+				root: "bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200",
+				addon: "text-utility-yellow-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "success",
+			class: {
+				root: "bg-utility-green-50 text-utility-green-700 ring-utility-green-200",
+				addon: "text-utility-green-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "blue",
+			class: {
+				root: "bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200",
+				addon: "text-utility-blue-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "indigo",
+			class: {
+				root: "bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200",
+				addon: "text-utility-indigo-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "pink",
+			class: {
+				root: "bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200",
+				addon: "text-utility-pink-500"
+			}
+		},
+		{
+			type: ["pill-color", "color"],
+			color: "orange",
+			class: {
+				root: "bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200",
+				addon: "text-utility-orange-500"
+			}
+		},
+		{
+			type: "modern",
+			color: "gray",
+			class: { addon: "text-utility-neutral-500" }
+		},
+		{
+			type: "modern",
+			color: "brand",
+			class: { addon: "text-utility-brand-500" }
+		},
+		{
+			type: "modern",
+			color: "error",
+			class: { addon: "text-utility-red-500" }
+		},
+		{
+			type: "modern",
+			color: "warning",
+			class: { addon: "text-utility-yellow-500" }
+		},
+		{
+			type: "modern",
+			color: "success",
+			class: { addon: "text-utility-green-500" }
+		},
+		{
+			type: "modern",
+			color: "blue",
+			class: { addon: "text-utility-blue-500" }
+		},
+		{
+			type: "modern",
+			color: "indigo",
+			class: { addon: "text-utility-indigo-500" }
+		},
+		{
+			type: "modern",
+			color: "pink",
+			class: { addon: "text-utility-pink-500" }
+		},
+		{
+			type: "modern",
+			color: "orange",
+			class: { addon: "text-utility-orange-500" }
+		},
+		{
+			type: "pill-color",
+			class: { dismissButton: "rounded-full" }
+		},
+		{
+			type: ["color", "modern"],
+			class: { dismissButton: "rounded-[3px]" }
+		},
+		{
+			color: "gray",
+			class: { dismissButton: "text-utility-neutral-400 hover:bg-utility-neutral-100 hover:text-utility-neutral-500" }
+		},
+		{
+			color: "brand",
+			class: { dismissButton: "text-utility-brand-400 hover:bg-utility-brand-100 hover:text-utility-brand-500" }
+		},
+		{
+			color: "error",
+			class: { dismissButton: "text-utility-red-400 hover:bg-utility-red-100 hover:text-utility-red-500" }
+		},
+		{
+			color: "warning",
+			class: { dismissButton: "text-utility-yellow-400 hover:bg-utility-yellow-100 hover:text-utility-yellow-500" }
+		},
+		{
+			color: "success",
+			class: { dismissButton: "text-utility-green-400 hover:bg-utility-green-100 hover:text-utility-green-500" }
+		},
+		{
+			color: "blue",
+			class: { dismissButton: "text-utility-blue-400 hover:bg-utility-blue-100 hover:text-utility-blue-500" }
+		},
+		{
+			color: "indigo",
+			class: { dismissButton: "text-utility-indigo-400 hover:bg-utility-indigo-100 hover:text-utility-indigo-500" }
+		},
+		{
+			color: "pink",
+			class: { dismissButton: "text-utility-pink-400 hover:bg-utility-pink-100 hover:text-utility-pink-500" }
+		},
+		{
+			color: "orange",
+			class: { dismissButton: "text-utility-orange-400 hover:bg-utility-orange-100 hover:text-utility-orange-500" }
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		type: "pill-color",
+		color: "gray"
+	}
+});
+const Badge = forwardRef(function Badge(props, ref) {
+	const { size, type, color, dot, iconLeading: IconLeading, iconTrailing: IconTrailing, onDismiss, dismissLabel = "Remove", children, className } = props;
+	const slots = badgeStyles({
+		size,
+		type,
+		color
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-badge": true,
+		className: cx(slots.root(), className),
+		children: [
+			dot && /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				"data-icon": "dot",
+				viewBox: "0 0 6 6",
+				fill: "none",
+				className: cx("size-2", slots.addon()),
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "3",
+					cy: "3",
+					r: "3",
+					fill: "currentColor"
+				})
+			}),
+			isValidElement(IconLeading) && IconLeading,
+			isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, {
+				"data-icon": "leading",
+				className: cx("size-3 stroke-[3px]", slots.addon())
+			}),
+			children,
+			isValidElement(IconTrailing) && IconTrailing,
+			isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, {
+				"data-icon": "trailing",
+				className: cx("size-3 stroke-[3px]", slots.addon())
+			}),
+			onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": dismissLabel,
+				onClick: onDismiss,
+				className: slots.dismissButton(),
+				children: /* @__PURE__ */ jsx(X, {
+					"data-icon": "dismiss",
+					className: "size-3 stroke-[3px] transition-inherit-all"
+				})
+			})
+		]
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge, badgeStyles };
+
+//# sourceMappingURL=badges.js.map

package/dist/badges/badges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badges.js","names":["CloseX"],"sources":["../../src/badges/badges.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/base/badges/badges.tsx */\n\nimport { X as CloseX } from '@kavagy/icons';\nimport type { FC, ReactNode } from 'react';\nimport { forwardRef, isValidElement } from 'react';\nimport { cx } from '../utils/cx';\nimport { isReactComponent } from '../utils/is-react-component';\nimport type { VariantProps } from '../utils/tv';\nimport { tv } from '../utils/tv';\n\n// `slate`, `sky`, and `purple` existed in the original scaffold (@untitledui) but have no\n// matching `utility.*` scale in the Kavagy token taxonomy — only the families listed\n// below do. See docs/ARCHITECTURE.md, \"Token taxonomy\" section.\nexport const badgeStyles = tv({\n  slots: {\n    root: 'inline-flex w-max items-center gap-1 whitespace-nowrap font-medium',\n    addon: '',\n    dismissButton:\n      'flex cursor-pointer items-center justify-center transition duration-100 ease-linear outline-focus-ring focus-visible:outline-2',\n  },\n  variants: {\n    size: {\n      sm: { root: 'px-2 py-0.5 text-xs', dismissButton: 'p-0.5' },\n      md: { root: 'px-2.5 py-0.5 text-sm', dismissButton: 'p-0.5' },\n      lg: { root: 'gap-1.5 px-3 py-1 text-sm', dismissButton: 'p-0.5' },\n    },\n    type: {\n      'pill-color': { root: 'rounded-full ring-1 ring-inset' },\n      color: { root: 'rounded-md ring-1 ring-inset' },\n      modern: { root: 'rounded-md bg-primary text-secondary ring-1 ring-primary shadow-xs' },\n    },\n    color: {\n      gray: {},\n      brand: {},\n      error: {},\n      warning: {},\n      success: {},\n      blue: {},\n      indigo: {},\n      pink: {},\n      orange: {},\n    },\n  },\n  compoundVariants: [\n    {\n      type: ['pill-color', 'color'],\n      color: 'gray',\n      class: {\n        root: 'bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200',\n        addon: 'text-utility-neutral-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'brand',\n      class: {\n        root: 'bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200',\n        addon: 'text-utility-brand-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'error',\n      class: {\n        root: 'bg-utility-red-50 text-utility-red-700 ring-utility-red-200',\n        addon: 'text-utility-red-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'warning',\n      class: {\n        root: 'bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200',\n        addon: 'text-utility-yellow-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'success',\n      class: {\n        root: 'bg-utility-green-50 text-utility-green-700 ring-utility-green-200',\n        addon: 'text-utility-green-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'blue',\n      class: {\n        root: 'bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200',\n        addon: 'text-utility-blue-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'indigo',\n      class: {\n        root: 'bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200',\n        addon: 'text-utility-indigo-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'pink',\n      class: {\n        root: 'bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200',\n        addon: 'text-utility-pink-500',\n      },\n    },\n    {\n      type: ['pill-color', 'color'],\n      color: 'orange',\n      class: {\n        root: 'bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200',\n        addon: 'text-utility-orange-500',\n      },\n    },\n    { type: 'modern', color: 'gray', class: { addon: 'text-utility-neutral-500' } },\n    { type: 'modern', color: 'brand', class: { addon: 'text-utility-brand-500' } },\n    { type: 'modern', color: 'error', class: { addon: 'text-utility-red-500' } },\n    { type: 'modern', color: 'warning', class: { addon: 'text-utility-yellow-500' } },\n    { type: 'modern', color: 'success', class: { addon: 'text-utility-green-500' } },\n    { type: 'modern', color: 'blue', class: { addon: 'text-utility-blue-500' } },\n    { type: 'modern', color: 'indigo', class: { addon: 'text-utility-indigo-500' } },\n    { type: 'modern', color: 'pink', class: { addon: 'text-utility-pink-500' } },\n    { type: 'modern', color: 'orange', class: { addon: 'text-utility-orange-500' } },\n    { type: 'pill-color', class: { dismissButton: 'rounded-full' } },\n    { type: ['color', 'modern'], class: { dismissButton: 'rounded-[3px]' } },\n    {\n      color: 'gray',\n      class: {\n        dismissButton:\n          'text-utility-neutral-400 hover:bg-utility-neutral-100 hover:text-utility-neutral-500',\n      },\n    },\n    {\n      color: 'brand',\n      class: {\n        dismissButton:\n          'text-utility-brand-400 hover:bg-utility-brand-100 hover:text-utility-brand-500',\n      },\n    },\n    {\n      color: 'error',\n      class: {\n        dismissButton: 'text-utility-red-400 hover:bg-utility-red-100 hover:text-utility-red-500',\n      },\n    },\n    {\n      color: 'warning',\n      class: {\n        dismissButton:\n          'text-utility-yellow-400 hover:bg-utility-yellow-100 hover:text-utility-yellow-500',\n      },\n    },\n    {\n      color: 'success',\n      class: {\n        dismissButton:\n          'text-utility-green-400 hover:bg-utility-green-100 hover:text-utility-green-500',\n      },\n    },\n    {\n      color: 'blue',\n      class: {\n        dismissButton:\n          'text-utility-blue-400 hover:bg-utility-blue-100 hover:text-utility-blue-500',\n      },\n    },\n    {\n      color: 'indigo',\n      class: {\n        dismissButton:\n          'text-utility-indigo-400 hover:bg-utility-indigo-100 hover:text-utility-indigo-500',\n      },\n    },\n    {\n      color: 'pink',\n      class: {\n        dismissButton:\n          'text-utility-pink-400 hover:bg-utility-pink-100 hover:text-utility-pink-500',\n      },\n    },\n    {\n      color: 'orange',\n      class: {\n        dismissButton:\n          'text-utility-orange-400 hover:bg-utility-orange-100 hover:text-utility-orange-500',\n      },\n    },\n  ],\n  defaultVariants: { size: 'md', type: 'pill-color', color: 'gray' },\n});\n\ntype BadgeVariants = VariantProps<typeof badgeStyles>;\n\nexport interface BadgeProps {\n  size?: BadgeVariants['size'];\n  type?: BadgeVariants['type'];\n  color?: BadgeVariants['color'];\n  /** Renders a status dot before the content. */\n  dot?: boolean;\n  iconLeading?: FC<{ className?: string }> | ReactNode;\n  iconTrailing?: FC<{ className?: string }> | ReactNode;\n  /** Renders a close button; once `onDismiss` is passed, the badge becomes dismissible. */\n  onDismiss?: () => void;\n  dismissLabel?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(props, ref) {\n  const {\n    size,\n    type,\n    color,\n    dot,\n    iconLeading: IconLeading,\n    iconTrailing: IconTrailing,\n    onDismiss,\n    dismissLabel = 'Remove',\n    children,\n    className,\n  } = props;\n\n  const slots = badgeStyles({ size, type, color });\n\n  return (\n    <span ref={ref} data-badge className={cx(slots.root(), className)}>\n      {dot && (\n        <svg\n          aria-hidden=\"true\"\n          data-icon=\"dot\"\n          viewBox=\"0 0 6 6\"\n          fill=\"none\"\n          className={cx('size-2', slots.addon())}\n        >\n          <circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"currentColor\" />\n        </svg>\n      )}\n\n      {isValidElement(IconLeading) && IconLeading}\n      {isReactComponent(IconLeading) && (\n        <IconLeading data-icon=\"leading\" className={cx('size-3 stroke-[3px]', slots.addon())} />\n      )}\n\n      {children}\n\n      {isValidElement(IconTrailing) && IconTrailing}\n      {isReactComponent(IconTrailing) && (\n        <IconTrailing data-icon=\"trailing\" className={cx('size-3 stroke-[3px]', slots.addon())} />\n      )}\n\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label={dismissLabel}\n          onClick={onDismiss}\n          className={slots.dismissButton()}\n        >\n          <CloseX data-icon=\"dismiss\" className=\"size-3 stroke-[3px] transition-inherit-all\" />\n        </button>\n      )}\n    </span>\n  );\n});\n\nBadge.displayName = 'Badge';\n"],"mappings":"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"}

package/dist/badges/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps, badgeStyles } from "./badges.js";
+export { Badge, type BadgeProps, badgeStyles };

package/dist/badges/index.js

@@ -0,0 +1,2 @@
+import { Badge, badgeStyles } from "./badges.js";
+export { Badge, badgeStyles };

package/dist/button/button.d.ts

@@ -0,0 +1,208 @@
+import { VariantProps } from "../utils/tv.js";
+import { FC, ReactNode } from "react";
+import { ButtonProps as ButtonProps$1, LinkProps } from "react-aria-components";
+//#region src/button/button.d.ts
+export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+  color: {
+    primary: {
+      root: string;
+    };
+    secondary: {
+      root: string;
+    };
+    tertiary: {
+      root: string;
+    };
+    'link-color': {
+      root: string;
+    };
+    'link-gray': {
+      root: string;
+    };
+    'primary-destructive': {
+      root: string;
+    };
+    'secondary-destructive': {
+      root: string;
+    };
+    'tertiary-destructive': {
+      root: string;
+    };
+    'link-destructive': {
+      root: string;
+    };
+  };
+  isLink: {
+    true: {};
+  };
+  noTextPadding: {
+    false: {
+      text: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+  text: string;
+}, undefined, {
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+  color: {
+    primary: {
+      root: string;
+    };
+    secondary: {
+      root: string;
+    };
+    tertiary: {
+      root: string;
+    };
+    'link-color': {
+      root: string;
+    };
+    'link-gray': {
+      root: string;
+    };
+    'primary-destructive': {
+      root: string;
+    };
+    'secondary-destructive': {
+      root: string;
+    };
+    'tertiary-destructive': {
+      root: string;
+    };
+    'link-destructive': {
+      root: string;
+    };
+  };
+  isLink: {
+    true: {};
+  };
+  noTextPadding: {
+    false: {
+      text: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+  text: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+  };
+  color: {
+    primary: {
+      root: string;
+    };
+    secondary: {
+      root: string;
+    };
+    tertiary: {
+      root: string;
+    };
+    'link-color': {
+      root: string;
+    };
+    'link-gray': {
+      root: string;
+    };
+    'primary-destructive': {
+      root: string;
+    };
+    'secondary-destructive': {
+      root: string;
+    };
+    'tertiary-destructive': {
+      root: string;
+    };
+    'link-destructive': {
+      root: string;
+    };
+  };
+  isLink: {
+    true: {};
+  };
+  noTextPadding: {
+    false: {
+      text: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+  text: string;
+}, undefined, unknown, unknown, undefined>>;
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+export interface ButtonBaseProps {
+  size?: ButtonVariants['size'];
+  color?: ButtonVariants['color'];
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  iconLeading?: FC<{
+    className?: string;
+  }> | ReactNode;
+  iconTrailing?: FC<{
+    className?: string;
+  }> | ReactNode;
+  noTextPadding?: boolean;
+  showTextWhileLoading?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+export interface ButtonProps extends ButtonBaseProps, Omit<ButtonProps$1, 'children' | 'className' | 'style'> {
+  href?: never;
+}
+export interface ButtonLinkProps extends ButtonBaseProps, Omit<LinkProps, 'children' | 'className' | 'style'> {
+  href: NonNullable<LinkProps['href']>;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<(ButtonProps | ButtonLinkProps) & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+//#endregion
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;qBAgBa,0CAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyEpB,iBAAiB,oBAAoB;iBAEzB;EACf,OAAO;EACP,QAAQ;EACR;EACA;EACA,cAAc;IAAK;OAAwB;EAC3C,eAAe;IAAK;OAAwB;EAC5C;EACA;EACA,WAAW;EACX;;iBAGe,oBACP,iBACN,KAAK;EACP;;iBAGe,wBACP,iBACN,KAAK;EACP,MAAM,YAAY;;qBAGP,wBAAM,2BAAA,cAAA,mCAAA,cAAA,oBAAA"}

package/dist/button/button.js

@@ -0,0 +1,158 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { tv } from "../utils/tv.js";
+import { isReactComponent } from "../utils/is-react-component.js";
+import { forwardRef, isValidElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button as Button$1, Link } from "react-aria-components";
+//#region src/button/button.tsx
+const buttonStyles = tv({
+	slots: {
+		root: [
+			"group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap",
+			"outline-focus-ring transition duration-100 ease-linear before:absolute",
+			"focus-visible:outline-2 focus-visible:outline-offset-2",
+			"in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none",
+			"disabled:cursor-not-allowed disabled:opacity-50 in-data-input-wrapper:disabled:opacity-100",
+			"*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+		],
+		icon: "pointer-events-none size-5 shrink-0 transition-inherit-all",
+		text: "transition-inherit-all"
+	},
+	variants: {
+		size: {
+			xs: { root: "gap-1 rounded-lg px-2.5 py-1.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2 in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5 *:data-icon:size-4 *:data-icon:stroke-[2.25px]" },
+			sm: { root: "gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2 in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5" },
+			md: { root: "gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5 in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3" },
+			lg: { root: "gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3" },
+			xl: { root: "gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5" }
+		},
+		color: {
+			primary: { root: "bg-brand-solid text-primary_on-brand shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-primary_on-brand/60 hover:*:data-icon:text-primary_on-brand/70" },
+			secondary: { root: "bg-primary text-secondary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover *:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover" },
+			tertiary: { root: "text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover *:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover" },
+			"link-color": { root: "justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover *:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-brand-secondary_alt *:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover" },
+			"link-gray": { root: "justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover *:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-quaternary *:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover" },
+			"primary-destructive": { root: "bg-error-solid text-white shadow-xs-skeuomorphic ring-1 ring-transparent outline-error ring-inset hover:bg-error-solid_hover data-loading:bg-error-solid_hover before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% *:data-icon:text-white/60 hover:*:data-icon:text-white/70" },
+			"secondary-destructive": { root: "bg-primary text-error-primary shadow-xs-skeuomorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary *:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary" },
+			"tertiary-destructive": { root: "text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary *:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary" },
+			"link-destructive": { root: "justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover *:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current *:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary" }
+		},
+		isLink: { true: {} },
+		noTextPadding: { false: { text: "px-0.5" } }
+	},
+	compoundVariants: [
+		{
+			isLink: true,
+			size: "xs",
+			class: { root: "gap-1 *:data-text:underline-offset-3" }
+		},
+		{
+			isLink: true,
+			size: "sm",
+			class: { root: "gap-1 *:data-text:underline-offset-3" }
+		},
+		{
+			isLink: true,
+			size: "md",
+			class: { root: "gap-1 *:data-text:underline-offset-4" }
+		},
+		{
+			isLink: true,
+			size: "lg",
+			class: { root: "gap-1.5 *:data-text:underline-offset-4" }
+		},
+		{
+			isLink: true,
+			size: "xl",
+			class: { root: "gap-1.5 *:data-text:underline-offset-4" }
+		}
+	],
+	defaultVariants: {
+		size: "sm",
+		color: "primary",
+		noTextPadding: false
+	}
+});
+const Button = forwardRef(function Button(props, ref) {
+	const { size, color, children, className, noTextPadding, iconLeading: IconLeading, iconTrailing: IconTrailing, isDisabled, isLoading, showTextWhileLoading, ...rest } = props;
+	const href = "href" in props ? props.href : void 0;
+	const isLinkStyle = color === "link-gray" || color === "link-color" || color === "link-destructive";
+	const isIconOnly = Boolean((IconLeading || IconTrailing) && !children);
+	const slots = buttonStyles({
+		size,
+		color,
+		isLink: isLinkStyle,
+		noTextPadding: isLinkStyle ? true : Boolean(noTextPadding)
+	});
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		isValidElement(IconLeading) && IconLeading,
+		isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, {
+			"data-icon": "leading",
+			className: slots.icon()
+		}),
+		isLoading && /* @__PURE__ */ jsxs("svg", {
+			fill: "none",
+			"aria-hidden": "true",
+			"data-icon": "loading",
+			viewBox: "0 0 20 20",
+			className: cx(slots.icon(), !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"),
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "stroke-current opacity-30",
+				cx: "10",
+				cy: "10",
+				r: "8",
+				fill: "none",
+				strokeWidth: "2"
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "origin-center animate-spin stroke-current",
+				cx: "10",
+				cy: "10",
+				r: "8",
+				fill: "none",
+				strokeWidth: "2",
+				strokeDasharray: "12.5 50",
+				strokeLinecap: "round"
+			})]
+		}),
+		children && /* @__PURE__ */ jsx("span", {
+			"data-text": true,
+			className: slots.text(),
+			children
+		}),
+		isValidElement(IconTrailing) && IconTrailing,
+		isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, {
+			"data-icon": "trailing",
+			className: slots.icon()
+		})
+	] });
+	const shared = {
+		"data-loading": isLoading ? true : void 0,
+		"data-icon-only": isIconOnly ? true : void 0,
+		isDisabled,
+		className: cx(slots.root(), (isLoading || href && (isDisabled || isLoading)) && "pointer-events-none", isLoading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"), className),
+		children: content
+	};
+	if (href !== void 0) {
+		const { href: _drop, ...linkRest } = rest;
+		return /* @__PURE__ */ jsx(Link, {
+			...linkRest,
+			...shared,
+			ref,
+			href: isDisabled ? void 0 : href
+		});
+	}
+	const buttonRest = rest;
+	return /* @__PURE__ */ jsx(Button$1, {
+		...buttonRest,
+		...shared,
+		ref,
+		type: buttonRest.type ?? "button",
+		isPending: isLoading
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button, buttonStyles };
+
+//# sourceMappingURL=button.js.map