plass-ui 1.0.0 → 1.0.2

package/dist/components/animate-typing/index.js

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

package/dist/components/animate-zoom/PlAnimateZoom.js

@@ -1,45 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { isInfinite, useAnimateElement } from '../../internal/animate.js';
-import { cx } from '../../internal/styles.js';
-/**
- * Content arriving from the middle of where it will end up.
- *
- * The same arithmetic as Grow at more than twice the distance, and always about
- * the centre — which is the whole difference. A Grow unfolds from somewhere; a
- * Zoom comes at you. Use it for the one thing on a screen that is meant to
- * interrupt: a confirmation, a result, a number that has just landed.
- *
- * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
- * the library does not offer two spellings of one idea.
- */
-export const PlAnimateZoom = /* @__PURE__ */ React.forwardRef(function PlAnimateZoom({ duration = 320, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, mode = 'in', from = 0.4, fade = true, render, className, style, children, ...props }, ref) {
-    const animate = useAnimateElement({
-        effect: 'zoom',
-        duration,
-        delay,
-        easing,
-        repeat,
-        alternate,
-        mode,
-        scale: from,
-        opacity: fade ? 0 : 1,
-        trigger,
-        play,
-        once,
-        threshold,
-        paused,
-        infinite: isInfinite(repeat)
-    });
-    return useRender({
-        render,
-        ref: [ref, animate.ref],
-        props: {
-            ...props,
-            className: cx(animate.className, className),
-            style: { transformOrigin: 'center', ...animate.style, ...style },
-            ...animate.props,
-            children
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateZoom=/* @__PURE__ */e.forwardRef(function PlAnimateZoom({duration:e=320,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:y=.4,fade:g=!0,render:h,className:N,style:j,children:A,...P},Z){const b=a({effect:"zoom",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:y,opacity:g?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:h,ref:[Z,b.ref],props:{...P,className:n(b.className,N),style:{transformOrigin:"center",...b.style,...j},...b.props,children:A}})});

package/dist/components/animate-zoom/index.js

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

package/dist/components/aspect-ratio/PlAspectRatio.js

@@ -1,58 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { cx, radiusClasses } from '../../internal/styles.js';
-/**
- * The media a `fit` reaches, stretched to the box first.
- *
- * Written out one selector at a time rather than as a comma list, because
- * Tailwind only ever sees class names that appear literally in the source and a
- * grouped arbitrary variant is one string it has to parse rather than match.
- *
- * `iframe` takes the sizing and not the fit: an embed lays its own content out
- * and `object-fit` has nothing to act on.
- */
-const stretchClasses = /* @__PURE__ */ [
-    '[&>img]:size-full',
-    '[&>video]:size-full',
-    '[&>canvas]:size-full',
-    '[&>svg]:size-full',
-    '[&>iframe]:size-full',
-    '[&>picture]:size-full',
-    '[&>picture>img]:size-full'
-].join(' ');
-const fitClasses = {
-    cover: '[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover',
-    contain: '[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain',
-    fill: '[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill',
-    none: '[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none'
-};
-/**
- * A box that keeps a proportion whatever width it is given.
- *
- * It draws nothing — no sheet, no hairline, no shadow — which is what puts it
- * in `layout` beside `PlContainer` and `PlGrid` rather than in `surfaces`. What
- * it does is reserve the space: a card whose image arrives late does not reflow
- * the page around it, and a row of thumbnails is a row of one shape.
- *
- * The proportion is CSS's own `aspect-ratio`, so a caller who already knows
- * `16 / 9` has nothing to translate. `fit` is the one convenience on top: the
- * media inside is stretched to the box and then fitted, which is the pair of
- * declarations every use of this component would otherwise start with.
- */
-export const PlAspectRatio = /* @__PURE__ */ React.forwardRef(function PlAspectRatio({ ratio = 1, fit = 'cover', rounded = false, size = 'md', render, className, style, children, ...props }, ref) {
-    const classNames = cx(
-    // `overflow-hidden` is not decoration: without it a `cover` image spills
-    // out of the proportion it was just given, and the box would only be
-    // reserving space rather than holding anything to it.
-    'relative block w-full overflow-hidden', stretchClasses, fitClasses[fit], rounded ? radiusClasses[size] : '', className);
-    return useRender({
-        render,
-        ref,
-        props: {
-            className: classNames,
-            style: { aspectRatio: ratio, ...style },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{cx as o,radiusClasses as t}from"../../internal/styles.js";const c=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:l="cover",rounded:n=!1,size:s="md",render:a,className:f,style:m,children:u,...d},p){const b=o("relative block w-full overflow-hidden",c,r[l],n?t[s]:"",f);return i({render:a,ref:p,props:{className:b,style:{aspectRatio:e,...m},children:u,...d}})});

package/dist/components/aspect-ratio/index.js

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

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";