plass-ui 1.0.0 → 1.0.1

package/dist/components/grid/PlGrid.js

@@ -1,51 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { alignContentClasses, alignItemsClasses, columnCount, justifyClasses, responsiveSlots, spacingValue, withBaseline } from '../../internal/grid.js';
-import { cx } from '../../internal/styles.js';
-const DEFAULT_COLUMNS = 12;
-/** Two Tailwind steps, and the reason a bare `PlGrid` already looks like one. */
-const DEFAULT_SPACING = 2;
-/**
- * A twelve-column row, and the parent every `PlGridItem` needs.
- *
- * It owns the three numbers an item cannot know on its own — how many columns
- * there are and how wide the two gutters are — and hands them down as inherited
- * custom properties rather than through a React context. That is not a
- * shortcut: the values are responsive, and a media query can change an inherited
- * custom property without React hearing about it, so the column count an item
- * lays itself out against is always the one that is actually on screen. A
- * context would have to re-render the tree at every breakpoint to say the same
- * thing.
- *
- * It draws nothing, and it takes no `variant`, `color`, `elevation`, `size` or
- * `density`. A grid is not a surface — it is the arrangement of the surfaces
- * inside it — and there is no padding here either: the gutter round a page is a
- * `PlContainer`'s and the padding round content is a `PlCard`'s, and a grid that
- * had a track of its own would be a third one to keep in step. `spacing` is the
- * only measurement it owns, and it is the space *between* items.
- *
- * Nesting is a `PlGrid` inside a `PlGridItem`, not an item that is also a grid:
- * the inner grid re-declares the column count for its own subtree while the item
- * around it keeps the width the outer grid gave it.
- */
-export const PlGrid = /* @__PURE__ */ React.forwardRef(function PlGrid({ columns, spacing, rowSpacing, columnSpacing, justify, alignItems, alignContent, wrap = true, render, className, style, children, ...props }, ref) {
-    const classNames = cx('plass-grid flex', wrap ? 'flex-wrap' : 'flex-nowrap', 
-    // Both gutters are read from the slots below, which is what lets a media
-    // query change them without React re-rendering.
-    'gap-x-(--p-gap-x) gap-y-(--p-gap-y)', justify ? justifyClasses[justify] : '', alignItems ? alignItemsClasses[alignItems] : '', alignContent ? alignContentClasses[alignContent] : '', className);
-    return useRender({
-        render,
-        ref,
-        props: {
-            className: classNames,
-            style: {
-                ...responsiveSlots('cols', withBaseline(columns, DEFAULT_COLUMNS), columnCount),
-                ...responsiveSlots('gap-x', withBaseline(columnSpacing ?? spacing, DEFAULT_SPACING), spacingValue),
-                ...responsiveSlots('gap-y', withBaseline(rowSpacing ?? spacing, DEFAULT_SPACING), spacingValue),
-                ...style
-            },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as a,alignItemsClasses as n,columnCount as s,justifyClasses as p,responsiveSlots as i,spacingValue as l,withBaseline as t}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGrid=/* @__PURE__ */r.forwardRef(function PlGrid({columns:r,spacing:c,rowSpacing:g,columnSpacing:m,justify:f,alignItems:d,alignContent:u,wrap:x=!0,render:y,className:w,style:j,children:h,...G},N){const P=o("plass-grid flex",x?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",f?p[f]:"",d?n[d]:"",u?a[u]:"",w);return e({render:y,ref:N,props:{className:P,style:{...i("cols",t(r,12),s),...i("gap-x",t(m??c,2),l),...i("gap-y",t(g??c,2),l),...j},children:h,...G}})});

package/dist/components/grid/PlGridItem.js

@@ -1,34 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { alignSelfClasses, offsetValue, responsiveSlots, spanValue } from '../../internal/grid.js';
-import { cx } from '../../internal/styles.js';
-/**
- * One cell of a `PlGrid`.
- *
- * It is a width and nothing else — no sheet, no padding, no typography. What
- * goes inside brings its own, which is the whole reason a cell and a `PlCard`
- * are two components: wrapping something in a layout must not change how it
- * looks, and a cell that drew a sheet would make `span` a visual decision.
- *
- * The column count it divides by is inherited from the grid as a custom
- * property, so an item with no `PlGrid` above it falls back to twelve rather
- * than breaking — but it will be a lone width in a plain parent, which is not a
- * layout. Always wrap.
- */
-export const PlGridItem = /* @__PURE__ */ React.forwardRef(function PlGridItem({ span, offset, alignSelf, render, className, style, children, ...props }, ref) {
-    const classNames = cx('plass-grid-item', alignSelf ? alignSelfClasses[alignSelf] : '', className);
-    return useRender({
-        render,
-        ref,
-        props: {
-            className: classNames,
-            style: {
-                ...responsiveSlots('span', span, spanValue),
-                ...responsiveSlots('offset', offset, offsetValue),
-                ...style
-            },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as t,responsiveSlots as n,spanValue as i}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGridItem=/* @__PURE__ */e.forwardRef(function PlGridItem({span:e,offset:a,alignSelf:l,render:f,className:m,style:c,children:d,...p},u){const g=o("plass-grid-item",l?s[l]:"",m);return r({render:f,ref:u,props:{className:g,style:{...n("span",e,i),...n("offset",a,t),...c},children:d,...p}})});

package/dist/components/grid/index.js

@@ -1,2 +1 @@
-export { PlGrid } from './PlGrid.js';
-export { PlGridItem } from './PlGridItem.js';
+export{PlGrid}from"./PlGrid.js";export{PlGridItem}from"./PlGridItem.js";

package/dist/components/highlight/PlHighlight.js

@@ -1,185 +1 @@
-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 }));
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{transitionClasses as r}from"../../internal/styles.js";const t={solid:"[background-image:var(--p-fill)] text-(--p-on-solid)",glass:"border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]",ghost:"bg-transparent text-(--p-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,n,r){const t=n>0?e[n-1]:"",o=r<e.length?e[r]:"";return!l.test(t)&&!l.test(o)}function markString(e,n,r,t){n.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=n.exec(e));){if(""===l[0]){n.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;r&&!isWholeWord(e,s,a)||(s>i&&o.push(e.slice(i,s)),o.push(t(l[0],`${s}`)),i=a)}return 0===o.length?e:(i<e.length&&o.push(e.slice(i)),o)}function markNode(e,r,t,o){if("string"==typeof e)return markString(e,r,t,o);if("number"==typeof e)return markString(String(e),r,t,o);if(Array.isArray(e))return n.Children.map(e,e=>markNode(e,r,t,o));if(n.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:n.cloneElement(e,void 0,markNode(l,r,t,o))}return e}export const PlHighlight=/* @__PURE__ */n.forwardRef(function PlHighlight({query:l,variant:i="solid",color:s="warning",caseSensitive:a=!1,wholeWord:c=!1,underline:p=!1,weight:u,className:d,style:f,children:g,...m},h){const x=n.useMemo(()=>function buildPattern(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const r=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===r.length?null:new RegExp(r.map(escapeRegExp).join("|"),n?"gu":"giu")}(l,a),[l,a]),b=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",t[i],p?"underline decoration-2 underline-offset-2":"",u?o[u]:"",r].filter(Boolean).join(" "),v=x?markNode(g,x,c,(n,r)=>e("mark",{className:b,children:n},r)):g;return e("span",{ref:h,className:d,style:{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-line":`var(--plass-${s}-line)`,...f},...m,children:v})});

package/dist/components/highlight/index.js

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

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

@@ -1,294 +1 @@
-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))) }));
-});
+"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as r,controlSlots as s,controlTextClasses as t,glassClasses as l,paddingXClasses as i,radiusClasses as m,srOnlyClasses as c,transitionClasses as d}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),p={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")}},u={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"},w={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"}};function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,n=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(n)?"mac":/win/i.test(n)?"windows":"linux"}function subscribe(){return()=>{}}function serverOS(){return"windows"}const b={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},f={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__ */[l,"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)"},x={xs:"min-w-6",sm:"min-w-8",md:"min-w-10",lg:"min-w-12",xl:"min-w-14"};export const PlKbd=/* @__PURE__ */o.forwardRef(function PlKbd({variant:n="glass",size:a="md",density:o="compact",className:s,children:l,...c},p){const u=b[a];return e("kbd",{ref:p,className:["inline-flex shrink-0 items-center justify-center","font-mono leading-none font-medium tabular-nums whitespace-nowrap",r[u],t[u],x[u],i[o][u],m[u],f[n],d,s??""].filter(Boolean).join(" "),...c,children:l})});export const PlHotKeys=/* @__PURE__ */o.forwardRef(function PlHotKeys({variant:r="glass",size:t="md",color:l="secondary",density:i="compact",elevation:m=0,keys:d,cluster:b,os:f="auto",separator:x,className:y,style:g,...h},v){const k=function useDetectedOS(){return o.useSyncExternalStore(subscribe,detectOS,serverOS)}(),A="auto"===f?k:f,C={...s(l,m,r),...g},S={variant:r,size:t,density:i},j="xs"===t||"sm"===t?"gap-1":"gap-1.5";if(b)return n("span",{ref:v,className:["inline-flex flex-col items-center align-middle",j,y??""].filter(Boolean).join(" "),style:C,...h,children:[e(PlKbd,{...S,children:b.up}),n("span",{className:`inline-flex ${j}`,children:[e(PlKbd,{...S,children:b.left}),e(PlKbd,{...S,children:b.down}),e(PlKbd,{...S,children:b.right})]})]});const K=function tokenize(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(d??[]).map(e=>function labelFor(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),o=u[a]??a,r=w[o];if(r)return r;const s=p[o];return s?s[n]:word(1===e.length?e.toUpperCase():e)}(e,A)),P=void 0===x?"mac"===A?null:"+":x;return e("span",{ref:v,className:["inline-flex max-w-full items-center gap-1 align-middle",y??""].filter(Boolean).join(" "),style:C,...h,children:K.map((r,s)=>n(o.Fragment,{children:[s>0&&null!==P?e("span",{"aria-hidden":"true",className:"text-(--plass-muted-fg)",children:P}):null,e(PlKbd,{...S,children:r.symbol===r.name?r.symbol:n(a,{children:[e("span",{"aria-hidden":"true",children:r.symbol}),e("span",{className:c,children:r.name})]})})]},s))})});

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

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

package/dist/components/icon/PlIcon.js

@@ -1,58 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { iconSizeClasses } from '../../internal/styles.js';
-/**
- * The same five lengths as `iconSizeClasses`, as a font size.
- *
- * Written out rather than inherited: an icon set hands back an `<svg>` sized in
- * `em` about as often as one sized in `px`, and the only way both come out right
- * is for the box's own font size to *be* the box. `text-[length:inherit]` would
- * take the surrounding paragraph's, which is the one size the box deliberately
- * is not.
- */
-const glyphFontClasses = {
-    xs: 'text-[0.875rem]',
-    sm: 'text-[1rem]',
-    md: 'text-[1.25rem]',
-    lg: 'text-[1.5rem]',
-    xl: 'text-[1.75rem]'
-};
-/**
- * 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 const PlIcon = /* @__PURE__ */ React.forwardRef(function PlIcon({ icon, size = 'md', color = 'inherit', label, className, style, ...props }, ref) {
-    const classNames = [
-        'inline-flex shrink-0 items-center justify-center align-middle',
-        iconSizeClasses[size],
-        // The glyph fills the box however it was authored. `[font-size:100%]` on the
-        // box itself would be a no-op; what makes an em-sized drawing come out right
-        // is the box being an em, which `size-*` and this pair together arrange.
-        '[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full',
-        `leading-none ${glyphFontClasses[size]}`,
-        color === 'inherit' ? '' : 'text-(--p-accent)',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx("span", { ref: ref, className: classNames, style: (color === 'inherit'
-            ? style
-            : { '--p-accent': `var(--plass-${color}-accent)`, ...style }), 
-        // An icon with something to say is an `img` with a name; one without is
-        // furniture. There is no third case, and `role="img"` on a decorative glyph
-        // is the most common way a screen reader ends up saying "graphic".
-        role: label ? 'img' : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, ...props, children: icon }));
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{iconSizeClasses as i}from"../../internal/styles.js";const r={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const PlIcon=/* @__PURE__ */t.forwardRef(function PlIcon({icon:t,size:n="md",color:l="inherit",label:s,className:o,style:a,...c},m){const f=["inline-flex shrink-0 items-center justify-center align-middle",i[n],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${r[n]}`,"inherit"===l?"":"text-(--p-accent)",o??""].filter(Boolean).join(" ");return e("span",{ref:m,className:f,style:"inherit"===l?a:{"--p-accent":`var(--plass-${l}-accent)`,...a},role:s?"img":void 0,"aria-label":s,"aria-hidden":!s||void 0,...c,children:t})});