@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,98 @@
-# Temporary Holding Version
+# @puzzle-ui/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Composable React UI components for Puzzle: actions, forms, data display,
+layout, navigation, overlays, typography, and utilities.
+
+> Puzzle is under active development and is not ready for production use.
+> APIs, styling, accessibility coverage, and framework compatibility may
+> change. Use it for experimentation and evaluation.
+
+## Installation
+
+Install the UI library and its theme provider:
+
+```sh
+npm install @puzzle-ui/ui @puzzle-ui/theme
+# or
+bun add @puzzle-ui/ui @puzzle-ui/theme
+# or
+pnpm add @puzzle-ui/ui @puzzle-ui/theme
+# or
+yarn add @puzzle-ui/ui @puzzle-ui/theme
+```
+
+Requires React and React DOM 19 (`^19.0.0`) and a bundler that supports CSS
+imports, such as Vite. Consumers do not need Bun.
+
+## Usage
+
+```tsx
+import { Theme } from "@puzzle-ui/theme";
+import { Button } from "@puzzle-ui/ui";
+
+export const App = () => (
+  <Theme>
+    <main>
+      <h1>Hello, Puzzle</h1>
+      <Button onClick={() => window.alert("Hello!")}>
+        Get started
+      </Button>
+    </main>
+  </Theme>
+);
+```
+
+`Theme` supplies the design tokens and global defaults. Component CSS is
+imported automatically; no separate Puzzle stylesheet or Tailwind setup is
+required. Customize colors, fonts, spacing, and other tokens through
+[`@puzzle-ui/theme`](../theme/README.md).
+
+## Components and imports
+
+Use named imports from `@puzzle-ui/ui`. Components include buttons, cards,
+inputs, dialogs, tabs, navigation, layout primitives, and typography.
+Internal component paths are not exported package entry points.
+
+Browse the repository's
+[component documentation](../../apps/site/content/docs/components/ui) for
+examples, props, and accessibility guidance. Interactive components need a
+client boundary in React Server Component applications.
+
+The package ships ESM and CommonJS builds with matching TypeScript
+declarations. Its CSS requires a CSS-aware bundler rather than bare Node.js.
+Test your chosen components in your framework; compatibility is still being
+evaluated.
+
+## Development
+
+From an installed repository checkout:
+
+```sh
+npm run build --workspace=@puzzle-ui/ui
+```
+
+`prepack` rebuilds the package before packing or publishing. See the root
+[publishing guide](../../README.md#publishing-packages).
+
+## Tests
+
+Three layers, selected by file name and run by Vitest projects (see `vitest.config.ts`):
+
+| Layer     | File pattern          | Environment      | Script                   |
+| --------- | --------------------- | ---------------- | ------------------------ |
+| Unit      | `*.unit.test.ts`      | Node, no DOM     | `bun run test:unit`      |
+| Component | `*.test.tsx` / `.ts`  | jsdom            | `bun run test:component` |
+| Browser   | `*.browser.test.tsx`  | Chromium (Playwright) | `bun run test:browser` |
+
+- **Unit**: pure logic (utilities, normalizers).
+- **Component**: rendering, ARIA and interaction with Testing Library.
+- **Browser**: behavior that needs real layout, computed styles, focus or pointer input.
+
+`bun run vitest` runs unit and component; `bun run test:all` runs everything. The first browser run needs `bunx playwright install chromium`.
+
+Run these test commands from this package directory in a repository
+checkout, after installing workspace dependencies.
+
+## License
+
+MIT. See [LICENSE](../../LICENSE); the published license is at `dist/LICENSE`.

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sjoerd van Den Berg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/actions/button/button-content.cjs

@@ -0,0 +1,41 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/actions/button/button-content.tsx
+const ButtonContent = ({ children, leading, trailing, loading }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-button__spinner",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "12",
+					cy: "12",
+					r: "9",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					opacity: ".25"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M21 12a9 9 0 0 0-9-9",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					strokeLinecap: "round"
+				})]
+			})
+		}) : leading != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-button__leading",
+			children: leading
+		}) : null,
+		children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-button__content",
+			children
+		}),
+		trailing != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-button__trailing",
+			children: trailing
+		})
+	] });
+};
+exports.ButtonContent = ButtonContent;
+
+//# sourceMappingURL=button-content.cjs.map

package/dist/components/actions/button/button-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-content.cjs","names":[],"sources":["../../../../src/components/actions/button/button-content.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype ButtonContentProps = {\n  children?: ReactNode;\n  leading?: ReactNode;\n  trailing?: ReactNode;\n  loading: boolean;\n};\n\nconst ButtonContent = ({\n  children,\n  leading,\n  trailing,\n  loading,\n}: ButtonContentProps) => {\n  return (\n    <>\n      {loading ? (\n        <span className=\"puzzle-button__spinner\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"9\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              opacity=\".25\"\n            />\n\n            <path\n              d=\"M21 12a9 9 0 0 0-9-9\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n        </span>\n      ) : leading != null ? (\n        <span className=\"puzzle-button__leading\">{leading}</span>\n      ) : null}\n\n      {children != null && (\n        <span className=\"puzzle-button__content\">{children}</span>\n      )}\n\n      {trailing != null && (\n        <span className=\"puzzle-button__trailing\">{trailing}</span>\n      )}\n    </>\n  );\n};\n\nexport { ButtonContent };\n"],"mappings":";;AASA,MAAM,iBAAiB,EACrB,UACA,SACA,UACA,cACwB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;GACnD,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAA9B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KACE,IAAG;KACH,IAAG;KACH,GAAE;KACF,QAAO;KACP,aAAY;KACZ,SAAQ;IACT,CAAA,GAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA,CACE;;EACD,CAAA,IACJ,WAAW,OACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAc,CAAA,IACtD;EAEH,YAAY,QACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAA0B;EAAe,CAAA;EAG1D,YAAY,QACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAe,CAAA;CAE5D,EAAA,CAAA;AAEN"}

package/dist/components/actions/button/button-content.js

@@ -0,0 +1,41 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/actions/button/button-content.tsx
+const ButtonContent = ({ children, leading, trailing, loading }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		loading ? /* @__PURE__ */ jsx("span", {
+			className: "puzzle-button__spinner",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "9",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					opacity: ".25"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M21 12a9 9 0 0 0-9-9",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					strokeLinecap: "round"
+				})]
+			})
+		}) : leading != null ? /* @__PURE__ */ jsx("span", {
+			className: "puzzle-button__leading",
+			children: leading
+		}) : null,
+		children != null && /* @__PURE__ */ jsx("span", {
+			className: "puzzle-button__content",
+			children
+		}),
+		trailing != null && /* @__PURE__ */ jsx("span", {
+			className: "puzzle-button__trailing",
+			children: trailing
+		})
+	] });
+};
+export { ButtonContent };
+
+//# sourceMappingURL=button-content.js.map

package/dist/components/actions/button/button-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-content.js","names":[],"sources":["../../../../src/components/actions/button/button-content.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype ButtonContentProps = {\n  children?: ReactNode;\n  leading?: ReactNode;\n  trailing?: ReactNode;\n  loading: boolean;\n};\n\nconst ButtonContent = ({\n  children,\n  leading,\n  trailing,\n  loading,\n}: ButtonContentProps) => {\n  return (\n    <>\n      {loading ? (\n        <span className=\"puzzle-button__spinner\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"9\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              opacity=\".25\"\n            />\n\n            <path\n              d=\"M21 12a9 9 0 0 0-9-9\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n        </span>\n      ) : leading != null ? (\n        <span className=\"puzzle-button__leading\">{leading}</span>\n      ) : null}\n\n      {children != null && (\n        <span className=\"puzzle-button__content\">{children}</span>\n      )}\n\n      {trailing != null && (\n        <span className=\"puzzle-button__trailing\">{trailing}</span>\n      )}\n    </>\n  );\n};\n\nexport { ButtonContent };\n"],"mappings":";;AASA,MAAM,iBAAiB,EACrB,UACA,SACA,UACA,cACwB;CACxB,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,UACC,oBAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;GACnD,UAAA,qBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAA9B,UAAA,CACE,oBAAC,UAAD;KACE,IAAG;KACH,IAAG;KACH,GAAE;KACF,QAAO;KACP,aAAY;KACZ,SAAQ;IACT,CAAA,GAED,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA,CACE;;EACD,CAAA,IACJ,WAAW,OACb,oBAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAc,CAAA,IACtD;EAEH,YAAY,QACX,oBAAC,QAAD;GAAM,WAAU;GAA0B;EAAe,CAAA;EAG1D,YAAY,QACX,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAe,CAAA;CAE5D,EAAA,CAAA;AAEN"}

package/dist/components/actions/button/button.css

@@ -0,0 +1,191 @@
+.puzzle-button {
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  gap: var(--puzzle-button-gap, var(--puzzle-space-2, .5rem));
+  border-radius: var(--puzzle-radius-md, .5rem);
+  font-family: var(--puzzle-font-family-button, inherit);
+  font-size: var(--puzzle-font-size-button, .875rem);
+  font-weight: var(--puzzle-font-weight-button, 600);
+  line-height: var(--puzzle-font-line-height-button, 1.2);
+  letter-spacing: var(--puzzle-font-letter-spacing-button, 0);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition: background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        filter var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  border: 1px solid #0000;
+  flex: none;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.puzzle-button:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-button:disabled, .puzzle-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.puzzle-button:disabled:hover, .puzzle-button[aria-disabled="true"]:hover {
+  filter: none;
+}
+
+.puzzle-button--primary {
+  color: var(--puzzle-color-primary-foreground);
+  background: var(--puzzle-color-primary);
+}
+
+.puzzle-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(.93);
+}
+
+.puzzle-button--secondary {
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(.96);
+}
+
+.puzzle-button--outline {
+  color: var(--puzzle-color-text);
+  border-color: var(--puzzle-color-border);
+  background: none;
+}
+
+.puzzle-button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-button--ghost {
+  color: var(--puzzle-color-text);
+  background: none;
+}
+
+.puzzle-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-button--danger {
+  color: var(--puzzle-color-danger-foreground);
+  background: var(--puzzle-color-danger);
+}
+
+.puzzle-button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(.93);
+}
+
+.puzzle-button--link {
+  min-height: auto;
+  color: var(--puzzle-color-primary);
+  text-underline-offset: .2em;
+  background: none;
+  border-color: #0000;
+  border-radius: 0;
+  padding-inline: 0;
+  text-decoration: underline;
+}
+
+.puzzle-button--link:hover:not(:disabled):not([aria-disabled="true"]) {
+  opacity: .8;
+}
+
+.puzzle-button--toggle {
+  color: var(--puzzle-color-text);
+  border: 1px solid var(--puzzle-color-border);
+  background: none;
+}
+
+.puzzle-button--toggle:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(.96);
+}
+
+.puzzle-button--toggle-active {
+  color: var(--puzzle-color-primary);
+  background-color: color-mix(in srgb, var(--puzzle-color-primary), transparent 90%);
+  border: 1px solid var(--puzzle-color-border);
+}
+
+.puzzle-button--xs {
+  min-height: 1.75rem;
+  padding-inline: var(--puzzle-space-1, .5rem);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-button--sm {
+  min-height: 2rem;
+  padding-inline: var(--puzzle-space-2, .75rem);
+  font-size: var(--puzzle-font-size-sm, .8125rem);
+}
+
+.puzzle-button--md {
+  min-height: 2.5rem;
+  padding-inline: var(--puzzle-space-3, 1rem);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+}
+
+.puzzle-button--lg {
+  min-height: 3rem;
+  padding-inline: var(--puzzle-space-4, 1.25rem);
+  font-size: var(--puzzle-font-size-base, 1rem);
+}
+
+.puzzle-button--icon {
+  width: var(--puzzle-button-icon-size, 2.5rem);
+  height: var(--puzzle-button-icon-size, 2.5rem);
+  aspect-ratio: 1;
+  min-height: 0;
+  padding: 0;
+}
+
+.puzzle-button--full-width {
+  width: 100%;
+  display: flex;
+}
+
+.puzzle-button__leading, .puzzle-button__trailing, .puzzle-button__content, .puzzle-button__spinner {
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  display: inline-flex;
+}
+
+.puzzle-button__content {
+  flex: 0 auto;
+}
+
+.puzzle-button__leading, .puzzle-button__trailing, .puzzle-button__spinner {
+  flex-shrink: 0;
+}
+
+.puzzle-button__spinner svg {
+  width: 1em;
+  height: 1em;
+  animation: .8s linear infinite puzzle-button-spin;
+  display: block;
+}
+
+@keyframes puzzle-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-button {
+    transition: none;
+  }
+
+  .puzzle-button__spinner svg {
+    animation: none;
+  }
+}

package/dist/components/actions/button/button.types.d.cts

@@ -0,0 +1,30 @@
+import { LinkProps } from "../../navigation/link/types.cjs";
+import { ComponentPropsWithRef, ReactNode } from "react";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger" | "link" | "toggle" | "toggle-active";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "icon";
+type ButtonBaseProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+/**
+ * Props for a native button element.
+ */
+type ButtonNativeProps = ButtonBaseProps & Omit<ComponentPropsWithRef<"button">, keyof ButtonBaseProps> & {
+  href?: never;
+};
+/**
+ * Props for a button rendered as a Puzzle Link.
+ */
+type ButtonLinkProps = ButtonBaseProps & Omit<LinkProps, keyof ButtonBaseProps | "href" | "type"> & {
+  href: LinkProps["href"];
+  type?: never;
+};
+type ButtonProps = ButtonNativeProps | ButtonLinkProps;
+export type { ButtonLinkProps, ButtonNativeProps, ButtonProps, ButtonSize, ButtonVariant };

package/dist/components/actions/button/button.types.d.ts

@@ -0,0 +1,30 @@
+import { LinkProps } from "../../navigation/link/types.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger" | "link" | "toggle" | "toggle-active";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "icon";
+type ButtonBaseProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+/**
+ * Props for a native button element.
+ */
+type ButtonNativeProps = ButtonBaseProps & Omit<ComponentPropsWithRef<"button">, keyof ButtonBaseProps> & {
+  href?: never;
+};
+/**
+ * Props for a button rendered as a Puzzle Link.
+ */
+type ButtonLinkProps = ButtonBaseProps & Omit<LinkProps, keyof ButtonBaseProps | "href" | "type"> & {
+  href: LinkProps["href"];
+  type?: never;
+};
+type ButtonProps = ButtonNativeProps | ButtonLinkProps;
+export type { ButtonLinkProps, ButtonNativeProps, ButtonProps, ButtonSize, ButtonVariant };

package/dist/components/actions/button/index.cjs

@@ -0,0 +1,80 @@
+"use client";
+const require_index = require("../../navigation/link/index.cjs");
+const require_button_content = require("./button-content.cjs");
+;/* empty css             */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/actions/button/index.tsx
+const getButtonClassName = (variant, size, fullWidth, loading, className) => {
+	return (0, _puzzle_ui_core.cn)("puzzle-button", `puzzle-button--${variant}`, `puzzle-button--${size}`, fullWidth && "puzzle-button--full-width", loading && "puzzle-button--loading", className);
+};
+/**
+* Prevents navigation when an anchor is disabled.
+*/
+const preventDisabledLinkClick = (event) => {
+	event.preventDefault();
+	event.stopPropagation();
+};
+/**
+* Prevents keyboard activation when an anchor is disabled.
+*/
+const preventDisabledLinkKeyDown = (event) => {
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+};
+/**
+* Renders a Button using the configured Puzzle Link component.
+*/
+const renderLinkButton = ({ href, variant = "primary", size = "md", leading, trailing, loading = false, disabled = false, fullWidth = false, className, children, tabIndex, onClick, onKeyDown, "aria-disabled": ariaDisabled, "aria-busy": ariaBusy, ...linkProps }) => {
+	const isDisabled = disabled || loading || ariaDisabled === true || ariaDisabled === "true";
+	const classes = getButtonClassName(variant, size, fullWidth, loading, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Link, {
+		...linkProps,
+		href,
+		className: classes,
+		"aria-disabled": isDisabled ? true : ariaDisabled,
+		"aria-busy": loading ? true : ariaBusy,
+		tabIndex: isDisabled ? -1 : tabIndex,
+		onClick: isDisabled ? preventDisabledLinkClick : onClick,
+		onKeyDown: isDisabled ? preventDisabledLinkKeyDown : onKeyDown,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button_content.ButtonContent, {
+			loading,
+			leading,
+			trailing,
+			children
+		})
+	});
+};
+/**
+* Renders a native HTML button.
+*/
+const renderNativeButton = ({ variant = "primary", size = "md", leading, trailing, loading = false, disabled = false, fullWidth = false, className, children, type = "button", "aria-disabled": ariaDisabled, "aria-busy": ariaBusy, ...buttonProps }) => {
+	const isDisabled = disabled || loading || ariaDisabled === true || ariaDisabled === "true";
+	const classes = getButtonClassName(variant, size, fullWidth, loading, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...buttonProps,
+		type,
+		className: classes,
+		disabled: isDisabled,
+		"aria-disabled": isDisabled ? true : ariaDisabled,
+		"aria-busy": loading ? true : ariaBusy,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button_content.ButtonContent, {
+			loading,
+			leading,
+			trailing,
+			children
+		})
+	});
+};
+const isLinkButton = (props) => {
+	return typeof props.href === "string";
+};
+const Button = (props) => {
+	if (isLinkButton(props)) return renderLinkButton(props);
+	return renderNativeButton(props);
+};
+exports.Button = Button;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/actions/button/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Link","ButtonContent"],"sources":["../../../../src/components/actions/button/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type { KeyboardEventHandler, MouseEventHandler } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\n\nimport type {\n  ButtonLinkProps,\n  ButtonNativeProps,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from \"./button.types\";\n\nimport { ButtonContent } from \"./button-content\";\n\nimport \"./button.css\";\n\nconst getButtonClassName = (\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  loading: boolean,\n  className?: string,\n) => {\n  return cn(\n    \"puzzle-button\",\n    `puzzle-button--${variant}`,\n    `puzzle-button--${size}`,\n    fullWidth && \"puzzle-button--full-width\",\n    loading && \"puzzle-button--loading\",\n    className,\n  );\n};\n\n/**\n * Prevents navigation when an anchor is disabled.\n */\nconst preventDisabledLinkClick: MouseEventHandler<HTMLAnchorElement> = (\n  event,\n) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * Prevents keyboard activation when an anchor is disabled.\n */\nconst preventDisabledLinkKeyDown: KeyboardEventHandler<HTMLAnchorElement> = (\n  event,\n) => {\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n};\n\n/**\n * Renders a Button using the configured Puzzle Link component.\n */\nconst renderLinkButton = ({\n  href,\n  variant = \"primary\",\n  size = \"md\",\n  leading,\n  trailing,\n  loading = false,\n  disabled = false,\n  fullWidth = false,\n  className,\n  children,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  \"aria-disabled\": ariaDisabled,\n  \"aria-busy\": ariaBusy,\n  ...linkProps\n}: ButtonLinkProps) => {\n  const isDisabled =\n    disabled || loading || ariaDisabled === true || ariaDisabled === \"true\";\n\n  const classes = getButtonClassName(\n    variant,\n    size,\n    fullWidth,\n    loading,\n    className,\n  );\n\n  return (\n    <Link\n      {...linkProps}\n      href={href}\n      className={classes}\n      aria-disabled={isDisabled ? true : ariaDisabled}\n      aria-busy={loading ? true : ariaBusy}\n      tabIndex={isDisabled ? -1 : tabIndex}\n      onClick={isDisabled ? preventDisabledLinkClick : onClick}\n      onKeyDown={isDisabled ? preventDisabledLinkKeyDown : onKeyDown}\n    >\n      <ButtonContent loading={loading} leading={leading} trailing={trailing}>\n        {children}\n      </ButtonContent>\n    </Link>\n  );\n};\n\n/**\n * Renders a native HTML button.\n */\nconst renderNativeButton = ({\n  variant = \"primary\",\n  size = \"md\",\n  leading,\n  trailing,\n  loading = false,\n  disabled = false,\n  fullWidth = false,\n  className,\n  children,\n  type = \"button\",\n  \"aria-disabled\": ariaDisabled,\n  \"aria-busy\": ariaBusy,\n  ...buttonProps\n}: ButtonNativeProps) => {\n  const isDisabled =\n    disabled || loading || ariaDisabled === true || ariaDisabled === \"true\";\n\n  const classes = getButtonClassName(\n    variant,\n    size,\n    fullWidth,\n    loading,\n    className,\n  );\n\n  return (\n    <button\n      {...buttonProps}\n      type={type}\n      className={classes}\n      disabled={isDisabled}\n      aria-disabled={isDisabled ? true : ariaDisabled}\n      aria-busy={loading ? true : ariaBusy}\n    >\n      <ButtonContent loading={loading} leading={leading} trailing={trailing}>\n        {children}\n      </ButtonContent>\n    </button>\n  );\n};\n\nconst isLinkButton = (props: ButtonProps): props is ButtonLinkProps => {\n  return typeof props.href === \"string\";\n};\n\nconst Button = (props: ButtonProps) => {\n  if (isLinkButton(props)) {\n    return renderLinkButton(props);\n  }\n\n  return renderNativeButton(props);\n};\n\nexport { Button, type ButtonProps };\n"],"mappings":";;;;;;;AAmBA,MAAM,sBACJ,SACA,MACA,WACA,SACA,cACG;CACH,QAAA,GAAOA,gBAAAA,GAAAA,CACL,iBACA,kBAAkB,WAClB,kBAAkB,QAClB,aAAa,6BACb,WAAW,0BACX,SACF;AACF;;;;AAKA,MAAM,4BACJ,UACG;CACH,MAAM,eAAe;CACrB,MAAM,gBAAgB;AACxB;;;;AAKA,MAAM,8BACJ,UACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,MAAM,gBAAgB;CACxB;AACF;;;;AAKA,MAAM,oBAAoB,EACxB,MACA,UAAU,WACV,OAAO,MACP,SACA,UACA,UAAU,OACV,WAAW,OACX,YAAY,OACZ,WACA,UACA,UACA,SACA,WACA,iBAAiB,cACjB,aAAa,UACb,GAAG,gBACkB;CACrB,MAAM,aACJ,YAAY,WAAW,iBAAiB,QAAQ,iBAAiB;CAEnE,MAAM,UAAU,mBACd,SACA,MACA,WACA,SACA,SACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,MAAD;EACE,GAAI;EACE;EACN,WAAW;EACX,iBAAe,aAAa,OAAO;EACnC,aAAW,UAAU,OAAO;EAC5B,UAAU,aAAa,KAAK;EAC5B,SAAS,aAAa,2BAA2B;EACjD,WAAW,aAAa,6BAA6B;EAErD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,eAAD;GAAwB;GAAkB;GAAmB;GAC1D;EACY,CAAA;CACX,CAAA;AAEV;;;;AAKA,MAAM,sBAAsB,EAC1B,UAAU,WACV,OAAO,MACP,SACA,UACA,UAAU,OACV,WAAW,OACX,YAAY,OACZ,WACA,UACA,OAAO,UACP,iBAAiB,cACjB,aAAa,UACb,GAAG,kBACoB;CACvB,MAAM,aACJ,YAAY,WAAW,iBAAiB,QAAQ,iBAAiB;CAEnE,MAAM,UAAU,mBACd,SACA,MACA,WACA,SACA,SACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACE;EACN,WAAW;EACX,UAAU;EACV,iBAAe,aAAa,OAAO;EACnC,aAAW,UAAU,OAAO;EAE5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAD;GAAwB;GAAkB;GAAmB;GAC1D;EACY,CAAA;CACT,CAAA;AAEZ;AAEA,MAAM,gBAAgB,UAAiD;CACrE,OAAO,OAAO,MAAM,SAAS;AAC/B;AAEA,MAAM,UAAU,UAAuB;CACrC,IAAI,aAAa,KAAK,GACpB,OAAO,iBAAiB,KAAK;CAG/B,OAAO,mBAAmB,KAAK;AACjC"}

package/dist/components/actions/button/index.d.cts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "./button.types.cjs";
+declare const Button: (props: ButtonProps) => import("react").JSX.Element;
+export { Button, type ButtonProps };

package/dist/components/actions/button/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "./button.types.js";
+declare const Button: (props: ButtonProps) => import("react").JSX.Element;
+export { Button, type ButtonProps };

package/dist/components/actions/button/index.js

@@ -0,0 +1,80 @@
+"use client";
+import { Link } from "../../navigation/link/index.js";
+import { ButtonContent } from "./button-content.js";
+import "./button.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/actions/button/index.tsx
+const getButtonClassName = (variant, size, fullWidth, loading, className) => {
+	return cn("puzzle-button", `puzzle-button--${variant}`, `puzzle-button--${size}`, fullWidth && "puzzle-button--full-width", loading && "puzzle-button--loading", className);
+};
+/**
+* Prevents navigation when an anchor is disabled.
+*/
+const preventDisabledLinkClick = (event) => {
+	event.preventDefault();
+	event.stopPropagation();
+};
+/**
+* Prevents keyboard activation when an anchor is disabled.
+*/
+const preventDisabledLinkKeyDown = (event) => {
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+};
+/**
+* Renders a Button using the configured Puzzle Link component.
+*/
+const renderLinkButton = ({ href, variant = "primary", size = "md", leading, trailing, loading = false, disabled = false, fullWidth = false, className, children, tabIndex, onClick, onKeyDown, "aria-disabled": ariaDisabled, "aria-busy": ariaBusy, ...linkProps }) => {
+	const isDisabled = disabled || loading || ariaDisabled === true || ariaDisabled === "true";
+	const classes = getButtonClassName(variant, size, fullWidth, loading, className);
+	return /* @__PURE__ */ jsx(Link, {
+		...linkProps,
+		href,
+		className: classes,
+		"aria-disabled": isDisabled ? true : ariaDisabled,
+		"aria-busy": loading ? true : ariaBusy,
+		tabIndex: isDisabled ? -1 : tabIndex,
+		onClick: isDisabled ? preventDisabledLinkClick : onClick,
+		onKeyDown: isDisabled ? preventDisabledLinkKeyDown : onKeyDown,
+		children: /* @__PURE__ */ jsx(ButtonContent, {
+			loading,
+			leading,
+			trailing,
+			children
+		})
+	});
+};
+/**
+* Renders a native HTML button.
+*/
+const renderNativeButton = ({ variant = "primary", size = "md", leading, trailing, loading = false, disabled = false, fullWidth = false, className, children, type = "button", "aria-disabled": ariaDisabled, "aria-busy": ariaBusy, ...buttonProps }) => {
+	const isDisabled = disabled || loading || ariaDisabled === true || ariaDisabled === "true";
+	const classes = getButtonClassName(variant, size, fullWidth, loading, className);
+	return /* @__PURE__ */ jsx("button", {
+		...buttonProps,
+		type,
+		className: classes,
+		disabled: isDisabled,
+		"aria-disabled": isDisabled ? true : ariaDisabled,
+		"aria-busy": loading ? true : ariaBusy,
+		children: /* @__PURE__ */ jsx(ButtonContent, {
+			loading,
+			leading,
+			trailing,
+			children
+		})
+	});
+};
+const isLinkButton = (props) => {
+	return typeof props.href === "string";
+};
+const Button = (props) => {
+	if (isLinkButton(props)) return renderLinkButton(props);
+	return renderNativeButton(props);
+};
+export { Button };
+
+//# sourceMappingURL=index.js.map

package/dist/components/actions/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/actions/button/index.tsx"],"sourcesContent":["\"use client\";\n\nimport type { KeyboardEventHandler, MouseEventHandler } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\n\nimport type {\n  ButtonLinkProps,\n  ButtonNativeProps,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from \"./button.types\";\n\nimport { ButtonContent } from \"./button-content\";\n\nimport \"./button.css\";\n\nconst getButtonClassName = (\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  loading: boolean,\n  className?: string,\n) => {\n  return cn(\n    \"puzzle-button\",\n    `puzzle-button--${variant}`,\n    `puzzle-button--${size}`,\n    fullWidth && \"puzzle-button--full-width\",\n    loading && \"puzzle-button--loading\",\n    className,\n  );\n};\n\n/**\n * Prevents navigation when an anchor is disabled.\n */\nconst preventDisabledLinkClick: MouseEventHandler<HTMLAnchorElement> = (\n  event,\n) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * Prevents keyboard activation when an anchor is disabled.\n */\nconst preventDisabledLinkKeyDown: KeyboardEventHandler<HTMLAnchorElement> = (\n  event,\n) => {\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n};\n\n/**\n * Renders a Button using the configured Puzzle Link component.\n */\nconst renderLinkButton = ({\n  href,\n  variant = \"primary\",\n  size = \"md\",\n  leading,\n  trailing,\n  loading = false,\n  disabled = false,\n  fullWidth = false,\n  className,\n  children,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  \"aria-disabled\": ariaDisabled,\n  \"aria-busy\": ariaBusy,\n  ...linkProps\n}: ButtonLinkProps) => {\n  const isDisabled =\n    disabled || loading || ariaDisabled === true || ariaDisabled === \"true\";\n\n  const classes = getButtonClassName(\n    variant,\n    size,\n    fullWidth,\n    loading,\n    className,\n  );\n\n  return (\n    <Link\n      {...linkProps}\n      href={href}\n      className={classes}\n      aria-disabled={isDisabled ? true : ariaDisabled}\n      aria-busy={loading ? true : ariaBusy}\n      tabIndex={isDisabled ? -1 : tabIndex}\n      onClick={isDisabled ? preventDisabledLinkClick : onClick}\n      onKeyDown={isDisabled ? preventDisabledLinkKeyDown : onKeyDown}\n    >\n      <ButtonContent loading={loading} leading={leading} trailing={trailing}>\n        {children}\n      </ButtonContent>\n    </Link>\n  );\n};\n\n/**\n * Renders a native HTML button.\n */\nconst renderNativeButton = ({\n  variant = \"primary\",\n  size = \"md\",\n  leading,\n  trailing,\n  loading = false,\n  disabled = false,\n  fullWidth = false,\n  className,\n  children,\n  type = \"button\",\n  \"aria-disabled\": ariaDisabled,\n  \"aria-busy\": ariaBusy,\n  ...buttonProps\n}: ButtonNativeProps) => {\n  const isDisabled =\n    disabled || loading || ariaDisabled === true || ariaDisabled === \"true\";\n\n  const classes = getButtonClassName(\n    variant,\n    size,\n    fullWidth,\n    loading,\n    className,\n  );\n\n  return (\n    <button\n      {...buttonProps}\n      type={type}\n      className={classes}\n      disabled={isDisabled}\n      aria-disabled={isDisabled ? true : ariaDisabled}\n      aria-busy={loading ? true : ariaBusy}\n    >\n      <ButtonContent loading={loading} leading={leading} trailing={trailing}>\n        {children}\n      </ButtonContent>\n    </button>\n  );\n};\n\nconst isLinkButton = (props: ButtonProps): props is ButtonLinkProps => {\n  return typeof props.href === \"string\";\n};\n\nconst Button = (props: ButtonProps) => {\n  if (isLinkButton(props)) {\n    return renderLinkButton(props);\n  }\n\n  return renderNativeButton(props);\n};\n\nexport { Button, type ButtonProps };\n"],"mappings":";;;;;;;AAmBA,MAAM,sBACJ,SACA,MACA,WACA,SACA,cACG;CACH,OAAO,GACL,iBACA,kBAAkB,WAClB,kBAAkB,QAClB,aAAa,6BACb,WAAW,0BACX,SACF;AACF;;;;AAKA,MAAM,4BACJ,UACG;CACH,MAAM,eAAe;CACrB,MAAM,gBAAgB;AACxB;;;;AAKA,MAAM,8BACJ,UACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,MAAM,gBAAgB;CACxB;AACF;;;;AAKA,MAAM,oBAAoB,EACxB,MACA,UAAU,WACV,OAAO,MACP,SACA,UACA,UAAU,OACV,WAAW,OACX,YAAY,OACZ,WACA,UACA,UACA,SACA,WACA,iBAAiB,cACjB,aAAa,UACb,GAAG,gBACkB;CACrB,MAAM,aACJ,YAAY,WAAW,iBAAiB,QAAQ,iBAAiB;CAEnE,MAAM,UAAU,mBACd,SACA,MACA,WACA,SACA,SACF;CAEA,OACE,oBAAC,MAAD;EACE,GAAI;EACE;EACN,WAAW;EACX,iBAAe,aAAa,OAAO;EACnC,aAAW,UAAU,OAAO;EAC5B,UAAU,aAAa,KAAK;EAC5B,SAAS,aAAa,2BAA2B;EACjD,WAAW,aAAa,6BAA6B;EAErD,UAAA,oBAAC,eAAD;GAAwB;GAAkB;GAAmB;GAC1D;EACY,CAAA;CACX,CAAA;AAEV;;;;AAKA,MAAM,sBAAsB,EAC1B,UAAU,WACV,OAAO,MACP,SACA,UACA,UAAU,OACV,WAAW,OACX,YAAY,OACZ,WACA,UACA,OAAO,UACP,iBAAiB,cACjB,aAAa,UACb,GAAG,kBACoB;CACvB,MAAM,aACJ,YAAY,WAAW,iBAAiB,QAAQ,iBAAiB;CAEnE,MAAM,UAAU,mBACd,SACA,MACA,WACA,SACA,SACF;CAEA,OACE,oBAAC,UAAD;EACE,GAAI;EACE;EACN,WAAW;EACX,UAAU;EACV,iBAAe,aAAa,OAAO;EACnC,aAAW,UAAU,OAAO;EAE5B,UAAA,oBAAC,eAAD;GAAwB;GAAkB;GAAmB;GAC1D;EACY,CAAA;CACT,CAAA;AAEZ;AAEA,MAAM,gBAAgB,UAAiD;CACrE,OAAO,OAAO,MAAM,SAAS;AAC/B;AAEA,MAAM,UAAU,UAAuB;CACrC,IAAI,aAAa,KAAK,GACpB,OAAO,iBAAiB,KAAK;CAG/B,OAAO,mBAAmB,KAAK;AACjC"}