plass-ui 0.0.1 → 1.0.0

package/dist/components/highlight/PlHighlight.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { transitionClasses } from '../../internal/styles.js';
+/**
+ * There is no `size` here on purpose, and it is the one prop a reader will look
+ * for. A mark sits inside running text and has to be the size of the text it is
+ * inside; a `size` prop would only offer ways to be wrong.
+ */
+const variantClasses = {
+    solid: '[background-image:var(--p-fill)] text-(--p-on-solid)',
+    glass: 'border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]',
+    // Both properties are still set. A `<mark>` arrives from the browser's own
+    // stylesheet with a yellow background and black ink, and "no surface" has to
+    // be said out loud or it turns into the UA's surface.
+    ghost: 'bg-transparent text-(--p-accent)'
+};
+const weightClasses = {
+    regular: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold'
+};
+/** Letters, digits and underscores in any script — what `wholeWord` counts. */
+const wordCharacter = /[\p{L}\p{N}_]/u;
+/** The characters a regular expression treats as syntax. */
+function escapeRegExp(text) {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/**
+ * Turns the `query` prop into one expression, or `null` when there is nothing to
+ * look for — an empty search box should leave the text exactly as it was, not
+ * mark every character in it.
+ *
+ * Terms are sorted longest first because alternation in a regular expression is
+ * first-match-wins: without it `['data', 'database']` would mark `data` and
+ * stop, leaving `base` outside the mark.
+ */
+function buildPattern(query, caseSensitive) {
+    if (query instanceof RegExp) {
+        // Always a copy, even when the flags are already right. A global regular
+        // expression carries a `lastIndex` that `markString` moves, and mutating one
+        // the caller is holding — and may be matching with elsewhere — is not this
+        // component's to do.
+        return new RegExp(query.source, query.global ? query.flags : `${query.flags}g`);
+    }
+    const terms = (Array.isArray(query) ? query : [query])
+        .map((term) => term.trim())
+        .filter(Boolean)
+        .sort((a, b) => b.length - a.length);
+    if (terms.length === 0) {
+        return null;
+    }
+    return new RegExp(terms.map(escapeRegExp).join('|'), caseSensitive ? 'gu' : 'giu');
+}
+/**
+ * Whether a match is a whole word.
+ *
+ * Checked here rather than with a lookbehind in the pattern, because lookbehind
+ * is the one regular-expression feature this library would have to think about
+ * shipping — Safari only grew it in 16.4. Two character tests cost nothing and
+ * work everywhere.
+ */
+function isWholeWord(text, start, end) {
+    const before = start > 0 ? text[start - 1] : '';
+    const after = end < text.length ? text[end] : '';
+    return !wordCharacter.test(before) && !wordCharacter.test(after);
+}
+/**
+ * Splits one string into plain runs and marked ones.
+ *
+ * Returns the string itself when nothing matched, so an unmatched text node
+ * stays a text node rather than becoming an array of one.
+ */
+function markString(text, pattern, wholeWord, mark) {
+    pattern.lastIndex = 0;
+    const parts = [];
+    let cursor = 0;
+    let match;
+    while ((match = pattern.exec(text)) !== null) {
+        // A pattern that can match nothing — `/x*/` — would otherwise never advance.
+        if (match[0] === '') {
+            pattern.lastIndex += 1;
+            continue;
+        }
+        const start = match.index;
+        const end = start + match[0].length;
+        if (wholeWord && !isWholeWord(text, start, end)) {
+            continue;
+        }
+        if (start > cursor) {
+            parts.push(text.slice(cursor, start));
+        }
+        parts.push(mark(match[0], `${start}`));
+        cursor = end;
+    }
+    if (parts.length === 0) {
+        return text;
+    }
+    if (cursor < text.length) {
+        parts.push(text.slice(cursor));
+    }
+    return parts;
+}
+/**
+ * Walks the tree, marking the text in it and leaving everything else alone.
+ *
+ * The alternative — requiring `children` to be a string — is what most libraries
+ * do, and it fails on the first search result that has a `<strong>` in it. An
+ * element is cloned with its children marked, which keeps its type, its props
+ * and its key; anything that is not a string, a number, an array or an element
+ * with children is returned untouched.
+ */
+function markNode(node, pattern, wholeWord, mark) {
+    if (typeof node === 'string') {
+        return markString(node, pattern, wholeWord, mark);
+    }
+    if (typeof node === 'number') {
+        return markString(String(node), pattern, wholeWord, mark);
+    }
+    if (Array.isArray(node)) {
+        return React.Children.map(node, (child) => markNode(child, pattern, wholeWord, mark));
+    }
+    if (React.isValidElement(node)) {
+        const children = node.props.children;
+        // A component whose children are a render prop, and every void element:
+        // there is no text in either, and cloning one with a `children` it never
+        // declared is how an `<input>` ends up with a child.
+        if (children === undefined || typeof children === 'function') {
+            return node;
+        }
+        return React.cloneElement(node, undefined, markNode(children, pattern, wholeWord, mark));
+    }
+    return node;
+}
+/**
+ * Marks the words a reader is looking for, inside text they were already
+ * reading.
+ *
+ * The component is the search, not just the styling: `query` is what a search
+ * box holds, and everything about *how* the matching is done — case, whole
+ * words, a regular expression — is a prop rather than something a caller has to
+ * pre-compute into a list of offsets.
+ *
+ * The mark is a real `<mark>`, which is the element for "text of relevance to
+ * the reader" and is announced as such. That has one consequence worth knowing:
+ * marking eleven words in a paragraph tells a screen reader that eleven things
+ * are important, which is a way of saying nothing. A highlight is for a handful
+ * of matches.
+ *
+ * Nothing here is stateful and nothing measures — the whole component is a pure
+ * function of `children` and `query`, so it re-marks on its own the moment the
+ * search box changes.
+ */
+export const PlHighlight = /* @__PURE__ */ React.forwardRef(function PlHighlight({ query, variant = 'solid', color = 'warning', caseSensitive = false, wholeWord = false, underline = false, weight, className, style, children, ...props }, ref) {
+    const pattern = React.useMemo(() => buildPattern(query, caseSensitive), [query, caseSensitive]);
+    const markClasses = [
+        // A hair of padding so the surface does not sit flush against the letters,
+        // and the same hair back out as a negative margin so the marked line is the
+        // same length as it was before. A mark must not move the text around it.
+        '-mx-0.5 rounded-[0.25rem] px-0.5',
+        // A mark that wraps across two lines gets its corners on both fragments
+        // rather than one long box with two square ends.
+        'box-decoration-clone',
+        variantClasses[variant],
+        // `decoration-2` and the offset so the rule sits under the descenders rather
+        // than through them, which is the whole difference between an underline and
+        // a strikethrough that missed.
+        underline ? 'underline decoration-2 underline-offset-2' : '',
+        weight ? weightClasses[weight] : '',
+        transitionClasses
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const marked = pattern
+        ? markNode(children, pattern, wholeWord, (matched, key) => (_jsx("mark", { className: markClasses, children: matched }, key)))
+        : children;
+    return (_jsx("span", { ref: ref, className: className, style: {
+            '--p-fill': `var(--plass-${color}-fill)`,
+            '--p-on-solid': `var(--plass-${color}-on-solid)`,
+            '--p-accent': `var(--plass-${color}-accent)`,
+            '--p-soft': `var(--plass-${color}-soft)`,
+            '--p-line': `var(--plass-${color}-line)`,
+            ...style
+        }, ...props, children: marked }));
+});

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

@@ -0,0 +1,2 @@
+export { PlHighlight } from './PlHighlight.js';
+export type { PlHighlightProps } from './PlHighlight.js';

package/dist/components/highlight/index.js

@@ -0,0 +1 @@
+export { PlHighlight } from './PlHighlight.js';

package/dist/components/hot-keys/PlHotKeys.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * Which keyboard the shortcut is being read on.
+ *
+ * `auto` asks the browser, which is right for a shortcut a reader is about to
+ * press. The three explicit values are for documentation that has to name a
+ * platform rather than the reader's own — a support page describing the Windows
+ * build, a table comparing the two.
+ */
+export type PlHotKeysOS = 'auto' | 'mac' | 'windows' | 'linux';
+/** Four keys laid out as an inverted T: one on top, three beneath. */
+export interface PlHotKeysCluster {
+    up: string;
+    left: string;
+    down: string;
+    right: string;
+}
+export interface PlHotKeysProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
+    /**
+     * The keys, innermost punctuation and all.
+     *
+     * A string is split on `+` — `'Mod+Shift+P'` — which covers everything except
+     * a shortcut whose key *is* a plus. For that one, pass the array form:
+     * `keys={['Ctrl', '+']}`.
+     */
+    keys?: string | string[];
+    /**
+     * Draws the four movement keys as an inverted T instead of an inline combo —
+     * `WASD`, or the arrow cluster. Takes precedence over `keys`.
+     *
+     * It is its own prop rather than a `layout` on `keys`, because the two are
+     * different objects: a combo is keys pressed *together*, and a cluster is four
+     * keys pressed one at a time whose arrangement on the keyboard is the point.
+     */
+    cluster?: PlHotKeysCluster;
+    /**
+     * Which keyboard to name the modifiers for.
+     * @default 'auto'
+     */
+    os?: PlHotKeysOS;
+    /**
+     * What goes between two keys. Omit it for the platform's own convention: a `+`
+     * on Windows and Linux, and nothing at all on macOS, where a shortcut is
+     * written as a run of symbols — `⇧⌘P`, never `⇧+⌘+P`.
+     */
+    separator?: React.ReactNode;
+    /**
+     * Drop shadow depth. `0` is the default. A key cap already has a lip under it
+     * — this is a picture of a key, not a key, and raising it off the page as well
+     * is one depth cue too many.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+}
+export interface PlKbdProps extends Pick<PlassStyleProps, 'variant' | 'size' | 'density'>, Omit<React.ComponentPropsWithoutRef<'kbd'>, 'color'> {
+    children?: React.ReactNode;
+}
+/**
+ * One key cap.
+ *
+ * Exported so a caller can compose a layout this component does not draw — a
+ * numeric keypad, a row of function keys — out of the same object the shortcut
+ * strip is made of.
+ *
+ * It reads its colour slots from whatever set them, which is the `PlHotKeys`
+ * around it in the common case. On its own it falls back to the page's own ink,
+ * so a bare `<PlKbd>` still draws.
+ */
+export declare const PlKbd: React.ForwardRefExoticComponent<PlKbdProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A keyboard key, a combination of them, or the four movement keys as they sit
+ * on the keyboard.
+ *
+ * Two things make this more than a styled `<kbd>`, and both are about the label
+ * rather than the box around it.
+ *
+ * The first is `Mod`. A shortcut written as `Ctrl+K` is wrong for every Mac
+ * reader and one written as `⌘K` is wrong for everybody else, so the token that
+ * means "the modifier shortcuts are built on" resolves per platform — and `os`
+ * is there for the pages that have to name a platform rather than the reader's.
+ *
+ * The second is that `⌘` is not a word. A screen reader reads it as "place of
+ * interest sign", so every key drawn as a glyph carries its name beside it, in
+ * the clipped box `srOnlyClasses` describes. What is announced is "Command K",
+ * which is what the shortcut is called.
+ *
+ * The keys are real `<kbd>` elements; the wrapper around them is a `<span>`.
+ * Nesting `<kbd>` inside `<kbd>` is allowed and would also be defensible, but a
+ * `kbd` wrapper is a second box for a host stylesheet to reach into for no gain
+ * — the semantics are carried by the keys themselves either way.
+ */
+export declare const PlHotKeys: React.ForwardRefExoticComponent<PlHotKeysProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/hot-keys/PlHotKeys.js

@@ -0,0 +1,294 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { controlHeightClasses, controlSlots, controlTextClasses, glassClasses, paddingXClasses, radiusClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
+const word = (text) => ({ symbol: text, name: text });
+/**
+ * One entry per key that is spelled differently somewhere, keyed by the token
+ * with its case and spaces taken off.
+ *
+ * The aliases are deliberate and not generosity: `Cmd`, `Command` and `Meta` are
+ * three names one key already has, and a component that accepted only one of
+ * them would be a component every caller has to look up.
+ *
+ * `Mod` is the entry the rest exist for. It is the only token whose *meaning*
+ * changes with the platform rather than just its spelling — the modifier a
+ * shortcut is actually built on, which is Command on a Mac and Control
+ * everywhere else. Writing `Ctrl` and hoping is what makes a documentation page
+ * wrong for half its readers.
+ */
+const keyLabels = {
+    mod: {
+        mac: { symbol: '⌘', name: 'Command' },
+        windows: word('Ctrl'),
+        linux: word('Ctrl')
+    },
+    meta: {
+        mac: { symbol: '⌘', name: 'Command' },
+        windows: word('Win'),
+        linux: word('Super')
+    },
+    ctrl: {
+        mac: { symbol: '⌃', name: 'Control' },
+        windows: word('Ctrl'),
+        linux: word('Ctrl')
+    },
+    alt: {
+        mac: { symbol: '⌥', name: 'Option' },
+        windows: word('Alt'),
+        linux: word('Alt')
+    },
+    shift: {
+        mac: { symbol: '⇧', name: 'Shift' },
+        windows: word('Shift'),
+        linux: word('Shift')
+    },
+    enter: {
+        mac: { symbol: '↩', name: 'Enter' },
+        windows: word('Enter'),
+        linux: word('Enter')
+    },
+    tab: {
+        mac: { symbol: '⇥', name: 'Tab' },
+        windows: word('Tab'),
+        linux: word('Tab')
+    },
+    escape: {
+        mac: { symbol: '⎋', name: 'Escape' },
+        windows: word('Esc'),
+        linux: word('Esc')
+    },
+    backspace: {
+        mac: { symbol: '⌫', name: 'Backspace' },
+        windows: word('Backspace'),
+        linux: word('Backspace')
+    },
+    delete: {
+        mac: { symbol: '⌦', name: 'Delete' },
+        windows: word('Del'),
+        linux: word('Del')
+    },
+    capslock: {
+        mac: { symbol: '⇪', name: 'Caps Lock' },
+        windows: word('Caps Lock'),
+        linux: word('Caps Lock')
+    }
+};
+/** The tokens that name one key by more than one word. */
+const keyAliases = {
+    cmdorctrl: 'mod',
+    commandorcontrol: 'mod',
+    cmd: 'meta',
+    command: 'meta',
+    super: 'meta',
+    win: 'meta',
+    windows: 'meta',
+    control: 'ctrl',
+    option: 'alt',
+    opt: 'alt',
+    return: 'enter',
+    esc: 'escape',
+    del: 'delete',
+    caps: 'capslock'
+};
+/**
+ * The keys drawn as arrows on every platform, not just on a Mac. An arrow is not
+ * a Mac convention — it is what is printed on the key.
+ */
+const arrowLabels = {
+    up: { symbol: '↑', name: 'Arrow up' },
+    down: { symbol: '↓', name: 'Arrow down' },
+    left: { symbol: '←', name: 'Arrow left' },
+    right: { symbol: '→', name: 'Arrow right' },
+    arrowup: { symbol: '↑', name: 'Arrow up' },
+    arrowdown: { symbol: '↓', name: 'Arrow down' },
+    arrowleft: { symbol: '←', name: 'Arrow left' },
+    arrowright: { symbol: '→', name: 'Arrow right' }
+};
+/** Resolves one token into what to draw and what to announce. */
+function labelFor(token, os) {
+    const normalized = token.toLowerCase().replace(/[\s_-]/g, '');
+    const canonical = keyAliases[normalized] ?? normalized;
+    const arrow = arrowLabels[canonical];
+    if (arrow) {
+        return arrow;
+    }
+    const known = keyLabels[canonical];
+    if (known) {
+        return known[os];
+    }
+    // Everything else is printed as it was written, with the one courtesy that a
+    // single letter is capitalised: `keys="mod+k"` should draw a K, because that
+    // is what is on the key.
+    return word(token.length === 1 ? token.toUpperCase() : token);
+}
+/**
+ * Splits the string form. Empty segments are what `'Ctrl++'` leaves behind, and
+ * dropping them is why the array form exists for that case.
+ */
+function tokenize(keys) {
+    if (Array.isArray(keys)) {
+        return keys.map((key) => key.trim()).filter(Boolean);
+    }
+    return keys
+        .split('+')
+        .map((key) => key.trim())
+        .filter(Boolean);
+}
+/**
+ * What the browser says it is running on.
+ *
+ * `userAgentData.platform` is the modern spelling and `navigator.platform` the
+ * deprecated one that every browser still answers; the user agent string is the
+ * last resort. All three are matched at once because the question here is coarse
+ * — which of three key caps to print — and getting it slightly wrong is a label,
+ * not a bug.
+ */
+function detectOS() {
+    if (typeof navigator === 'undefined') {
+        return 'windows';
+    }
+    const data = navigator.userAgentData;
+    const haystack = `${data?.platform ?? ''} ${navigator.platform ?? ''} ${navigator.userAgent ?? ''}`;
+    if (/mac|iphone|ipad|ipod/i.test(haystack)) {
+        return 'mac';
+    }
+    if (/win/i.test(haystack)) {
+        return 'windows';
+    }
+    return 'linux';
+}
+/** The platform never changes under a running page, so there is nothing to subscribe to. */
+function subscribe() {
+    return () => { };
+}
+function serverOS() {
+    return 'windows';
+}
+/**
+ * `useSyncExternalStore` rather than `useEffect` plus state, and rather than
+ * reading `navigator` during render.
+ *
+ * Reading it during render is a hydration mismatch waiting to happen: the server
+ * has no `navigator`, so it would render `Ctrl` and the client would render `⌘`
+ * into the same markup. This hook is the one API that tells React the two are
+ * *meant* to differ — it hydrates with the server's answer and re-renders with
+ * the browser's, which is exactly the sequence a Mac reader sees.
+ */
+function useDetectedOS() {
+    return React.useSyncExternalStore(subscribe, detectOS, serverOS);
+}
+/**
+ * A key cap sits one step down the control ladder: it is a token inside a line
+ * of text, not a control the line lines up against.
+ */
+const keyScale = {
+    xs: 'xs',
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg'
+};
+/**
+ * The three materials, and the one place in the library where a filled surface
+ * gets a hard-edged shadow directly under it.
+ *
+ * That lip is not the gloss line the design language rules out — a gloss line is
+ * a highlight *on* the surface, claiming a lamp. This is a two-pixel offset
+ * shadow *under* it, which is the one thing every printed manual has used to
+ * mean "this is a key you press". A picture of a key is allowed to look like a
+ * key; a control is not allowed to look like a picture of one.
+ *
+ * `glass` is the default, because a hairline box is what a key cap has looked
+ * like in every manual ever printed. Its edge is `--plass-border` rather than
+ * the sheet's white hairline, or a cap set on a light card would have no edge.
+ */
+const variantClasses = {
+    solid: /* @__PURE__ */ [
+        'text-(--p-on-solid) [background-image:var(--p-fill)]',
+        '[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]'
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        glassClasses,
+        'border text-(--p-accent) bg-(--plass-glass)',
+        '[border-color:var(--plass-border)]',
+        '[box-shadow:var(--p-elev),0_2px_0_0_var(--plass-shadow-ambient)]'
+    ].join(' '),
+    ghost: 'text-(--p-accent) bg-(--p-soft)'
+};
+/** The width a single-letter cap is held to, so `⌘` and `K` are the same square. */
+const keyMinWidthClasses = {
+    xs: 'min-w-6',
+    sm: 'min-w-8',
+    md: 'min-w-10',
+    lg: 'min-w-12',
+    xl: 'min-w-14'
+};
+/**
+ * One key cap.
+ *
+ * Exported so a caller can compose a layout this component does not draw — a
+ * numeric keypad, a row of function keys — out of the same object the shortcut
+ * strip is made of.
+ *
+ * It reads its colour slots from whatever set them, which is the `PlHotKeys`
+ * around it in the common case. On its own it falls back to the page's own ink,
+ * so a bare `<PlKbd>` still draws.
+ */
+export const PlKbd = /* @__PURE__ */ React.forwardRef(function PlKbd({ variant = 'glass', size = 'md', density = 'compact', className, children, ...props }, ref) {
+    const step = keyScale[size];
+    return (_jsx("kbd", { ref: ref, className: [
+            'inline-flex shrink-0 items-center justify-center',
+            'font-mono leading-none font-medium tabular-nums whitespace-nowrap',
+            controlHeightClasses[step],
+            controlTextClasses[step],
+            keyMinWidthClasses[step],
+            paddingXClasses[density][step],
+            radiusClasses[step],
+            variantClasses[variant],
+            transitionClasses,
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), ...props, children: children }));
+});
+/**
+ * A keyboard key, a combination of them, or the four movement keys as they sit
+ * on the keyboard.
+ *
+ * Two things make this more than a styled `<kbd>`, and both are about the label
+ * rather than the box around it.
+ *
+ * The first is `Mod`. A shortcut written as `Ctrl+K` is wrong for every Mac
+ * reader and one written as `⌘K` is wrong for everybody else, so the token that
+ * means "the modifier shortcuts are built on" resolves per platform — and `os`
+ * is there for the pages that have to name a platform rather than the reader's.
+ *
+ * The second is that `⌘` is not a word. A screen reader reads it as "place of
+ * interest sign", so every key drawn as a glyph carries its name beside it, in
+ * the clipped box `srOnlyClasses` describes. What is announced is "Command K",
+ * which is what the shortcut is called.
+ *
+ * The keys are real `<kbd>` elements; the wrapper around them is a `<span>`.
+ * Nesting `<kbd>` inside `<kbd>` is allowed and would also be defensible, but a
+ * `kbd` wrapper is a second box for a host stylesheet to reach into for no gain
+ * — the semantics are carried by the keys themselves either way.
+ */
+export const PlHotKeys = /* @__PURE__ */ React.forwardRef(function PlHotKeys({ variant = 'glass', size = 'md', color = 'secondary', density = 'compact', elevation = 0, keys, cluster, os = 'auto', separator, className, style, ...props }, ref) {
+    const detected = useDetectedOS();
+    const resolved = os === 'auto' ? detected : os;
+    const slots = { ...controlSlots(color, elevation, variant), ...style };
+    const capProps = { variant, size, density };
+    const gap = size === 'xs' || size === 'sm' ? 'gap-1' : 'gap-1.5';
+    if (cluster) {
+        return (_jsxs("span", { ref: ref, className: ['inline-flex flex-col items-center align-middle', gap, className ?? '']
+                .filter(Boolean)
+                .join(' '), style: slots, ...props, children: [_jsx(PlKbd, { ...capProps, children: cluster.up }), _jsxs("span", { className: `inline-flex ${gap}`, children: [_jsx(PlKbd, { ...capProps, children: cluster.left }), _jsx(PlKbd, { ...capProps, children: cluster.down }), _jsx(PlKbd, { ...capProps, children: cluster.right })] })] }));
+    }
+    const labels = tokenize(keys ?? []).map((token) => labelFor(token, resolved));
+    // macOS writes a shortcut as a run of symbols with nothing between them; the
+    // other two join theirs with a `+`. A caller who passes one gets theirs.
+    const joiner = separator === undefined ? (resolved === 'mac' ? null : '+') : separator;
+    return (_jsx("span", { ref: ref, className: ['inline-flex max-w-full items-center gap-1 align-middle', className ?? '']
+            .filter(Boolean)
+            .join(' '), style: slots, ...props, children: labels.map((label, index) => (_jsxs(React.Fragment, { children: [index > 0 && joiner !== null ? (_jsx("span", { "aria-hidden": "true", className: "text-(--plass-muted-fg)", children: joiner })) : null, _jsx(PlKbd, { ...capProps, children: label.symbol === label.name ? (label.symbol) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: label.symbol }), _jsx("span", { className: srOnlyClasses, children: label.name })] })) })] }, index))) }));
+});

package/dist/components/hot-keys/index.d.ts

@@ -0,0 +1,2 @@
+export { PlHotKeys, PlKbd } from './PlHotKeys.js';
+export type { PlHotKeysCluster, PlHotKeysOS, PlHotKeysProps, PlKbdProps } from './PlHotKeys.js';

package/dist/components/hot-keys/index.js

@@ -0,0 +1 @@
+export { PlHotKeys, PlKbd } from './PlHotKeys.js';

package/dist/components/icon/PlIcon.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+export interface PlIconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The glyph. An `<svg>` element, an `<img>`, a component from an icon set, or
+     * a character — whatever is passed is laid into a box of the right size and
+     * given a colour to inherit.
+     *
+     * It is a prop rather than `children` on purpose. An icon set hands you an
+     * element you did not draw, and the two things you always want to change about
+     * it — how big it is and what colour it is — are the two you cannot reach once
+     * it is a child of something. As a prop it is content the icon *sizes*, not
+     * content the icon merely wraps.
+     */
+    icon: React.ReactNode;
+    /**
+     * The box the glyph is drawn in: 14, 16, 20, 24 and 28px. Its own ladder
+     * rather than the control heights, because an icon is not a control.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * Semantic colour role, or `inherit` — the default — to take the colour of
+     * whatever the icon sits in.
+     *
+     * `inherit` and not `primary`, which is the one place this prop departs from
+     * every other component in the library. An icon is content, and the
+     * overwhelmingly common case is an icon inside something that has already
+     * decided what colour its content is: a `PlButton`'s label, a muted caption, a
+     * `PlAlert`'s own family. An icon that arrived pre-dyed would have to be turned
+     * off again at every one of those.
+     * @default 'inherit'
+     */
+    color?: PlassColor | 'inherit';
+    /**
+     * What the icon says, for a reader who cannot see it.
+     *
+     * Without it the icon is hidden from the accessibility tree entirely, which is
+     * the right default: the overwhelming majority of icons sit next to a word that
+     * already says the same thing, and reading both out loud is worse than reading
+     * one. Pass this only when the glyph is carrying meaning on its own.
+     */
+    label?: string;
+}
+/**
+ * A glyph at a known size, in a known colour.
+ *
+ * The library draws no icons of its own beyond the handful its components need —
+ * an icon set is a decision that belongs to the app, not to the component
+ * library it installs. What this does is give whatever icon the app chose the
+ * same two axes everything else here has.
+ *
+ * The box is `inline-flex` with the glyph told to fill it, and `font-size` is
+ * set to the same length — so an `<svg>` with its own `width`, an `<svg>` sized
+ * in `em`, and a bare character all come out the same size. That is the whole
+ * component: a box, a length written twice, and a colour.
+ *
+ * There is no `variant` and no `elevation`. An icon is not a surface: it is ink,
+ * and the only thing the design language has to say about ink is which family it
+ * is drawn in.
+ */
+export declare const PlIcon: React.ForwardRefExoticComponent<PlIconProps & React.RefAttributes<HTMLSpanElement>>;