plass-ui 1.0.0 → 1.0.1

package/dist/components/breadcrumb/PlBreadcrumb.js

@@ -1,201 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { ArrowRightIcon, ChevronIcon, EllipsisIcon } from '../../internal/icons.js';
-import { controlTextClasses, cx, focusRingClasses, gapClasses, hasContent, iconClasses, radiusClasses, transitionClasses } from '../../internal/styles.js';
-const BreadcrumbContext = /* @__PURE__ */ React.createContext({
-    size: 'md',
-    last: false
-});
-/** Between the steps, and the only thing `density` touches. */
-const trailGapClasses = {
-    default: { xs: 'gap-1', sm: 'gap-1.5', md: 'gap-2', lg: 'gap-2.5', xl: 'gap-3' },
-    compact: { xs: 'gap-0.5', sm: 'gap-1', md: 'gap-1', lg: 'gap-1.5', xl: 'gap-2' }
-};
-/**
- * A step's corner, read two steps down the radius ladder.
- *
- * `radiusClasses.md` is 12px, which on a line of text 20px tall is most of the
- * way to a pill — and a breadcrumb step is not a `PlChip`. What the hover tint
- * needs is a rectangle with the corners taken off, which is what the ladder says
- * everywhere else; it just has to be read further down for something this short.
- */
-const stepRadiusClasses = {
-    xs: radiusClasses.xs,
-    sm: radiusClasses.xs,
-    md: radiusClasses.xs,
-    lg: radiusClasses.sm,
-    xl: radiusClasses.sm
-};
-/**
- * The four marks.
- *
- * The two that point are glyphs turned rather than redrawn, the same allowance
- * the no-transform rule makes for the chevron on a `PlAccordion`: the wedge is
- * drawn pointing down once, and a trail turns it a quarter. Both turn back under
- * RTL, because a trail runs the way the language does.
- */
-function separatorMark(separator) {
-    switch (separator) {
-        case 'chevron':
-            return (_jsx("span", { className: "flex -rotate-90 items-center rtl:rotate-90", children: _jsx(ChevronIcon, {}) }));
-        case 'arrow':
-            return (_jsx("span", { className: "flex items-center rtl:rotate-180", children: _jsx(ArrowRightIcon, {}) }));
-        case 'slash':
-            return _jsx("span", { className: "opacity-70", children: "/" });
-        case 'dot':
-            return _jsx("span", { className: "opacity-70", children: "\u00B7" });
-        default:
-            return null;
-    }
-}
-const separatorNames = ['chevron', 'arrow', 'slash', 'dot'];
-/**
- * The words in a step, with everything that is not a word left out.
- *
- * A step's label is a `ReactNode` and `name` in the structured data is a string,
- * so the tree is walked for its text. Only `children` is read — a `startIcon` is
- * a picture of the thing rather than its name, and a home glyph contributing
- * nothing is exactly right.
- */
-function textOf(node) {
-    if (typeof node === 'string' || typeof node === 'number') {
-        return String(node);
-    }
-    if (Array.isArray(node)) {
-        return node.map(textOf).join('');
-    }
-    if (React.isValidElement(node)) {
-        return textOf(node.props.children);
-    }
-    return '';
-}
-/**
- * A step's `href` as a search engine wants it: absolute.
- *
- * `new URL` is what resolves `../guide` against a base rather than pasting the
- * two together, and it throws on anything it cannot make sense of — a base that
- * is not a URL, an `href` that is a router-only path. Falling back to the `href`
- * as written is better than dropping the entry: a relative URL is a weaker
- * signal, an absent one is none.
- */
-function absoluteHref(href, baseUrl) {
-    if (!baseUrl) {
-        return href;
-    }
-    try {
-        return new URL(href, baseUrl).href;
-    }
-    catch {
-        return href;
-    }
-}
-/**
- * The trail as `schema.org`'s `BreadcrumbList`.
- *
- * `item` is omitted where a step has no `href`, which is the last step's usual
- * case: a crawler reads a final entry without one as the page being looked at,
- * and a `ListItem` pointing at nothing would be worse than one pointing nowhere.
- */
-function breadcrumbListData(steps, baseUrl) {
-    const itemListElement = steps.map((step, index) => {
-        const { href, children } = step.props;
-        return {
-            '@type': 'ListItem',
-            position: index + 1,
-            name: textOf(children),
-            ...(href ? { item: absoluteHref(href, baseUrl) } : null)
-        };
-    });
-    // `<` is escaped because this string is written into a `<script>`: a label
-    // holding `</script>` would otherwise close the tag and turn the rest of the
-    // JSON into markup.
-    return JSON.stringify({
-        '@context': 'https://schema.org',
-        '@type': 'BreadcrumbList',
-        itemListElement
-    }).replace(/</g, '\\u003c');
-}
-function isSeparatorName(value) {
-    return typeof value === 'string' && separatorNames.includes(value);
-}
-/**
- * The trail of pages above the one being read.
- *
- * Two things make this more than a row of links. The first is that the last step
- * is where the reader already is, so it is not a link at all — it carries
- * `aria-current="page"` and stops being pressable, and the component works that
- * out rather than asking every caller to remember it. The second is the fold: a
- * trail seven levels deep is a trail nobody reads, so the middle collapses to a
- * `…` that puts it back when pressed.
- *
- * The separators are drawn by the trail rather than by the steps. A step does
- * not know whether anything follows it, and a mark that belonged to a step would
- * have to be taken off the last one by hand.
- *
- * There is no `variant` and no `elevation`: a trail is a line of text above the
- * page, not a surface laid on it.
- */
-export const PlBreadcrumb = /* @__PURE__ */ React.forwardRef(function PlBreadcrumb({ size = 'md', color = 'primary', density = 'default', separator = 'chevron', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, expandable = true, label = 'Breadcrumb', expandLabel = 'Show the hidden steps', structuredData = false, baseUrl, className, style, children, ...props }, ref) {
-    const [unfolded, setUnfolded] = React.useState(false);
-    const steps = React.Children.toArray(children).filter(React.isValidElement);
-    const total = steps.length;
-    /*
-     * The last step is the page you are on — unless a step says it is. Exactly one
-     * element in a trail may carry `aria-current="page"`, so a caller who marks an
-     * earlier step has to take the mark off the last one, and doing that by hand
-     * would mean writing `current={false}` on a step that never asked for it.
-     */
-    const claimed = steps.some((step) => step.props.current === true);
-    const folding = !unfolded &&
-        maxItems !== undefined &&
-        total > Math.max(maxItems, 1) &&
-        // A fold has to actually remove something. With `1` before and `1` after on
-        // a three-step trail the `…` would stand in for exactly one step, which is
-        // longer than the step it replaced.
-        total - itemsBeforeCollapse - itemsAfterCollapse > 1;
-    const shown = folding
-        ? [
-            ...steps.slice(0, Math.max(0, itemsBeforeCollapse)),
-            null,
-            ...steps.slice(total - Math.max(0, itemsAfterCollapse))
-        ]
-        : steps;
-    const mark = isSeparatorName(separator) ? separatorMark(separator) : separator;
-    const foldClassNames = cx('inline-flex items-center rounded-(--plass-radius-xs) px-0.5', 'text-(--plass-muted-fg)', transitionClasses, iconClasses, expandable
-        ? cx('cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)', focusRingClasses)
-        : '');
-    return (_jsxs("nav", { ref: ref, "aria-label": label, className: cx('flex', controlTextClasses[size], iconClasses, className), style: {
-            '--p-accent': `var(--plass-${color}-accent)`,
-            '--p-soft': `var(--plass-${color}-soft)`,
-            '--p-ring': `var(--plass-${color}-ring)`,
-            ...style
-        }, ...props, children: [structuredData && total > 0 ? (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: breadcrumbListData(steps, baseUrl) } })) : null, _jsx("ol", { 
-                // `role="list"` said out loud: Tailwind's reset takes the bullets off
-                // every `<ol>`, and Safari takes the list semantics off with them.
-                role: "list", className: cx('flex list-none flex-wrap items-center p-0', trailGapClasses[density][size]), children: shown.map((step, index) => (_jsxs(React.Fragment, { children: [index > 0 ? (_jsx("li", { "aria-hidden": "true", className: "flex shrink-0 items-center text-(--plass-muted-fg) select-none", children: mark })) : null, step ? (_jsx(BreadcrumbContext.Provider, { value: { size, last: !claimed && index === shown.length - 1 }, children: step })) : (_jsx("li", { className: "flex shrink-0 items-center", children: expandable ? (_jsx("button", { type: "button", className: foldClassNames, "aria-label": expandLabel, onClick: () => setUnfolded(true), children: _jsx(EllipsisIcon, {}) })) : (_jsx("span", { className: foldClassNames, "aria-hidden": "true", children: _jsx(EllipsisIcon, {}) })) }))] }, step ? (step.key ?? index) : 'fold'))) })] }));
-});
-/**
- * One step of the trail.
- *
- * It renders three different things and the caller picks by what they pass: an
- * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
- * neither — which is what the last step is, because the page you are already on
- * is not somewhere to go.
- */
-export const PlBreadcrumbItem = /* @__PURE__ */ React.forwardRef(function PlBreadcrumbItem({ href, onClick, startIcon, endIcon, current, disabled = false, className, children, ...props }, ref) {
-    const { size, last } = React.useContext(BreadcrumbContext);
-    const isCurrent = current ?? last;
-    const interactive = Boolean(href || onClick) && !isCurrent && !disabled;
-    const stepClassNames = cx('inline-flex min-w-0 items-center px-1', gapClasses[size], stepRadiusClasses[size], transitionClasses, 
-    // 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 text-(--plass-muted-fg) opacity-50'
-        : isCurrent
-            ? 'font-medium text-(--plass-fg)'
-            : interactive
-                ? cx('cursor-pointer text-(--plass-muted-fg)', 'hover:bg-(--p-soft) hover:text-(--p-accent)', focusRingClasses)
-                : 'text-(--plass-muted-fg)');
-    const body = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: startIcon })) : null, _jsx("span", { className: "truncate", children: children }), hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: endIcon })) : null] }));
-    return (_jsx("li", { ref: ref, className: cx('flex min-w-0 items-center', className), ...props, children: interactive && href ? (_jsx("a", { href: href, className: stepClassNames, onClick: onClick, children: body })) : interactive ? (_jsx("button", { type: "button", className: stepClassNames, onClick: onClick, children: body })) : (_jsx("span", { className: stepClassNames, "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": disabled || undefined, children: body })) }));
-});
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{ArrowRightIcon as s,ChevronIcon as n,EllipsisIcon as l}from"../../internal/icons.js";import{controlTextClasses as i,cx as c,focusRingClasses as o,gapClasses as m,hasContent as p,iconClasses as d,radiusClasses as u,transitionClasses as f}from"../../internal/styles.js";const h=/* @__PURE__ */a.createContext({size:"md",last:!1}),x={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},g={xs:u.xs,sm:u.xs,md:u.xs,lg:u.sm,xl:u.sm},b=["chevron","arrow","slash","dot"];function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):a.isValidElement(e)?textOf(e.props.children):""}function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:textOf(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r="md",color:m="primary",density:p="default",separator:u="chevron",maxItems:g,itemsBeforeCollapse:y=1,itemsAfterCollapse:N=1,expandable:v=!0,label:w="Breadcrumb",expandLabel:k="Show the hidden steps",structuredData:C=!1,baseUrl:B,className:L,style:j,children:I,...S},M){const[O,P]=a.useState(!1),z=a.Children.toArray(I).filter(a.isValidElement),A=z.length,D=z.some(e=>!0===e.props.current),E=!O&&void 0!==g&&A>Math.max(g,1)&&A-y-N>1?[...z.slice(0,Math.max(0,y)),null,...z.slice(A-Math.max(0,N))]:z,H=function isSeparatorName(e){return"string"==typeof e&&b.includes(e)}(u)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(n,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(s,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(u):u,R=c("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",f,d,v?c("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",o):"");return t("nav",{ref:M,"aria-label":w,className:c("flex",i[r],d,L),style:{"--p-accent":`var(--plass-${m}-accent)`,"--p-soft":`var(--plass-${m}-soft)`,"--p-ring":`var(--plass-${m}-ring)`,...j},...S,children:[C&&A>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(z,B)}}):null,e("ol",{role:"list",className:c("flex list-none flex-wrap items-center p-0",x[p][r]),children:E.map((s,n)=>t(a.Fragment,{children:[n>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:H}):null,s?e(h.Provider,{value:{size:r,last:!D&&n===E.length-1},children:s}):e("li",{className:"flex shrink-0 items-center",children:v?e("button",{type:"button",className:R,"aria-label":k,onClick:()=>P(!0),children:e(l,{})}):e("span",{className:R,"aria-hidden":"true",children:e(l,{})})})]},s?s.key??n:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:i,current:d,disabled:u=!1,className:x,children:b,...y},N){const{size:v,last:w}=a.useContext(h),k=d??w,C=Boolean(s||n)&&!k&&!u,B=c("inline-flex min-w-0 items-center px-1",m[v],g[v],f,u?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":k?"font-medium text-(--plass-fg)":C?c("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",o):"text-(--plass-muted-fg)"),L=t(r,{children:[p(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:b}),p(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null]});return e("li",{ref:N,className:c("flex min-w-0 items-center",x),...y,children:C&&s?e("a",{href:s,className:B,onClick:n,children:L}):C?e("button",{type:"button",className:B,onClick:n,children:L}):e("span",{className:B,"aria-current":k?"page":void 0,"aria-disabled":u||void 0,children:L})})});

package/dist/components/breadcrumb/index.js

@@ -1 +1 @@
-export { PlBreadcrumb, PlBreadcrumbItem } from './PlBreadcrumb.js';
+export{PlBreadcrumb,PlBreadcrumbItem}from"./PlBreadcrumb.js";

package/dist/components/button/PlButton.js

@@ -1,196 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Button as BaseUIButton } from '@base-ui/react/button';
-import { useRender } from '@base-ui/react/use-render';
-import { ButtonGroupContext } from '../../internal/button-group.js';
-import { Spinner } from '../../internal/icons.js';
-import { controlHeightClasses, controlSlots, controlSquareClasses, controlTextClasses, disabledClasses, focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, paddingXClasses, radiusClasses, readOnlyFilterClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * The scales all come from `internal/styles` — a button's height *is* the
- * library's control height, and the same numbers have to hold on a PlTextField,
- * a Select and a Chip for a mixed row to keep its baseline.
- */
-const sizeClasses = {
-    xs: `${controlHeightClasses.xs} ${gapClasses.xs} ${radiusClasses.xs} ${controlTextClasses.xs}`,
-    sm: `${controlHeightClasses.sm} ${gapClasses.sm} ${radiusClasses.sm} ${controlTextClasses.sm}`,
-    md: `${controlHeightClasses.md} ${gapClasses.md} ${radiusClasses.md} ${controlTextClasses.md}`,
-    lg: `${controlHeightClasses.lg} ${gapClasses.lg} ${radiusClasses.lg} ${controlTextClasses.lg}`,
-    xl: `${controlHeightClasses.xl} ${gapClasses.xl} ${radiusClasses.xl} ${controlTextClasses.xl}`
-};
-/** With no label there is nothing to pad against, so the button goes square. */
-const iconOnlyClasses = {
-    xs: `${controlSquareClasses.xs} px-0`,
-    sm: `${controlSquareClasses.sm} px-0`,
-    md: `${controlSquareClasses.md} px-0`,
-    lg: `${controlSquareClasses.lg} px-0`,
-    xl: `${controlSquareClasses.xl} px-0`
-};
-const baseClasses = /* @__PURE__ */ [
-    // `relative` because `.plass-glow` hangs its two light layers off `::before`/`::after`.
-    'relative inline-flex shrink-0 select-none items-center justify-center',
-    'whitespace-nowrap align-middle font-semibold leading-none',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    focusRingClasses,
-    iconClasses
-].join(' ');
-/**
- * The three materials.
- *
- * `solid` is the only one with a `background-image`, and that gradient is the
- * whole of the form: two ends of the family swept across the control, with no
- * highlight over the top of it. A filled control deliberately carries **no**
- * gloss line — an inset white edge on a coloured surface is what reads as
- * lacquer, and the sweep is already saying everything about the shape that
- * needs saying. The hairline belongs to `glass`, which has a real cut edge.
- *
- * `glass` wears the family in its **text** rather than in its sheet, which is
- * why `color="secondary"` is the neutral, quiet button and not a second grey
- * variant nobody would remember the name of.
- */
-const restClasses = {
-    solid: /* @__PURE__ */ [
-        'text-(--p-on-solid) [background-image:var(--p-fill)]',
-        '[box-shadow:var(--p-elev),var(--p-lift)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--p-accent) bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    // Nothing to catch the light on, and nothing to cast a shadow.
-    ghost: 'text-(--p-accent) bg-transparent'
-};
-/**
- * Hover lifts the control and turns the light up; press puts it down and turns
- * the light down. Both are `filter: brightness()` rather than a second set of
- * colours, because the fill is a gradient and a gradient cannot be transitioned
- * — but light falling on one can. The pointer bloom `.plass-glow` draws rides
- * on top of this; the brightness is the state, the bloom is where the pointer
- * is.
- */
-const hoverClasses = {
-    solid: /* @__PURE__ */ [
-        'hover:brightness-105',
-        'hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]',
-        'active:brightness-95',
-        'active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]',
-        'hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]',
-        'active:bg-(--plass-glass-press)',
-        'active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'hover:bg-(--p-soft) active:bg-(--p-soft-hover)'
-};
-/**
- * Read-only keeps the shape, the colour and the edge but goes flat, loses its
- * lift and drains most of the saturation.
- */
-const readOnlyClasses = {
-    solid: /* @__PURE__ */ [
-        'cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]',
-        `shadow-none ${readOnlyFilterClasses}`
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'cursor-default border text-(--p-accent) bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        `[box-shadow:var(--plass-gloss-glass)] ${readOnlyFilterClasses}`
-    ].join(' '),
-    ghost: `cursor-default text-(--p-accent) bg-transparent ${readOnlyFilterClasses}`
-};
-export const PlButton = /* @__PURE__ */ React.forwardRef(function PlButton({ variant: variantProp, size: sizeProp, color: colorProp, density: densityProp, elevation: elevationProp, startIcon, endIcon, loading = false, readOnly = false, fullWidth = false, disabled: disabledProp, render, className, style, children, onClick, onPointerMove, ...props }, ref) {
-    /*
-     * A `PlButtonGroup` around this button sets the axes once for the set. The
-     * button's own prop still wins — a row of secondary actions with one danger
-     * button in it is a real thing — and with no group around it the fallbacks
-     * are the defaults they always were.
-     */
-    const group = React.useContext(ButtonGroupContext);
-    const variant = variantProp ?? group?.variant ?? 'solid';
-    const size = sizeProp ?? group?.size ?? 'md';
-    const color = colorProp ?? group?.color ?? 'primary';
-    const density = densityProp ?? group?.density ?? 'default';
-    const elevation = elevationProp ?? group?.elevation ?? 1;
-    const disabled = disabledProp ?? group?.disabled ?? false;
-    const iconOnly = !hasContent(children);
-    // `disabled` and `readOnly` change how the button looks; `loading` only stops
-    // it from firing.
-    const inert = loading || readOnly;
-    const interactive = !disabled && !inert;
-    const classNames = [
-        baseClasses,
-        sizeClasses[size],
-        iconOnly ? iconOnlyClasses[size] : paddingXClasses[density][size],
-        // Deliberately an if/else rather than stacked `data-*` variants: two
-        // Tailwind variants of equal specificity resolve by their order in the
-        // generated stylesheet, which is not something a component should depend on.
-        disabled
-            ? disabledClasses[variant]
-            : readOnly
-                ? readOnlyClasses[variant]
-                : restClasses[variant],
-        interactive ? `${hoverClasses[variant]} cursor-pointer` : '',
-        // The interaction light. Every variant takes it, because it is about where
-        // the pointer is rather than about what the surface is made of — the two
-        // colour slots behind it are what switch with the variant.
-        interactive ? 'plass-glow' : '',
-        loading ? 'cursor-progress' : '',
-        fullWidth ? 'w-full' : '',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    /*
-     * `render` deliberately steps around Base UI's PlButton rather than being handed
-     * to it. Told to render a non-`<button>`, that component puts `role="button"`
-     * on whatever it was given — which is right for a `<div>` and wrong for the
-     * case this prop exists for: an `<a href>` under a `role="button"` stops being
-     * a link to everything that reads the page, and the link list, the status bar
-     * and the crawler all lose it.
-     *
-     * What Base UI's PlButton adds over a bare `<button>` is its disabled handling,
-     * and `disabled` is the one thing that cannot travel to an `<a>` anyway.
-     */
-    return useRender({
-        render: render ?? _jsx(BaseUIButton, { disabled: disabled }),
-        ref,
-        props: {
-            className: classNames,
-            style: { ...controlSlots(color, elevation, variant), ...style },
-            'aria-disabled': inert || undefined,
-            'aria-busy': loading || undefined,
-            'data-loading': loading || undefined,
-            'data-readonly': readOnly || undefined,
-            onClick: (event) => {
-                if (inert) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                onClick?.(event);
-            },
-            onPointerMove: (event) => {
-                // Feeds the two light layers in `styles.css`. Written straight to the
-                // element rather than held in state: this fires at pointer rate, and a
-                // `setState` here would re-render the tree on every mouse move. Reading
-                // `offsetX/offsetY` costs nothing — no `getBoundingClientRect`, so no
-                // forced layout. Icons carry `pointer-events: none`, so the offsets are
-                // always relative to the button itself.
-                //
-                // It runs while a finger is down too, which is what makes the light
-                // follow a drag on a touch screen — there is no hover there, and the
-                // `:active` layer is the one doing the work.
-                const element = event.currentTarget;
-                element.style.setProperty('--p-mx', `${event.nativeEvent.offsetX}px`);
-                element.style.setProperty('--p-my', `${event.nativeEvent.offsetY}px`);
-                onPointerMove?.(event);
-            },
-            ...props,
-            children: (_jsxs(_Fragment, { children: [loading ? _jsx(Spinner, {}) : startIcon, children, endIcon] }))
-        }
-    });
-});
+"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{Button as a}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as l}from"../../internal/button-group.js";import{Spinner as n}from"../../internal/icons.js";import{controlHeightClasses as i,controlSlots as p,controlSquareClasses as d,controlTextClasses as v,disabledClasses as c,focusRingClasses as g,gapClasses as m,glassClasses as x,hasContent as b,iconClasses as f,paddingXClasses as h,radiusClasses as u,readOnlyFilterClasses as $,transitionClasses as j}from"../../internal/styles.js";const y={xs:`${i.xs} ${m.xs} ${u.xs} ${v.xs}`,sm:`${i.sm} ${m.sm} ${u.sm} ${v.sm}`,md:`${i.md} ${m.md} ${u.md} ${v.md}`,lg:`${i.lg} ${m.lg} ${u.lg} ${v.lg}`,xl:`${i.xl} ${m.xl} ${u.xl} ${v.xl}`},w={xs:`${d.xs} px-0`,sm:`${d.sm} px-0`,md:`${d.md} px-0`,lg:`${d.lg} px-0`,xl:`${d.xl} px-0`},P=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,g,f].join(" "),k={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[x,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},B={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},C={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${$}`].join(" "),glass:/* @__PURE__ */[x,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${$}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${$}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:i,size:d,color:v,density:g,elevation:m,startIcon:x,endIcon:f,loading:u=!1,readOnly:$=!1,fullWidth:j=!1,disabled:z,render:E,className:I,style:M,children:N,onClick:D,onPointerMove:F,...O},R){const T=r.useContext(l),W=i??T?.variant??"solid",X=d??T?.size??"md",Y=v??T?.color??"primary",q=g??T?.density??"default",A=m??T?.elevation??1,G=z??T?.disabled??!1,H=!b(N),J=u||$,K=!G&&!J,L=[P,y[X],H?w[X]:h[q][X],G?c[W]:$?C[W]:k[W],K?`${B[W]} cursor-pointer`:"",K?"plass-glow":"",u?"cursor-progress":"",j?"w-full":"",I??""].filter(Boolean).join(" ");return t({render:E??s(a,{disabled:G}),ref:R,props:{className:L,style:{...p(Y,A,W),...M},"aria-disabled":J||void 0,"aria-busy":u||void 0,"data-loading":u||void 0,"data-readonly":$||void 0,onClick:s=>{if(J)return s.preventDefault(),void s.stopPropagation();D?.(s)},onPointerMove:s=>{const e=s.currentTarget;e.style.setProperty("--p-mx",`${s.nativeEvent.offsetX}px`),e.style.setProperty("--p-my",`${s.nativeEvent.offsetY}px`),F?.(s)},...O,children:o(e,{children:[u?s(n,{}):x,N,f]})}})});

package/dist/components/button/index.js

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

package/dist/components/button-group/PlButtonGroup.js

@@ -1,64 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { ButtonGroupContext } from '../../internal/button-group.js';
-import { cx } from '../../internal/styles.js';
-/**
- * The corners that face a neighbour are squared off, so the run reads as one
- * piece scored into segments rather than as three keys that happen to be
- * touching.
- *
- * Logical properties (`s`/`e`) rather than left/right: under RTL the first
- * button is on the right, and `rounded-l-none` would flatten the wrong side.
- */
-const joinClasses = {
-    horizontal: '[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none',
-    vertical: '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none'
-};
-/**
- * Only `glass` needs the overlap, because it is the only variant that draws an
- * edge. Two glass keys meeting would otherwise show both of their hairlines and
- * the seam would be twice as heavy as every other edge on the page; pulling the
- * second one back a pixel makes the two share one line.
- *
- * A `solid` group must **not** do this. Its keys have no border to double up,
- * and overlapping would put one gradient over the start of the next — which is
- * exactly the join the squared corners are drawing.
- */
-const overlapClasses = {
-    horizontal: '[&>*:not(:first-child)]:-ms-px',
-    vertical: '[&>*:not(:first-child)]:-mt-px'
-};
-const baseClasses = /* @__PURE__ */ [
-    'inline-flex align-middle',
-    // Every child gets a stacking context so the hovered or focused one can come
-    // forward. Without it the focus ring — which is drawn outside the border box —
-    // is painted over by whichever neighbour happens to come after it.
-    '[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10',
-    // A group is a set of equal actions, so they stay the same height even when
-    // one of them has an icon and the others do not.
-    '[&>*]:shrink-0'
-].join(' ');
-/**
- * A run of buttons that belong together.
- *
- * Two things are happening here and only one of them is visual. The corners
- * that face a neighbour are squared off — that is the look. The other half is
- * that `variant`, `size`, `color`, `density`, `elevation` and `disabled` are
- * stated once for the set rather than repeated on every button; a group where
- * one button is a size out is the failure this exists to prevent.
- *
- * The buttons stay real `PlButton`s and nothing about them is replaced. Which
- * also means this is **not** a segmented control and it does not manage
- * selection: for one-of-a-set reach for `PlSegmentedButton`, which is what that
- * actually is.
- */
-export const PlButtonGroup = /* @__PURE__ */ React.forwardRef(function PlButtonGroup({ variant, size, color, density, elevation, orientation = 'horizontal', disabled, fullWidth = false, className, children, ...props }, ref) {
-    // Every value is passed through as it arrived, `undefined` included. A
-    // PlButton reads the group only as a fallback, so "not set here" goes on
-    // meaning "use the button's own default" rather than turning into one.
-    const context = React.useMemo(() => ({ variant, size, color, density, elevation, disabled }), [variant, size, color, density, elevation, disabled]);
-    return (_jsx(ButtonGroupContext.Provider, { value: context, children: _jsx("div", { ref: ref, role: "group", className: cx(baseClasses, orientation === 'vertical' ? 'flex-col' : 'flex-row', joinClasses[orientation], 
-            // `variant` defaults to `solid` on a PlButton, so a group that says
-            // nothing is a solid group and must not overlap.
-            (variant ?? 'solid') === 'glass' ? overlapClasses[orientation] : '', fullWidth ? 'flex w-full [&>*]:flex-1' : '', className), ...props, children: children }) }));
-});
+"use client";import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{cx as t}from"../../internal/styles.js";const n={horizontal:"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none",vertical:"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"},r={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"},l=/* @__PURE__ */["inline-flex align-middle","[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10","[&>*]:shrink-0"].join(" ");export const PlButtonGroup=/* @__PURE__ */e.forwardRef(function PlButtonGroup({variant:s,size:a,color:d,density:c,elevation:f,orientation:u="horizontal",disabled:h,fullWidth:m=!1,className:v,children:p,...x},z){const b=e.useMemo(()=>({variant:s,size:a,color:d,density:c,elevation:f,disabled:h}),[s,a,d,c,f,h]);return o(i.Provider,{value:b,children:o("div",{ref:z,role:"group",className:t(l,"vertical"===u?"flex-col":"flex-row",n[u],"glass"===(s??"solid")?r[u]:"",m?"flex w-full [&>*]:flex-1":"",v),...x,children:p})})});

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

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

package/dist/components/card/PlCard.js

@@ -1,102 +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, hasContent, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetLineClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetSectionGapClasses, sheetTitleClasses, surfaceSlots } from '../../internal/styles.js';
-/**
- * The house transition with `transform` added to the property list.
- *
- * `transitionClasses` deliberately leaves it out, because no *control* may be
- * transformed. A card is the other kind of surface, so it writes its own list
- * rather than stacking a `transition-[transform]` on top of the shared one —
- * two `transition-property` declarations of equal specificity resolve by their
- * order in the generated stylesheet, which is not something a component should
- * depend on.
- */
-const cardTransitionClasses = /* @__PURE__ */ [
-    '[transition-property:background-color,border-color,box-shadow,color,transform]',
-    '[transition-duration:var(--plass-duration)]',
-    '[transition-timing-function:var(--plass-ease)]'
-].join(' ');
-/**
- * Hover lifts the sheet and puts a level of shadow under it; the press sets it
- * back down. Both directions take the house duration, and no `filter` is
- * involved — a card is not a coloured surface, so there is no brightness to
- * turn up.
- */
-const interactiveClasses = {
-    solid: /* @__PURE__ */ [
-        'cursor-pointer hover:-translate-y-0.5',
-        'hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]',
-        'active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        'cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)',
-        'hover:[border-color:var(--p-line)]',
-        'hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]',
-        'active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)'
-};
-/**
- * The sheet everything else on a screen is grouped onto, with the parts a card
- * is made of laid out on it: a title, a subtitle, a body and a footer.
- *
- * The sections are props rather than compound sub-components — `<Card.Header>`,
- * `<Card.Title>` — for the same reason `PlTextField` takes `label` and
- * `description` as props: the arrangement is fixed, and what a caller wants to
- * decide is what goes in each slot, not what order the slots come in.
- *
- * There is no Base UI primitive under this, and there should not be. A card has
- * no interaction to delegate: it is a surface with a layout, and the moment it
- * becomes something you press it is a `render` away from being a real one.
- */
-export const PlCard = /* @__PURE__ */ React.forwardRef(function PlCard({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 1, title, subtitle, headerAction, footer, dividers = false, padded = true, interactive = false, render, className, style, children, ...props }, ref) {
-    const insetX = padded ? sheetPaddingXClasses[density][size] : '';
-    const insetY = padded ? sheetPaddingYClasses[density][size] : '';
-    // Scored, the rules have to reach both edges, so the sheet gives up its
-    // padding and every section takes it on instead. Unscored, the sheet keeps
-    // its vertical padding and the sections are told apart by a gap.
-    const sectionClasses = dividers ? `${insetX} ${insetY}` : insetX;
-    const hasHeader = hasContent(title) || hasContent(subtitle) || hasContent(headerAction);
-    const header = (_jsxs(_Fragment, { children: [hasContent(title) || hasContent(subtitle) ? (_jsxs("div", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [hasContent(title) ? (_jsx("div", { className: `plass-title font-semibold ${sheetTitleClasses[size]}`, children: title })) : null, hasContent(subtitle) ? (_jsx("div", { className: `text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: subtitle })) : null] })) : null, hasContent(headerAction) ? _jsx("div", { className: "ml-auto shrink-0", children: headerAction }) : null] }));
-    const sections = [
-        hasHeader ? { key: 'header', className: 'flex items-start gap-3', content: header } : null,
-        hasContent(children)
-            ? { key: 'content', className: sheetBodyClasses[size], content: children }
-            : null,
-        hasContent(footer)
-            ? {
-                key: 'footer',
-                className: `flex flex-wrap items-center gap-2 ${sheetBodyClasses[size]}`,
-                content: footer
-            }
-            : null
-    ].filter((section) => section !== null);
-    const classNames = [
-        'flex flex-col',
-        radiusClasses[size],
-        sheetRestClasses[variant],
-        cardTransitionClasses,
-        interactive ? `${interactiveClasses[variant]} ${focusRingClasses}` : '',
-        dividers ? 'overflow-hidden' : `${insetY} ${sheetSectionGapClasses[size]}`,
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return useRender({
-        render: render ?? _jsx("div", {}),
-        ref,
-        props: {
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            ...props,
-            children: sections.map((section, index) => (_jsx("div", { className: [
-                    sectionClasses,
-                    section.className,
-                    dividers && index > 0 ? sheetLineClasses : ''
-                ]
-                    .filter(Boolean)
-                    .join(' '), children: section.content }, section.key)))
-        }
-    });
-});
+"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useRender as l}from"@base-ui/react/use-render";import{focusRingClasses as o,hasContent as t,metaTextClasses as n,radiusClasses as i,sheetBodyClasses as c,sheetHeaderGapClasses as d,sheetLineClasses as v,sheetPaddingXClasses as p,sheetPaddingYClasses as m,sheetRestClasses as f,sheetSectionGapClasses as h,sheetTitleClasses as u,surfaceSlots as g}from"../../internal/styles.js";const x=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),b={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:y="md",color:N="primary",density:$="default",elevation:j=1,title:w,subtitle:k,headerAction:B,footer:C,dividers:P=!1,padded:z=!0,interactive:A=!1,render:F,className:R,style:q,children:D,...E},G){const H=z?p[$][y]:"",I=z?m[$][y]:"",J=P?`${H} ${I}`:H,K=t(w)||t(k)||t(B),L=s(r,{children:[t(w)||t(k)?s("div",{className:`flex min-w-0 flex-1 flex-col ${d[y]}`,children:[t(w)?e("div",{className:`plass-title font-semibold ${u[y]}`,children:w}):null,t(k)?e("div",{className:`text-(--plass-muted-fg) ${n[y]}`,children:k}):null]}):null,t(B)?e("div",{className:"ml-auto shrink-0",children:B}):null]}),M=[K?{key:"header",className:"flex items-start gap-3",content:L}:null,t(D)?{key:"content",className:c[y],content:D}:null,t(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${c[y]}`,content:C}:null].filter(e=>null!==e),O=["flex flex-col",i[y],f[a],x,A?`${b[a]} ${o}`:"",P?"overflow-hidden":`${I} ${h[y]}`,R??""].filter(Boolean).join(" ");return l({render:F??e("div",{}),ref:G,props:{className:O,style:{...g(N,j),...q},...E,children:M.map((s,r)=>e("div",{className:[J,s.className,P&&r>0?v:""].filter(Boolean).join(" "),children:s.content},s.key))}})});

package/dist/components/card/index.js

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