@yarcl/react 0.1.0 → 0.2.0

package/dist/components/Alert.js

@@ -0,0 +1,61 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, gapClass, paddingClass, radiusClass, softVariantClass, typeClass } from "../classes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Alert.tsx
+/**
+* An inline message that stays on the page, e.g. a warning above a form.
+* For transient messages use {@link toast}.
+*
+* @example
+* ```tsx
+* <Alert color="warning" title="Trial ends in 3 days" action={<Button size="sm">Upgrade</Button>}>
+*   Add a payment method to keep your projects.
+* </Alert>
+* ```
+*/
+function Alert({ title, icon, action, color, variant, radius, gap, padding, textStyle, onDismiss, live, className, children, ...props }) {
+	const own = useDefaults("Alert");
+	const config = useConfig();
+	return /* @__PURE__ */ jsxs("div", {
+		role: live === "assertive" ? "alert" : live === "polite" ? "status" : void 0,
+		className: cx("yarcl-alert", colorClass(color ?? own.color), softVariantClass(variant ?? own.variant), radiusClass(radius ?? own.radius), gapClass(gap ?? own.gap), paddingClass(padding ?? own.padding), typeClass(textStyle ?? own.textStyle ?? config.defaults.labelStyle), className),
+		...props,
+		children: [
+			icon != null && /* @__PURE__ */ jsx("span", {
+				className: "yarcl-alert-icon",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "yarcl-alert-text",
+				children: [title != null && /* @__PURE__ */ jsx("div", {
+					className: "yarcl-alert-title",
+					children: title
+				}), children != null && /* @__PURE__ */ jsx("div", {
+					className: "yarcl-alert-body",
+					children
+				})]
+			}),
+			action != null && /* @__PURE__ */ jsx("div", {
+				className: "yarcl-alert-action",
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "yarcl-alert-dismiss",
+				"aria-label": "Dismiss",
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" })
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { Alert };

package/dist/components/Avatar.d.ts

@@ -0,0 +1,100 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, ComponentSize, Radius, Variant } from '../types';
+/** Props for {@link Avatar}. */
+export interface AvatarProps extends Omit<ComponentProps<'span'>, 'children' | 'color'> {
+    /** Image URL. When it cannot load, the fallback is shown. */
+    src?: string;
+    /**
+     * Person's name. Used for the fallback initials and accessible name when `alt` is omitted.
+     * @example
+     * ```tsx
+     * <Avatar name="Ada Lovelace" />
+     * ```
+     */
+    name?: string;
+    /** Alternative text for the avatar. Pass an empty string for a decorative avatar. */
+    alt?: string;
+    /** Content shown instead of initials when no image is available. */
+    fallback?: ReactNode;
+    /** Called after the image fails to load. */
+    onImageError?: () => void;
+    /**
+     * Diameter from the `sizes` config.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Avatar'>;
+    /**
+     * Corner radius from the `radii` config.
+     * @default 'rounded'
+     */
+    radius?: Radius | 'size';
+    /**
+     * Fallback color from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * Fallback style recipe from the `variants` config.
+     * @default config.defaults.softVariant
+     */
+    variant?: Variant;
+}
+/**
+ * A person image with initials or custom fallback content when an image is unavailable.
+ *
+ * @example
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src="/ada.jpg" />
+ * <Avatar name="Grace Hopper" color="success" />
+ * ```
+ */
+export declare function Avatar({ src, name, alt, fallback, onImageError, size, radius, color, variant, className, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: AvatarProps): import("react").JSX.Element;
+/** Props for {@link AvatarGroup}. */
+export interface AvatarGroupProps extends Omit<ComponentProps<'div'>, 'color'> {
+    /** Direct `Avatar` children to arrange in an overlapping row. */
+    children?: ReactNode;
+    /**
+     * Maximum number of avatars to show before an overflow count.
+     * @example
+     * ```tsx
+     * <AvatarGroup max={3}>…</AvatarGroup>
+     * ```
+     */
+    max?: number;
+    /** Total number of people when not every avatar is rendered. Used with `max`. */
+    total?: number;
+    /** Accessible label for the overflow count. Receives the number of hidden avatars. */
+    overflowLabel?: (count: number) => string;
+    /**
+     * Avatar diameter from the `sizes` config.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'AvatarGroup'>;
+    /**
+     * Avatar corner radius from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius | 'size';
+    /**
+     * Fallback color from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * Fallback style recipe from the `variants` config.
+     * @default config.defaults.softVariant
+     */
+    variant?: Variant;
+}
+/**
+ * An overlapping row of avatars. Group token props apply to avatars that do not set their own values.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3} aria-label="Project members">
+ *   <Avatar name="Ada Lovelace" />
+ *   <Avatar name="Grace Hopper" />
+ * </AvatarGroup>
+ * ```
+ */
+export declare function AvatarGroup({ children, max, total, overflowLabel, size, radius, color, variant, className, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -0,0 +1,89 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass, softVariantClass } from "../classes.js";
+import { Children, cloneElement, isValidElement, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Avatar.tsx
+function initials(name) {
+	return name?.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toLocaleUpperCase()).join("") ?? "";
+}
+/**
+* A person image with initials or custom fallback content when an image is unavailable.
+*
+* @example
+* ```tsx
+* <Avatar name="Ada Lovelace" src="/ada.jpg" />
+* <Avatar name="Grace Hopper" color="success" />
+* ```
+*/
+function Avatar({ src, name, alt, fallback, onImageError, size, radius, color, variant, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const own = useDefaults("Avatar");
+	const [failedSrc, setFailedSrc] = useState();
+	const decorative = alt === "" && ariaLabel == null && ariaLabelledBy == null && role == null;
+	const label = ariaLabel ?? (alt === "" ? void 0 : alt ?? name);
+	const labelled = label != null || ariaLabelledBy != null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		role: role ?? (labelled ? "img" : void 0),
+		"aria-label": ariaLabelledBy == null ? label : void 0,
+		"aria-labelledby": ariaLabelledBy,
+		className: cx("yarcl-avatar", sizeClass(size ?? own.size, "Avatar"), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), softVariantClass(variant ?? own.variant), className),
+		children: src && failedSrc !== src ? /* @__PURE__ */ jsx("img", {
+			className: "yarcl-avatar-image",
+			src,
+			alt: "",
+			"aria-hidden": "true",
+			onError: () => {
+				setFailedSrc(src);
+				onImageError?.();
+			}
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "yarcl-avatar-fallback",
+			"aria-hidden": labelled || decorative || void 0,
+			children: fallback ?? initials(name)
+		})
+	});
+}
+/**
+* An overlapping row of avatars. Group token props apply to avatars that do not set their own values.
+*
+* @example
+* ```tsx
+* <AvatarGroup max={3} aria-label="Project members">
+*   <Avatar name="Ada Lovelace" />
+*   <Avatar name="Grace Hopper" />
+* </AvatarGroup>
+* ```
+*/
+function AvatarGroup({ children, max, total, overflowLabel = (count) => `${count} more`, size, radius, color, variant, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const own = useDefaults("AvatarGroup");
+	const avatarOwn = useDefaults("Avatar");
+	const avatars = Children.toArray(children).filter((child) => isValidElement(child) && child.type === Avatar);
+	const limit = max == null ? avatars.length : Math.max(0, Math.floor(max));
+	const visible = avatars.slice(0, limit);
+	const hidden = Math.max((total ?? avatars.length) - visible.length, 0);
+	const groupSize = size ?? own.size ?? avatarOwn.size;
+	const groupRadius = radius ?? own.radius ?? avatarOwn.radius;
+	const groupColor = color ?? own.color ?? avatarOwn.color;
+	const groupVariant = variant ?? own.variant ?? avatarOwn.variant;
+	const labelled = ariaLabel != null || ariaLabelledBy != null;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		role: role ?? (labelled ? "group" : void 0),
+		"aria-label": ariaLabelledBy == null ? ariaLabel : void 0,
+		"aria-labelledby": ariaLabelledBy,
+		className: cx("yarcl-avatar-group", sizeClass(groupSize, "AvatarGroup"), radiusClass(groupRadius, groupSize), colorClass(groupColor), softVariantClass(groupVariant), className),
+		children: [visible.map((avatar) => cloneElement(avatar, {
+			size: avatar.props.size ?? groupSize,
+			radius: avatar.props.radius ?? groupRadius,
+			color: avatar.props.color ?? groupColor,
+			variant: avatar.props.variant ?? groupVariant
+		})), hidden > 0 && /* @__PURE__ */ jsxs("span", {
+			className: "yarcl-avatar yarcl-avatar-overflow",
+			role: "img",
+			"aria-label": overflowLabel(hidden),
+			children: ["+", hidden]
+		})]
+	});
+}
+//#endregion
+export { Avatar, AvatarGroup };

package/dist/components/Badge.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'react';
+import type { Color, ComponentSize, Radius, Variant } from '../types';
+/** Props for {@link Badge}. */
+export interface BadgeProps extends Omit<ComponentProps<'span'>, 'color'> {
+    /**
+     * Semantic color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * Style recipe, from the `variants` config.
+     * @default config.defaults.softVariant
+     */
+    variant?: Variant;
+    /**
+     * Scales with the size's font size, from the `sizes` config.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Badge'>;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius | 'size';
+    /** Shows a remove button, making the badge a removable tag. Called when it is pressed. */
+    onRemove?: () => void;
+    /**
+     * Accessible label of the remove button.
+     * @default 'Remove'
+     */
+    removeLabel?: string;
+}
+/**
+ * A small label for status, counts or categories. With `onRemove`, a removable tag.
+ * Uses the same variant recipes as {@link Button}.
+ *
+ * @example
+ * ```tsx
+ * <Badge color="success">Active</Badge>
+ * <Badge onRemove={() => removeTag('react')}>react</Badge>
+ * ```
+ */
+export declare function Badge({ color, variant, size, radius, onRemove, removeLabel, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function BadgeRemove(props: Omit<ComponentProps<'button'>, 'children'>): import("react").JSX.Element;

package/dist/components/Badge.js

@@ -0,0 +1,43 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass, softVariantClass } from "../classes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Badge.tsx
+/**
+* A small label for status, counts or categories. With `onRemove`, a removable tag.
+* Uses the same variant recipes as {@link Button}.
+*
+* @example
+* ```tsx
+* <Badge color="success">Active</Badge>
+* <Badge onRemove={() => removeTag('react')}>react</Badge>
+* ```
+*/
+function Badge({ color, variant, size, radius, onRemove, removeLabel = "Remove", className, children, ...props }) {
+	const own = useDefaults("Badge");
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("yarcl-badge", colorClass(color ?? own.color), softVariantClass(variant ?? own.variant), sizeClass(size ?? own.size, "Badge"), radiusClass(radius ?? own.radius, size ?? own.size), className),
+		...props,
+		children: [children, onRemove && /* @__PURE__ */ jsx(BadgeRemove, {
+			"aria-label": removeLabel,
+			onClick: onRemove
+		})]
+	});
+}
+function BadgeRemove(props) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "yarcl-badge-remove",
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M7 7l10 10M17 7 7 17" })
+		})
+	});
+}
+//#endregion
+export { Badge, BadgeRemove };

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,77 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, TextStyle } from '../types';
+import type { LinkProps } from './Link';
+/** Props for {@link Breadcrumb}. Accepts all native `<nav>` attributes except `color`. */
+export interface BreadcrumbProps extends Omit<ComponentProps<'nav'>, 'color'> {
+    /** `Breadcrumb.Item`s, from the root to the current page. */
+    children?: ReactNode;
+    /**
+     * Content between items. Hidden from screen readers.
+     * @default a chevron icon
+     * @example
+     * ```tsx
+     * <Breadcrumb separator="/">…</Breadcrumb>
+     * ```
+     */
+    separator?: ReactNode;
+    /** Collapses the middle of the trail into an expandable ellipsis when there are more items than this. Without it, the trail never collapses. */
+    maxItems?: number;
+    /**
+     * Items shown before the ellipsis when collapsed.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * Items shown after the ellipsis when collapsed.
+     * @default 2
+     */
+    itemsAfterCollapse?: number;
+    /**
+     * Accessible label of the ellipsis button.
+     * @default 'Show all breadcrumbs'
+     */
+    expandLabel?: string;
+    /**
+     * Text style, from the `typography.styles` config.
+     * @default config.defaults.textStyle
+     */
+    textStyle?: TextStyle;
+    /**
+     * Link color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * When to underline the links.
+     * @default 'hover'
+     */
+    underline?: LinkProps['underline'];
+}
+declare function BreadcrumbRoot({ children, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expandLabel, textStyle, color, underline, className, 'aria-label': ariaLabel, ...props }: BreadcrumbProps): import("react").JSX.Element;
+/** Props for `Breadcrumb.Item`. Accepts all native `<a>` attributes except `color`. */
+export interface BreadcrumbItemProps extends Omit<ComponentProps<'a'>, 'color'> {
+    /** The item's label. */
+    children?: ReactNode;
+    /** Where the item links to. Without it, the item renders as plain text. */
+    href?: string;
+}
+declare function BreadcrumbItem({ href, className, children, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+/**
+ * Shows where the current page sits in a hierarchy. The last item is the current page
+ * and gets `aria-current="page"`. Set `maxItems` to collapse long trails into an ellipsis
+ * that expands the full trail.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb maxItems={4}>
+ *   <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+ *   <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
+ *   <Breadcrumb.Item href="/projects/apollo">Apollo</Breadcrumb.Item>
+ *   <Breadcrumb.Item>Settings</Breadcrumb.Item>
+ * </Breadcrumb>
+ * ```
+ */
+export declare const Breadcrumb: typeof BreadcrumbRoot & {
+    Item: typeof BreadcrumbItem;
+};
+export {};

package/dist/components/Breadcrumb.js

@@ -0,0 +1,126 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, typeClass } from "../classes.js";
+import { Children, createContext, isValidElement, useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Breadcrumb.tsx
+var BreadcrumbItemContext = createContext(null);
+function ChevronIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+	});
+}
+function Separator({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "yarcl-breadcrumb-separator",
+		"aria-hidden": "true",
+		children
+	});
+}
+function BreadcrumbRoot({ children, separator = /* @__PURE__ */ jsx(ChevronIcon, {}), maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 2, expandLabel = "Show all breadcrumbs", textStyle, color, underline = "hover", className, "aria-label": ariaLabel = "Breadcrumb", ...props }) {
+	const config = useConfig();
+	const own = useDefaults("Breadcrumb");
+	const [expanded, setExpanded] = useState(false);
+	const focusNext = useRef(false);
+	const items = Children.toArray(children).filter(isValidElement);
+	const resolvedColor = color ?? own.color ?? config.defaults.color;
+	const before = Math.max(0, itemsBeforeCollapse);
+	const after = Math.max(1, itemsAfterCollapse);
+	const collapsible = maxItems !== void 0 && items.length > maxItems && before + after < items.length;
+	const collapsed = collapsible && !expanded;
+	const hiddenEnd = items.length - after;
+	const context = (index) => ({
+		current: index === items.length - 1,
+		separator,
+		color: resolvedColor,
+		underline,
+		itemRef: collapsible && index === before ? (node) => {
+			if (node && focusNext.current) {
+				focusNext.current = false;
+				node.focus();
+			}
+		} : void 0
+	});
+	const rendered = [];
+	items.forEach((item, index) => {
+		if (collapsed && index >= before && index < hiddenEnd) {
+			if (index === before) rendered.push(/* @__PURE__ */ jsxs("li", {
+				className: "yarcl-breadcrumb-item",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "yarcl-breadcrumb-ellipsis",
+					"aria-label": expandLabel,
+					onClick: () => {
+						focusNext.current = true;
+						setExpanded(true);
+					},
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "…"
+					})
+				}), /* @__PURE__ */ jsx(Separator, { children: separator })]
+			}, "yarcl-breadcrumb-ellipsis"));
+			return;
+		}
+		rendered.push(/* @__PURE__ */ jsx(BreadcrumbItemContext.Provider, {
+			value: context(index),
+			children: item
+		}, item.key ?? index));
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: cx("yarcl-breadcrumb", typeClass(textStyle ?? own.textStyle ?? config.defaults.textStyle), colorClass(resolvedColor), className),
+		...props,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "yarcl-breadcrumb-list",
+			children: rendered
+		})
+	});
+}
+function BreadcrumbItem({ href, className, children, ...props }) {
+	const context = useContext(BreadcrumbItemContext);
+	if (!context) throw new Error("yarcl: <Breadcrumb.Item> must be inside <Breadcrumb>");
+	const { current, separator, color, underline, itemRef } = context;
+	return /* @__PURE__ */ jsxs("li", {
+		className: "yarcl-breadcrumb-item",
+		children: [href ? /* @__PURE__ */ jsx("a", {
+			ref: itemRef,
+			href,
+			"aria-current": current ? "page" : void 0,
+			className: cx("yarcl-link", current ? "yarcl-breadcrumb-current yarcl-link-underline-none" : `yarcl-link-underline-${underline}`, colorClass(color), className),
+			...props,
+			children
+		}) : /* @__PURE__ */ jsx("span", {
+			ref: itemRef,
+			tabIndex: itemRef ? -1 : void 0,
+			"aria-current": current ? "page" : void 0,
+			className: cx("yarcl-breadcrumb-text", current && "yarcl-breadcrumb-current", className),
+			...props,
+			children
+		}), !current && /* @__PURE__ */ jsx(Separator, { children: separator })]
+	});
+}
+/**
+* Shows where the current page sits in a hierarchy. The last item is the current page
+* and gets `aria-current="page"`. Set `maxItems` to collapse long trails into an ellipsis
+* that expands the full trail.
+*
+* @example
+* ```tsx
+* <Breadcrumb maxItems={4}>
+*   <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+*   <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
+*   <Breadcrumb.Item href="/projects/apollo">Apollo</Breadcrumb.Item>
+*   <Breadcrumb.Item>Settings</Breadcrumb.Item>
+* </Breadcrumb>
+* ```
+*/
+var Breadcrumb = Object.assign(BreadcrumbRoot, { Item: BreadcrumbItem });
+//#endregion
+export { Breadcrumb };

package/dist/components/Button.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+import type { TokenProps, VariantProps } from '../types';
+/** Props for {@link Button}. Accepts all native `<button>` attributes except `color`. */
+export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color'>, TokenProps<'Button'>, VariantProps {
+    /** Shows a {@link Spinner}, disables the button and sets `aria-busy`. */
+    loading?: boolean;
+}
+/**
+ * A button styled from the consumer's design tokens.
+ * Shares the base size scale with {@link Input}; component size overrides can adjust either one.
+ * Icons (`<svg>`) inside are sized from the size's `iconSize`.
+ *
+ * @example
+ * ```tsx
+ * <Button size="lg" color="danger" variant="outline" radius="pill">Delete</Button>
+ * ```
+ */
+export declare function Button({ size, radius, color, variant, loading, disabled, className, type, children, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/components/Button.js

@@ -0,0 +1,33 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass, variantClass } from "../classes.js";
+import { useButtonGroup } from "./ButtonGroup.js";
+import { Spinner } from "./Spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Button.tsx
+/**
+* A button styled from the consumer's design tokens.
+* Shares the base size scale with {@link Input}; component size overrides can adjust either one.
+* Icons (`<svg>`) inside are sized from the size's `iconSize`.
+*
+* @example
+* ```tsx
+* <Button size="lg" color="danger" variant="outline" radius="pill">Delete</Button>
+* ```
+*/
+function Button({ size, radius, color, variant, loading, disabled, className, type = "button", children, ...props }) {
+	const own = useDefaults("Button");
+	const group = useButtonGroup();
+	return /* @__PURE__ */ jsxs("button", {
+		type,
+		className: cx("yarcl-button", sizeClass(size ?? group?.size ?? own.size, "Button"), radiusClass(radius ?? group?.radius ?? own.radius, size ?? group?.size ?? own.size), colorClass(color ?? group?.color ?? own.color), variantClass(variant ?? group?.variant ?? own.variant), className),
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		...props,
+		children: [loading && /* @__PURE__ */ jsx(Spinner, {
+			label: "",
+			"aria-hidden": "true"
+		}), children]
+	});
+}
+//#endregion
+export { Button };

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentProps } from 'react';
+import type { TokenProps, VariantProps } from '../types';
+export declare function useButtonGroup(): (TokenProps<"Button"> & VariantProps) | null;
+/** Props for {@link ButtonGroup}. Token props are passed down to every button inside. */
+export interface ButtonGroupProps extends Omit<ComponentProps<'div'>, 'color'>, TokenProps<'Button'>, VariantProps {
+    /**
+     * Joins the buttons into one control with shared borders.
+     * @default true
+     */
+    attached?: boolean;
+    /**
+     * Direction of the buttons.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * Groups related {@link Button}s and {@link IconButton}s. Buttons inherit `size`, `color`,
+ * `variant` and `radius` from the group unless they set their own. Give the group an `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup aria-label="Pagination" variant="outline">
+ *   <Button>Previous</Button>
+ *   <Button>Next</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export declare function ButtonGroup({ size, color, variant, radius, attached, orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;

package/dist/components/ButtonGroup.js

@@ -0,0 +1,37 @@
+import { cx } from "../classes.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ButtonGroup.tsx
+var ButtonGroupContext = createContext(null);
+function useButtonGroup() {
+	return useContext(ButtonGroupContext);
+}
+/**
+* Groups related {@link Button}s and {@link IconButton}s. Buttons inherit `size`, `color`,
+* `variant` and `radius` from the group unless they set their own. Give the group an `aria-label`.
+*
+* @example
+* ```tsx
+* <ButtonGroup aria-label="Pagination" variant="outline">
+*   <Button>Previous</Button>
+*   <Button>Next</Button>
+* </ButtonGroup>
+* ```
+*/
+function ButtonGroup({ size, color, variant, radius, attached = true, orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, {
+		value: {
+			size,
+			color,
+			variant,
+			radius
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			className: cx("yarcl-button-group", `yarcl-button-group-${orientation}`, attached && "yarcl-button-group-attached", className),
+			...props
+		})
+	});
+}
+//#endregion
+export { ButtonGroup, useButtonGroup };