@xaroth.nl/design 0.1.0

package/dist/astro.d.ts

@@ -0,0 +1,41 @@
+// Generated by scripts/generate.ts. Do not edit.
+export { default as Alert } from './components/alert/alert.astro'
+export { default as Avatar } from './components/avatar/avatar.astro'
+export { default as Badge } from './components/badge/badge.astro'
+export { default as Breadcrumbs } from './components/breadcrumbs/breadcrumbs.astro'
+export { default as Button } from './components/button/button.astro'
+export { default as Card } from './components/card/card.astro'
+export { default as DescriptionList } from './components/description-list/description-list.astro'
+export { default as Divider } from './components/divider/divider.astro'
+export { default as EmptyState } from './components/empty-state/empty-state.astro'
+export { default as CheckboxGroup } from './components/field/checkbox-group.astro'
+export { default as Checkbox } from './components/field/checkbox.astro'
+export { default as Field } from './components/field/field.astro'
+export { default as Input } from './components/field/input.astro'
+export { default as RadioGroup } from './components/field/radio-group.astro'
+export { default as Radio } from './components/field/radio.astro'
+export { default as Select } from './components/field/select.astro'
+export { default as Switch } from './components/field/switch.astro'
+export { default as Textarea } from './components/field/textarea.astro'
+export { default as FilterLayout } from './components/filters/filter-layout.astro'
+export { default as FilterPanel } from './components/filters/filter-panel.astro'
+export { default as Footer } from './components/footer/footer.astro'
+export { default as Header } from './components/header/header.astro'
+export { default as Icon } from './components/icon/icon.astro'
+export { default as Container } from './components/layout/container.astro'
+export { default as Grid } from './components/layout/grid.astro'
+export { default as SectionHead } from './components/layout/section-head.astro'
+export { default as Section } from './components/layout/section.astro'
+export { default as PageHead } from './components/page-head/page-head.astro'
+export { default as Pagination } from './components/pagination/pagination.astro'
+export { default as Panel } from './components/panel/panel.astro'
+export { default as Progress } from './components/progress/progress.astro'
+export { default as CodeBlock } from './components/prose/code-block.astro'
+export { default as Prose } from './components/prose/prose.astro'
+export { default as StatGroup } from './components/stat/stat-group.astro'
+export { default as Stat } from './components/stat/stat.astro'
+export { default as Table } from './components/table/table.astro'
+export { default as Tabs } from './components/tabs/tabs.astro'
+export { default as Tag } from './components/tag/tag.astro'
+export { default as Timeline } from './components/timeline/timeline.astro'
+export { default as Tooltip } from './components/tooltip/tooltip.astro'

package/dist/astro.js

@@ -0,0 +1,41 @@
+// Generated by scripts/generate.ts. Do not edit.
+export { default as Alert } from './components/alert/alert.astro'
+export { default as Avatar } from './components/avatar/avatar.astro'
+export { default as Badge } from './components/badge/badge.astro'
+export { default as Breadcrumbs } from './components/breadcrumbs/breadcrumbs.astro'
+export { default as Button } from './components/button/button.astro'
+export { default as Card } from './components/card/card.astro'
+export { default as DescriptionList } from './components/description-list/description-list.astro'
+export { default as Divider } from './components/divider/divider.astro'
+export { default as EmptyState } from './components/empty-state/empty-state.astro'
+export { default as CheckboxGroup } from './components/field/checkbox-group.astro'
+export { default as Checkbox } from './components/field/checkbox.astro'
+export { default as Field } from './components/field/field.astro'
+export { default as Input } from './components/field/input.astro'
+export { default as RadioGroup } from './components/field/radio-group.astro'
+export { default as Radio } from './components/field/radio.astro'
+export { default as Select } from './components/field/select.astro'
+export { default as Switch } from './components/field/switch.astro'
+export { default as Textarea } from './components/field/textarea.astro'
+export { default as FilterLayout } from './components/filters/filter-layout.astro'
+export { default as FilterPanel } from './components/filters/filter-panel.astro'
+export { default as Footer } from './components/footer/footer.astro'
+export { default as Header } from './components/header/header.astro'
+export { default as Icon } from './components/icon/icon.astro'
+export { default as Container } from './components/layout/container.astro'
+export { default as Grid } from './components/layout/grid.astro'
+export { default as SectionHead } from './components/layout/section-head.astro'
+export { default as Section } from './components/layout/section.astro'
+export { default as PageHead } from './components/page-head/page-head.astro'
+export { default as Pagination } from './components/pagination/pagination.astro'
+export { default as Panel } from './components/panel/panel.astro'
+export { default as Progress } from './components/progress/progress.astro'
+export { default as CodeBlock } from './components/prose/code-block.astro'
+export { default as Prose } from './components/prose/prose.astro'
+export { default as StatGroup } from './components/stat/stat-group.astro'
+export { default as Stat } from './components/stat/stat.astro'
+export { default as Table } from './components/table/table.astro'
+export { default as Tabs } from './components/tabs/tabs.astro'
+export { default as Tag } from './components/tag/tag.astro'
+export { default as Timeline } from './components/timeline/timeline.astro'
+export { default as Tooltip } from './components/tooltip/tooltip.astro'

package/dist/bem.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from 'clsx';
+type Modifier = string | number | boolean | null | undefined;
+export type BemOptions = {
+    defaults?: Record<string, string | number>;
+    prefixed?: string[];
+};
+export type Bem = {
+    (modifiers?: Record<string, Modifier>, ...extra: ClassValue[]): string;
+    el: (element: string, modifiers?: Record<string, Modifier>, ...extra: ClassValue[]) => string;
+};
+export declare function bem(block: string, { defaults, prefixed }?: BemOptions): Bem;
+export {};

package/dist/bem.js

@@ -0,0 +1,19 @@
+import { clsx } from 'clsx';
+// Class names for one BEM block. `true` gives `--key`, a string gives `--value`, false-ish gives nothing.
+export function bem(block, { defaults = {}, prefixed = [] } = {}) {
+    const build = (name, modifiers = {}, extra = []) => clsx(name, Object.entries(modifiers).map(([key, value]) => {
+        if (value === true) {
+            return `${name}--${key}`;
+        }
+        if ((typeof value === 'string' && value !== '') || typeof value === 'number') {
+            if (defaults[key] === value) {
+                return false;
+            }
+            return prefixed.includes(key) ? `${name}--${key}-${value}` : `${name}--${value}`;
+        }
+        return false;
+    }), extra);
+    const fn = ((modifiers, ...extra) => build(block, modifiers, extra));
+    fn.el = (element, modifiers, ...extra) => build(`${block}__${element}`, modifiers, extra);
+    return fn;
+}

package/dist/components/alert/alert.astro

@@ -0,0 +1,46 @@
+---
+import './alert.css'
+import type { HTMLAttributes } from 'astro/types'
+import { alertClass, alertIcon, alertRole, type AlertOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class' | 'title'> &
+  Omit<AlertOptions, 'className'> & {
+    class?: string
+    /** Plain-text title; the `title` slot takes markup. */
+    title?: string
+    /** Sets role="alert" so screen readers interrupt. Only for messages shown in response to an action. */
+    urgent?: boolean
+  }
+
+const { tone, framed, title, urgent, role, class: className, slot: _slot, ...rest } = Astro.props
+const hasTitle = title !== undefined || Astro.slots.has('title')
+---
+
+<div {...rest} role={alertRole(urgent, role)} class={alertClass({ tone, framed, className })}>
+  <svg class="x-alert__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    {alertIcon(tone).map(({ className, d }) => <path class={className} d={d} />)}
+  </svg>
+  <div class="x-alert__content">
+    {
+      hasTitle && (
+        <p class="x-alert__title">
+          <slot name="title">{title}</slot>
+        </p>
+      )
+    }
+    {
+      Astro.slots.has('default') && (
+        <div class="x-alert__body">
+          <slot />
+        </div>
+      )
+    }
+    {
+      Astro.slots.has('actions') && (
+        <div class="x-alert__actions">
+          <slot name="actions" />
+        </div>
+      )
+    }
+  </div>
+</div>

package/dist/components/alert/alert.css

@@ -0,0 +1,68 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-alert {
+    --x-alert-tone: var(--x-color-info);
+    --x-alert-wash: var(--x-color-info-wash);
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--x-alert-gap, var(--x-space-3));
+    align-items: start;
+    padding: var(--x-space-4) var(--x-space-5) var(--x-space-4) var(--x-space-4);
+    font-family: var(--x-font-ui);
+    background: var(--x-alert-bg, var(--x-alert-wash));
+    border-left: 2px solid var(--x-alert-tone);
+  }
+  .x-alert--success {
+    --x-alert-tone: var(--x-color-success);
+    --x-alert-wash: var(--x-color-success-wash);
+  }
+  .x-alert--warning {
+    --x-alert-tone: var(--x-color-warning);
+    --x-alert-wash: var(--x-color-warning-wash);
+  }
+  .x-alert--danger {
+    --x-alert-tone: var(--x-color-danger);
+    --x-alert-wash: var(--x-color-danger-wash);
+  }
+  .x-alert__icon {
+    width: 20px;
+    height: 20px;
+    margin-top: 2px;
+    color: var(--x-alert-tone);
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: 1.5;
+  }
+  .x-alert__glyph {
+    stroke-width: var(--x-alert-glyph-width, 2);
+  }
+  .x-alert__frame--round {
+    display: none;
+  }
+  .x-alert__content {
+    display: grid;
+    gap: var(--x-space-1);
+    min-width: 0;
+  }
+  .x-alert__title {
+    font-size: var(--x-fs-ui);
+    font-weight: var(--x-alert-title-weight, 600);
+    line-height: 1.4;
+    color: var(--x-color-text);
+  }
+  .x-alert__body {
+    font-size: var(--x-alert-fs, var(--x-fs-small));
+    line-height: var(--x-alert-lh, 1.5);
+    color: var(--x-color-text-muted);
+  }
+  .x-alert__body > * + * {
+    margin-top: var(--x-space-2);
+  }
+  .x-alert__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-2);
+    align-items: center;
+    margin-top: var(--x-space-2);
+  }
+}

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,11 @@
+import './alert.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type AlertOptions } from './index.ts';
+export type AlertProps = Omit<AlertOptions, 'className'> & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title?: ReactNode;
+    /** Sets role="alert" so screen readers interrupt. Only for messages shown in response to an action. */
+    urgent?: boolean;
+    /** Row under the text, usually small buttons or a link. */
+    actions?: ReactNode;
+};
+export declare function Alert({ tone, framed, title, urgent, role, actions, className, children, ...rest }: AlertProps): import("react").JSX.Element;

package/dist/components/alert/alert.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './alert.css';
+import { alertClass, alertIcon, alertRole } from "./index.js";
+export function Alert({ tone, framed, title, urgent, role, actions, className, children, ...rest }) {
+    return (_jsxs("div", { ...rest, role: alertRole(urgent, role), className: alertClass({ tone, framed, className }), children: [_jsx("svg", { className: "x-alert__icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: alertIcon(tone).map(({ className: pathClass, d }) => (_jsx("path", { className: pathClass, d: d }, d))) }), _jsxs("div", { className: "x-alert__content", children: [title != null && _jsx("p", { className: "x-alert__title", children: title }), children != null && _jsx("div", { className: "x-alert__body", children: children }), actions != null && _jsx("div", { className: "x-alert__actions", children: actions })] })] }));
+}

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

@@ -0,0 +1,14 @@
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+export type AlertOptions = {
+    tone?: AlertTone;
+    /** Toned frame and caps title, for alerts that sit in a tool page rather than in text. */
+    framed?: boolean;
+    className?: string;
+};
+export declare const alertClass: ({ tone, framed, className }?: AlertOptions) => string;
+export declare const alertRole: <R extends string>(urgent?: boolean, role?: R | null) => R | "alert" | "status";
+export type AlertIconPath = {
+    className: string;
+    d: string;
+};
+export declare const alertIcon: (tone?: AlertTone) => AlertIconPath[];

package/dist/components/alert/index.js

@@ -0,0 +1,27 @@
+import { bem } from "../../bem.js";
+const alert = bem('x-alert');
+export const alertClass = ({ tone = 'info', framed, className } = {}) => alert({ tone, framed }, className);
+// status is silent for content present on load; alert interrupts, so keep it for messages inserted after an action.
+export const alertRole = (urgent, role) => role ?? (urgent ? 'alert' : 'status');
+// Every icon carries both outline shapes; each theme shows one.
+const frames = {
+    badge: { facet: 'M12 2 21 7v10l-9 5-9-5V7z', round: 'M12 2 22 12 12 22 2 12z' },
+    stop: { facet: 'M8 2h8l6 6v8l-6 6H8l-6-6V8z', round: 'M21.5 12a9.5 9.5 0 1 1-19 0 9.5 9.5 0 0 1 19 0z' },
+};
+const frame = (shape) => [
+    { className: alert.el('frame', { facet: true }), d: frames[shape].facet },
+    { className: alert.el('frame', { round: true }), d: frames[shape].round },
+];
+const glyph = (d) => ({ className: alert.el('glyph'), d });
+export const alertIcon = (tone = 'info') => {
+    switch (tone) {
+        case 'success':
+            return [...frame('badge'), glyph('m8 12 3 3 5-6')];
+        case 'warning':
+            return [{ className: alert.el('frame'), d: 'M12 3 22 20H2z' }, glyph('M12 9v5M12 16.5v.5')];
+        case 'danger':
+            return [...frame('stop'), glyph('m9 9 6 6M15 9l-6 6')];
+        default:
+            return [...frame('badge'), glyph('M12 11v6M12 7.5v.5')];
+    }
+};

package/dist/components/avatar/avatar.astro

@@ -0,0 +1,23 @@
+---
+import './avatar.css'
+import type { HTMLAttributes } from 'astro/types'
+import { avatarClass, avatarState, type AvatarOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'span'>, 'class'> & Omit<AvatarOptions, 'className'> & { class?: string }
+
+const { name, src, alt, initials, size, class: className, slot: _slot, ...rest } = Astro.props
+const state = avatarState({ name, src, alt, initials })
+const attrs = { ...rest, ...state.root }
+---
+
+<span {...attrs} class={avatarClass({ size, src, className })}>
+  {
+    src ? (
+      <img class="x-avatar__image" src={src} alt={state.alt} loading="lazy" decoding="async" />
+    ) : (
+      <span class="x-avatar__initials" aria-hidden="true">
+        {state.initials}
+      </span>
+    )
+  }
+</span>

package/dist/components/avatar/avatar.css

@@ -0,0 +1,35 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-avatar {
+    --x-avatar-size: 64px;
+    position: relative;
+    isolation: isolate;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: var(--x-avatar-size);
+    height: var(--x-avatar-size);
+    overflow: hidden;
+    font-family: var(--x-font-display);
+    font-size: calc(var(--x-avatar-size) * var(--x-avatar-scale, 0.4));
+    font-weight: var(--x-avatar-weight, 600);
+    line-height: 1;
+    color: var(--x-color-text);
+    background: var(--x-color-surface-2);
+    user-select: none;
+  }
+  .x-avatar--sm {
+    --x-avatar-size: 40px;
+  }
+  .x-avatar--lg {
+    --x-avatar-size: 96px;
+  }
+  .x-avatar--xl {
+    --x-avatar-size: 128px;
+  }
+  .x-avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,5 @@
+import './avatar.scss';
+import type { HTMLAttributes } from 'react';
+import { type AvatarOptions } from './index.ts';
+export type AvatarProps = Omit<AvatarOptions, 'className'> & HTMLAttributes<HTMLSpanElement>;
+export declare function Avatar({ name, src, alt, initials, size, className, ...rest }: AvatarProps): import("react").JSX.Element;

package/dist/components/avatar/avatar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './avatar.css';
+import { avatarClass, avatarState } from "./index.js";
+export function Avatar({ name, src, alt, initials, size, className, ...rest }) {
+    const state = avatarState({ name, src, alt, initials });
+    return (_jsx("span", { ...rest, ...state.root, className: avatarClass({ size, src, className }), children: src ? (_jsx("img", { className: "x-avatar__image", src: src, alt: state.alt, loading: "lazy", decoding: "async" })) : (_jsx("span", { className: "x-avatar__initials", "aria-hidden": "true", children: state.initials })) }));
+}

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

@@ -0,0 +1,32 @@
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarOptions = {
+    /** The person's name: the accessible name and the source of the initials. */
+    name: string;
+    /** Image URL. Without it the avatar shows initials. */
+    src?: string;
+    /** Overrides the accessible name. Pass '' when the name is already printed next to the avatar. */
+    alt?: string;
+    /** Overrides the initials taken from `name`. */
+    initials?: string;
+    size?: AvatarSize;
+    className?: string;
+};
+export declare const avatarClass: ({ size, src, className, }?: Pick<AvatarOptions, "size" | "src" | "className">) => string;
+export declare const avatarInitials: (name: string) => string;
+export declare const avatarState: ({ name, src, alt, initials }: Pick<AvatarOptions, "name" | "src" | "alt" | "initials">) => {
+    root: {
+        'aria-hidden'?: undefined;
+        role?: undefined;
+        'aria-label'?: undefined;
+    } | {
+        'aria-hidden': "true";
+        role?: undefined;
+        'aria-label'?: undefined;
+    } | {
+        role: "img";
+        'aria-label': string;
+        'aria-hidden'?: undefined;
+    };
+    alt: string;
+    initials: string;
+};

package/dist/components/avatar/index.js

@@ -0,0 +1,24 @@
+import { bem } from "../../bem.js";
+const avatar = bem('x-avatar');
+export const avatarClass = ({ size = 'md', src, className, } = {}) => avatar({ size, image: Boolean(src) }, className);
+// First letter of the first and last word, so "Xaroth Brook" gives "XB" and "Xaroth" gives "X".
+export const avatarInitials = (name) => {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const first = words[0]?.[0] ?? '';
+    const last = words.length > 1 ? (words[words.length - 1]?.[0] ?? '') : '';
+    return (first + last).toUpperCase();
+};
+// An image carries its own alt. Initials are not a name, so the box is an img with the full name as label.
+export const avatarState = ({ name, src, alt, initials }) => {
+    const label = alt ?? name;
+    const root = src
+        ? {}
+        : label === ''
+            ? { 'aria-hidden': 'true' }
+            : { role: 'img', 'aria-label': label };
+    return {
+        root,
+        alt: label,
+        initials: initials ?? avatarInitials(name),
+    };
+};

package/dist/components/badge/badge.astro

@@ -0,0 +1,11 @@
+---
+import './badge.css'
+import type { HTMLAttributes } from 'astro/types'
+import { badgeClass, type BadgeOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'span'>, 'class'> & Omit<BadgeOptions, 'className'> & { class?: string }
+
+const { tone, class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<span {...rest} class={badgeClass({ tone, className })}><slot /></span>

package/dist/components/badge/badge.css

@@ -0,0 +1,46 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-badge {
+    --x-badge-tone: var(--x-badge-default, var(--x-color-text-muted));
+    --x-badge-wash: transparent;
+    display: inline-flex;
+    flex: none;
+    gap: var(--x-badge-gap, 6px);
+    align-items: center;
+    min-height: 24px;
+    padding: 0 var(--x-space-2);
+    font-family: var(--x-font-ui);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: var(--x-track-label);
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--x-badge-tone);
+    background: var(--x-badge-wash);
+    border: 1px solid color-mix(in srgb, var(--x-badge-tone) var(--x-badge-edge-mix, 45%), transparent);
+  }
+  .x-badge::before {
+    content: "";
+    flex: none;
+    width: 5px;
+    height: 5px;
+    background: currentcolor;
+  }
+  .x-badge--info {
+    --x-badge-tone: var(--x-color-info);
+    --x-badge-wash: var(--x-color-info-wash);
+  }
+  .x-badge--success {
+    --x-badge-tone: var(--x-color-success);
+    --x-badge-wash: var(--x-color-success-wash);
+  }
+  .x-badge--warning {
+    --x-badge-tone: var(--x-color-warning);
+    --x-badge-wash: var(--x-color-warning-wash);
+  }
+  .x-badge--danger {
+    --x-badge-tone: var(--x-color-danger);
+    --x-badge-wash: var(--x-color-danger-wash);
+  }
+}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,5 @@
+import './badge.scss';
+import type { HTMLAttributes } from 'react';
+import { type BadgeOptions } from './index.ts';
+export type BadgeProps = Omit<BadgeOptions, 'className'> & HTMLAttributes<HTMLSpanElement>;
+export declare function Badge({ tone, className, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/components/badge/badge.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './badge.css';
+import { badgeClass } from "./index.js";
+export function Badge({ tone, className, children, ...rest }) {
+    return (_jsx("span", { ...rest, className: badgeClass({ tone, className }), children: children }));
+}

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

@@ -0,0 +1,6 @@
+export type BadgeTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
+export type BadgeOptions = {
+    tone?: BadgeTone;
+    className?: string;
+};
+export declare const badgeClass: ({ tone, className }?: BadgeOptions) => string;

package/dist/components/badge/index.js

@@ -0,0 +1,3 @@
+import { bem } from "../../bem.js";
+const badge = bem('x-badge', { defaults: { tone: 'default' } });
+export const badgeClass = ({ tone = 'default', className } = {}) => badge({ tone }, className);

package/dist/components/breadcrumbs/breadcrumbs.astro

@@ -0,0 +1,27 @@
+---
+import './breadcrumbs.css'
+import type { HTMLAttributes } from 'astro/types'
+import { breadcrumbState, breadcrumbsClass, breadcrumbsClasses as c, type BreadcrumbItem } from './index.js'
+
+type Props = Omit<HTMLAttributes<'nav'>, 'class'> & {
+  class?: string
+  items: BreadcrumbItem[]
+  label?: string
+}
+
+const { class: className, items, label = 'Breadcrumb', slot: _slot, ...rest } = Astro.props
+const attrs = { ...rest, 'aria-label': label }
+const crumbs = items.map((item, i) => ({ item, ...breadcrumbState(item, i, items.length) }))
+---
+
+<nav {...attrs} class={breadcrumbsClass({ className })}>
+  <ol class={c.list}>
+    {
+      crumbs.map(({ item, tag: El, attrs }) => (
+        <li class={c.item}>
+          <El {...attrs}>{item.label}</El>
+        </li>
+      ))
+    }
+  </ol>
+</nav>

package/dist/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,33 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-breadcrumbs__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-1) var(--x-breadcrumbs-gap, 10px);
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .x-breadcrumbs__item {
+    display: inline-flex;
+    gap: var(--x-breadcrumbs-gap, 10px);
+    align-items: center;
+    min-width: 0;
+    color: var(--x-color-text-faint);
+  }
+  .x-breadcrumbs__item + .x-breadcrumbs__item::before {
+    flex: none;
+  }
+  .x-breadcrumbs__link {
+    color: var(--x-color-text-muted);
+    text-decoration: none;
+    transition: color var(--x-duration) var(--x-ease);
+  }
+  .x-breadcrumbs__link:hover {
+    color: var(--x-color-accent);
+  }
+  .x-breadcrumbs__current {
+    color: var(--x-color-text);
+  }
+}

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import './breadcrumbs.scss';
+import { type HTMLAttributes } from 'react';
+import { type BreadcrumbItem } from './index.ts';
+export type BreadcrumbsProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** Trail from the root to the current page. The last item is the current page. */
+    items: BreadcrumbItem[];
+    label?: string;
+};
+export declare function Breadcrumbs({ className, items, label, ...rest }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './breadcrumbs.css';
+import { createElement } from 'react';
+import { breadcrumbState, breadcrumbsClass, breadcrumbsClasses as c } from "./index.js";
+export function Breadcrumbs({ className, items, label = 'Breadcrumb', ...rest }) {
+    return (_jsx("nav", { ...rest, "aria-label": label, className: breadcrumbsClass({ className }), children: _jsx("ol", { className: c.list, children: items.map((item, i) => {
+                const { tag, attrs } = breadcrumbState(item, i, items.length);
+                const { class: cls, ...other } = attrs;
+                return (_jsx("li", { className: c.item, children: createElement(tag, { ...other, className: cls }, item.label) }, `${i}-${item.label}`));
+            }) }) }));
+}

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

@@ -0,0 +1,37 @@
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+};
+export type BreadcrumbsOptions = {
+    className?: string;
+};
+export declare const breadcrumbsClass: ({ className }?: BreadcrumbsOptions) => string;
+export declare const breadcrumbsClasses: {
+    readonly list: string;
+    readonly item: string;
+    readonly link: string;
+    readonly text: string;
+    readonly current: string;
+};
+export declare const breadcrumbState: (item: BreadcrumbItem, index: number, count: number) => {
+    tag: "span";
+    attrs: {
+        class: string;
+        'aria-current': "page";
+        href?: undefined;
+    };
+} | {
+    tag: "a";
+    attrs: {
+        class: string;
+        href: string;
+        'aria-current'?: undefined;
+    };
+} | {
+    tag: "span";
+    attrs: {
+        class: string;
+        'aria-current'?: undefined;
+        href?: undefined;
+    };
+};