plass-ui 1.0.0 → 1.0.1

package/dist/components/avatar/PlAvatar.js

@@ -1,121 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';
-import { controlHeightClasses, controlSlots, controlSquareClasses, glassClasses, hasContent, radiusClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * The initials, sized off the box rather than off the row.
- *
- * Its own ladder and not `controlTextClasses`, because a control's label is
- * measured against the words next to it and this one is measured against the
- * circle around it: roughly 40% of the diameter at every step, which is where
- * two characters fill the width without touching the edge.
- */
-const initialsTextClasses = {
-    xs: 'text-[0.5625rem]',
-    sm: 'text-[0.6875rem]',
-    md: 'text-[0.8125rem]',
-    lg: 'text-[1rem]',
-    xl: 'text-[1.1875rem]'
-};
-/**
- * The three materials, said the way a *control* says them: an avatar **is** the
- * thing being coloured — a portrait of one particular person — so its sheet
- * takes the tint, exactly as a `PlAlert`'s does and unlike a `PlCard`'s.
- *
- * `solid` carries no gloss line, for the reason a filled `PlButton` carries
- * none: the gradient is the form.
- */
-const variantClasses = {
-    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-border)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]'
-};
-const baseClasses = /* @__PURE__ */ [
-    'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden',
-    'align-middle leading-none font-semibold tracking-wide whitespace-nowrap',
-    // A glyph handed to `children` is drawn against the circle, not against a
-    // word, so it is sized off the box like the initials are rather than off the
-    // `1.2em` an icon riding on a label takes.
-    '[&_svg]:pointer-events-none [&_svg]:size-[55%]',
-    transitionClasses
-].join(' ');
-/**
- * The default fallback: a shoulders-and-head silhouette, drawn here rather than
- * in `internal/icons` because this is the only component that needs it.
- *
- * It exists so that `<PlAvatar />` with nothing at all is still an avatar. A box
- * with no picture, no name and no glyph in it is indistinguishable from a
- * component that failed to render.
- */
-function PersonIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { d: "M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z" }), _jsx("path", { d: "M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z" })] }));
-}
-/**
- * The first character of the first word, plus the first of the last.
- *
- * `Array.from` rather than `[0]`, so a name that starts with an emoji or with
- * any character outside the basic plane is not cut in half between its two code
- * units. `normalize('NFC')` first, so a name whose accents arrived decomposed —
- * which is what a macOS filename and a good many APIs hand you — yields `Ä`
- * rather than a bare `A`.
- *
- * One word gives one character on purpose. Korean, Japanese and Chinese names
- * are a single token, and two of their characters at 40px is a smudge where one
- * is a name.
- */
-function initialsOf(name) {
-    const words = name.normalize('NFC').trim().split(/\s+/).filter(Boolean);
-    if (words.length === 0) {
-        return '';
-    }
-    const first = Array.from(words[0])[0] ?? '';
-    const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] ?? '') : '';
-    return (first + last).toLocaleUpperCase();
-}
-/**
- * A picture of a person or a thing, at a known size, that is never an empty box.
- *
- * Three things can be drawn in it and exactly one of them is at a time: the
- * picture, if `src` is given and it loads; otherwise whatever stands in for it —
- * `children`, or `initials`, or the initials derived from `name`; and failing
- * all of those, a silhouette. Which one is showing is Base UI's `Avatar` to
- * decide, because "has the image loaded" is a question with four answers and a
- * race in the middle of it.
- *
- * It carries no status dot of its own. An avatar with a green mark on it is a
- * `PlBadge` with an avatar in it, and inventing a second spelling for that would
- * give the library two of them.
- */
-export const PlAvatar = /* @__PURE__ */ React.forwardRef(function PlAvatar({ src, srcSet, alt, name, initials, shape = 'circle', variant = 'ghost', size = 'md', color = 'primary', elevation = 0, delay, imageProps, onLoadingStatusChange, className, style, children, ...props }, ref) {
-    const derived = name ? initialsOf(name) : '';
-    const label = alt ?? name;
-    // `children` beats the initials beats the silhouette. Only the last of the
-    // three has nothing to say, which is what decides whether the fallback needs
-    // the name spelled out beside it.
-    const stand = hasContent(children) ? children : (initials ?? derived) || _jsx(PersonIcon, {});
-    const speaks = hasContent(children) || Boolean(initials ?? derived);
-    const classNames = [
-        baseClasses,
-        controlHeightClasses[size],
-        controlSquareClasses[size],
-        initialsTextClasses[size],
-        shape === 'circle' ? 'rounded-full' : radiusClasses[size],
-        variantClasses[variant],
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsxs(BaseUIAvatar.Root, { ref: ref, className: classNames, style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [src ? (_jsx(BaseUIAvatar.Image, { src: src, srcSet: srcSet, 
-                // Empty rather than absent: an avatar beside the person's own name is
-                // decoration, and `alt` left off is what makes a screen reader read
-                // the file name out instead.
-                alt: label ?? '', className: "size-full object-cover", onLoadingStatusChange: onLoadingStatusChange, ...imageProps })) : null, _jsxs(BaseUIAvatar.Fallback, { delay: src ? delay : undefined, className: "flex size-full items-center justify-center", children: [label && speaks ? _jsx("span", { className: srOnlyClasses, children: label }) : null, _jsx("span", { "aria-hidden": label && speaks ? true : undefined, className: "contents", children: stand })] })] }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Avatar as t}from"@base-ui/react/avatar";import{controlHeightClasses as s,controlSlots as n,controlSquareClasses as l,glassClasses as o,hasContent as i,radiusClasses as c,srOnlyClasses as d,transitionClasses as m}from"../../internal/styles.js";const p={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},f={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]"},g=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",m].join(" ");function PersonIcon(){return a("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */r.forwardRef(function PlAvatar({src:r,srcSet:o,alt:m,name:v,initials:h,shape:u="circle",variant:x="ghost",size:b="md",color:j="primary",elevation:y=0,delay:w,imageProps:N,onLoadingStatusChange:z,className:A,style:C,children:P,...k},B){const S=v?function initialsOf(e){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase()}(v):"",I=m??v,L=i(P)?P:(h??S)||e(PersonIcon,{}),F=i(P)||Boolean(h??S),M=[g,s[b],l[b],p[b],"circle"===u?"rounded-full":c[b],f[x],A??""].filter(Boolean).join(" ");return a(t.Root,{ref:B,className:M,style:{...n(j,y,x),...C},...k,children:[r?e(t.Image,{src:r,srcSet:o,alt:I??"",className:"size-full object-cover",onLoadingStatusChange:z,...N}):null,a(t.Fallback,{delay:r?w:void 0,className:"flex size-full items-center justify-center",children:[I&&F?e("span",{className:d,children:I}):null,e("span",{"aria-hidden":!(!I||!F)||void 0,className:"contents",children:L})]})]})});

package/dist/components/avatar/index.js

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

package/dist/components/badge/PlBadge.js

@@ -1,168 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { controlSlots, glassClasses, hasContent, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * A badge is smaller than anything else in the library, so it has a ladder of
- * its own rather than a step off `controlHeightClasses`.
- *
- * A control's height is the number a *row* lines up on; a badge lines up on
- * nothing — it hangs off the corner of something else. `md` is 18px, which is
- * the smallest a two-digit number stays legible at.
- */
-const badgeHeightClasses = {
-    xs: 'h-3.5 min-w-3.5',
-    sm: 'h-4 min-w-4',
-    md: 'h-4.5 min-w-4.5',
-    lg: 'h-5 min-w-5',
-    xl: 'h-6 min-w-6'
-};
-/** The dot: the same ladder with the digits taken out, so it goes square. */
-const dotSizeClasses = {
-    xs: 'size-1.5',
-    sm: 'size-2',
-    md: 'size-2.5',
-    lg: 'size-2.5',
-    xl: 'size-3'
-};
-const badgeTextClasses = {
-    xs: 'text-[0.5625rem]',
-    sm: 'text-[0.625rem]',
-    md: 'text-[0.6875rem]',
-    lg: 'text-[0.75rem]',
-    xl: 'text-[0.8125rem]'
-};
-/** Horizontal breathing room around the digits. `density` is what halves it. */
-const badgePaddingClasses = {
-    default: { xs: 'px-1', sm: 'px-1', md: 'px-1.5', lg: 'px-1.5', xl: 'px-2' },
-    compact: { xs: 'px-0.5', sm: 'px-0.5', md: 'px-1', lg: 'px-1', xl: 'px-1.5' }
-};
-/**
- * A badge sits well below the radius ladder — at 18px tall, `--plass-radius-xs`
- * (8px) is already most of the way to a pill, and a badge *is* the one thing in
- * the library allowed to be one.
- *
- * That is not a hole in the design language, it is the exception the language
- * names. A Plass corner is a moulded fillet on a *surface*, and a badge is not a
- * surface: it is a mark laid on one — which is also why it is the only component
- * that overlaps its neighbour.
- */
-const badgeRadiusClasses = 'rounded-full';
-/**
- * How far the marker is pulled out of the corner, per size.
- *
- * A negative margin rather than the `translate(50%,-50%)` every other library
- * reaches for, because the house rule against `transform` is absolute and worth
- * more than the two lines it costs here. The offsets are half the marker's own
- * height, so the vertical overhang is exactly half — and horizontally a wide
- * `99+` tucks in a little further than half, which is what you want anyway.
- */
-const cornerOffsets = {
-    xs: { badge: '-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5', dot: '-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5' },
-    sm: { badge: '-mt-2 -mb-2 -ms-2 -me-2', dot: '-mt-1 -mb-1 -ms-1 -me-1' },
-    md: { badge: '-mt-2 -mb-2 -ms-2 -me-2', dot: '-mt-1 -mb-1 -ms-1 -me-1' },
-    lg: { badge: '-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5', dot: '-mt-1 -mb-1 -ms-1 -me-1' },
-    xl: { badge: '-mt-3 -mb-3 -ms-3 -me-3', dot: '-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5' }
-};
-/**
- * Which two edges the marker is pinned to. Logical properties throughout, so the
- * corner flips with the writing direction rather than staying stuck on the right.
- */
-const placementClasses = {
-    'top-start': 'top-0 start-0',
-    'top-end': 'top-0 end-0',
-    'bottom-start': 'bottom-0 start-0',
-    'bottom-end': 'bottom-0 end-0'
-};
-/**
- * The extra inset a round anchor needs. A circle's corner is `r·(1 − 1/√2)` —
- * about 15% of its diameter — inside the bounding box the badge is positioned
- * against, so without this the marker floats off an avatar with a gap under it.
- */
-const circleInsetClasses = {
-    'top-start': 'mt-[7%] ms-[7%]',
-    'top-end': 'mt-[7%] me-[7%]',
-    'bottom-start': 'mb-[7%] ms-[7%]',
-    'bottom-end': 'mb-[7%] me-[7%]'
-};
-/**
- * The three materials, said the way a *control* says them: the marker is the
- * thing being coloured, so its sheet takes the tint.
- *
- * `solid` carries the gradient and the tinted lift and no gloss line, exactly as
- * a filled `PlButton` does. `ghost` is the one to reach for on a busy surface —
- * a soft tinted mark that reports without shouting.
- */
-const variantClasses = {
-    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-border)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'text-(--p-accent) bg-(--p-soft-press)'
-};
-/** `99+`, but only for a value a `+` means anything on. */
-function capContent(content, max) {
-    return typeof content === 'number' && content > max ? `${max}+` : content;
-}
-/**
- * A small mark in the corner of something else: unread mail on an inbox icon, a
- * status dot on an avatar, a count on a tab.
- *
- * The shell is a `<span>` that wraps the anchor and does nothing but establish a
- * positioning context — no width, no padding, `align-middle` — so a badged icon
- * button still measures and lines up exactly like a bare one. With no children
- * the marker lays out inline instead, which is what a standalone status pill is.
- *
- * There is no Base UI primitive under this, and there should not be: a badge has
- * no interaction, no state and no keyboard contract. It is a mark. Wiring it to a
- * widget primitive would hand every decorative dot a role it cannot honour.
- *
- * What it does owe a screen reader is a sentence rather than a number, which is
- * what `label` is for — `content={3}` beside a bell reads out as "3".
- */
-export const PlBadge = /* @__PURE__ */ React.forwardRef(function PlBadge({ variant = 'solid', size = 'md', color = 'primary', density = 'default', elevation = 0, content, max = 99, dot = false, showZero = false, invisible = false, placement = 'top-end', overlap = 'square', label, className, style, children, ...props }, ref) {
-    const anchored = hasContent(children);
-    // `0` is content, and `hasContent` would agree — this is the one place the
-    // library asks a second question, because a count of nothing is not news.
-    const empty = !hasContent(content) || (content === 0 && !showZero);
-    const asDot = dot || empty;
-    const hidden = invisible || (empty && !dot);
-    const markerClasses = [
-        'pointer-events-none z-10 inline-flex shrink-0 items-center justify-center',
-        'font-semibold tabular-nums whitespace-nowrap',
-        badgeRadiusClasses,
-        transitionClasses,
-        variantClasses[variant],
-        asDot
-            ? dotSizeClasses[size]
-            : [
-                badgeHeightClasses[size],
-                badgeTextClasses[size],
-                badgePaddingClasses[density][size]
-            ].join(' '),
-        anchored ? `absolute ${placementClasses[placement]}` : 'relative align-middle',
-        anchored ? (asDot ? cornerOffsets[size].dot : cornerOffsets[size].badge) : '',
-        anchored && overlap === 'circle' ? circleInsetClasses[placement] : '',
-        // Visibility, not opacity: a half-faded badge is a badge you have to squint
-        // at to find out whether it is there. The marker keeps its box either way,
-        // so nothing around it moves when it comes back.
-        hidden ? 'invisible' : '',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const capped = capContent(content, max);
-    const marker = (_jsx("span", { ref: ref, className: markerClasses, style: { ...controlSlots(color, elevation, variant), ...style }, "aria-hidden": hidden ? true : undefined, ...props, children: hidden ? null : (_jsxs(_Fragment, { children: [asDot || label ? _jsx("span", { className: srOnlyClasses, children: label ?? capped }) : null, asDot ? null : _jsx("span", { "aria-hidden": label ? true : undefined, children: capped })] })) }));
-    if (!anchored) {
-        return marker;
-    }
-    // `inline-flex` rather than `inline-block`: the shell has to be exactly as
-    // wide and as tall as what it wraps, or a badged icon button stops lining up
-    // with the bare one beside it.
-    return (_jsxs("span", { className: "relative inline-flex shrink-0 align-middle", children: [children, marker] }));
-});
+"use client";import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import*as m from"react";import{controlSlots as o,glassClasses as a,hasContent as l,srOnlyClasses as n,transitionClasses as r}from"../../internal/styles.js";const i={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},d={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},p={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},b={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},x="rounded-full",c={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},g={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},f={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},h={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[a,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press)"};export const PlBadge=/* @__PURE__ */m.forwardRef(function PlBadge({variant:m="solid",size:a="md",color:u="primary",density:v="default",elevation:w=0,content:j,max:y=99,dot:z=!1,showZero:N=!1,invisible:k=!1,placement:B="top-end",overlap:P="square",label:$,className:q,style:C,children:F,...R},Z){const A=l(F),D=!l(j)||0===j&&!N,E=z||D,G=k||D&&!z,H=["pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap",x,r,h[m],E?d[a]:[i[a],p[a],b[v][a]].join(" "),A?`absolute ${g[B]}`:"relative align-middle",A?E?c[a].dot:c[a].badge:"",A&&"circle"===P?f[B]:"",G?"invisible":"",q??""].filter(Boolean).join(" "),I=function capContent(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(j,y),J=e("span",{ref:Z,className:H,style:{...o(u,w,m),...C},"aria-hidden":!!G||void 0,...R,children:G?null:s(t,{children:[E||$?e("span",{className:n,children:$??I}):null,E?null:e("span",{"aria-hidden":!!$||void 0,children:I})]})});return A?s("span",{className:"relative inline-flex shrink-0 align-middle",children:[F,J]}):J});

package/dist/components/badge/index.js

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

package/dist/components/blockquote/PlBlockquote.js

@@ -1,112 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { glassClasses, hasContent, metaTextClasses, radiusClasses, sheetPaddingXClasses, sheetPaddingYClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/**
- * The quote itself, one step above body copy with the leading opened up.
- *
- * The sizes are `sheetTitleClasses`', because a quote is set at a heading's
- * scale — but the leading is not: a title is a line or two and a quote is a
- * paragraph somebody has to read, so it gets the air a paragraph needs.
- */
-const quoteTextClasses = {
-    xs: 'text-[0.75rem]/[1.25rem]',
-    sm: 'text-[0.8125rem]/[1.375rem]',
-    md: 'text-[0.9375rem]/[1.625rem]',
-    lg: 'text-[1.0625rem]/[1.875rem]',
-    xl: 'text-[1.25rem]/[2.125rem]'
-};
-/**
- * The rule down the leading edge, and the one thing every variant has.
- *
- * `border-s`, not `border-l`: the rule belongs on the side the text starts on,
- * which is the right edge under RTL. Its width is the one number here that does
- * not come off a ladder — a quote rule is 2px at every size, because it is a
- * mark in the margin rather than a part of the type.
- */
-const ruleClasses = 'border-s-2 [border-inline-start-color:var(--p-accent)]';
-/**
- * The three materials, said the way a *container* says them — the sheet is never
- * dyed, exactly as on a `PlCard`. A quote holds somebody else's words, and words
- * on a tinted pane are words on a background nobody chose them against. The
- * family reaches the rule and stops.
- *
- * `ghost` is the default and the one that belongs in running prose: a rule in
- * the margin and nothing else, which is what a quote has looked like since long
- * before there were surfaces to put one on.
- */
-const variantClasses = {
-    solid: /* @__PURE__ */ [
-        glassClasses,
-        'bg-(--plass-glass-press)',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    // `border-s-2` again, after `border`, so the hairline on the other three edges
-    // does not flatten the rule back to a pixel.
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border border-s-2 bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'bg-transparent'
-};
-/**
- * The quotation mark: a pair of commas turned up, drawn rather than typed.
- *
- * A real `“` would be set in whatever face the page uses and would change shape,
- * weight and baseline with it — and at 2em it is the largest single glyph in the
- * component, so it changing is the most visible thing that could. This is one
- * drawing at one weight, and it lives here rather than in `internal/icons.tsx`
- * because exactly one component draws it.
- */
-function QuoteMarkIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z", fill: "currentColor" }) }));
-}
-/**
- * Somebody else's words, set apart from your own.
- *
- * There is no Base UI primitive under this and there should not be: a quote has
- * no state, no keyboard contract and nothing to interact with. What it has is
- * markup that is easy to get wrong, and getting it right is most of the point.
- *
- * **Nothing is drawn on the `<blockquote>` itself.** The surface, the rule and
- * the padding all belong to the element around it, and that is not tidiness —
- * `blockquote` is one of the handful of tags a host stylesheet still styles by
- * name. VitePress's `.vp-doc blockquote` sets a grey `border-left`, a
- * `padding-left` and a `color`, all at a specificity a one-class utility cannot
- * outrank, so a rule drawn on the quote itself would silently come out grey and
- * a pixel too thin. Moving the drawing onto a wrapper is what lets the docs undo
- * VitePress's version without also undoing this one.
- *
- * The wrapper is a `<figure>` when there is an attribution and a `<div>` when
- * there is not, because the HTML spec is explicit that the attribution goes
- * *outside* the blockquote — a name inside it claims the speaker said their own
- * name — and a `<figure>` with no `<figcaption>` in it is a figure of nothing.
- */
-export const PlBlockquote = /* @__PURE__ */ React.forwardRef(function PlBlockquote({ variant = 'ghost', size = 'md', color = 'primary', density = 'default', elevation = 0, author, source, cite, icon, className, style, children, ...props }, ref) {
-    const attributed = hasContent(author) || hasContent(source);
-    const glyph = icon === undefined ? _jsx(QuoteMarkIcon, {}) : icon;
-    const shellClasses = [
-        'flex flex-col text-(--plass-fg)',
-        ruleClasses,
-        // The corners on the ruled edge stay square: a 2px rule that curves away
-        // from the text it marks is a bracket, not a margin rule.
-        variant === 'ghost' ? '' : `${radiusClasses[size]} rounded-s-none`,
-        variantClasses[variant],
-        sheetPaddingXClasses[density][size],
-        sheetPaddingYClasses[density][size],
-        transitionClasses,
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const quote = (_jsxs("blockquote", { cite: cite, className: quoteTextClasses[size], children: [hasContent(glyph) ? (_jsx("span", { "aria-hidden": "true", className: "mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:size-full", children: glyph })) : null, children] }));
-    const shellStyle = { ...surfaceSlots(color, elevation), ...style };
-    if (!attributed) {
-        return (_jsx("div", { ref: ref, className: shellClasses, style: shellStyle, ...props, children: quote }));
-    }
-    return (_jsxs("figure", { ref: ref, className: shellClasses, style: shellStyle, ...props, children: [quote, _jsxs("figcaption", { className: [
-                    'mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)',
-                    metaTextClasses[size]
-                ].join(' '), children: [hasContent(author) ? (_jsxs("span", { className: "font-medium text-(--plass-fg)", children: [_jsx("span", { "aria-hidden": "true", children: "\u2014 " }), author] })) : null, hasContent(source) ? _jsx("cite", { className: "not-italic", children: source }) : null] })] }));
-});
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{glassClasses as l,hasContent as a,metaTextClasses as t,radiusClasses as o,sheetPaddingXClasses as n,sheetPaddingYClasses as i,surfaceSlots as c,transitionClasses as d}from"../../internal/styles.js";const m={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},p="border-s-2 [border-inline-start-color:var(--p-accent)]",u={solid:/* @__PURE__ */[l,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[l,"border border-s-2 bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const PlBlockquote=/* @__PURE__ */r.forwardRef(function PlBlockquote({variant:r="ghost",size:l="md",color:f="primary",density:g="default",elevation:x=0,author:h,source:v,cite:b,icon:j,className:N,style:k,children:y,...w},B){const M=a(h)||a(v),q=void 0===j?e(QuoteMarkIcon,{}):j,z=["flex flex-col text-(--plass-fg)",p,"ghost"===r?"":`${o[l]} rounded-s-none`,u[r],n[g][l],i[g][l],d,N??""].filter(Boolean).join(" "),I=s("blockquote",{cite:b,className:m[l],children:[a(q)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:size-full",children:q}):null,y]}),P={...c(f,x),...k};return M?s("figure",{ref:B,className:z,style:P,...w,children:[I,s("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)",t[l]].join(" "),children:[a(h)?s("span",{className:"font-medium text-(--plass-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),h]}):null,a(v)?e("cite",{className:"not-italic",children:v}):null]})]}):e("div",{ref:B,className:z,style:P,...w,children:I})});

package/dist/components/blockquote/index.js

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

package/dist/components/bottom-navigation/PlBottomNavigation.js

@@ -1,141 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { cx, focusRingInsetClasses, hasContent, iconSizeClasses, metaTextClasses, radiusClasses, sheetLineClasses, sheetRestClasses, srOnlyClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-const BottomNavigationContext = /* @__PURE__ */ React.createContext({
-    value: null,
-    change: () => { },
-    size: 'md',
-    density: 'default',
-    labels: 'all',
-    disabled: false
-});
-const positionClasses = {
-    static: '',
-    sticky: 'sticky bottom-0 z-20',
-    fixed: 'fixed inset-x-0 bottom-0 z-30'
-};
-/**
- * The row's floor.
- *
- * `md` is 56px, which is the height a bottom navigation has had since the first
- * one — tall enough for a glyph with a word under it, short enough that it is
- * not competing with the page it is on. The ladder around it keeps the same
- * proportion to the glyph and the name it holds.
- */
-const rowMinHeightClasses = {
-    xs: 'min-h-10',
-    sm: 'min-h-12',
-    md: 'min-h-14',
-    lg: 'min-h-16',
-    xl: 'min-h-18'
-};
-/** The air inside the sheet, around the row of items. */
-const rowPaddingClasses = {
-    default: { xs: 'p-1', sm: 'p-1', md: 'p-1.5', lg: 'p-2', xl: 'p-2.5' },
-    compact: { xs: 'p-0.5', sm: 'p-0.5', md: 'p-1', lg: 'p-1', xl: 'p-1.5' }
-};
-/** Between the glyph and the name under it. */
-const itemGapClasses = {
-    xs: 'gap-0.5',
-    sm: 'gap-0.5',
-    md: 'gap-1',
-    lg: 'gap-1',
-    xl: 'gap-1.5'
-};
-/**
- * A row of destinations held against the bottom edge of the window.
- *
- * It is a `<nav>` rather than a `role="tablist"`, and its items are ordinary
- * links or buttons rather than tabs. That is a deliberate choice about what is
- * being promised: a tab list owes a keyboard reader one tab stop for the whole
- * set and arrow keys within it, and it owes a screen reader a panel per tab. A
- * bottom navigation switches what the *page* is, not which panel of one is
- * showing, and claiming the role without the behaviour is worse for a keyboard
- * reader than never claiming it. What is claimed instead is `aria-current`,
- * which is the honest statement: this is the destination you are on.
- *
- * The sheet is never dyed, exactly as on a `PlCard`. What carries the colour
- * family is the one item that is current.
- */
-export const PlBottomNavigation = /* @__PURE__ */ React.forwardRef(function PlBottomNavigation({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, value: valueProp, defaultValue = null, onValueChange, position = 'fixed', labels = 'all', divider = true, safeArea = true, disabled = false, label, render, className, style, children, ...props }, ref) {
-    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
-    const controlled = valueProp !== undefined;
-    const value = controlled ? valueProp : uncontrolled;
-    const change = React.useCallback((next) => {
-        if (!controlled) {
-            setUncontrolled(next);
-        }
-        onValueChange?.(next);
-    }, [controlled, onValueChange]);
-    const context = React.useMemo(() => ({ value: value ?? null, change, size, density, labels, disabled }), [value, change, size, density, labels, disabled]);
-    const classNames = cx('w-full min-w-0', 
-    // A bar spanning an edge of the window has nothing behind its corners, so
-    // only one sitting in the flow is a sheet with corners at all.
-    position === 'static' ? radiusClasses[size] : '', sheetRestClasses[variant], 
-    // A bar that is not in the flow has three edges against the window and one
-    // against the content, so only that one is ever drawn — a hairline down
-    // the left of the screen is a hairline nobody asked for. In the flow it is
-    // an ordinary sheet and keeps the whole outline `sheetRestClasses` gave it.
-    variant === 'glass' && position !== 'static' ? 'border-0' : '', divider ? sheetLineClasses : '', positionClasses[position], 
-    // The sheet keeps reaching the bottom of the screen; what the inset moves
-    // is the row inside it. A bar that stopped above the home indicator would
-    // leave a stripe of page showing under the glass.
-    safeArea ? 'pb-[env(safe-area-inset-bottom)]' : '', transitionClasses, className);
-    return useRender({
-        render: render ?? _jsx("nav", {}),
-        ref,
-        props: {
-            'aria-label': label,
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            children: (_jsx(BottomNavigationContext.Provider, { value: context, children: _jsx("div", { className: cx('flex w-full items-stretch', rowMinHeightClasses[size], rowPaddingClasses[density][size]), children: children }) })),
-            ...props
-        }
-    });
-});
-/**
- * One destination.
- *
- * It has no `size`, no `color` and no `variant` of its own: all three belong to
- * the bar, which is the only place they can be set once and mean the same thing
- * for every item.
- *
- * With an `href` it is a real `<a>`, which is what makes a long press offer
- * "open in a new tab" and what puts the destination in the status bar — neither
- * of which a `<button>` that calls `router.push` can do. Without one it is a
- * `<button>`, because a `<div>` carrying a click handler is invisible to a
- * keyboard.
- */
-export const PlBottomNavigationItem = /* @__PURE__ */ React.forwardRef(function PlBottomNavigationItem({ value, icon, href, disabled: disabledProp = false, className, children, onClick, ...props }, ref) {
-    const bar = React.useContext(BottomNavigationContext);
-    const disabled = disabledProp || bar.disabled;
-    const selected = bar.value !== null && bar.value === value;
-    const named = bar.labels === 'all' || (bar.labels === 'selected' && selected);
-    const classNames = cx('flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5', itemGapClasses[bar.size], radiusClasses[bar.size], '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]', transitionClasses, 
-    // Inset rather than offset: the item is inside a sheet that clips, and a
-    // ring drawn outside it would have its top sliced off.
-    focusRingInsetClasses, 
-    // 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] text-(--plass-muted-fg)'
-        : selected
-            ? 'cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)'
-            : 'cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)', className);
-    const body = (_jsxs(_Fragment, { children: [hasContent(icon) ? (_jsx("span", { className: cx('flex shrink-0 items-center justify-center', iconSizeClasses[bar.size]), children: icon })) : null, hasContent(children) ? (_jsx("span", { className: named
-                    ? cx('max-w-full truncate leading-tight', metaTextClasses[bar.size])
-                    : srOnlyClasses, children: children })) : null] }));
-    const press = (event) => {
-        if (disabled) {
-            event.preventDefault();
-            return;
-        }
-        bar.change(value);
-        onClick?.(event);
-    };
-    if (href) {
-        return (_jsx("a", { ref: ref, href: disabled ? undefined : href, "aria-current": selected ? 'page' : undefined, "aria-disabled": disabled || undefined, className: classNames, onClick: press, ...props, children: body }));
-    }
-    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, "aria-current": selected ? 'page' : undefined, className: classNames, onClick: press, ...props, children: body }));
-});
+"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as s}from"@base-ui/react/use-render";import{cx as i,focusRingInsetClasses as n,hasContent as r,iconSizeClasses as o,metaTextClasses as c,radiusClasses as d,sheetLineClasses as m,sheetRestClasses as u,srOnlyClasses as p,surfaceSlots as f,transitionClasses as g}from"../../internal/styles.js";const h=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),x={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},v={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},b={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t="md",color:n="primary",density:r="default",elevation:o=0,value:c,defaultValue:p=null,onValueChange:y,position:N="fixed",labels:w="all",divider:z=!0,safeArea:k=!0,disabled:C=!1,label:j,render:P,className:B,style:I,children:R,...V},A){const[D,F]=l.useState(p),M=void 0!==c,S=M?c:D,q=l.useCallback(e=>{M||F(e),y?.(e)},[M,y]),E=l.useMemo(()=>({value:S??null,change:q,size:t,density:r,labels:w,disabled:C}),[S,q,t,r,w,C]),G=i("w-full min-w-0","static"===N?d[t]:"",u[a],"glass"===a&&"static"!==N?"border-0":"",z?m:"",x[N],k?"pb-[env(safe-area-inset-bottom)]":"",g,B);return s({render:P??e("nav",{}),ref:A,props:{"aria-label":j,className:G,style:{...f(n,o),...I},children:e(h.Provider,{value:E,children:e("div",{className:i("flex w-full items-stretch",v[t],b[r][t]),children:R})}),...V}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:m,href:u,disabled:f=!1,className:x,children:v,onClick:b,...N},w){const z=l.useContext(h),k=f||z.disabled,C=null!==z.value&&z.value===s,j="all"===z.labels||"selected"===z.labels&&C,P=i("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",y[z.size],d[z.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,n,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":C?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",x),B=t(a,{children:[r(m)?e("span",{className:i("flex shrink-0 items-center justify-center",o[z.size]),children:m}):null,r(v)?e("span",{className:j?i("max-w-full truncate leading-tight",c[z.size]):p,children:v}):null]}),press=e=>{k?e.preventDefault():(z.change(s),b?.(e))};return u?e("a",{ref:w,href:k?void 0:u,"aria-current":C?"page":void 0,"aria-disabled":k||void 0,className:P,onClick:press,...N,children:B}):e("button",{ref:w,type:"button",disabled:k,"aria-current":C?"page":void 0,className:P,onClick:press,...N,children:B})});

package/dist/components/bottom-navigation/index.js

@@ -1 +1 @@
-export { PlBottomNavigation, PlBottomNavigationItem } from './PlBottomNavigation.js';
+export{PlBottomNavigation,PlBottomNavigationItem}from"./PlBottomNavigation.js";

package/dist/components/box/PlBox.js

@@ -1,46 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { cx, radiusClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/**
- * A sheet of glass with content on it. The plainest surface in the library: it
- * groups things, and that is all it does.
- *
- * Everything structural — a title, a footer, hairlines between sections —
- * belongs to `PlCard`, which is a box with those sections laid out on it. What
- * is left here is the sheet itself, and the reason it is worth having on its own
- * is that most of what a screen groups has no heading: a well behind a form, a
- * tile in a shelf, a panel round a chart.
- *
- * `size` means something different here from what it means on a control, and
- * this is the one place in the library where that is true. A box is as tall as
- * what it holds, and its children bring their own typography — a container that
- * reset the type scale would render the same paragraph at two sizes depending
- * on what it was wrapped in. So `size` is the size of the **sheet**: its radius
- * and its padding, and nothing else.
- *
- * The three materials say what they say everywhere else, read as a container's:
- * the sheet is never dyed, because what a box holds arrives with its own
- * colours and tinting the pane under them puts every one on a background it was
- * not chosen against. The family reaches the hairline and the focus ring and
- * stops. `ghost` is the one to reach for inside another surface, where a second
- * bordered rectangle is a second rectangle.
- */
-export const PlBox = /* @__PURE__ */ React.forwardRef(function PlBox({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, padded = true, render, className, style, children, ...props }, ref) {
-    const classNames = cx('block', radiusClasses[size], padded ? `${sheetPaddingXClasses[density][size]} ${sheetPaddingYClasses[density][size]}` : '', sheetRestClasses[variant], 
-    // The same property list and duration as everything else, so a box whose
-    // colour or elevation changes settles at the house pace. There is no
-    // `:active` treatment because a box is not pressed — it holds things that
-    // are.
-    transitionClasses, className);
-    return useRender({
-        render: render ?? _jsx("div", {}),
-        ref,
-        props: {
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as s}from"@base-ui/react/use-render";import{cx as t,radiusClasses as o,sheetPaddingXClasses as a,sheetPaddingYClasses as i,sheetRestClasses as n,surfaceSlots as l,transitionClasses as c}from"../../internal/styles.js";export const PlBox=/* @__PURE__ */r.forwardRef(function PlBox({variant:r="glass",size:d="md",color:m="primary",density:f="default",elevation:p=0,padded:u=!0,render:x,className:y,style:j,children:v,...b},h){const B=t("block",o[d],u?`${a[f][d]} ${i[f][d]}`:"",n[r],c,y);return s({render:x??e("div",{}),ref:h,props:{className:B,style:{...l(m,p),...j},children:v,...b}})});

package/dist/components/box/index.js

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