plass-ui 1.0.0 → 1.0.1

package/dist/components/carousel/PlCarousel.js

@@ -1,177 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlIconButton } from '../icon-button/PlIconButton.js';
-import { ChevronIcon } from '../../internal/icons.js';
-import { cx, radiusClasses, sheetRestClasses, srOnlyClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/** How far the arrows sit in from the frame's edge. */
-const arrowInsetClasses = {
-    xs: 'start-1 end-1',
-    sm: 'start-1.5 end-1.5',
-    md: 'start-2 end-2',
-    lg: 'start-3 end-3',
-    xl: 'start-4 end-4'
-};
-/**
- * The dot ladder.
- *
- * A current dot is a short bar rather than a bigger circle: it grows along the
- * row it is in, so the row's height never changes and the dots either side of
- * it do not move. Width and colour are the only two things that travel, which
- * is what keeps this inside the house rule against scaling anything.
- */
-const dotClasses = {
-    xs: { rest: 'h-1 w-1', current: 'h-1 w-3', gap: 'gap-1' },
-    sm: { rest: 'h-1 w-1', current: 'h-1 w-3.5', gap: 'gap-1' },
-    md: { rest: 'h-1.5 w-1.5', current: 'h-1.5 w-4', gap: 'gap-1.5' },
-    lg: { rest: 'h-1.5 w-1.5', current: 'h-1.5 w-5', gap: 'gap-2' },
-    xl: { rest: 'h-2 w-2', current: 'h-2 w-6', gap: 'gap-2' }
-};
-/** How long a smooth scroll of our own is given to arrive. */
-const SETTLE_MS = 700;
-/**
- * A strip of slides, one of which is in view.
- *
- * The mechanism is a scroll container with CSS scroll snapping, and everything
- * good about this component follows from that one choice. Swiping on a phone
- * and two-finger dragging on a trackpad both work because they are the
- * browser's own scrolling and not a gesture handler pretending to be it. The
- * strip runs the other way under RTL without being told, because scrolling is
- * directional and `translate` is not. And nothing is transformed — the house
- * rule against moving a surface holds here for free, where a translated track
- * would have had to argue for an exception.
- *
- * The motion is `scroll-behavior: smooth`, which means a reader who has asked
- * for reduced motion gets an instant cut from the same code path rather than
- * from a second one written to remember them.
- *
- * Slides are not a sub-component. Every top-level child is wrapped in its own
- * slide, so `<PlCarousel><img /><img /></PlCarousel>` is the whole API — and the
- * wrapper is what carries the snap point, the width and the
- * `role="group"` / `aria-roledescription="slide"` pair a screen reader needs,
- * none of which a caller should have to remember to put on a photograph.
- */
-export const PlCarousel = /* @__PURE__ */ React.forwardRef(function PlCarousel({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, value, defaultValue = 0, onValueChange, loop = true, autoPlay = false, interval = 5000, arrows = true, indicators = true, label = 'Carousel', previousLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel, className, style, children, ...props }, ref) {
-    const nameSlide = slideLabel ?? ((index, total) => `Slide ${index} of ${total}`);
-    // `toArray` is what drops the `null`s and `false`s a conditional slide
-    // leaves behind, and what gives every remaining child a stable key.
-    const slides = React.Children.toArray(children);
-    const count = slides.length;
-    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
-    const index = Math.min(Math.max(value ?? uncontrolled, 0), Math.max(count - 1, 0));
-    const trackRef = React.useRef(null);
-    const slideRefs = React.useRef([]);
-    // Set while the index is catching up with a scroll the reader performed. The
-    // effect below skips those, or every drag would be answered by a scroll back
-    // to where the browser had already put us.
-    const fromScroll = React.useRef(false);
-    const mounted = React.useRef(false);
-    // Raised while a smooth scroll of our own is still travelling. Without it
-    // the scroll events thrown on the way from slide 0 to slide 2 would each be
-    // read as the reader landing on slide 1.
-    const settling = React.useRef(false);
-    const [paused, setPaused] = React.useState(false);
-    const go = React.useCallback((next, viaScroll = false) => {
-        if (count === 0) {
-            return;
-        }
-        const wrapped = loop
-            ? ((next % count) + count) % count
-            : Math.min(Math.max(next, 0), count - 1);
-        fromScroll.current = viaScroll;
-        if (value === undefined) {
-            setUncontrolled(wrapped);
-        }
-        if (wrapped !== index) {
-            onValueChange?.(wrapped);
-        }
-    }, [count, loop, value, index, onValueChange]);
-    React.useEffect(() => {
-        if (fromScroll.current) {
-            fromScroll.current = false;
-            return;
-        }
-        // The first pass would otherwise scroll the page down to a carousel
-        // nobody has looked at yet, just to put slide 0 where the browser already
-        // had it.
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        slideRefs.current[index]?.scrollIntoView({ block: 'nearest', inline: 'start' });
-        settling.current = true;
-        const timer = window.setTimeout(() => {
-            settling.current = false;
-        }, SETTLE_MS);
-        return () => window.clearTimeout(timer);
-    }, [index]);
-    /**
-     * Where the strip has settled, read off the scroll offset rather than
-     * measured per slide: every slide is exactly the width of the frame, so the
-     * offset divided by that width *is* the index. `Math.abs` is what makes it
-     * hold under RTL, where a scroll position counts backwards from zero.
-     */
-    const handleScroll = () => {
-        const track = trackRef.current;
-        // `settling` is tested before anything is measured, and that order is the
-        // point: a smooth scroll of our own throws events for most of a second,
-        // and those are exactly the ones with nothing to answer. Reading
-        // `clientWidth` first would force a layout on every one of them.
-        if (settling.current || !track || track.clientWidth === 0) {
-            return;
-        }
-        const nearest = Math.round(Math.abs(track.scrollLeft) / track.clientWidth);
-        if (nearest !== index && nearest >= 0 && nearest < count) {
-            go(nearest, true);
-        }
-    };
-    React.useEffect(() => {
-        if (!autoPlay || paused || count < 2) {
-            return;
-        }
-        // A reader who has asked for less motion has asked for this in particular.
-        if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
-            return;
-        }
-        const timer = window.setInterval(() => {
-            if (document.hidden) {
-                return;
-            }
-            go(index + 1);
-        }, interval);
-        return () => window.clearInterval(timer);
-    }, [autoPlay, paused, count, interval, index, go]);
-    const atStart = index <= 0;
-    const atEnd = index >= count - 1;
-    return (_jsxs("div", { ref: ref, role: "region", "aria-roledescription": "carousel", "aria-label": label, className: cx('flex flex-col', className), style: { ...surfaceSlots(color, elevation), ...style }, 
-        // Hover and focus both stop the timer. The second one is the important
-        // one: a keyboard reader who has tabbed into a slide is reading it.
-        onPointerEnter: () => setPaused(true), onPointerLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), ...props, children: [_jsxs("div", { className: cx('relative min-w-0 overflow-hidden', radiusClasses[size], sheetRestClasses[variant], transitionClasses), children: [_jsx("div", { ref: trackRef, 
-                        // Focusable, so the strip can be scrolled with the arrow keys by
-                        // whoever is not using a pointer. That is the browser's own key
-                        // handling on a scroll container, which means it is already right
-                        // under RTL — a handler of ours mapping ArrowRight to "next" would
-                        // not have been.
-                        tabIndex: 0, role: "group", "aria-label": label, className: cx('flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth', 'motion-reduce:scroll-auto', 
-                        // The strip is driven by buttons and by dragging; a scrollbar
-                        // under it is a third control saying the same thing.
-                        '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden', 'focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]'), onScroll: handleScroll, children: slides.map((slide, slideIndex) => (_jsx("div", { ref: (element) => {
-                                slideRefs.current[slideIndex] = element;
-                            }, role: "group", "aria-roledescription": "slide", "aria-label": nameSlide(slideIndex + 1, count), 
-                            // Deliberately *not* `aria-hidden` when off-screen. A slide can
-                            // hold a link or a button, and an `aria-hidden` subtree that is
-                            // still in the tab order is the exact shape of the bug where a
-                            // keyboard reader lands somewhere their screen reader refuses
-                            // to describe. The strip is scrollable, so everything in it is
-                            // genuinely reachable — hiding it would be a lie.
-                            className: "w-full shrink-0 grow-0 basis-full snap-start", children: slide }, slideIndex))) }), arrows && count > 1 ? (_jsxs("div", { className: cx('pointer-events-none absolute inset-y-0 flex items-center', arrowInsetClasses[size]), children: [_jsx(PlIconButton, { variant: "glass", size: size, color: color, density: density, elevation: 1, label: previousLabel, disabled: !loop && atStart, className: "pointer-events-auto", 
-                                // Drawn pointing down and turned, which is the one allowance the
-                                // no-transform rule makes — and turned the other way under RTL,
-                                // where "previous" is on the other side of the frame.
-                                icon: _jsx("span", { className: "flex rotate-90 items-center rtl:-rotate-90", children: _jsx(ChevronIcon, {}) }), onClick: () => go(index - 1) }), _jsx("span", { className: "flex-1" }), _jsx(PlIconButton, { variant: "glass", size: size, color: color, density: density, elevation: 1, label: nextLabel, disabled: !loop && atEnd, className: "pointer-events-auto", icon: _jsx("span", { className: "flex -rotate-90 items-center rtl:rotate-90", children: _jsx(ChevronIcon, {}) }), onClick: () => go(index + 1) })] })) : null] }), indicators && count > 1 ? (_jsx("div", { className: cx('flex shrink-0 items-center justify-center pt-2', dotClasses[size].gap), children: slides.map((_, dotIndex) => (_jsx("button", { type: "button", "aria-label": nameSlide(dotIndex + 1, count), "aria-current": dotIndex === index ? 'true' : undefined, className: cx('cursor-pointer rounded-full', 
-                    // Width and colour, never a transform: the current dot grows
-                    // along the row instead of scaling, so nothing beside it
-                    // moves.
-                    '[transition-property:width,background-color]', '[transition-duration:var(--plass-duration)]', '[transition-timing-function:var(--plass-ease)]', 'focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2', dotIndex === index
-                        ? `${dotClasses[size].current} bg-(--p-accent)`
-                        : `${dotClasses[size].rest} bg-(--plass-border) hover:bg-(--p-accent)`), onClick: () => go(dotIndex) }, dotIndex))) })) : null, _jsx("span", { className: srOnlyClasses, "aria-live": autoPlay ? 'off' : 'polite', children: count > 0 ? nameSlide(index + 1, count) : '' })] }));
-});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,radiusClasses as l,sheetRestClasses as i,srOnlyClasses as o,surfaceSlots as c,transitionClasses as u}from"../../internal/styles.js";const d={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},f={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:m="glass",size:p="md",color:h="primary",density:v="default",elevation:b=0,value:w,defaultValue:g=0,onValueChange:x,loop:N=!0,autoPlay:y=!1,interval:k=5e3,arrows:C=!0,indicators:M=!0,label:j="Carousel",previousLabel:P="Previous slide",nextLabel:R="Next slide",slideLabel:I,className:L,style:S,children:$,..._},z){const E=I??((e,r)=>`Slide ${e} of ${r}`),V=t.Children.toArray($),B=V.length,[T,W]=t.useState(g),A=Math.min(Math.max(w??T,0),Math.max(B-1,0)),F=t.useRef(null),q=t.useRef([]),D=t.useRef(!1),G=t.useRef(!1),H=t.useRef(!1),[J,K]=t.useState(!1),O=t.useCallback((e,r=!1)=>{if(0===B)return;const t=N?(e%B+B)%B:Math.min(Math.max(e,0),B-1);D.current=r,void 0===w&&W(t),t!==A&&x?.(t)},[B,N,w,A,x]);t.useEffect(()=>{if(D.current)return void(D.current=!1);if(!G.current)return void(G.current=!0);q.current[A]?.scrollIntoView({block:"nearest",inline:"start"}),H.current=!0;const e=window.setTimeout(()=>{H.current=!1},700);return()=>window.clearTimeout(e)},[A]),t.useEffect(()=>{if(!y||J||B<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||O(A+1)},k);return()=>window.clearInterval(e)},[y,J,B,k,A,O]);const Q=A<=0,U=A>=B-1;return r("div",{ref:z,role:"region","aria-roledescription":"carousel","aria-label":j,className:s("flex flex-col",L),style:{...c(h,b),...S},onPointerEnter:()=>K(!0),onPointerLeave:()=>K(!1),onFocus:()=>K(!0),onBlur:()=>K(!1),..._,children:[r("div",{className:s("relative min-w-0 overflow-hidden",l[p],i[m],u),children:[e("div",{ref:F,tabIndex:0,role:"group","aria-label":j,className:s("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=F.current;if(H.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==A&&r>=0&&r<B&&O(r,!0)},children:V.map((r,t)=>e("div",{ref:e=>{q.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":E(t+1,B),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),C&&B>1?r("div",{className:s("pointer-events-none absolute inset-y-0 flex items-center",d[p]),children:[e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:P,disabled:!N&&Q,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(n,{})}),onClick:()=>O(A-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:R,disabled:!N&&U,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(n,{})}),onClick:()=>O(A+1)})]}):null]}),M&&B>1?e("div",{className:s("flex shrink-0 items-center justify-center pt-2",f[p].gap),children:V.map((r,t)=>e("button",{type:"button","aria-label":E(t+1,B),"aria-current":t===A?"true":void 0,className:s("cursor-pointer rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",t===A?`${f[p].current} bg-(--p-accent)`:`${f[p].rest} bg-(--plass-border) hover:bg-(--p-accent)`),onClick:()=>O(t)},t))}):null,e("span",{className:o,"aria-live":y?"off":"polite",children:B>0?E(A+1,B):""})]})});

package/dist/components/carousel/index.js

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

package/dist/components/chat-bubble/PlChatBubble.js

@@ -1,206 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { CheckIcon, ClockIcon, LinkIcon, severityIcon } from '../../internal/icons.js';
-import { controlSlots, focusRingClasses, glassClasses, hasContent, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * A bubble's own padding track, tighter than a sheet's.
- *
- * A sheet is a region of a page and a bubble is a sentence with a surface behind
- * it: 20px of padding around eight words is a card, not a message. Both axes,
- * because unlike a control a bubble has no height to fight.
- */
-const bubblePaddingClasses = {
-    default: {
-        xs: 'px-2 py-1',
-        sm: 'px-2.5 py-1.5',
-        md: 'px-3 py-2',
-        lg: 'px-3.5 py-2.5',
-        xl: 'px-4 py-3'
-    },
-    compact: {
-        xs: 'px-1.5 py-0.5',
-        sm: 'px-2 py-1',
-        md: 'px-2.5 py-1.5',
-        lg: 'px-3 py-1.5',
-        xl: 'px-3.5 py-2'
-    }
-};
-/**
- * The corner nearest the speaker is cut short.
- *
- * This is the library's one piece of chat vocabulary, and it does the job a
- * drawn tail does elsewhere: it says which end of the row the message came from,
- * without hanging a triangle off a sheet of glass that is supposed to have been
- * cut with a straight edge. Written as the logical properties rather than as
- * `rounded-tl`, so a thread in Arabic squares the other corner without being
- * told.
- *
- * A flat 4px rather than a step down the radius ladder, and that is the whole
- * point of writing it out: the ladder runs 8px to 16px, so `--plass-radius-xs`
- * against `--plass-radius-md` is a four-pixel difference nobody would ever read
- * as meaning something. The cut has to be obvious at a glance in a column of
- * forty messages or it is not saying anything.
- */
-const tailClasses = {
-    start: '[border-start-start-radius:0.25rem]',
-    end: '[border-start-end-radius:0.25rem]'
-};
-/**
- * The three materials.
- *
- * A bubble *is* the thing being coloured — unlike a `PlCard`, which holds other
- * people's content and so keeps its sheet undyed — so `solid` floods it and the
- * text switches to `--p-on-solid`. That is what makes a column of your own
- * messages read as yours at a glance rather than one line at a time.
- */
-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-(--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-(--p-soft) [box-shadow:var(--p-elev)]'
-};
-/**
- * The double tick, drawn here rather than in `internal/icons` because it is the
- * one glyph in the library only one component has any use for.
- *
- * Two ticks overlapping by a third of their width, which is what says "two"
- * without doubling the width of the mark — a delivered message and a sent one
- * have to be told apart at 12px, side by side, in a column.
- */
-function DoubleCheckIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "m1.5 8.5 2.75 2.75L9.5 6", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7 10.75 8.25 12l5.25-5.25", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-}
-/** One glyph per step. `read` shares the mark with `delivered` and takes the colour. */
-const statusIcons = {
-    sending: _jsx(ClockIcon, {}),
-    sent: _jsx(CheckIcon, {}),
-    delivered: _jsx(DoubleCheckIcon, {}),
-    read: _jsx(DoubleCheckIcon, {}),
-    failed: /* @__PURE__ */ severityIcon('danger')
-};
-/**
- * What each mark is read out as. English, like every other default string in the
- * library — a page already knows its own language, and `statusLabel` is where it
- * says so.
- */
-const statusLabels = {
-    sending: 'Sending',
-    sent: 'Sent',
-    delivered: 'Delivered',
-    read: 'Read',
-    failed: 'Not delivered'
-};
-/**
- * Only two of the five carry a colour: the one that arrived and the one that did
- * not. The three in between are the ordinary course of events, and a thread
- * where every message is marked in colour is a thread where the colour has
- * stopped meaning anything.
- */
-const statusToneClasses = {
-    sending: 'text-(--plass-muted-fg)',
-    sent: 'text-(--plass-muted-fg)',
-    delivered: 'text-(--plass-muted-fg)',
-    read: 'text-(--p-accent)',
-    failed: 'text-(--plass-danger-accent)'
-};
-/**
- * The card a link unfurls into.
- *
- * Its surface is mixed out of `currentColor` rather than out of a token, because
- * it is the one part of a bubble that has to work on both a filled surface and a
- * bare one: on `solid` the text is white and the card is a white wash, on
- * `glass` the text is the page's ink and the card is a grey one. A fixed token
- * would be invisible against one of the two.
- */
-const previewSurfaceClasses = /* @__PURE__ */ [
-    'block overflow-hidden rounded-(--plass-radius-sm) border no-underline',
-    '[border-color:color-mix(in_oklab,currentColor_18%,transparent)]',
-    '[background-color:color-mix(in_oklab,currentColor_7%,transparent)]',
-    'hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]',
-    '[transition-property:background-color] [transition-duration:var(--plass-duration)]',
-    '[transition-timing-function:var(--plass-ease)]',
-    focusRingClasses
-].join(' ');
-/**
- * The affordance stays out of the way of the message until the row is reached
- * for — the same allowance a chip's × takes, and for the same reason: this is
- * not a control changing what it is, it is a handle that would otherwise sit in
- * the middle of a conversation being read.
- *
- * A pointer that cannot hover has nothing to reveal it, so it is simply always
- * there on touch.
- */
-const actionsClasses = /* @__PURE__ */ [
-    'shrink-0 opacity-0',
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100',
-    '[@media(hover:none)]:opacity-100'
-].join(' ');
-/**
- * One message in a conversation.
- *
- * Everything around the bubble is optional and nothing about it is fixed by
- * `side`: the avatar, the sender's name, the time, the delivery mark, the media
- * above the text and the link card below it are each drawn only when they are
- * given something. What `side` decides is which way the row runs and which
- * corner of the sheet is cut short.
- *
- * `variant` is what tells your own messages from everyone else's, and it is
- * deliberately not tied to `side` — filling the right-hand column is a
- * convention, not a law, and a thread that fills neither is a perfectly good
- * thread.
- */
-export const PlChatBubble = /* @__PURE__ */ React.forwardRef(function PlChatBubble({ side = 'start', name, time, avatar, status, statusLabel, typing = false, typingLabel = 'Typing…', media, preview, actions, variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, className, style, children, ...props }, ref) {
-    const end = side === 'end';
-    const hasHeader = hasContent(name) || hasContent(time);
-    const hasBody = typing || hasContent(children) || Boolean(preview);
-    const bubbleClasses = [
-        'flex min-w-0 flex-col overflow-hidden',
-        radiusClasses[size],
-        tailClasses[side],
-        variantClasses[variant],
-        transitionClasses
-    ].join(' ');
-    return (_jsxs("div", { ref: ref, className: [
-            'group/bubble flex w-full items-start gap-2',
-            end ? 'flex-row-reverse' : '',
-            className ?? ''
-        ]
-            .filter(Boolean)
-            .join(' '), style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [hasContent(avatar) ? _jsx("div", { className: "shrink-0", children: avatar }) : null, _jsxs("div", { className: [
-                    'flex max-w-[min(100%,32rem)] min-w-0 flex-col',
-                    sheetHeaderGapClasses[size],
-                    end ? 'items-end' : 'items-start'
-                ].join(' '), children: [hasHeader ? (_jsxs("div", { className: `flex items-baseline gap-2 ${metaTextClasses[size]}`, children: [hasContent(name) ? _jsx("span", { className: "font-semibold", children: name }) : null, hasContent(time) ? _jsx("span", { className: "text-(--plass-muted-fg)", children: time }) : null] })) : null, _jsxs("div", { className: `flex min-w-0 items-center gap-1 ${end ? 'flex-row-reverse' : ''}`, children: [_jsxs("div", { className: bubbleClasses, children: [hasContent(media) ? (_jsx("div", { className: "[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full", children: media })) : null, hasBody ? (_jsxs("div", { className: [
-                                            bubblePaddingClasses[density][size],
-                                            'flex min-w-0 flex-col gap-2',
-                                            sheetBodyClasses[size]
-                                        ].join(' '), children: [typing ? (_jsx(TypingDots, { label: typingLabel })) : hasContent(children) ? (_jsx("div", { className: "min-w-0 break-words whitespace-pre-line", children: children })) : null, preview ? _jsx(LinkPreview, { preview: preview }) : null] })) : null] }), hasContent(actions) ? _jsx("div", { className: actionsClasses, children: actions }) : null] }), status ? (_jsxs("div", { className: [
-                            'flex items-center gap-1',
-                            metaTextClasses[size],
-                            statusToneClasses[status],
-                            '[&_svg]:size-[1.15em] [&_svg]:shrink-0'
-                        ].join(' '), children: [statusIcons[status], _jsx("span", { className: srOnlyClasses, children: statusLabel ?? statusLabels[status] })] })) : null] })] }));
-});
-/**
- * Three dots that light in sequence.
- *
- * Colour only, like every other indeterminate indicator in the library — the
- * dots never move, so a bubble that is being typed into does not bounce in a
- * thread somebody is reading. The delay is carried per dot in `--p-i`.
- */
-function TypingDots({ label }) {
-    return (_jsxs("div", { className: "flex items-center gap-1 py-[0.35em]", role: "status", children: [[0, 1, 2].map((index) => (_jsx("span", { "aria-hidden": "true", className: "plass-typing-dot size-[0.45em] rounded-full", style: { '--p-i': index } }, index))), _jsx("span", { className: srOnlyClasses, children: label })] }));
-}
-/** The unfurled link: an image, who published it, a title and two lines of summary. */
-function LinkPreview({ preview }) {
-    const { url, title, description, image, site, newTab = false } = preview;
-    return (_jsxs("a", { href: url, target: newTab ? '_blank' : undefined, rel: newTab ? 'noopener noreferrer' : undefined, className: previewSurfaceClasses, children: [image ? (_jsx("img", { src: image, alt: "", className: "block h-28 w-full object-cover" })) : null, _jsxs("div", { className: "flex flex-col gap-0.5 p-2", children: [hasContent(site) ? (_jsxs("span", { className: "flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0", children: [_jsx(LinkIcon, {}), _jsx("span", { className: "truncate", children: site })] })) : null, hasContent(title) ? _jsx("span", { className: "font-semibold", children: title }) : null, hasContent(description) ? (_jsx("span", { className: "line-clamp-2 text-[0.9em] opacity-80", children: description })) : null] })] }));
-}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{CheckIcon as a,ClockIcon as r,LinkIcon as n,severityIcon as i}from"../../internal/icons.js";import{controlSlots as t,focusRingClasses as o,glassClasses as d,hasContent as c,metaTextClasses as p,radiusClasses as m,sheetBodyClasses as u,sheetHeaderGapClasses as v,srOnlyClasses as f,transitionClasses as g}from"../../internal/styles.js";const x={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},h={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},b={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[d,"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-(--p-soft) [box-shadow:var(--p-elev)]"};function DoubleCheckIcon(){return l("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const y={sending:e(r,{}),sent:e(a,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */i("danger")},k={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not delivered"},w={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},N=/* @__PURE__ */["block overflow-hidden rounded-(--plass-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",o].join(" "),j=/* @__PURE__ */["shrink-0 opacity-0","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const PlChatBubble=/* @__PURE__ */s.forwardRef(function PlChatBubble({side:s="start",name:a,time:r,avatar:n,status:i,statusLabel:o,typing:d=!1,typingLabel:N="Typing…",media:_,preview:C,actions:L,variant:D="glass",size:B="md",color:z="primary",density:P="default",elevation:T=0,className:I,style:R,children:S,...W},M){const $="end"===s,q=c(a)||c(r),A=d||c(S)||Boolean(C),E=["flex min-w-0 flex-col overflow-hidden",m[B],h[s],b[D],g].join(" ");return l("div",{ref:M,className:["group/bubble flex w-full items-start gap-2",$?"flex-row-reverse":"",I??""].filter(Boolean).join(" "),style:{...t(z,T,D),...R},...W,children:[c(n)?e("div",{className:"shrink-0",children:n}):null,l("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",v[B],$?"items-end":"items-start"].join(" "),children:[q?l("div",{className:`flex items-baseline gap-2 ${p[B]}`,children:[c(a)?e("span",{className:"font-semibold",children:a}):null,c(r)?e("span",{className:"text-(--plass-muted-fg)",children:r}):null]}):null,l("div",{className:"flex min-w-0 items-center gap-1 "+($?"flex-row-reverse":""),children:[l("div",{className:E,children:[c(_)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:_}):null,A?l("div",{className:[x[P][B],"flex min-w-0 flex-col gap-2",u[B]].join(" "),children:[d?e(TypingDots,{label:N}):c(S)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:S}):null,C?e(LinkPreview,{preview:C}):null]}):null]}),c(L)?e("div",{className:j,children:L}):null]}),i?l("div",{className:["flex items-center gap-1",p[B],w[i],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[y[i],e("span",{className:f,children:o??k[i]})]}):null]})]})});function TypingDots({label:s}){return l("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(l=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":l}},l)),e("span",{className:f,children:s})]})}function LinkPreview({preview:s}){const{url:a,title:r,description:i,image:t,site:o,newTab:d=!1}=s;return l("a",{href:a,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:N,children:[t?e("img",{src:t,alt:"",className:"block h-28 w-full object-cover"}):null,l("div",{className:"flex flex-col gap-0.5 p-2",children:[c(o)?l("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(n,{}),e("span",{className:"truncate",children:o})]}):null,c(r)?e("span",{className:"font-semibold",children:r}):null,c(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}

package/dist/components/chat-bubble/index.js

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

package/dist/components/checkbox/PlCheckbox.js

@@ -1,100 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
-import { Field } from '@base-ui/react/field';
-import { controlSlots, focusRingClasses, glassClasses, hasContent, metaTextClasses, tickRadiusClasses, tickRowTextClasses, tickSizeClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * The tick.
- *
- * Unchecked it is a small pane of clear glass with a hairline round it — the
- * same material a `glass` button is. Checked it fills with the family's
- * gradient, which is the one place this library expresses a state by swapping
- * the whole surface rather than shifting it a step: "on" and "off" are not two
- * strengths of the same thing.
- */
-const tickBaseClasses = /* @__PURE__ */ [
-    'relative inline-flex shrink-0 items-center justify-center border',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    focusRingClasses
-].join(' ');
-/**
- * No gloss line on a tick, and no tinted lift under it.
- *
- * `--plass-gloss-glass` is a 1px white edge along the top of a pane. On a 40px
- * button that reads as light catching a cut edge; on an 18px square it is a
- * bevel drawn at a twentieth of the object and it turns into a grey smudge.
- * The tinted lift goes for the same reason from the other direction — a
- * `0 6px 16px` shadow under an 18px box is a shadow bigger than the box.
- *
- * The material stays. It is only the two decorations that go.
- *
- * The edge is `--plass-border` rather than the sheet's own `--plass-glass-line`,
- * and that is not a slip. The glass hairline is white light on a translucent
- * pane, which is invisible the moment the tick is set on a light card rather
- * than on the page wash — and a tick nobody can see is a control nobody can
- * find. A neutral hairline reads on both.
- */
-const restClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]',
-    // `data-checked` rather than `:checked`: the visible tick is a `<span>`, and
-    // the real input is hidden beside it.
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105',
-    'data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)',
-    'data-[indeterminate]:[border-color:transparent]'
-].join(' ');
-const readOnlyClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'saturate-[0.55]',
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent]'
-].join(' ');
-/** Disabled is the light going out, exactly as it is on a PlButton. */
-const disabledTickClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'opacity-50 saturate-[0.35]',
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent]',
-    'data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)'
-].join(' ');
-/** The mark is drawn at 70% of the box, so it never touches the corners. */
-const markClasses = 'flex size-[70%] items-center justify-center';
-function CheckMark() {
-    return (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: "size-full", children: _jsx("path", { d: "M2 6.2 4.6 8.8 10 3.4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-function DashMark() {
-    return (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: "size-full", children: _jsx("path", { d: "M2.5 6h7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
-}
-/**
- * A single yes/no, or one member of a set of them.
- *
- * `label`, `description` and `error` are props rather than children for the same
- * reason they are on PlTextField: the arrangement is fixed and what a caller
- * wants to decide is what goes in each slot. `children` is not accepted at all —
- * anything a checkbox has to say belongs in one of the three.
- */
-export const PlCheckbox = /* @__PURE__ */ React.forwardRef(function PlCheckbox({ size = 'md', color = 'primary', label, description, error, invalid, disabled = false, readOnly = false, className, style, ...props }, ref) {
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    // Invalid re-points the whole slot family at `danger`, so the tick, the ring
-    // and the message all turn over together.
-    const family = isInvalid ? 'danger' : color;
-    const tickClasses = [
-        tickBaseClasses,
-        tickSizeClasses[size],
-        tickRadiusClasses[size],
-        // An if/else rather than stacked variants: two Tailwind classes of equal
-        // specificity resolve by their order in the generated stylesheet.
-        disabled ? disabledTickClasses : readOnly ? readOnlyClasses : restClasses
-    ].join(' ');
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: ['inline-flex flex-col gap-1 align-top', className ?? '']
-            .filter(Boolean)
-            .join(' '), 
-        // `solid`, because a checked tick *is* the coloured thing.
-        style: { ...controlSlots(family, 0, 'solid'), ...style }, children: [_jsxs("div", { className: `flex items-start gap-2 ${tickRowTextClasses[size]}`, children: [_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUICheckbox.Root, { ref: ref, className: tickClasses, disabled: disabled, readOnly: readOnly, ...props, children: _jsx(BaseUICheckbox.Indicator, { className: markClasses, children: props.indeterminate ? _jsx(DashMark, {}) : _jsx(CheckMark, {}) }) }) }), label || description ? (_jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [label ? (_jsx(Field.Label, { className: disabled ? 'text-(--plass-muted-fg)' : 'cursor-pointer text-(--plass-fg)', children: label })) : null, description ? (_jsx(Field.Description, { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null] })) : null] }), hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }));
-});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as o}from"@base-ui/react/field";import{controlSlots as l,focusRingClasses as s,glassClasses as i,hasContent as n,metaTextClasses as c,tickRadiusClasses as d,tickRowTextClasses as p,tickSizeClasses as h,transitionClasses as m}from"../../internal/styles.js";const u=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,s].join(" "),f=/* @__PURE__ */[i,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),k=/* @__PURE__ */[i,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),b=/* @__PURE__ */[i,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a="md",color:s="primary",label:i,description:m,error:g,invalid:x,disabled:v=!1,readOnly:j=!1,className:N,style:y,...C},w){const M=n(g),z=x??M,L=z?"danger":s,B=[u,h[a],d[a],v?b:j?k:f].join(" ");return r(o.Root,{disabled:v,invalid:z,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...l(L,0,"solid"),...y},children:[r("div",{className:`flex items-start gap-2 ${p[a]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(t.Root,{ref:w,className:B,disabled:v,readOnly:j,...C,children:e(t.Indicator,{className:"flex size-[70%] items-center justify-center",children:C.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),i||m?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[i?e(o.Label,{className:v?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:i}):null,m?e(o.Description,{className:`${c[a]} text-(--plass-muted-fg)`,children:m}):null]}):null]}),M?e(o.Error,{match:!0,className:`${c[a]} text-(--p-accent)`,children:g}):null]})});

package/dist/components/checkbox/index.js

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