plass-ui 1.0.0 → 1.0.2

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})});

package/dist/components/icon/index.js

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

package/dist/components/icon-button/PlIconButton.js

@@ -1,37 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlButton } from '../button/PlButton.js';
-/**
- * A round button with a glyph in it and nothing else.
- *
- * A `PlButton` with an icon and no children already goes square — the same
- * height, the same width, the house fillet cut off it. This is the other shape:
- * a disc.
- *
- * That disc is a deliberate exception to the radius rule, which holds every
- * corner well short of the 50% that would make a control a pill, because the
- * flat run along the top and bottom edge is what still reads as a sheet with its
- * corners cut. The rule is about *labelled* controls: the flat run is there for
- * the line of text to sit on, and a glyph has no line of text. A circle with a
- * single mark centred in it is a punched token rather than a moulded key, so it
- * says the thing the rule exists to protect by a different route.
- *
- * Everything else is `PlButton`'s, unchanged and on purpose: the three
- * materials, the elevation ladder, the pointer light, `loading`, `readOnly` and
- * `disabled`. Two components that draw the same surface out of two copies of the
- * same table are two components that will eventually disagree.
- */
-export const PlIconButton = /* @__PURE__ */ React.forwardRef(function PlIconButton({ icon, label, style, ...props }, ref) {
-    return (_jsx(PlButton, { ref: ref, "aria-label": label, 
-        // The icon goes in `startIcon` rather than in `children`, which is what
-        // puts PlButton on its icon-only path: square footprint, no horizontal
-        // padding, and the spinner taking the glyph's place while `loading`.
-        startIcon: icon, 
-        // An inline style rather than a `rounded-full`, and for once not as a
-        // shortcut. PlButton already writes a `rounded-*` utility of its own, and
-        // two utilities setting the same property resolve by their order in the
-        // generated stylesheet — which is not something a component may depend
-        // on. An inline declaration is the one form that wins deterministically,
-        // and it still leaves the caller's own `style` free to override it below.
-        style: { borderRadius: '9999px', ...style }, ...props }));
-});
+"use client";import{jsx as t}from"react/jsx-runtime";import*as o from"react";import{PlButton as r}from"../button/PlButton.js";export const PlIconButton=/* @__PURE__ */o.forwardRef(function PlIconButton({icon:o,label:e,style:n,...a},s){return t(r,{ref:s,"aria-label":e,startIcon:o,style:{borderRadius:"9999px",...n},...a})});

package/dist/components/icon-button/index.js

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

package/dist/components/list/PlList.js

@@ -1,160 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, sheetBodyClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-const ListContext = /* @__PURE__ */ React.createContext({
-    size: 'md',
-    density: 'default',
-    dividers: false
-});
-/**
- * The three materials, said the way a *container* says them — the sheet is never
- * dyed, exactly as on a `PlCard`. A list holds other people's content, and that
- * content arrives with its own colours.
- *
- * `ghost` is the one to reach for inside a card: the card is already a sheet,
- * and a second bordered rectangle inside it is a second rectangle.
- */
-const variantClasses = {
-    solid: /* @__PURE__ */ [
-        glassClasses,
-        'text-(--plass-fg) bg-(--plass-glass-press)',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--plass-fg) bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'text-(--plass-fg) bg-transparent'
-};
-/**
- * A row's vertical padding. Its own ladder rather than a sheet's, because a row
- * is a line of text in a stack of them and a sheet is a container: the same `md`
- * that gives a card 20px of air would give a list of eight rows the height of a
- * page.
- */
-const rowPaddingYClasses = {
-    default: { xs: 'py-1', sm: 'py-1.5', md: 'py-2', lg: 'py-2.5', xl: 'py-3' },
-    compact: { xs: 'py-0.5', sm: 'py-0.5', md: 'py-1', lg: 'py-1.5', xl: 'py-2' }
-};
-/**
- * A row's horizontal padding: a control's, not a sheet's. The words in a row are
- * a label on a line rather than a paragraph inside a container, and a sheet's
- * inset would push every row's text a third of the way across a narrow list.
- */
-const rowPaddingXClasses = paddingXClasses;
-/**
- * A row sits one step down the radius ladder from the sheet it is inside — a
- * tile cut out of a sheet cannot have the same corner as the sheet, or the two
- * curves fight along the edge.
- */
-const rowRadiusClasses = {
-    xs: radiusClasses.xs,
-    sm: radiusClasses.xs,
-    md: radiusClasses.sm,
-    lg: radiusClasses.sm,
-    xl: radiusClasses.md
-};
-/**
- * The rule between two rows, and the rule that makes the sheet give up its
- * padding: `>li+li` rather than a class on each item, so it holds however the
- * caller composed the rows — through a `.map()`, through fragments, through a
- * component of their own that renders a `PlListItem`.
- *
- * `--plass-divider` and not the sheet's white hairline, for the reason a
- * checkbox's edge takes a neutral one: white light on a translucent pane is
- * invisible the moment the list is set on something opaque. It is the same ink
- * a PlCard is scored with and a PlTable rules its rows in, so a list on a card
- * inside a table cell is one family of lines rather than three.
- */
-const dividerClasses = '[&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]';
-/**
- * A stack of rows.
- *
- * The list is a sheet and the rows are what is on it, which is the whole reason
- * the two are separate components: `size` and `density` are properties of the
- * stack, not of any one line in it, and a context is what carries them down.
- *
- * There is no Base UI primitive under this on purpose. A list is not a composite
- * widget — it has no roving focus, no selection model, no keyboard contract of
- * its own. Reaching for a menu or a listbox primitive to get one would hand
- * every consumer's plain list of links the semantics of a menu, which is the
- * most common way a component library breaks a screen reader.
- */
-export const PlList = /* @__PURE__ */ React.forwardRef(function PlList({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, dividers = false, render, className, style, children, ...props }, ref) {
-    const context = React.useMemo(() => ({ size, density, dividers }), [size, density, dividers]);
-    const classNames = [
-        'flex flex-col',
-        radiusClasses[size],
-        variantClasses[variant],
-        transitionClasses,
-        // Without dividers the rows are tiles and the sheet keeps a hair of padding
-        // so a hovered row does not run into the edge. With them the rules have to
-        // reach the edge, so the padding goes and the rows square off.
-        dividers ? `overflow-hidden ${dividerClasses}` : 'p-1',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const element = useRender({
-        render,
-        ref,
-        props: {
-            // Tailwind's reset takes the bullets off every `<ul>`, and Safari takes
-            // the list semantics off with them. Saying `role="list"` out loud is the
-            // one-line fix, and it costs nothing when the reset is not there.
-            role: 'list',
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            children,
-            ...props
-        }
-    });
-    return _jsx(ListContext.Provider, { value: context, children: element });
-});
-/**
- * One row.
- *
- * The shell is always an `<li>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` or `href` is given — a real `<button>` or
- * `<a>` wrapping that content, with `action` sitting outside it as a separate
- * control. This is the same shape a `PlChip` uses, for the same two reasons: a
- * `<span>` carrying a click handler is invisible to a keyboard, and a
- * `<button>` inside a `<button>` is markup the browser silently un-nests.
- */
-export const PlListItem = /* @__PURE__ */ React.forwardRef(function PlListItem({ startIcon, endIcon, description, action, href, selected = false, disabled = false, className, children, onClick, ...props }, ref) {
-    const { size, density, dividers } = React.useContext(ListContext);
-    const interactive = Boolean(onClick || href) && !disabled;
-    const padX = rowPaddingXClasses[density][size];
-    const padY = rowPaddingYClasses[density][size];
-    const bodyClassNames = [
-        'flex min-w-0 flex-1 items-center text-start',
-        padX,
-        padY,
-        gapClasses[size],
-        sheetBodyClasses[size],
-        transitionClasses,
-        iconClasses,
-        // Squared off when the rows are ruled, for the reason `dividerClasses`
-        // exists: a tile and a line are two different ideas about what a row is.
-        dividers ? '' : rowRadiusClasses[size],
-        // An if/else rather than stacked variants: two Tailwind classes of equal
-        // specificity resolve by their order in the generated stylesheet.
-        disabled
-            ? 'cursor-not-allowed opacity-50 saturate-[0.35]'
-            : selected
-                ? 'bg-(--p-soft-press) font-medium text-(--p-accent)'
-                : '',
-        interactive ? `cursor-pointer ${focusRingClasses}` : '',
-        // Hover deepens the same tint `selected` already uses, one step down, so a
-        // hovered row and the chosen row are the same idea at two strengths.
-        interactive && !selected ? 'hover:bg-(--p-soft)' : '',
-        interactive && selected ? 'hover:bg-(--p-soft-press)' : ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const body = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [hasContent(children) ? _jsx("span", { className: "truncate", children: children }) : null, hasContent(description) ? (_jsx("span", { className: `truncate text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: description })) : null] }), hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: endIcon })) : null] }));
-    return (_jsxs("li", { ref: ref, className: ['flex w-full items-center', className ?? ''].filter(Boolean).join(' '), ...props, children: [interactive && href ? (_jsx("a", { href: href, className: bodyClassNames, "aria-current": selected ? 'page' : undefined, onClick: onClick, children: body })) : interactive ? (_jsx("button", { type: "button", className: bodyClassNames, "aria-current": selected ? true : undefined, onClick: onClick, children: body })) : (_jsx("div", { className: bodyClassNames, "aria-disabled": disabled || undefined, children: body })), hasContent(action) ? (_jsx("div", { className: `flex shrink-0 items-center ${padX}`, children: action })) : null] }));
-});
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{focusRingClasses as a,gapClasses as i,glassClasses as n,hasContent as o,iconClasses as d,metaTextClasses as c,paddingXClasses as p,radiusClasses as m,sheetBodyClasses as f,surfaceSlots as x,transitionClasses as u}from"../../internal/styles.js";const h=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),g={solid:/* @__PURE__ */[n,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[n,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},v={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},y=p,b={xs:m.xs,sm:m.xs,md:m.sm,lg:m.sm,xl:m.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l="md",color:a="primary",density:i="default",elevation:n=0,dividers:o=!1,render:d,className:c,style:p,children:f,...v},y){const b=r.useMemo(()=>({size:l,density:i,dividers:o}),[l,i,o]),N=["flex flex-col",m[l],g[s],u,o?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",c??""].filter(Boolean).join(" "),j=t({render:d,ref:y,props:{role:"list",className:N,style:{...x(a,n),...p},children:f,...v}});return e(h.Provider,{value:b,children:j})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:n,description:p,action:m,href:x,selected:g=!1,disabled:N=!1,className:j,children:w,onClick:k,...C},P){const{size:z,density:B,dividers:I}=r.useContext(h),L=Boolean(k||x)&&!N,$=y[B][z],R=["flex min-w-0 flex-1 items-center text-start",$,v[B][z],i[z],f[z],u,d,I?"":b[z],N?"cursor-not-allowed opacity-50 saturate-[0.35]":g?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${a}`:"",L&&!g?"hover:bg-(--p-soft)":"",L&&g?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[o(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[o(w)?e("span",{className:"truncate",children:w}):null,o(p)?e("span",{className:`truncate text-(--plass-muted-fg) ${c[z]}`,children:p}):null]}),o(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:n}):null]});return s("li",{ref:P,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...C,children:[L&&x?e("a",{href:x,className:R,"aria-current":g?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!g||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":N||void 0,children:F}),o(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});

package/dist/components/list/index.js

@@ -1 +1 @@
-export { PlList, PlListItem } from './PlList.js';
+export{PlList,PlListItem}from"./PlList.js";