@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,26 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Avatar.module.js";
+import { initialsOf as n } from "./initialsOf.js";
+import { clsx as r } from "clsx";
+import { useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+// src/components/Avatar/Avatar.tsx
+function o({ "aria-label": o, className: s, name: c, size: l = "md", src: u, ...d }) {
+	let [f, p] = i(() => /* @__PURE__ */ new Set()), m = n(c), h = l === "xs" ? Array.from(m)[0] ?? "" : m, g = u !== void 0 && u !== "" && !f.has(u), _ = o === void 0 || o.trim() === "" ? c : o;
+	return /* @__PURE__ */ a(e, {
+		...d,
+		as: "span",
+		className: r(t.avatar, s),
+		role: "img",
+		"aria-label": _,
+		"data-size": l,
+		children: g ? /* @__PURE__ */ a(e, {
+			alt: "",
+			as: "img",
+			className: t.image,
+			onError: () => p((e) => new Set(e).add(u)),
+			src: u
+		}) : h
+	});
+}
+export { o as Avatar };

package/dist/components/Avatar/Avatar.module.js

@@ -0,0 +1,6 @@
+import './Avatar.css';// src/components/Avatar/Avatar.module.css
+var e = "sui-avatar-3xMuZ", t = "sui-image-ieqGp", n = {
+	avatar: e,
+	image: t
+};
+export { e as avatar, n as default, t as image };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from "./Avatar";
+export type { AvatarProps, AvatarSize } from "./Avatar";

package/dist/components/Avatar/initialsOf.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Picks the initials an avatar shows for a name
+ *
+ * @param name a person's or team's name, a handle such as "@plee", or a path such as "acme/web-team"
+ * @returns the first letter of each of the first two words, or the first two letters of a one-word name, upper-cased.
+ *   Words are separated by anything that is not a letter, mark or digit in any script, and letters are counted by
+ *   code point. Empty when the name has no letters or digits.
+ */
+export declare function initialsOf(name: string): string;

package/dist/components/Avatar/initialsOf.js

@@ -0,0 +1,9 @@
+// src/components/Avatar/initialsOf.ts
+function e(e) {
+	let n = e.split(/[^\p{L}\p{M}\p{N}]+/u).filter((e) => e !== "");
+	return n.length === 0 ? "" : (n.length === 1 ? Array.from(n[0]).slice(0, 2) : n.slice(0, 2).map(t)).join("").toUpperCase();
+}
+function t(e) {
+	return String.fromCodePoint(e.codePointAt(0) ?? 0);
+}
+export { e as initialsOf };

package/dist/components/AvatarGroup/AvatarGroup.css

@@ -0,0 +1 @@
+.sui-avatarGroup-P9iv8{align-items:center;display:inline-flex}.sui-avatarGroup-P9iv8>[role=img]{box-shadow:0 0 0 var(--sui-avatar-group-ring-width,2px) var(--sui-avatar-group-ring,var(--sui-color-background,#fff))}.sui-avatarGroup-P9iv8>[role=img]+[role=img]{margin-inline-start:calc(var(--sui-avatar-size,2rem) / -4)}.sui-overflow-JZIo-{color:var(--sui-color-text-muted,#4b5563);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-font-size-xs,.75rem);font-weight:var(--sui-font-weight-control,500);margin-inline-start:var(--sui-space-1,.25rem)}

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,30 @@
+import type { JSX, ReactNode } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { BoxProps } from "../Box";
+interface AvatarGroupOwnProps {
+    /**
+     * The `Avatar`s, as direct children or an array of them
+     */
+    children: ReactNode;
+    /**
+     * How many avatars show, at least 1. The rest are hidden on screen behind a "+n" count, but screen readers still
+     * read their names. Shows every avatar when left out or not a number.
+     */
+    max?: number;
+}
+/**
+ * Props for `AvatarGroup`: its own props, a required `aria-label` or `aria-labelledby`, and every other `span` prop
+ * except `role`
+ */
+export type AvatarGroupProps = AvatarGroupOwnProps & RequiredAccessibleName & Omit<BoxProps<"span">, "aria-label" | "aria-labelledby" | "as" | "role" | keyof AvatarGroupOwnProps>;
+/**
+ * A row of overlapping avatars, such as a pull request's reviewers. Give it a name. Past `max`, avatars are hidden
+ * on screen behind a "+n" count, but screen readers read every name.
+ *
+ * @example
+ * <AvatarGroup max={3} aria-label="Reviewers">
+ *   {reviewers.map((reviewer) => <Avatar key={reviewer.login} name={reviewer.login} size="sm" />)}
+ * </AvatarGroup>
+ */
+export declare function AvatarGroup({ children, className, max, ...rest }: AvatarGroupProps): JSX.Element;
+export {};

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,33 @@
+import { Box as e } from "../Box/Box.js";
+import { VisuallyHidden as t } from "../VisuallyHidden/VisuallyHidden.js";
+import n from "./AvatarGroup.module.js";
+import { clsx as r } from "clsx";
+import { Children as i } from "react";
+import { c as a } from "react/compiler-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/AvatarGroup/AvatarGroup.tsx
+function l(l) {
+	let u = a(28), d, f, p, m;
+	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4]) : ({children: d, className: f, max: p, ...m} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m);
+	let h, g, _, v, y, b, x;
+	if (u[5] !== d || u[6] !== f || u[7] !== p || u[8] !== m) {
+		let t = i.toArray(d), a = p === void 0 || Number.isNaN(p) ? t.length : Math.max(1, p);
+		g = t.slice(a), h = e, _ = m, v = "span", u[16] === f ? y = u[17] : (y = r(n.avatarGroup, f), u[16] = f, u[17] = y), b = "group", x = t.slice(0, a), u[5] = d, u[6] = f, u[7] = p, u[8] = m, u[9] = h, u[10] = g, u[11] = _, u[12] = v, u[13] = y, u[14] = b, u[15] = x;
+	} else h = u[9], g = u[10], _ = u[11], v = u[12], y = u[13], b = u[14], x = u[15];
+	let S;
+	u[18] === g ? S = u[19] : (S = g.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(t, { children: g }), /* @__PURE__ */ s(e, {
+		as: "span",
+		className: n.overflow,
+		"aria-hidden": !0,
+		children: `+${g.length}`
+	})] }), u[18] = g, u[19] = S);
+	let C;
+	return u[20] !== h || u[21] !== _ || u[22] !== v || u[23] !== y || u[24] !== b || u[25] !== x || u[26] !== S ? (C = /* @__PURE__ */ c(h, {
+		..._,
+		as: v,
+		className: y,
+		role: b,
+		children: [x, S]
+	}), u[20] = h, u[21] = _, u[22] = v, u[23] = y, u[24] = b, u[25] = x, u[26] = S, u[27] = C) : C = u[27], C;
+}
+export { l as AvatarGroup };

package/dist/components/AvatarGroup/AvatarGroup.module.js

@@ -0,0 +1,6 @@
+import './AvatarGroup.css';// src/components/AvatarGroup/AvatarGroup.module.css
+var e = "sui-avatarGroup-P9iv8", t = "sui-overflow-JZIo-", n = {
+	avatarGroup: e,
+	overflow: t
+};
+export { e as avatarGroup, n as default, t as overflow };

package/dist/components/AvatarGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup } from "./AvatarGroup";
+export type { AvatarGroupProps } from "./AvatarGroup";

package/dist/components/Badge/Badge.css

@@ -0,0 +1 @@
+.sui-badge-RsuMz{--sui-badge-bg:var(--sui-color-secondary-subtle,#f3f4f6);--sui-badge-fg:var(--sui-color-text,#111827);--sui-badge-border:var(--sui-color-control-border,transparent);min-block-size:1.5rem;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border:var(--sui-border-width,1px) solid var(--sui-badge-border);border-radius:var(--sui-radius-md,4px);background-color:var(--sui-badge-bg);color:var(--sui-badge-fg);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-font-size-xs,.75rem);font-weight:var(--sui-font-weight-control,500);line-height:var(--sui-line-height-tight,1.25);overflow-wrap:anywhere;align-items:center;text-decoration:none;display:inline-flex}.sui-badge-RsuMz[data-tone=danger][data-variant=solid]{--sui-badge-bg:var(--sui-color-danger,#dc2626);--sui-badge-fg:var(--sui-color-on-danger,#fff)}.sui-badge-RsuMz[data-tone=danger][data-variant=subtle]{--sui-badge-bg:var(--sui-color-danger-subtle,#fff1f1);--sui-badge-fg:var(--sui-color-danger-text,#b91c1c)}.sui-badge-RsuMz[data-tone=info][data-variant=solid]{--sui-badge-bg:var(--sui-color-info,#4338ca);--sui-badge-fg:var(--sui-color-on-info,#fff)}.sui-badge-RsuMz[data-tone=info][data-variant=subtle]{--sui-badge-bg:var(--sui-color-info-subtle,#f0f3ff);--sui-badge-fg:var(--sui-color-info-text,#4338ca)}.sui-badge-RsuMz[data-tone=neutral][data-variant=solid]{--sui-badge-bg:var(--sui-color-secondary,#e5e7eb);--sui-badge-fg:var(--sui-color-on-secondary,#111827)}.sui-badge-RsuMz[data-tone=neutral][data-variant=subtle]{--sui-badge-bg:var(--sui-color-secondary-subtle,#f3f4f6);--sui-badge-fg:var(--sui-color-text,#111827)}.sui-badge-RsuMz[data-tone=primary][data-variant=solid]{--sui-badge-bg:var(--sui-color-primary,#2563eb);--sui-badge-fg:var(--sui-color-on-primary,#fff)}.sui-badge-RsuMz[data-tone=primary][data-variant=subtle]{--sui-badge-bg:var(--sui-color-primary-subtle,#edf5ff);--sui-badge-fg:var(--sui-color-primary,#2563eb)}.sui-badge-RsuMz[data-tone=success][data-variant=solid]{--sui-badge-bg:var(--sui-color-success,#15803d);--sui-badge-fg:var(--sui-color-on-success,#fff)}.sui-badge-RsuMz[data-tone=success][data-variant=subtle]{--sui-badge-bg:var(--sui-color-success-subtle,#eefef3);--sui-badge-fg:var(--sui-color-success-text,#166534)}.sui-badge-RsuMz[data-tone=warning][data-variant=solid]{--sui-badge-bg:var(--sui-color-warning,#eab308);--sui-badge-fg:var(--sui-color-on-warning,#111827)}.sui-badge-RsuMz[data-tone=warning][data-variant=subtle]{--sui-badge-bg:var(--sui-color-warning-subtle,#fffce1);--sui-badge-fg:var(--sui-color-warning-text,#854d0e)}.sui-badge-RsuMz:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,36 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Elements a `Badge` can render: a `span`, or an `a` or `button` for a badge that links or acts
+ */
+export type BadgeElement = "a" | "button" | "span";
+/**
+ * Badge colours: the theme's status colours, its primary colour, or its secondary colour for `neutral`
+ */
+export type BadgeTone = "danger" | "info" | "neutral" | "primary" | "success" | "warning";
+/**
+ * Badge styles: a solid tone fill, or a subtle tinted background with tone-coloured text
+ */
+export type BadgeVariant = "solid" | "subtle";
+interface BadgeOwnProps {
+    /**
+     * Badge colour. Defaults to `neutral`.
+     */
+    tone?: BadgeTone;
+    /**
+     * Visual style. Defaults to `subtle`.
+     */
+    variant?: BadgeVariant;
+}
+/**
+ * Props for `Badge`: its own props plus every prop supported by the element given in `as`
+ */
+export type BadgeProps<E extends BadgeElement = "span"> = BadgeOwnProps & Omit<BoxProps<E>, keyof BadgeOwnProps>;
+/**
+ * Small label for a tag, a status or a count
+ *
+ * @example
+ * <Badge tone="success" variant="solid">Published</Badge>
+ */
+export declare function Badge<E extends BadgeElement = "span">({ as, className, tone, variant, ...rest }: BadgeProps<E>): JSX.Element;
+export {};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,15 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Badge.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Badge/Badge.tsx
+function i({ as: i, className: a, tone: o = "neutral", variant: s = "subtle", ...c }) {
+	return /* @__PURE__ */ r(e, {
+		...c,
+		as: i ?? "span",
+		className: n(t.badge, a),
+		"data-tone": o,
+		"data-variant": s
+	});
+}
+export { i as Badge };

package/dist/components/Badge/Badge.module.js

@@ -0,0 +1,3 @@
+import './Badge.css';// src/components/Badge/Badge.module.css
+var e = "sui-badge-RsuMz", t = { badge: e };
+export { e as badge, t as default };

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./Badge";
+export type { BadgeElement, BadgeProps, BadgeTone, BadgeVariant } from "./Badge";

package/dist/components/Box/Box.css

@@ -0,0 +1 @@
+.sui-box-Wgbf3{box-sizing:border-box}

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithRef, JSX } from "react";
+/**
+ * Intrinsic element names that `Box` can render
+ */
+export type BoxElement = keyof JSX.IntrinsicElements;
+type BoxOwnProps<E extends BoxElement> = {
+    /**
+     * DOM element to render. Defaults to the component's default element (`div` for Box).
+     */
+    as?: E;
+    /**
+     * Class names merged with the component's base class.
+     */
+    className?: string;
+};
+/** Props for `Box`: its own props plus every prop supported by the element given in `as`. */
+export type BoxProps<E extends BoxElement = "div"> = BoxOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof BoxOwnProps<E>>;
+/**
+ * Props for a polymorphic component built on `Box`: `OwnProps` plus every prop `Box` accepts for
+ * the element given in `as`, minus any name `OwnProps` already declares.
+ */
+export type PolymorphicProps<E extends BoxElement, OwnProps extends object> = OwnProps & Omit<BoxProps<E>, keyof OwnProps>;
+/**
+ * Polymorphic primitive that renders the DOM element given in `as` and forwards all of its props.
+ * Foundation for other StylesUI components.
+ *
+ * @example
+ * <Box as="button" onClick={() => console.log('Clicked')}>Click Me</Box>
+ */
+export declare function Box<E extends BoxElement = "div">({ as, className, ...rest }: BoxProps<E>): JSX.Element;
+export {};

package/dist/components/Box/Box.js

@@ -0,0 +1,17 @@
+import e from "./Box.module.js";
+import { clsx as t } from "clsx";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Box/Box.tsx
+function i(i) {
+	let a = n(10), o, s, c;
+	a[0] === i ? (o = a[1], s = a[2], c = a[3]) : ({as: o, className: s, ...c} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = c);
+	let l = o ?? "div", u;
+	a[4] === s ? u = a[5] : (u = t(e.box, s), a[4] = s, a[5] = u);
+	let d;
+	return a[6] !== l || a[7] !== c || a[8] !== u ? (d = /* @__PURE__ */ r(l, {
+		className: u,
+		...c
+	}), a[6] = l, a[7] = c, a[8] = u, a[9] = d) : d = a[9], d;
+}
+export { i as Box };

package/dist/components/Box/Box.module.js

@@ -0,0 +1,3 @@
+import './Box.css';// src/components/Box/Box.module.css
+var e = "sui-box-Wgbf3", t = { box: e };
+export { e as box, t as default };

package/dist/components/Box/index.d.ts

@@ -0,0 +1,2 @@
+export { Box } from "./Box";
+export type { BoxElement, BoxProps, PolymorphicProps } from "./Box";

package/dist/components/Button/Button.css

@@ -0,0 +1 @@
+.sui-button-2ZuB7{--sui-button-bg:var(--sui-color-primary,#2563eb);--sui-button-bg-hover:var(--sui-color-primary-hover,#1d4ed8);--sui-button-fg:var(--sui-color-on-primary,#fff);--sui-button-border:var(--sui-color-control-border,transparent);--sui-button-border-width:var(--sui-border-width,1px);--sui-button-radius:var(--sui-radius-control,4px);--sui-button-padding-x:var(--sui-space-4,1rem);--sui-button-padding-y:var(--sui-space-2,.5rem);--sui-button-font-size:var(--sui-font-size-md,1rem);--sui-button-font-weight:var(--sui-font-weight-control,500);--sui-button-depth:var(--sui-control-depth,0px);--sui-button-lip:var(--sui-color-shadow,transparent);--sui-button-spring:var(--sui-motion-spring,.12s ease-out);justify-content:center;align-items:center;gap:var(--sui-space-2,.5rem);padding:var(--sui-button-padding-y) var(--sui-button-padding-x);border:var(--sui-button-border-width) solid var(--sui-button-border);border-radius:var(--sui-button-radius);background-color:var(--sui-button-bg);box-shadow:0 var(--sui-button-depth) 0 var(--sui-button-lip);color:var(--sui-button-fg);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-button-font-size);font-weight:var(--sui-button-font-weight);line-height:var(--sui-line-height-tight,1.25);cursor:pointer;transition:background-color .12s ease, border-color .12s ease, box-shadow var(--sui-button-spring), transform var(--sui-button-spring);display:inline-flex}.sui-button-2ZuB7[data-variant=secondary]{--sui-button-bg:var(--sui-color-secondary,#e5e7eb);--sui-button-bg-hover:var(--sui-color-secondary-hover,#d1d5db);--sui-button-fg:var(--sui-color-on-secondary,#111827)}.sui-button-2ZuB7[data-variant=danger]{--sui-button-bg:var(--sui-color-danger,#dc2626);--sui-button-bg-hover:var(--sui-color-danger-hover,#b91c1c);--sui-button-fg:var(--sui-color-on-danger,#fff)}.sui-button-2ZuB7[data-variant=info]{--sui-button-bg:var(--sui-color-info,#4338ca);--sui-button-bg-hover:var(--sui-color-info-hover,#3730a3);--sui-button-fg:var(--sui-color-on-info,#fff)}.sui-button-2ZuB7[data-variant=success]{--sui-button-bg:var(--sui-color-success,#15803d);--sui-button-bg-hover:var(--sui-color-success-hover,#166534);--sui-button-fg:var(--sui-color-on-success,#fff)}.sui-button-2ZuB7[data-variant=warning]{--sui-button-bg:var(--sui-color-warning,#eab308);--sui-button-bg-hover:var(--sui-color-warning-hover,#facc15);--sui-button-fg:var(--sui-color-on-warning,#111827)}.sui-button-2ZuB7:is([data-variant=ghost],[data-variant^=outline-]){--sui-button-bg:transparent;--sui-button-bg-hover:color-mix(in srgb, var(--sui-button-fg) 8%, transparent)}.sui-button-2ZuB7[data-variant=outline-primary]{--sui-button-fg:var(--sui-color-primary,#2563eb);--sui-button-border:var(--sui-color-primary,#2563eb)}.sui-button-2ZuB7[data-variant=outline-secondary]{--sui-button-fg:var(--sui-color-text,#111827);--sui-button-border:var(--sui-color-input-border,#6b7280)}.sui-button-2ZuB7[data-variant=outline-danger]{--sui-button-fg:var(--sui-color-danger-text,#b91c1c);--sui-button-border:var(--sui-color-danger-text,#b91c1c)}.sui-button-2ZuB7[data-variant=outline-info]{--sui-button-fg:var(--sui-color-info-text,#4338ca);--sui-button-border:var(--sui-color-info-text,#4338ca)}.sui-button-2ZuB7[data-variant=outline-success]{--sui-button-fg:var(--sui-color-success-text,#166534);--sui-button-border:var(--sui-color-success-text,#166534)}.sui-button-2ZuB7[data-variant=outline-warning]{--sui-button-fg:var(--sui-color-warning-text,#854d0e);--sui-button-border:var(--sui-color-warning-text,#854d0e)}.sui-button-2ZuB7[data-variant=ghost]{--sui-button-fg:var(--sui-color-text,#111827);--sui-button-border:transparent;--sui-button-depth:0px}.sui-button-2ZuB7[data-size=sm]{--sui-button-padding-x:var(--sui-space-3,.75rem);--sui-button-padding-y:var(--sui-space-1,.25rem);--sui-button-font-size:var(--sui-font-size-sm,.875rem)}.sui-button-2ZuB7[data-size=lg]{--sui-button-padding-x:var(--sui-space-6,1.5rem);--sui-button-padding-y:var(--sui-space-3,.75rem);--sui-button-font-size:var(--sui-font-size-lg,1.125rem)}.sui-button-2ZuB7:hover:not(:disabled,[data-busy]){background-color:var(--sui-button-bg-hover)}@media (hover:hover){.sui-button-2ZuB7:hover:not(:disabled,[data-busy]){box-shadow:0 calc(var(--sui-button-depth) * 1.5) 0 var(--sui-button-lip);transform:translateY(calc(var(--sui-button-depth) / -2))}}.sui-button-2ZuB7:active:not(:disabled,[data-busy]){box-shadow:0 0 0 var(--sui-button-lip);transform:translateY(var(--sui-button-depth));transition-duration:.12s;transition-timing-function:ease-out}.sui-button-2ZuB7[data-variant=ghost]:active:not(:disabled,[data-busy]){background-color:color-mix(in srgb, var(--sui-button-fg) 16%, transparent)}.sui-button-2ZuB7:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-button-2ZuB7:disabled{cursor:not-allowed;opacity:.5}.sui-button-2ZuB7[data-busy]{color:#0000;cursor:progress}.sui-button-2ZuB7[data-busy]>:not(.sui-spinner-ZExvW){opacity:0}:where(.sui-button-2ZuB7[data-busy]){position:relative}.sui-spinner-ZExvW{color:var(--sui-button-fg);margin:auto;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.sui-button-2ZuB7{transition:background-color .12s,border-color .12s}}@media (forced-colors:active){.sui-button-2ZuB7[data-busy]{box-shadow:none;color:#0000;forced-color-adjust:none;background-color:buttonface;border-color:buttonborder}.sui-button-2ZuB7[data-busy]:focus-visible{outline-color:highlight}.sui-spinner-ZExvW{color:buttontext}}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,42 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Button sizes, controlling padding and font size
+ */
+export type ButtonSize = "sm" | "md" | "lg";
+/**
+ * Button styles: filled in the primary, secondary or a status colour, outlined in one of those colours
+ * (`outline-<colour>`), or `ghost`, which has no border and no fill until it is hovered, and never sits on a lip. Use
+ * `danger` or `outline-danger` for an action that destroys something, such as deleting, and the other status colours
+ * for an action tied to that status.
+ */
+export type ButtonVariant = "danger" | "ghost" | "info" | "outline-danger" | "outline-info" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-warning" | "primary" | "secondary" | "success" | "warning";
+/**
+ * Props for `Button`: its own props plus every native button prop
+ */
+export interface ButtonProps extends Omit<BoxProps<"button">, "as"> {
+    /**
+     * Whether the button's action is running. A busy button shows a spinner in place of its content, keeps its width
+     * and accessible name, stays focusable, and ignores presses, including a form's submission. The spinner is not
+     * announced, so pair `busy` with a status message that announces the outcome. Defaults to `false`.
+     */
+    busy?: boolean;
+    /**
+     * Button size. Defaults to `md`.
+     */
+    size?: ButtonSize;
+    /**
+     * Visual style. Defaults to `primary`.
+     */
+    variant?: ButtonVariant;
+}
+/**
+ * Themed button. `type` defaults to `"button"`, so it never submits a form unless asked to.
+ *
+ * @example
+ * <Button onClick={save} variant="secondary">Save</Button>
+ *
+ * @example
+ * <Button busy={isSaving} type="submit">Save</Button>
+ */
+export declare function Button({ "aria-disabled": ariaDisabled, busy, children, className, onClick, size, type, variant, ...rest }: ButtonProps): JSX.Element;

package/dist/components/Button/Button.js

@@ -0,0 +1,24 @@
+import { Box as e } from "../Box/Box.js";
+import { Spinner as t } from "../Spinner/Spinner.js";
+import n from "./Button.module.js";
+import { clsx as r } from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+// src/components/Button/Button.tsx
+function o({ "aria-disabled": o, busy: s = !1, children: c, className: l, onClick: u, size: d = "md", type: f = "button", variant: p = "primary", ...m }) {
+	function h(e) {
+		s ? e.preventDefault() : u?.(e);
+	}
+	return /* @__PURE__ */ a(e, {
+		...m,
+		as: "button",
+		className: r(n.button, l),
+		onClick: h,
+		type: f,
+		"aria-disabled": s ? !0 : o,
+		"data-busy": s ? "" : void 0,
+		"data-size": d,
+		"data-variant": p,
+		children: [c, s && /* @__PURE__ */ i(t, { className: n.spinner })]
+	});
+}
+export { o as Button };

package/dist/components/Button/Button.module.js

@@ -0,0 +1,6 @@
+import './Button.css';// src/components/Button/Button.module.css
+var e = "sui-button-2ZuB7", t = "sui-spinner-ZExvW", n = {
+	button: e,
+	spinner: t
+};
+export { e as button, n as default, t as spinner };

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";

package/dist/components/Card/Card.css

@@ -0,0 +1 @@
+.sui-card-Cb1o4{--sui-card-bg:var(--sui-color-surface,#f3f4f6);--sui-card-border:var(--sui-color-border,#d1d5db);--sui-card-border-width:var(--sui-border-width,1px);--sui-card-radius:var(--sui-radius-lg,8px);--sui-card-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f);--sui-card-padding:var(--sui-space-5,1.25rem);padding:var(--sui-card-padding);border:var(--sui-card-border-width) solid var(--sui-card-border);border-radius:var(--sui-card-radius);background-color:var(--sui-card-bg);box-shadow:var(--sui-card-shadow);color:var(--sui-color-text,#111827)}.sui-card-Cb1o4[data-padding=sm]{--sui-card-padding:var(--sui-space-3,.75rem)}.sui-card-Cb1o4[data-padding=lg]{--sui-card-padding:var(--sui-space-8,2rem)}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,24 @@
+import type { JSX } from "react";
+import type { BoxElement, BoxProps } from "../Box";
+/**
+ * Inner spacing of a card, mapped to the `--sui-space-*` tokens
+ */
+export type CardPadding = "sm" | "md" | "lg";
+interface CardOwnProps {
+    /**
+     * Inner spacing. Defaults to `md`.
+     */
+    padding?: CardPadding;
+}
+/**
+ * Props for `Card`: its own props plus every prop supported by the element given in `as`
+ */
+export type CardProps<E extends BoxElement = "div"> = CardOwnProps & Omit<BoxProps<E>, keyof CardOwnProps>;
+/**
+ * Raised surface that groups related content
+ *
+ * @example
+ * <Card as="article" padding="lg">...</Card>
+ */
+export declare function Card<E extends BoxElement = "div">({ as, className, padding, ...rest }: CardProps<E>): JSX.Element;
+export {};

package/dist/components/Card/Card.js

@@ -0,0 +1,14 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Card.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Card/Card.tsx
+function i({ as: i, className: a, padding: o = "md", ...s }) {
+	return /* @__PURE__ */ r(e, {
+		...s,
+		as: i,
+		className: n(t.card, a),
+		"data-padding": o
+	});
+}
+export { i as Card };

package/dist/components/Card/Card.module.js

@@ -0,0 +1,3 @@
+import './Card.css';// src/components/Card/Card.module.css
+var e = "sui-card-Cb1o4", t = { card: e };
+export { e as card, t as default };

package/dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from "./Card";
+export type { CardPadding, CardProps } from "./Card";

package/dist/components/Center/Center.css

@@ -0,0 +1 @@
+.sui-center-Pu1Pf{--sui-center-width:var(--sui-width-content,48rem);inline-size:100%;max-inline-size:calc(var(--sui-center-width) + 2 * var(--sui-center-gutter));padding-inline:var(--sui-center-gutter);margin-inline:auto}.sui-center-Pu1Pf[data-width=prose]{--sui-center-width:var(--sui-width-prose,65ch)}.sui-center-Pu1Pf[data-width=wide]{--sui-center-width:var(--sui-width-wide,72rem)}.sui-center-Pu1Pf[data-intrinsic]{flex-direction:column;align-items:center;display:flex}

package/dist/components/Center/Center.d.ts

@@ -0,0 +1,34 @@
+import type { JSX } from "react";
+import type { Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+/**
+ * Maximum column width, mapped to the `--sui-width-*` tokens
+ */
+export type CenterWidth = "prose" | "content" | "wide";
+interface CenterOwnProps {
+    /**
+     * Inline padding that keeps content off the viewport edges. Defaults to `4`.
+     */
+    gutter?: Space;
+    /**
+     * Also centres children narrower than the column. Defaults to `false`.
+     */
+    intrinsic?: boolean;
+    /**
+     * Maximum width of the column. Defaults to `content`.
+     */
+    width?: CenterWidth;
+}
+/**
+ * Props for `Center`: its own props plus every prop supported by the element given in `as`
+ */
+export type CenterProps<E extends BoxElement = "div"> = CenterOwnProps & Omit<BoxProps<E>, keyof CenterOwnProps>;
+/**
+ * Horizontally centred column with a maximum width and side gutters. Override a
+ * `--sui-width-*` token to change a width.
+ *
+ * @example
+ * <Center as="main" width="prose">...</Center>
+ */
+export declare function Center<E extends BoxElement = "div">({ as, className, gutter, intrinsic, width, ...rest }: CenterProps<E>): JSX.Element;
+export {};

package/dist/components/Center/Center.js

@@ -0,0 +1,19 @@
+import { spaceValue as e } from "../../layout/spaceValue.js";
+import { withCustomProperties as t } from "../../layout/withCustomProperties.js";
+import { Box as n } from "../Box/Box.js";
+import r from "./Center.module.js";
+import { clsx as i } from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+// src/components/Center/Center.tsx
+function o({ as: o, className: s, gutter: c = 4, intrinsic: l = !1, width: u = "content", ...d }) {
+	let { style: f, ...p } = d;
+	return /* @__PURE__ */ a(n, {
+		...p,
+		as: o,
+		className: i(r.center, s),
+		style: t({ "--sui-center-gutter": e(c) }, f),
+		"data-intrinsic": l ? "" : void 0,
+		"data-width": u
+	});
+}
+export { o as Center };

package/dist/components/Center/Center.module.js

@@ -0,0 +1,3 @@
+import './Center.css';// src/components/Center/Center.module.css
+var e = "sui-center-Pu1Pf", t = { center: e };
+export { e as center, t as default };

package/dist/components/Center/index.d.ts

@@ -0,0 +1,2 @@
+export { Center } from "./Center";
+export type { CenterProps, CenterWidth } from "./Center";

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,23 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Checkbox`: its own props plus every native input prop. `className` and `style` go to the wrapping
+ * label; `ref` and every other prop go to the input.
+ */
+export interface CheckboxProps extends Omit<BoxProps<"input">, "as" | "children" | "dangerouslySetInnerHTML" | "type"> {
+    /**
+     * Label shown beside the box, which names the checkbox. Without it, give the checkbox an accessible name, for
+     * example with `aria-label` or the `label` of the `Field` around it. It is inline content, as a `label` holds: a child
+     * laid out as a block drops below the box, so put a description after the checkbox, padded by `var(--sui-space-6)`.
+     */
+    children?: ReactNode;
+}
+/**
+ * Themed native checkbox inside the label that names it. When it is required it shows an asterisk after its
+ * label. Inside a `Field` it takes its description, error, and required and disabled state from the field; give
+ * it either children or the field's `label`, not both.
+ *
+ * @example
+ * <Checkbox name="updates">Send me product updates</Checkbox>
+ */
+export declare function Checkbox(props: CheckboxProps): JSX.Element;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,12 @@
+import { ChoiceControl as e } from "../ChoiceControl/ChoiceControl.js";
+import { c as t } from "react/compiler-runtime";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/Checkbox/Checkbox.tsx
+function r(r) {
+	let i = t(2), a;
+	return i[0] === r ? a = i[1] : (a = /* @__PURE__ */ n(e, {
+		...r,
+		kind: "checkbox"
+	}), i[0] = r, i[1] = a), a;
+}
+export { r as Checkbox };

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";

package/dist/components/ChoiceControl/ChoiceControl.css

@@ -0,0 +1 @@
+.sui-choiceControl-aSGqz{--sui-choice-control-size:var(--sui-space-4,1rem);--sui-choice-control-track-size:var(--sui-choice-control-size);--sui-choice-control-gap:var(--sui-space-2,.5rem);--_sui-choice-control-indent:calc(var(--sui-choice-control-track-size) + var(--sui-choice-control-gap));--sui-choice-control-bg:var(--sui-color-field,#fff);--sui-choice-control-border:var(--sui-color-input-border,#6b7280);--sui-choice-control-border-width:var(--sui-border-width,1px);--sui-choice-control-radius:var(--sui-radius-sm,2px);--sui-choice-control-fill:var(--sui-color-primary,#2563eb);--sui-choice-control-fill-border:var(--sui-color-control-border,transparent);--sui-choice-control-mark:var(--sui-color-on-primary,#fff);--sui-choice-control-mark-unchecked:var(--sui-choice-control-mark);--sui-choice-control-mark-size:calc(var(--sui-choice-control-size) * .6);--sui-choice-control-mark-shape:polygon(0% 56%, 12% 44%, 38% 70%, 88% 12%, 100% 22%, 38% 94%);--sui-choice-control-mark-radius:0;--sui-choice-control-mark-justify:center;--sui-choice-control-mark-inset:0;--sui-choice-control-mark-transform:none;--sui-choice-control-mark-transform-unchecked:scale(0);--sui-choice-control-spring:var(--sui-motion-spring,.12s ease-out);--sui-choice-control-halo-spread:var(--sui-choice-control-gap);--_sui-choice-control-halo-tint:var(--sui-color-text,#111827);text-align:start;text-indent:0;inline-size:fit-content;font-family:var(--sui-font-body,system-ui, sans-serif);line-height:var(--sui-line-height-normal,1.5);padding-block:max(0px,12px - .5lh);display:inline-block}.sui-choiceControl-aSGqz[data-kind=radio]{--sui-choice-control-radius:50%;--sui-choice-control-mark-size:calc(var(--sui-choice-control-size) * .4);--sui-choice-control-mark-shape:none;--sui-choice-control-mark-radius:50%}.sui-choiceControl-aSGqz[data-kind=switch]{--sui-choice-control-track-size:var(--sui-space-6,1.5rem);--sui-choice-control-radius:var(--sui-radius-full,9999px);--sui-choice-control-mark-unchecked:var(--sui-color-input-border,#6b7280);--sui-choice-control-mark-size:calc(var(--sui-choice-control-size) - 2 * var(--sui-choice-control-border-width) - 2 * var(--sui-choice-control-mark-inset));--sui-choice-control-mark-shape:none;--sui-choice-control-mark-radius:50%;--sui-choice-control-mark-justify:start;--sui-choice-control-mark-inset:.125rem;--sui-choice-control-mark-transform:translateX(calc(var(--sui-choice-control-track-size) - var(--sui-choice-control-size)));--sui-choice-control-mark-transform-unchecked:none}.sui-choiceControl-aSGqz.sui-withText-bNY-W{padding-inline-start:var(--_sui-choice-control-indent)}.sui-withText-bNY-W>.sui-input-DF-cI{margin-inline-start:calc(-1 * var(--_sui-choice-control-indent))}.sui-choiceControl-aSGqz[data-kind=switch]:dir(rtl){--sui-choice-control-mark-transform:translateX(calc(var(--sui-choice-control-size) - var(--sui-choice-control-track-size)))}.sui-input-DF-cI{--_sui-choice-control-halo:transparent;--_sui-choice-control-halo-hover:color-mix(in srgb, var(--_sui-choice-control-halo-tint) 8%, transparent);--_sui-choice-control-halo-press:color-mix(in srgb, var(--_sui-choice-control-halo-tint) 16%, transparent);align-content:center;justify-content:var(--sui-choice-control-mark-justify);inline-size:var(--sui-choice-control-track-size);block-size:var(--sui-choice-control-size);vertical-align:middle;font:inherit;border:var(--sui-choice-control-border-width) solid var(--sui-choice-control-border);border-radius:var(--sui-choice-control-radius);background-color:var(--sui-choice-control-bg);cursor:pointer;appearance:none;margin:0;margin-block-start:calc(.5ex - .5cap);transition:background-color .12s,border-color .12s,box-shadow .12s;display:inline-grid}.sui-input-DF-cI:before{inline-size:var(--sui-choice-control-mark-size);block-size:var(--sui-choice-control-mark-size);border-radius:var(--sui-choice-control-mark-radius);background-color:var(--sui-choice-control-mark-unchecked);content:"";clip-path:var(--sui-choice-control-mark-shape);transform:var(--sui-choice-control-mark-transform-unchecked);margin-inline-start:var(--sui-choice-control-mark-inset);transition:background-color .12s,transform .12s ease-out}.sui-input-DF-cI:checked{--sui-choice-control-bg:var(--sui-choice-control-fill);--sui-choice-control-border:var(--sui-choice-control-fill-border);--_sui-choice-control-halo-tint:var(--sui-choice-control-fill)}.sui-input-DF-cI:checked:before{background-color:var(--sui-choice-control-mark);transform:var(--sui-choice-control-mark-transform);transition:background-color .12s ease, transform var(--sui-choice-control-spring)}@media (hover:hover){.sui-choiceControl-aSGqz:hover .sui-input-DF-cI{--_sui-choice-control-halo:var(--_sui-choice-control-halo-hover)}}.sui-choiceControl-aSGqz:active .sui-input-DF-cI{--_sui-choice-control-halo:var(--_sui-choice-control-halo-press)}.sui-choiceControl-aSGqz .sui-input-DF-cI:focus-visible{--_sui-choice-control-halo:transparent;transition-property:background-color,border-color}.sui-input-DF-cI:enabled{box-shadow:0 0 0 var(--sui-choice-control-halo-spread) var(--_sui-choice-control-halo)}.sui-input-DF-cI:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-input-DF-cI[type=checkbox][aria-invalid=true],.sui-input-DF-cI[type=radio][data-invalid]{--sui-choice-control-border:var(--sui-color-danger-text,#b91c1c)}.sui-text-4-Caz{cursor:pointer;padding-inline-start:var(--sui-choice-control-gap)}.sui-input-DF-cI:disabled,.sui-input-DF-cI:disabled+.sui-text-4-Caz{cursor:not-allowed;opacity:.5}@media (prefers-reduced-motion:reduce){.sui-input-DF-cI:before,.sui-input-DF-cI:checked:before{transition:background-color .12s}}@media (forced-colors:active){.sui-choiceControl-aSGqz{--sui-choice-control-bg:Canvas;--sui-choice-control-border:CanvasText;--sui-choice-control-fill:Highlight;--sui-choice-control-fill-border:Highlight;--sui-choice-control-mark:HighlightText}.sui-choiceControl-aSGqz[data-kind=switch]{--sui-choice-control-mark-unchecked:CanvasText}}

package/dist/components/ChoiceControl/ChoiceControl.d.ts

@@ -0,0 +1,21 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+type ChoiceControlKind = "checkbox" | "radio" | "switch";
+interface ChoiceControlProps extends Omit<BoxProps<"input">, "as" | "children" | "dangerouslySetInnerHTML" | "type"> {
+    /**
+     * Label shown beside the control, which names it
+     */
+    children?: ReactNode;
+    /**
+     * Control to draw. A switch is a checkbox input with the `switch` role, which replaces any `role` given.
+     */
+    kind: ChoiceControlKind;
+}
+/**
+ * Themed native checkbox or radio input inside the `label` that names it, shared by `Checkbox`, `Switch` and
+ * `Radio`. `className` and `style` go to the label; `ref` and every other prop go to the input. Inside a `Field`
+ * the input takes its id, description, and invalid, disabled and required state from the field. A required
+ * checkbox or switch with a label shows an asterisk after it.
+ */
+export declare function ChoiceControl({ children, className, kind, role, style, ...inputProps }: ChoiceControlProps): JSX.Element;
+export {};

package/dist/components/ChoiceControl/ChoiceControl.js

@@ -0,0 +1,39 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { useFieldControl as t } from "../../forms/useFieldControl.js";
+import { Box as n } from "../Box/Box.js";
+import { RequiredIndicator as r } from "../RequiredIndicator/RequiredIndicator.js";
+import i from "./ChoiceControl.module.js";
+import { clsx as a } from "clsx";
+import { c as o } from "react/compiler-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/ChoiceControl/ChoiceControl.tsx
+function l(l) {
+	let u = o(31), d, f, p, m, h, g;
+	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4], h = u[5], g = u[6]) : ({children: d, className: f, kind: m, role: h, style: g, ...p} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m, u[5] = h, u[6] = g);
+	let _ = t(p), v, y, b, x;
+	u[7] !== d || u[8] !== f ? (y = e(d), v = n, b = "label", x = a(i.choiceControl, { [i.withText]: y }, f), u[7] = d, u[8] = f, u[9] = v, u[10] = y, u[11] = b, u[12] = x) : (v = u[9], y = u[10], b = u[11], x = u[12]);
+	let S = m === "switch" ? "switch" : h, C = m === "radio" ? "radio" : "checkbox", w;
+	u[13] !== _ || u[14] !== p || u[15] !== S || u[16] !== C ? (w = /* @__PURE__ */ s(n, {
+		...p,
+		..._,
+		as: "input",
+		className: i.input,
+		role: S,
+		type: C
+	}), u[13] = _, u[14] = p, u[15] = S, u[16] = C, u[17] = w) : w = u[17];
+	let T;
+	u[18] !== d || u[19] !== _ || u[20] !== y || u[21] !== m ? (T = y && /* @__PURE__ */ c(n, {
+		as: "span",
+		className: i.text,
+		children: [d, _.required && m !== "radio" && /* @__PURE__ */ s(r, {})]
+	}), u[18] = d, u[19] = _, u[20] = y, u[21] = m, u[22] = T) : T = u[22];
+	let E;
+	return u[23] !== v || u[24] !== m || u[25] !== g || u[26] !== b || u[27] !== x || u[28] !== w || u[29] !== T ? (E = /* @__PURE__ */ c(v, {
+		as: b,
+		className: x,
+		style: g,
+		"data-kind": m,
+		children: [w, T]
+	}), u[23] = v, u[24] = m, u[25] = g, u[26] = b, u[27] = x, u[28] = w, u[29] = T, u[30] = E) : E = u[30], E;
+}
+export { l as ChoiceControl };

package/dist/components/ChoiceControl/ChoiceControl.module.js

@@ -0,0 +1,8 @@
+import './ChoiceControl.css';// src/components/ChoiceControl/ChoiceControl.module.css
+var e = "sui-choiceControl-aSGqz", t = "sui-withText-bNY-W", n = "sui-input-DF-cI", r = "sui-text-4-Caz", i = {
+	choiceControl: e,
+	withText: t,
+	input: n,
+	text: r
+};
+export { e as choiceControl, i as default, n as input, r as text, t as withText };

package/dist/components/ChoiceControl/index.d.ts

@@ -0,0 +1 @@
+export { ChoiceControl } from "./ChoiceControl";