@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/avatar/AvatarGroup.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { Avatar, customSize } from './Avatar.js';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './avatar.css';
+export function AvatarGroup({ items = null, max = null, size = 'md', color = 'accent', square = false, letters = 2, tooltip = false, spacing = 'normal', label = null, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const part = partsOf('avatar-group', classes);
+    const people = (items ?? []).map((item) => (typeof item === 'string' ? { name: item } : item));
+    const shown = max && people.length > max ? people.slice(0, max) : people;
+    const hidden = people.slice(shown.length);
+    const custom = customSize(size);
+    const names = hidden.map((person) => person.name).join(', ');
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), role: "group", "aria-label": label ?? (items ? `${people.length} people` : undefined), "data-size": custom ? 'custom' : size, "data-spacing": spacing, children: [shown.map((person, i) => (_jsx(Avatar, { size: size, square: square, letters: letters, color: person.color ?? color, name: person.name, src: person.src, tooltip: tooltip || null }, person.name ?? person.src ?? i))), children, hidden.length > 0 && (_jsx(Tooltip, { content: names, children: _jsxs("span", { ...part('more'), "data-square": square || undefined, "aria-label": `${t.common.more(hidden.length)}: ${names}`, style: custom ? { '--avatar-size': custom } : undefined, children: ["+", hidden.length] }) }))] }));
+}

package/dist/avatar/avatar.css

@@ -0,0 +1,73 @@
+@layer ui {
+  [data-scope=avatar][data-part=root] {
+    position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem;
+    overflow: hidden; border-radius: 9999px; vertical-align: middle; user-select: none;
+    background: var(--ui-accent-soft); color: var(--ui-accent-soft-text); font-family: var(--ui-font); font-size: 14px; font-weight: 600;
+    &[data-square] { border-radius: var(--ui-radius); }
+    &[data-size=sm] { width: 1.75rem; height: 1.75rem; font-size: 12px; }
+    &[data-size=lg] { width: 3.5rem; height: 3.5rem; font-size: 18px; }
+    &[data-size=xl] { width: 5rem; height: 5rem; font-size: 24px; }
+    /* Custom sizes: the initials grow in step with the named sizes. */
+    &[data-size=custom] { width: var(--avatar-size); height: var(--avatar-size); font-size: calc(6px + 0.2 * var(--avatar-size)); }
+
+    &[data-color=gray] { background: #f4f4f5; color: #3f3f46; }
+    &[data-color=red] { background: #fee2e2; color: #991b1b; }
+    &[data-color=orange] { background: #ffedd5; color: #9a3412; }
+    &[data-color=amber] { background: #fef3c7; color: #92400e; }
+    &[data-color=green] { background: #dcfce7; color: #166534; }
+    &[data-color=teal] { background: #ccfbf1; color: #115e59; }
+    &[data-color=blue] { background: #dbeafe; color: #1e40af; }
+    &[data-color=purple] { background: #f3e8ff; color: #6b21a8; }
+    &[data-color=pink] { background: #fce7f3; color: #9d174d; }
+    :is(.dark, [data-theme=dark]) & {
+      &[data-color=gray] { background: #3f3f46; color: #e4e4e7; }
+      &[data-color=red] { background: #7f1d1d; color: #fecaca; }
+      &[data-color=orange] { background: #7c2d12; color: #fed7aa; }
+      &[data-color=amber] { background: #78350f; color: #fde68a; }
+      &[data-color=green] { background: #14532d; color: #bbf7d0; }
+      &[data-color=teal] { background: #134e4a; color: #99f6e4; }
+      &[data-color=blue] { background: #1e3a8a; color: #bfdbfe; }
+      &[data-color=purple] { background: #581c87; color: #e9d5ff; }
+      &[data-color=pink] { background: #831843; color: #fbcfe8; }
+    }
+  }
+  [data-scope=avatar][data-part=image] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  [data-scope=avatar][data-part=fallback] { display: grid; place-items: center; width: 100%; height: 100%; line-height: 1; }
+  [data-scope=avatar][data-part=person] { font-size: 1.6em; }
+  [data-scope=avatar][data-part=tooltip-target] { position: absolute; inset: 0; }
+}
+
+/* A status dot on the corner: the avatar stops clipping (its image rounds itself), so the dot can sit over the edge. */
+@layer ui {
+  [data-scope=avatar][data-part=root][data-has-status] { overflow: visible;
+    & > :is([data-part=image], [data-part=fallback]) { border-radius: inherit; overflow: hidden; } }
+  [data-scope=avatar][data-part=status] { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 0.5rem; min-height: 0.5rem;
+    box-sizing: border-box; border-radius: 9999px; box-shadow: 0 0 0 2px var(--ui-avatar-ring, var(--ui-surface));
+    &[data-status=online] { background: #22c55e; }
+    &[data-status=away] { background: #f59e0b; }
+    &[data-status=busy] { background: var(--ui-danger); }
+    &[data-status=offline] { background: var(--ui-muted); } }
+}
+
+/* A stack: each overlaps the one before, ringed in --ui-avatar-ring so the
+   edges read. Later ones sit on top. */
+@layer ui {
+  [data-scope=avatar-group][data-part=root] { display: inline-flex; align-items: center; vertical-align: middle;
+    --ui-avatar-ring: var(--ui-surface); --overlap-size: 0.625rem; --overlap-scale: 1;
+    --overlap: calc(var(--overlap-size) * var(--overlap-scale));
+    &[data-size=sm] { --overlap-size: 0.5rem; }
+    &[data-size=lg] { --overlap-size: 0.875rem; }
+    &[data-size=xl] { --overlap-size: 1.25rem; }
+    &[data-spacing=tight] { --overlap-scale: 1.5; }
+    &[data-spacing=loose] { --overlap-scale: 0.4; }
+    & > :is([data-scope=avatar], [data-part=more]) { box-shadow: 0 0 0 2px var(--ui-avatar-ring); }
+    & > :is([data-scope=avatar], [data-part=more]):not(:first-child) { margin-left: calc(var(--overlap) * -1); } }
+  [data-scope=avatar-group][data-part=more] {
+    display: inline-grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px; box-sizing: border-box;
+    background: var(--ui-hover); color: var(--ui-muted); font-family: var(--ui-font); font-size: 12px; font-weight: 600; cursor: default;
+    [data-size=sm] > & { width: 1.75rem; height: 1.75rem; font-size: 11px; }
+    [data-size=lg] > & { width: 3.5rem; height: 3.5rem; font-size: 15px; }
+    [data-size=xl] > & { width: 5rem; height: 5rem; font-size: 20px; }
+    [data-size=custom] > & { width: var(--avatar-size); height: var(--avatar-size); font-size: calc(4px + 0.2 * var(--avatar-size)); }
+    &[data-square] { border-radius: var(--ui-radius); } }
+}

package/dist/badge/Badge.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A short label, like a status or a count.
+ *
+ *   <Badge variant="success" dot>Paid</Badge>
+ *
+ * - `variant`: 'neutral' (default), 'accent', 'success', 'warning', 'danger' or 'outline'
+ * - `size`: 'sm' or 'md'
+ * - `icon`: an Iconify name before the text; `dot`: a coloured dot instead
+ * - `onRemove`: an ✕ after the text that calls it: a tag (an applied
+ *   filter, a record's label); `removeLabel` names it ('Remove …')
+ */
+import type { ComponentProps } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './badge.css';
+export type BadgeProps = ComponentProps<'span'> & {
+    variant?: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'outline';
+    size?: 'sm' | 'md';
+    icon?: string | null;
+    dot?: boolean;
+    onRemove?: (() => void) | null;
+    removeLabel?: string;
+    classes?: Classes<'root' | 'dot' | 'icon' | 'remove'>;
+};
+export declare function Badge({ variant, size, icon, dot, onRemove, removeLabel, className, classes, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/badge/Badge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './badge.css';
+export function Badge({ variant = 'neutral', size = 'md', icon = null, dot = false, onRemove = null, removeLabel, className, classes, children, ...rest }) {
+    const part = partsOf('badge', classes);
+    return (_jsxs("span", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, "data-size": size, children: [dot ? _jsx("span", { ...part('dot'), "aria-hidden": "true" })
+                : icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), children, onRemove && (_jsx("button", { type: "button", ...part('remove'), onClick: onRemove, "aria-label": removeLabel ?? `Remove ${typeof children === 'string' ? children : ''}`.trim(), children: _jsx("iconify-icon", { icon: "lucide:x", "aria-hidden": "true" }) }))] }));
+}

package/dist/badge/badge.css

@@ -0,0 +1,24 @@
+@layer ui {
+  [data-scope=badge][data-part=root] {
+    display: inline-flex; align-items: center; gap: 0.25rem; height: 1.375rem; padding: 0 0.5rem; box-sizing: border-box;
+    vertical-align: middle; border: 1px solid transparent; border-radius: 9999px;
+    font-family: var(--ui-font); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
+    background: var(--ui-hover); color: var(--ui-text);
+    &[data-size=sm] { height: 1.125rem; padding: 0 0.375rem; font-size: 11px; }
+    &[data-variant=accent] { background: var(--ui-accent-soft); color: var(--ui-accent-soft-text); }
+    &[data-variant=success] { background: #dcfce7; color: #166534; }
+    &[data-variant=warning] { background: #fef3c7; color: #92400e; }
+    &[data-variant=danger] { background: #fee2e2; color: #991b1b; }
+    &[data-variant=outline] { background: transparent; border-color: var(--ui-border); }
+    :is(.dark, [data-theme=dark]) &[data-variant=success] { background: #14532d; color: #bbf7d0; }
+    :is(.dark, [data-theme=dark]) &[data-variant=warning] { background: #451a03; color: #fde68a; }
+    :is(.dark, [data-theme=dark]) &[data-variant=danger] { background: #450a0a; color: #fecaca; }
+  }
+  [data-scope=badge][data-part=icon] { display: block; width: 1em; height: 1em; }
+  [data-scope=badge][data-part=dot] { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: currentColor; }
+  /* A tag's ✕: a small round button at the end. */
+  [data-scope=badge][data-part=remove] { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-right: -0.25rem; padding: 0;
+    border: none; border-radius: 9999px; background: transparent; color: inherit; font-size: 11px; cursor: pointer; opacity: 0.65;
+    &:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); opacity: 1; } }
+}

package/dist/banner/Banner.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A slim, prominent strip for an announcement or a page-wide message, e.g.
+ * across the top of the content. For a message within the content, use Alert.
+ *
+ *   <Banner icon="lucide:sparkles" dismissible>
+ *     Notes can now be shared with parents. <a href="/help/notes">See how</a>
+ *   </Banner>
+ *
+ * - `variant`: 'accent' (default, solid), 'soft', 'neutral', 'success', 'warning' or 'danger'
+ * - `icon`: an Iconify name before the message
+ * - `actions`: buttons or links at the end
+ * - `dismissible`: a close button, which hides it and calls `onDismiss`
+ * - `open`, `defaultOpen`: whether it shows (true); `onOpenChange`
+ * - `full`: no rounding, to run edge to edge
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './banner.css';
+export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: 'accent' | 'soft' | 'neutral' | 'success' | 'warning' | 'danger';
+    icon?: string | null;
+    actions?: ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    full?: boolean;
+    classes?: Classes<'root' | 'icon' | 'description' | 'actions' | 'close'>;
+};
+export declare function Banner({ variant, icon, actions, dismissible, onDismiss, open: openProp, defaultOpen, onOpenChange, full, className, classes, children, ...rest }: BannerProps): import("react").JSX.Element | null;

package/dist/banner/Banner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { cx, partsOf, useControllable } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './banner.css';
+export function Banner({ variant = 'accent', icon = null, actions = null, dismissible = false, onDismiss, open: openProp, defaultOpen = true, onOpenChange, full = false, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const part = partsOf('banner', classes);
+    const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+    if (!open)
+        return null;
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, "data-full": full || undefined, role: "status", children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("div", { ...part('description'), children: children }), actions && _jsx("div", { ...part('actions'), children: actions }), dismissible && (_jsx("button", { ...part('close'), type: "button", "aria-label": t.common.dismiss, onClick: () => { setOpen(false); onDismiss?.(); }, children: _jsx("iconify-icon", { icon: "lucide:x" }) }))] }));
+}

package/dist/banner/banner.css

@@ -0,0 +1,25 @@
+@layer ui {
+  [data-scope=banner][data-part=root] {
+    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.5rem; padding: 0.5rem 1rem; box-sizing: border-box;
+    border-radius: calc(var(--ui-radius) + 2px); font-family: var(--ui-font); font-size: 14px;
+    background: var(--ui-accent); color: var(--ui-accent-text);
+    &[data-full] { border-radius: 0; }
+    &[data-variant=soft] { background: var(--ui-accent-soft); color: var(--ui-accent-soft-text); }
+    &[data-variant=neutral] { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); }
+    &[data-variant=success] { background: color-mix(in srgb, var(--ui-success) 14%, var(--ui-surface)); color: color-mix(in srgb, var(--ui-success) 70%, var(--ui-text)); }
+    &[data-variant=warning] { background: #fef3c7; color: #92400e; }
+    &[data-variant=danger] { background: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-surface)); color: var(--ui-danger); }
+    :is(.dark, [data-theme=dark]) &[data-variant=warning] { background: #451a03; color: #fde68a; }
+  }
+  [data-scope=banner][data-part=icon] { flex-shrink: 0; font-size: 16px; }
+  [data-scope=banner][data-part=description] { flex-grow: 1; min-width: 0;
+    /* Links in the message take the banner's colour, underlined. */
+    & a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } }
+  [data-scope=banner][data-part=actions] { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
+  [data-scope=banner][data-part=close] {
+    display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0; margin-right: -0.375rem;
+    border: none; border-radius: var(--ui-radius); background: transparent; color: inherit; cursor: pointer; opacity: 0.8;
+    &:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
+    &:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+  }
+}

package/dist/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Where the page sits: links from the top down to the current page.
+ *
+ *   <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Students' }]} />
+ *
+ * - `items`: `{ label, href, icon }`; the last is the current page
+ * - `separator`: text between crumbs ('/', '›'); a chevron by default
+ * - `max`: with more items than this, the middle ones fold into a "…" button
+ *   that lists them in a menu
+ * - `label`: what assistive tech calls the nav ('Breadcrumb')
+ * - `renderLink`: draws a crumb's link yourself (your router's Link), given
+ *   the crumb and the props to spread on it: `(item, props) => <Link to={item.href} {...props} />`
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './breadcrumbs.css';
+export type Crumb = {
+    label: ReactNode;
+    href?: string | null;
+    icon?: string | null;
+};
+type CrumbLinkProps = {
+    'data-scope': string;
+    'data-part': string;
+    className?: string;
+    children: ReactNode;
+};
+export type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {
+    items?: Crumb[];
+    separator?: ReactNode;
+    max?: number | null;
+    label?: string;
+    renderLink?: (item: Crumb, props: CrumbLinkProps) => ReactNode;
+    classes?: Classes<'root' | 'list' | 'crumb' | 'separator' | 'link' | 'more' | 'icon' | 'text'>;
+};
+export declare function Breadcrumbs({ items, separator, max, label: labelProp, renderLink, className, classes, ...rest }: BreadcrumbsProps): import("react").JSX.Element;
+export {};

package/dist/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { Menu } from '../menu/Menu.js';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './breadcrumbs.css';
+export function Breadcrumbs({ items = [], separator = null, max = null, label: labelProp, renderLink, className, classes, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.breadcrumbs.label;
+    const part = partsOf('breadcrumbs', classes);
+    // The first crumb, a "…" for the folded middle, and the last max - 1.
+    const folded = !!max && items.length > max;
+    const hidden = folded ? items.slice(1, items.length - (max - 1)) : [];
+    const shown = folded ? [items[0], 'fold', ...items.slice(items.length - (max - 1))] : items;
+    return (_jsx("nav", { ...rest, ...part('root'), className: cx(className, classes?.root), "aria-label": label, children: _jsx("ol", { ...part('list'), children: shown.map((item, i) => {
+                const current = i === shown.length - 1;
+                const content = item !== 'fold' && _jsxs(_Fragment, { children: [item.icon && _jsx("iconify-icon", { ...part('icon'), icon: item.icon, "aria-hidden": "true" }), _jsx("span", { ...part('text'), children: item.label })] });
+                return (_jsxs("li", { ...part('crumb'), children: [i > 0 && (separator
+                            ? _jsx("span", { ...part('separator'), "aria-hidden": "true", children: separator })
+                            : _jsx("iconify-icon", { ...part('separator'), icon: "lucide:chevron-right", "aria-hidden": "true" })), item === 'fold'
+                            // The folded crumbs, in a menu of links.
+                            ? _jsx(Menu, { items: hidden.map((crumb, j) => ({ label: crumb.label, value: j, href: crumb.href ?? undefined, icon: crumb.icon ?? undefined })), trigger: _jsx("button", { ...part('more'), type: "button", "aria-label": t.common.more(hidden.length), children: "\u2026" }) })
+                            : item.href && !current
+                                ? renderLink ? renderLink(item, { ...part('link'), children: content }) : _jsx("a", { ...part('link'), href: item.href, children: content })
+                                : _jsx("span", { ...part('link'), "data-current": current || undefined, "aria-current": current ? 'page' : undefined, children: content })] }, i));
+            }) }) }));
+}

package/dist/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,18 @@
+@layer ui {
+  [data-scope=breadcrumbs][data-part=root] { display: block; min-width: 0; font-family: var(--ui-font); font-size: 14px; }
+  [data-scope=breadcrumbs][data-part=list] { display: flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0;
+    list-style: none; min-width: 0; overflow: hidden; }
+  [data-scope=breadcrumbs][data-part=crumb] { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
+  [data-scope=breadcrumbs][data-part=separator] { color: var(--ui-muted); opacity: 0.7; flex-shrink: 0; }
+  /* Squeezed, the crumbs shrink and their text ends in an ellipsis rather than overlapping. */
+  [data-scope=breadcrumbs][data-part=link] { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; color: var(--ui-muted);
+    text-decoration: none; white-space: nowrap; border-radius: 4px;
+    a&:hover { color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); outline-offset: 2px; }
+    &[data-current] { color: var(--ui-text); font-weight: 500; } }
+  [data-scope=breadcrumbs][data-part=more] { padding: 0 0.375rem; border: none; background: transparent; border-radius: 4px;
+    color: var(--ui-muted); font: inherit; cursor: pointer;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); } }
+  [data-scope=breadcrumbs][data-part=text] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  [data-scope=breadcrumbs][data-part=icon] { font-size: 15px; flex-shrink: 0; }
+}

package/dist/button/Button.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A button. Other attributes (onClick, aria-label, form…) go on the <button>.
+ *
+ *   <Button variant="primary" icon="lucide:save" loading={saving}>Save</Button>
+ *
+ * - `variant`: 'default', 'primary', 'danger', 'soft', 'ghost' or 'link'
+ * - `size`: 'sm', 'md' (matching the inputs' height) or 'lg'
+ * - `icon`, `iconEnd`: Iconify names; with no text it is an icon button, so give it an aria-label
+ * - `loading`: a spinner in place of the icon; also disables it
+ * - `round`: a circle for icon buttons, a pill with text
+ * - `block`: full width
+ * - `count`: a badge on the corner (hidden at 0 or null), "99+" past `max`
+ * - `dot`: a small dot there instead, for "something new"
+ * - `pulse`: a ring ripples out from the badge or dot (not when the system asks for less motion)
+ * - `countColor`: 'danger', 'accent', 'success', 'warning' or 'neutral'
+ * - `countLabel`: what the count is, for assistive tech ('new': "Inbox, 3 new")
+ * - `type`: 'button' by default (pass 'submit' for forms)
+ */
+import type { ComponentProps } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './button.css';
+export type ButtonProps = ComponentProps<'button'> & {
+    variant?: 'default' | 'primary' | 'danger' | 'soft' | 'ghost' | 'link';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: string | null;
+    iconEnd?: string | null;
+    loading?: boolean;
+    round?: boolean;
+    block?: boolean;
+    count?: number | null;
+    max?: number;
+    dot?: boolean;
+    pulse?: boolean;
+    countColor?: 'danger' | 'accent' | 'success' | 'warning' | 'neutral';
+    countLabel?: string;
+    classes?: Classes<'root' | 'spinner' | 'icon' | 'badge' | 'spoken'>;
+};
+export declare function Button({ variant, size, icon, iconEnd, loading, round, block, count, max, dot, pulse, countColor, countLabel: countLabelProp, type, disabled, className, classes, children, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/button/Button.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import 'iconify-icon';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './button.css';
+export function Button({ variant = 'default', size = 'md', icon = null, iconEnd = null, loading = false, round = false, block = false, count = null, max = 99, dot = false, pulse = false, countColor = 'danger', countLabel: countLabelProp, type = 'button', disabled = false, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const countLabel = countLabelProp ?? t.button.countLabel;
+    const part = partsOf('button', classes);
+    const badge = count && count > 0 ? (count > max ? `${max}+` : String(count)) : dot ? '' : null;
+    // Read after the label by assistive tech: "Inbox, 3 new".
+    const spoken = count && count > 0 ? `${count} ${countLabel}` : dot ? countLabel : '';
+    // An aria-label hides the button's text from assistive tech, so the count joins the label.
+    const label = rest['aria-label'] && spoken ? `${rest['aria-label']}, ${spoken}` : rest['aria-label'];
+    return (_jsxs("button", { ...rest, ...part('root'), className: cx(className, classes?.root), type: type, disabled: disabled || loading, "aria-label": label, "aria-busy": loading || undefined, "data-variant": variant, "data-size": size, "data-round": round || undefined, "data-block": block || undefined, "data-loading": loading || undefined, "data-icon-only": (children == null && !(icon && iconEnd)) || undefined, children: [loading
+                ? _jsx("span", { ...part('spinner'), "aria-hidden": "true" })
+                : icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), children, iconEnd && _jsx("iconify-icon", { ...part('icon'), icon: iconEnd, "aria-hidden": "true" }), badge != null && _jsxs(_Fragment, { children: [_jsx("span", { ...part('badge'), "aria-hidden": "true", "data-dot": badge === '' || undefined, "data-pulse": pulse || undefined, "data-color": countColor, children: badge }), !rest['aria-label'] && _jsxs("span", { ...part('spoken'), children: [", ", spoken] })] })] }));
+}

package/dist/button/button.css

@@ -0,0 +1,63 @@
+@layer ui {
+  [data-scope=button][data-part=root] {
+    position: relative;
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
+    height: var(--ui-control-height); padding: 0 0.875rem; box-sizing: border-box;
+    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    background: var(--ui-surface); color: var(--ui-text);
+    font-family: var(--ui-font); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; outline: none;
+    transition: background-color 120ms, border-color 120ms;
+
+    &:hover { background: var(--ui-hover); }
+    &:active { translate: 0 1px; }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); border-color: var(--ui-ring); }
+    &:disabled { opacity: 0.5; cursor: not-allowed; translate: none; }
+
+    &[data-variant=primary] { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-text);
+      &:hover { filter: brightness(1.1); } }
+    &[data-variant=danger] { background: var(--ui-danger); border-color: var(--ui-danger); color: white;
+      &:hover { filter: brightness(1.1); } }
+    &[data-variant=soft] { background: var(--ui-accent-soft); border-color: transparent; color: var(--ui-accent-soft-text);
+      &:hover { filter: brightness(0.97); } }
+    &[data-variant=ghost] { background: transparent; border-color: transparent;
+      &:hover { background: var(--ui-hover); } }
+    /* Looks like a link, behaves as a button. */
+    &[data-variant=link] { height: auto; padding: 0; background: transparent; border-color: transparent; color: var(--ui-accent);
+      &:hover { background: transparent; text-decoration: underline; }
+      &:active { translate: none; } }
+
+    &[data-size=sm] { height: var(--ui-control-height-sm); padding: 0 0.625rem; font-size: 12px; gap: 0.375rem; }
+    &[data-size=lg] { height: var(--ui-control-height-lg); padding: 0 1.25rem; font-size: 16px; }
+    &[data-icon-only] { padding: 0; width: var(--ui-control-height);
+      &[data-size=sm] { width: var(--ui-control-height-sm); }
+      &[data-size=lg] { width: var(--ui-control-height-lg); } }
+    &[data-round] { border-radius: 9999px; }
+    &[data-block] { display: flex; width: 100%; }
+    &[data-loading] { cursor: progress; }
+  }
+
+  [data-scope=button][data-part=icon] { display: block; width: 1em; height: 1em; font-size: 16px; flex-shrink: 0;
+    [data-size=sm] > & { font-size: 14px; } }
+  [data-scope=button][data-part=spinner] { width: 1em; height: 1em; flex-shrink: 0; box-sizing: border-box;
+    border: 2px solid currentColor; border-top-color: transparent; border-radius: 9999px; animation: ui-spin 0.7s linear infinite; }
+  /* The count badge, ringed in the page colour so it stands off the button. */
+  [data-scope=button][data-part=badge] { position: absolute; top: 0; right: 0; translate: 45% -45%;
+    display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
+    border-radius: 9999px; isolation: isolate; box-shadow: 0 0 0 2px var(--ui-surface);
+    --count-bg: var(--ui-danger); --count-text: white;
+    background: var(--ui-button-count-bg, var(--count-bg)); color: var(--ui-button-count-text, var(--count-text));
+    &[data-color=accent] { --count-bg: var(--ui-accent); --count-text: var(--ui-accent-text); }
+    &[data-color=success] { --count-bg: var(--ui-success); --count-text: white; }
+    &[data-color=warning] { --count-bg: #f59e0b; --count-text: #451a03; }
+    &[data-color=neutral] { --count-bg: var(--ui-text); --count-text: var(--ui-surface); }
+    &[data-dot] { min-width: 0; width: 10px; height: 10px; padding: 0; }
+    [data-icon-only] > &[data-dot] { translate: 15% -15%; }
+    /* A copy of the badge's colour that grows and fades behind it. */
+    &[data-pulse]::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 9999px; background: inherit;
+      animation: ui-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
+    font-family: var(--ui-font); font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none;
+    [data-round][data-icon-only] > & { translate: 25% -25%; } }
+  [data-scope=button][data-part=spoken] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @keyframes ui-ping { from { scale: 1; opacity: 0.7; } 75%, to { scale: 2.2; opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { [data-scope=button][data-part=badge]::after { animation: none; } }
+}