@xaroth.nl/design 0.1.0

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './tooltip.css';
+import { cloneElement, isValidElement, useEffect, useRef, useState, } from 'react';
+import { describedBy, tooltipClass, tooltipId } from "./index.js";
+export function Tooltip({ id, text, placement, open, className, children, onPointerLeave, onFocus, onBlur, ...rest }) {
+    const ref = useRef(null);
+    const [dismissed, setDismissed] = useState(false);
+    // Escape hides the shown tooltip (WCAG 1.4.13) until the pointer leaves or focus moves in or out.
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape' && ref.current?.matches(':hover, :has(:focus-visible)')) {
+                setDismissed(true);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, []);
+    const trigger = isValidElement(children)
+        ? cloneElement(children, {
+            'aria-describedby': describedBy(children.props['aria-describedby'], id),
+        })
+        : children;
+    return (_jsxs("span", { ...rest, ref: ref, onPointerLeave: (event) => {
+            setDismissed(false);
+            onPointerLeave?.(event);
+        }, onFocus: (event) => {
+            setDismissed(false);
+            onFocus?.(event);
+        }, onBlur: (event) => {
+            setDismissed(false);
+            onBlur?.(event);
+        }, className: tooltipClass({ placement, open, dismissed, className }), children: [trigger, _jsx("span", { className: "x-tooltip__bubble", role: "tooltip", id: tooltipId(id), children: text })] }));
+}

package/dist/config.d.ts

@@ -0,0 +1,9 @@
+export declare const themes: readonly [{
+    readonly id: "xaroth";
+    readonly label: "xaroth.nl";
+}, {
+    readonly id: "eve-online";
+    readonly label: "eve-online.tools";
+}];
+export type Theme = (typeof themes)[number]['id'];
+export declare const themeIds: readonly Theme[];

package/dist/config.js

@@ -0,0 +1,6 @@
+// Single source for the theme list: scripts, package exports, Storybook and the harness read it.
+export const themes = [
+    { id: 'xaroth', label: 'xaroth.nl' },
+    { id: 'eve-online', label: 'eve-online.tools' },
+];
+export const themeIds = themes.map((t) => t.id);

package/dist/env.d.ts

@@ -0,0 +1,2 @@
+// Components import their own stylesheet; the build rewrites these to the compiled .css.
+declare module '*.scss'

package/dist/html.d.ts

@@ -0,0 +1,37 @@
+export type Attr = {
+    /** Lowercased, for matching. */
+    name: string;
+    /** Decoded value; `true` for a bare attribute. */
+    value: string | true;
+    /** Source text, written back unchanged when the attribute is kept. */
+    raw: string;
+};
+export type Tag = {
+    /** Lowercased tag name. */
+    name: string;
+    attrs: Attr[];
+    selfClosing: boolean;
+    /** Offsets of the whole start tag in the scanned html. */
+    start: number;
+    end: number;
+    /** Tag name as written. */
+    rawName: string;
+};
+/** `null` removes the attribute, `undefined` leaves it as it is, `true` writes it bare. */
+export type AttrChanges = Record<string, string | true | null | undefined>;
+export declare const escapeAttr: (value: string) => string;
+/** First start tag, in document order, that `match` accepts. Looks inside wrappers that do not match. */
+export declare function findTag(html: string, match: (tag: Tag) => boolean): Tag | undefined;
+export declare const getAttr: (tag: Tag, name: string) => string | true | undefined;
+/** Writes the start tag back. Changed attributes move to the end, after the ones the tag already had. */
+export declare function writeTag(tag: Tag, changes?: AttrChanges): string;
+/** Replaces `tag` (found in `html`) with `changes` applied. */
+export declare const replaceTag: (html: string, tag: Tag, changes: AttrChanges) => string;
+/** Applies `changes(tag)` to the first tag that `match` accepts. Returns `html` unchanged when none does. */
+export declare function rewriteTag(html: string, match: (tag: Tag) => boolean, changes: (tag: Tag) => AttrChanges): string;
+/** Space separated token lists (ids for aria-describedby) joined in order without repeats. */
+export declare const mergeTokens: (...lists: (string | true | false | null | undefined)[]) => string;
+/** Drops undefined keys, so spreading recipe attributes after user ones never erases a user value. */
+export declare const defined: <T extends Record<string, unknown>>(attrs: T) => Partial<T>;
+/** True the first time per `scope` (the page's request) and `key`, for markup a page needs only once. */
+export declare function firstOnPage(scope: object, key: string): boolean;

package/dist/html.js

@@ -0,0 +1,126 @@
+// Astro cannot pass props to slotted children, so parts that must wire their child rewrite one tag of the rendered
+// slot. This is a scanner for that markup, not a full HTML parser.
+// Their content is text (or inert), so tags inside are never the target.
+const opaque = new Set(['script', 'style', 'template', 'textarea', 'title']);
+const tagName = /[a-zA-Z][^\s/>]*/y;
+const attr = /([^\s"'>/=][^\s"'>/=]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/y;
+const entities = { amp: '&', quot: '"', apos: "'", lt: '<', gt: '>' };
+const decode = (value) => value.replace(/&(#x[\da-f]+|#\d+|[a-z]+);/gi, (entity, body) => {
+    if (body[0] !== '#') {
+        return entities[body.toLowerCase()] ?? entity;
+    }
+    const code = body[1] === 'x' || body[1] === 'X' ? parseInt(body.slice(2), 16) : parseInt(body.slice(1), 10);
+    return String.fromCodePoint(code);
+});
+export const escapeAttr = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+// Reads the start tag whose `<` is at `lt`, or undefined when `<` does not open a tag there.
+const readTag = (html, lt) => {
+    tagName.lastIndex = lt + 1;
+    const name = tagName.exec(html);
+    if (!name) {
+        return undefined;
+    }
+    const attrs = [];
+    let i = tagName.lastIndex;
+    while (i < html.length) {
+        const char = html[i];
+        if (/\s/.test(char)) {
+            i++;
+        }
+        else if (char === '>') {
+            return { name: name[0].toLowerCase(), rawName: name[0], attrs, selfClosing: false, start: lt, end: i + 1 };
+        }
+        else if (html.startsWith('/>', i)) {
+            return { name: name[0].toLowerCase(), rawName: name[0], attrs, selfClosing: true, start: lt, end: i + 2 };
+        }
+        else if (char === '/') {
+            i++;
+        }
+        else {
+            attr.lastIndex = i;
+            const found = attr.exec(html);
+            if (!found) {
+                i++;
+                continue;
+            }
+            const value = found[2] ?? found[3] ?? found[4];
+            attrs.push({ name: found[1].toLowerCase(), value: value === undefined ? true : decode(value), raw: found[0] });
+            i = attr.lastIndex;
+        }
+    }
+    return undefined;
+};
+/** First start tag, in document order, that `match` accepts. Looks inside wrappers that do not match. */
+export function findTag(html, match) {
+    const lower = html.toLowerCase();
+    let i = 0;
+    while (i < html.length) {
+        const lt = html.indexOf('<', i);
+        if (lt === -1) {
+            return undefined;
+        }
+        if (html.startsWith('<!--', lt)) {
+            const close = html.indexOf('-->', lt + 4);
+            i = close === -1 ? html.length : close + 3;
+            continue;
+        }
+        if (html[lt + 1] === '/' || html[lt + 1] === '!' || html[lt + 1] === '?') {
+            const close = html.indexOf('>', lt);
+            i = close === -1 ? html.length : close + 1;
+            continue;
+        }
+        const tag = readTag(html, lt);
+        if (!tag) {
+            i = lt + 1;
+            continue;
+        }
+        if (match(tag)) {
+            return tag;
+        }
+        i = tag.end;
+        if (opaque.has(tag.name) && !tag.selfClosing) {
+            const close = lower.indexOf(`</${tag.name}`, i);
+            i = close === -1 ? html.length : close;
+        }
+    }
+    return undefined;
+}
+export const getAttr = (tag, name) => tag.attrs.find((a) => a.name === name)?.value;
+/** Writes the start tag back. Changed attributes move to the end, after the ones the tag already had. */
+export function writeTag(tag, changes = {}) {
+    const entries = Object.entries(changes).filter(([, value]) => value !== undefined);
+    const touched = new Set(entries.map(([name]) => name.toLowerCase()));
+    const kept = tag.attrs.filter((a) => !touched.has(a.name)).map((a) => a.raw);
+    const added = entries
+        .filter(([, value]) => value !== null)
+        .map(([name, value]) => (value === true ? name : `${name}="${escapeAttr(value)}"`));
+    const attrs = [...kept, ...added].map((a) => ` ${a}`).join('');
+    return `<${tag.rawName}${attrs}${tag.selfClosing ? ' />' : '>'}`;
+}
+/** Replaces `tag` (found in `html`) with `changes` applied. */
+export const replaceTag = (html, tag, changes) => html.slice(0, tag.start) + writeTag(tag, changes) + html.slice(tag.end);
+/** Applies `changes(tag)` to the first tag that `match` accepts. Returns `html` unchanged when none does. */
+export function rewriteTag(html, match, changes) {
+    const tag = findTag(html, match);
+    return tag ? replaceTag(html, tag, changes(tag)) : html;
+}
+/** Space separated token lists (ids for aria-describedby) joined in order without repeats. */
+export const mergeTokens = (...lists) => [
+    ...new Set(lists
+        .filter((list) => typeof list === 'string')
+        .flatMap((list) => list.split(/\s+/))
+        .filter(Boolean)),
+].join(' ');
+/** Drops undefined keys, so spreading recipe attributes after user ones never erases a user value. */
+export const defined = (attrs) => Object.fromEntries(Object.entries(attrs).filter(([, value]) => value !== undefined));
+const claimed = new WeakMap();
+/** True the first time per `scope` (the page's request) and `key`, for markup a page needs only once. */
+export function firstOnPage(scope, key) {
+    const keys = claimed.get(scope) ?? new Set();
+    claimed.set(scope, keys);
+    if (keys.has(key)) {
+        return false;
+    }
+    keys.add(key);
+    return true;
+}

package/dist/parts.d.ts

@@ -0,0 +1,27 @@
+export * from './components/alert/index.ts';
+export * from './components/avatar/index.ts';
+export * from './components/badge/index.ts';
+export * from './components/breadcrumbs/index.ts';
+export * from './components/button/index.ts';
+export * from './components/card/index.ts';
+export * from './components/description-list/index.ts';
+export * from './components/divider/index.ts';
+export * from './components/empty-state/index.ts';
+export * from './components/field/index.ts';
+export * from './components/filters/index.ts';
+export * from './components/footer/index.ts';
+export * from './components/header/index.ts';
+export * from './components/icon/index.ts';
+export * from './components/layout/index.ts';
+export * from './components/page-head/index.ts';
+export * from './components/pagination/index.ts';
+export * from './components/panel/index.ts';
+export * from './components/progress/index.ts';
+export * from './components/prose/index.ts';
+export * from './components/stat/index.ts';
+export * from './components/table/index.ts';
+export * from './components/tabs/index.ts';
+export * from './components/tag/index.ts';
+export * from './components/timeline/index.ts';
+export * from './components/tooltip/index.ts';
+export * from './config.ts';

package/dist/parts.js

@@ -0,0 +1,28 @@
+// Generated by scripts/generate.ts. Do not edit.
+export * from "./components/alert/index.js";
+export * from "./components/avatar/index.js";
+export * from "./components/badge/index.js";
+export * from "./components/breadcrumbs/index.js";
+export * from "./components/button/index.js";
+export * from "./components/card/index.js";
+export * from "./components/description-list/index.js";
+export * from "./components/divider/index.js";
+export * from "./components/empty-state/index.js";
+export * from "./components/field/index.js";
+export * from "./components/filters/index.js";
+export * from "./components/footer/index.js";
+export * from "./components/header/index.js";
+export * from "./components/icon/index.js";
+export * from "./components/layout/index.js";
+export * from "./components/page-head/index.js";
+export * from "./components/pagination/index.js";
+export * from "./components/panel/index.js";
+export * from "./components/progress/index.js";
+export * from "./components/prose/index.js";
+export * from "./components/stat/index.js";
+export * from "./components/table/index.js";
+export * from "./components/tabs/index.js";
+export * from "./components/tag/index.js";
+export * from "./components/timeline/index.js";
+export * from "./components/tooltip/index.js";
+export * from "./config.js";

package/dist/react.d.ts

@@ -0,0 +1,27 @@
+export * from './parts.ts';
+export * from './components/alert/alert.tsx';
+export * from './components/avatar/avatar.tsx';
+export * from './components/badge/badge.tsx';
+export * from './components/breadcrumbs/breadcrumbs.tsx';
+export * from './components/button/button.tsx';
+export * from './components/card/card.tsx';
+export * from './components/description-list/description-list.tsx';
+export * from './components/divider/divider.tsx';
+export * from './components/empty-state/empty-state.tsx';
+export * from './components/field/field.tsx';
+export * from './components/filters/filters.tsx';
+export * from './components/footer/footer.tsx';
+export * from './components/header/header.tsx';
+export * from './components/icon/icon.tsx';
+export * from './components/layout/layout.tsx';
+export * from './components/page-head/page-head.tsx';
+export * from './components/pagination/pagination.tsx';
+export * from './components/panel/panel.tsx';
+export * from './components/progress/progress.tsx';
+export * from './components/prose/prose.tsx';
+export * from './components/stat/stat.tsx';
+export * from './components/table/table.tsx';
+export * from './components/tabs/tabs.tsx';
+export * from './components/tag/tag.tsx';
+export * from './components/timeline/timeline.tsx';
+export * from './components/tooltip/tooltip.tsx';

package/dist/react.js

@@ -0,0 +1,28 @@
+// Generated by scripts/generate.ts. Do not edit.
+export * from "./parts.js";
+export * from "./components/alert/alert.js";
+export * from "./components/avatar/avatar.js";
+export * from "./components/badge/badge.js";
+export * from "./components/breadcrumbs/breadcrumbs.js";
+export * from "./components/button/button.js";
+export * from "./components/card/card.js";
+export * from "./components/description-list/description-list.js";
+export * from "./components/divider/divider.js";
+export * from "./components/empty-state/empty-state.js";
+export * from "./components/field/field.js";
+export * from "./components/filters/filters.js";
+export * from "./components/footer/footer.js";
+export * from "./components/header/header.js";
+export * from "./components/icon/icon.js";
+export * from "./components/layout/layout.js";
+export * from "./components/page-head/page-head.js";
+export * from "./components/pagination/pagination.js";
+export * from "./components/panel/panel.js";
+export * from "./components/progress/progress.js";
+export * from "./components/prose/prose.js";
+export * from "./components/stat/stat.js";
+export * from "./components/table/table.js";
+export * from "./components/tabs/tabs.js";
+export * from "./components/tag/tag.js";
+export * from "./components/timeline/timeline.js";
+export * from "./components/tooltip/tooltip.js";

package/dist/scss/_chamfer.scss

@@ -0,0 +1,37 @@
+@use 'sass:math';
+
+// Cut top-left and bottom-right corners.
+@function shape($c) {
+  @return polygon(
+    $c 0,
+    100% 0,
+    100% calc(100% - #{$c}),
+    calc(100% - #{$c}) 100%,
+    0 100%,
+    0 $c
+  );
+}
+
+// The same outline as a ring of width $w, for drawing edges along the cut. A 45 degree edge moved inward by $w
+// meets the straight sides at $c + $w * (sqrt(2) - 1).
+@function ring($c, $w) {
+  $d: $w * (math.sqrt(2) - 1);
+
+  @return polygon(
+    evenodd,
+    $c 0,
+    100% 0,
+    100% calc(100% - #{$c}),
+    calc(100% - #{$c}) 100%,
+    0 100%,
+    0 $c,
+    $c 0,
+    calc(#{$c} + #{$d}) $w,
+    calc(100% - #{$w}) $w,
+    calc(100% - #{$w}) calc(100% - #{$c} - #{$d}),
+    calc(100% - #{$c} - #{$d}) calc(100% - #{$w}),
+    $w calc(100% - #{$w}),
+    $w calc(#{$c} + #{$d}),
+    calc(#{$c} + #{$d}) $w
+  );
+}

package/dist/scss/_layers.scss

@@ -0,0 +1,2 @@
+// Declared first in every entry so order holds no matter which file loads first. Site CSS outside layers always wins.
+@layer x.reset, x.core, x.theme, x.utility;

package/dist/scss/_theme.scss

@@ -0,0 +1,15 @@
+// A theme applies on the page root when the site sets no data-x-theme, or inside [data-x-theme='name'].
+// Docs showing several themes set data-x-theme on <html> (any value) so the root default stops matching.
+@mixin scope($name) {
+  :where(:root:not([data-x-theme])),
+  [data-x-theme='#{$name}'] {
+    @content;
+  }
+}
+
+// Theme-specific part styling, scoped the same way so two loaded themes never style each other's parts.
+@mixin parts($name) {
+  :where(:root:not([data-x-theme]), [data-x-theme='#{$name}']) {
+    @content;
+  }
+}