@xaroth.nl/design 0.1.0

package/dist/components/description-list/index.d.ts

@@ -0,0 +1,12 @@
+export type DescriptionListLayout = 'stacked' | 'inline' | 'columns';
+export type DescriptionListItem<T = string> = {
+    term: string;
+    value: T;
+};
+export type DescriptionListOptions = {
+    layout?: DescriptionListLayout;
+    dividers?: boolean;
+    className?: string;
+};
+export declare const descriptionListClass: ({ layout, dividers, className, }?: DescriptionListOptions) => string;
+export declare const descriptionListValueSlot: (index: number) => string;

package/dist/components/description-list/index.js

@@ -0,0 +1,5 @@
+import { bem } from "../../bem.js";
+const descriptionList = bem('x-description-list', { defaults: { layout: 'stacked' } });
+export const descriptionListClass = ({ layout = 'stacked', dividers, className, } = {}) => descriptionList({ layout, dividers }, className);
+// Astro: markup for one value goes in a named slot, overriding the item value.
+export const descriptionListValueSlot = (index) => `value-${index}`;

package/dist/components/divider/divider.astro

@@ -0,0 +1,27 @@
+---
+import './divider.css'
+import type { HTMLAttributes } from 'astro/types'
+import { dividerClass, dividerState, type DividerOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class'> & Omit<DividerOptions, 'className'> & { class?: string }
+
+const { variant, class: className, slot: _slot, ...rest } = Astro.props
+const { tag: Tag, attrs: state } = dividerState({ variant })
+const attrs = { ...rest, ...state }
+---
+
+{
+  Tag === 'hr' ? (
+    <hr {...rest} class={dividerClass({ variant, className })} />
+  ) : (
+    <Tag {...attrs} class={dividerClass({ variant, className })}>
+      {variant === 'label' ? (
+        <span class="x-divider__label">
+          <slot />
+        </span>
+      ) : (
+        <span class="x-divider__mark" />
+      )}
+    </Tag>
+  )
+}

package/dist/components/divider/divider.css

@@ -0,0 +1,40 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-divider {
+    --x-divider-line: var(--x-color-line);
+    width: 100%;
+    height: 1px;
+    margin-block: var(--x-divider-space, var(--x-space-6));
+    background: var(--x-divider-line);
+    border: 0;
+  }
+  .x-divider--ornament, .x-divider--label {
+    display: flex;
+    gap: var(--x-divider-gap, var(--x-space-3));
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    background: none;
+  }
+  .x-divider--ornament::before, .x-divider--ornament::after, .x-divider--label::before, .x-divider--label::after {
+    content: "";
+    flex: 1 1 0;
+    height: 1px;
+    background: var(--x-divider-line);
+  }
+  .x-divider__mark {
+    flex: none;
+  }
+  .x-divider__label {
+    flex: none;
+    max-width: 70%;
+    font-family: var(--x-font-ui);
+    font-size: var(--x-fs-label);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: var(--x-track-label);
+    text-align: center;
+    text-transform: uppercase;
+    color: var(--x-color-text-muted);
+  }
+}

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,5 @@
+import './divider.scss';
+import type { HTMLAttributes } from 'react';
+import { type DividerOptions } from './index.ts';
+export type DividerProps = Omit<DividerOptions, 'className'> & HTMLAttributes<HTMLElement>;
+export declare function Divider({ variant, className, children, ...rest }: DividerProps): import("react").JSX.Element;

package/dist/components/divider/divider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './divider.css';
+import { dividerClass, dividerState } from "./index.js";
+export function Divider({ variant, className, children, ...rest }) {
+    const { tag: Tag, attrs } = dividerState({ variant });
+    const classes = dividerClass({ variant, className });
+    if (Tag === 'hr') {
+        return (_jsx("hr", { ...rest, className: classes }));
+    }
+    return (_jsx(Tag, { ...rest, ...attrs, className: classes, children: variant === 'label' ? (_jsx("span", { className: "x-divider__label", children: children })) : (_jsx("span", { className: "x-divider__mark" })) }));
+}

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

@@ -0,0 +1,22 @@
+export type DividerVariant = 'plain' | 'ornament' | 'label';
+export type DividerOptions = {
+    variant?: DividerVariant;
+    className?: string;
+};
+export declare const dividerClass: ({ variant, className }?: DividerOptions) => string;
+export declare const dividerState: ({ variant }: Pick<DividerOptions, "variant">) => {
+    tag: "hr";
+    attrs: {
+        role?: undefined;
+    };
+} | {
+    tag: "div";
+    attrs: {
+        role: "separator";
+    };
+} | {
+    tag: "div";
+    attrs: {
+        role?: undefined;
+    };
+};

package/dist/components/divider/index.js

@@ -0,0 +1,11 @@
+import { bem } from "../../bem.js";
+const divider = bem('x-divider', { defaults: { variant: 'plain' } });
+export const dividerClass = ({ variant = 'plain', className } = {}) => divider({ variant }, className);
+// A plain rule is an <hr>. The ornament needs a child, which <hr> cannot hold, so it is a div with the
+// separator role. A label is readable text, and separator children are hidden from assistive tech, so the
+// label variant is a plain div.
+export const dividerState = ({ variant = 'plain' }) => variant === 'plain'
+    ? { tag: 'hr', attrs: {} }
+    : variant === 'ornament'
+        ? { tag: 'div', attrs: { role: 'separator' } }
+        : { tag: 'div', attrs: {} };

package/dist/components/empty-state/empty-state.astro

@@ -0,0 +1,47 @@
+---
+import './empty-state.css'
+import type { HTMLAttributes } from 'astro/types'
+import { emptyStateClass, type EmptyStateHeadingLevel } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class' | 'title'> & {
+  class?: string
+  /** Plain-text title; the `title` slot takes markup. */
+  title?: string
+  headingLevel?: EmptyStateHeadingLevel
+}
+
+const { title, headingLevel = 3, class: className, slot: _slot, ...rest } = Astro.props
+const H = `h${headingLevel}` as const
+const hasTitle = title !== undefined || Astro.slots.has('title')
+---
+
+<div {...rest} class={emptyStateClass({ className })}>
+  {
+    Astro.slots.has('icon') && (
+      <span class="x-empty-state__icon" aria-hidden="true">
+        <slot name="icon" />
+      </span>
+    )
+  }
+  {
+    hasTitle && (
+      <H class="x-empty-state__title">
+        <slot name="title">{title}</slot>
+      </H>
+    )
+  }
+  {
+    Astro.slots.has('default') && (
+      <div class="x-empty-state__text">
+        <slot />
+      </div>
+    )
+  }
+  {
+    Astro.slots.has('actions') && (
+      <div class="x-empty-state__actions">
+        <slot name="actions" />
+      </div>
+    )
+  }
+</div>

package/dist/components/empty-state/empty-state.css

@@ -0,0 +1,38 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-empty-state {
+    display: grid;
+    gap: var(--x-space-3);
+    justify-items: center;
+    padding: var(--x-space-7) var(--x-space-5);
+    text-align: center;
+  }
+  .x-empty-state__icon {
+    display: inline-flex;
+    width: var(--x-empty-state-icon, 48px);
+    height: var(--x-empty-state-icon, 48px);
+    color: var(--x-color-field-edge);
+  }
+  .x-empty-state__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+  .x-empty-state__title {
+    font-size: var(--x-fs-h3);
+    line-height: 1.3;
+  }
+  .x-empty-state__text {
+    max-width: var(--x-empty-state-measure, 36rem);
+    color: var(--x-color-text-muted);
+  }
+  .x-empty-state__text > * + * {
+    margin-top: var(--x-space-2);
+  }
+  .x-empty-state__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--x-space-2);
+    justify-content: center;
+    margin-top: var(--x-space-2);
+  }
+}

package/dist/components/empty-state/empty-state.d.ts

@@ -0,0 +1,12 @@
+import './empty-state.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type EmptyStateHeadingLevel } from './index.ts';
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /** Decorative line icon; hidden from screen readers. */
+    icon?: ReactNode;
+    title?: ReactNode;
+    headingLevel?: EmptyStateHeadingLevel;
+    /** Row under the text, usually one button that clears what caused the empty result. */
+    actions?: ReactNode;
+};
+export declare function EmptyState({ icon, title, headingLevel, actions, className, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './empty-state.css';
+import { emptyStateClass } from "./index.js";
+export function EmptyState({ icon, title, headingLevel = 3, actions, className, children, ...rest }) {
+    const H = `h${headingLevel}`;
+    return (_jsxs("div", { ...rest, className: emptyStateClass({ className }), children: [icon != null && (_jsx("span", { className: "x-empty-state__icon", "aria-hidden": "true", children: icon })), title != null && _jsx(H, { className: "x-empty-state__title", children: title }), children != null && _jsx("div", { className: "x-empty-state__text", children: children }), actions != null && _jsx("div", { className: "x-empty-state__actions", children: actions })] }));
+}

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,5 @@
+export type EmptyStateHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type EmptyStateOptions = {
+    className?: string;
+};
+export declare const emptyStateClass: ({ className }?: EmptyStateOptions) => string;

package/dist/components/empty-state/index.js

@@ -0,0 +1,3 @@
+import { bem } from "../../bem.js";
+const emptyState = bem('x-empty-state');
+export const emptyStateClass = ({ className } = {}) => emptyState({}, className);

package/dist/components/field/checkbox-group.astro

@@ -0,0 +1,58 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { defined } from '../../html.js'
+import { choiceGroupAttrs, choiceGroupClass, fieldIds, type ChoiceGroupOrientation } from './index.js'
+
+type Props = Omit<HTMLAttributes<'fieldset'>, 'class' | 'id' | 'role'> & {
+  /** Help and error text get `${id}-help` and `${id}-error`. */
+  id: string
+  legend?: string
+  description?: string
+  error?: string
+  required?: boolean
+  orientation?: ChoiceGroupOrientation
+  class?: string
+}
+
+const { id, legend, description, error, required, orientation, class: className, ...rest } = Astro.props
+const hasLegend = Boolean(legend) || Astro.slots.has('legend')
+const hasDescription = Boolean(description) || Astro.slots.has('description')
+const hasError = Boolean(error) || Astro.slots.has('error')
+const ids = fieldIds(id)
+const recipe = choiceGroupAttrs({
+  id,
+  hasDescription,
+  hasError,
+  required,
+  kind: 'checkbox',
+  describedBy: rest['aria-describedby'] ?? undefined,
+})
+const attrs = { ...rest, ...defined(recipe), class: choiceGroupClass({ orientation, invalid: hasError, className }) }
+---
+
+<fieldset {...attrs}>
+  {
+    hasLegend && (
+      <legend class="x-choice-group__legend">
+        {Astro.slots.has('legend') ? <slot name="legend" /> : legend}
+        {required && <span class="x-field__required" aria-hidden="true">*</span>}
+      </legend>
+    )
+  }
+  <div class="x-choice-group__options"><slot /></div>
+  {
+    hasDescription && (
+      <p class="x-field__help" id={ids.help}>
+        {Astro.slots.has('description') ? <slot name="description" /> : description}
+      </p>
+    )
+  }
+  {
+    hasError && (
+      <p class="x-field__error" id={ids.error}>
+        {Astro.slots.has('error') ? <slot name="error" /> : error}
+      </p>
+    )
+  }
+</fieldset>

package/dist/components/field/checkbox.astro

@@ -0,0 +1,17 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { choiceClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'input'>, 'class' | 'type' | 'role'> & {
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+const input = { ...rest, type: 'checkbox' as const, class: 'x-checkbox__input' }
+---
+
+<label class={choiceClass('checkbox', { className })}>
+  <input {...input} />
+  <span class="x-checkbox__label"><slot /></span>
+</label>

package/dist/components/field/field.astro

@@ -0,0 +1,51 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { fieldClass, fieldControlAttrs, fieldIds, wireControlHtml } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class' | 'id'> & {
+  /** Id of the control inside. Help and error text get `${id}-help` and `${id}-error`. */
+  id: string
+  label?: string
+  description?: string
+  error?: string
+  required?: boolean
+  class?: string
+}
+
+const { id, label, description, error, required, class: className, ...rest } = Astro.props
+const hasLabel = Boolean(label) || Astro.slots.has('label')
+const hasDescription = Boolean(description) || Astro.slots.has('description')
+const hasError = Boolean(error) || Astro.slots.has('error')
+const ids = fieldIds(id)
+const control = wireControlHtml(
+  await Astro.slots.render('default'),
+  fieldControlAttrs({ id, hasDescription, hasError, required }),
+)
+---
+
+<div {...{ ...rest, class: fieldClass({ invalid: hasError, className }) }}>
+  {
+    hasLabel && (
+      <label class="x-field__label" for={id}>
+        {Astro.slots.has('label') ? <slot name="label" /> : label}
+        {required && <span class="x-field__required" aria-hidden="true">*</span>}
+      </label>
+    )
+  }
+  <Fragment set:html={control} />
+  {
+    hasDescription && (
+      <p class="x-field__help" id={ids.help}>
+        {Astro.slots.has('description') ? <slot name="description" /> : description}
+      </p>
+    )
+  }
+  {
+    hasError && (
+      <p class="x-field__error" id={ids.error}>
+        {Astro.slots.has('error') ? <slot name="error" /> : error}
+      </p>
+    )
+  }
+</div>