plass-ui 1.0.0 → 1.0.2

package/dist/components/toast/PlToast.js

@@ -1,174 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Toast as BaseUIToast } from '@base-ui/react/toast';
-import { CloseIcon, severityIcon } from '../../internal/icons.js';
-import { controlSlots, focusRingClasses, glassClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses } from '../../internal/styles.js';
-/**
- * How a stack is pinned, per position.
- *
- * The viewport is full width in every case and the alignment is done with
- * `items-*`, rather than by pinning one edge and nudging the centre back with a
- * translate. That keeps the one `transform` this component could have wanted out
- * of it, and it means the same three classes serve all six positions.
- */
-const viewportClasses = {
-    'top-start': 'top-0 items-start',
-    'top-center': 'top-0 items-center',
-    'top-end': 'top-0 items-end',
-    'bottom-start': 'bottom-0 flex-col-reverse items-start',
-    'bottom-center': 'bottom-0 flex-col-reverse items-center',
-    'bottom-end': 'bottom-0 flex-col-reverse items-end'
-};
-/**
- * A toast floats over the page, so — with the `PlSelect` popup, the `PlModal`
- * sheet and the `PlTooltip` plate — it carries a shadow by default, at level 3.
- *
- * The two undyed materials are the glass at its most opaque, for the reason the
- * modal's sheet is: what is behind a toast is arbitrary, and a 62%-translucent
- * pane over a photograph is a pane you read the photograph through.
- */
-const rootClasses = {
-    solid: /* @__PURE__ */ [
-        'text-(--p-on-solid) [background-image:var(--p-fill)]',
-        '[box-shadow:var(--plass-shadow-3),var(--p-lift)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--plass-fg) bg-(--plass-glass-press)',
-        '[border-color:var(--p-line)]',
-        '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: /* @__PURE__ */ [
-        glassClasses,
-        'text-(--plass-fg) bg-(--plass-glass-press)',
-        '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]'
-    ].join(' ')
-};
-const accentClasses = {
-    solid: '',
-    glass: 'text-(--p-accent)',
-    ghost: 'text-(--p-accent)'
-};
-/**
- * Turns a Plass toast into the object Base UI's manager stores.
- *
- * The style props go into `data` rather than becoming top-level fields, because
- * `data` is the slot Base UI reserves for exactly this and the alternative —
- * shadowing the manager's own option names — is how a library ends up with two
- * `type` props that mean different things.
- */
-function toManagerOptions(options) {
-    const { color, variant, icon, actionLabel, onAction, ...rest } = options;
-    return {
-        ...rest,
-        data: { color, variant, icon },
-        actionProps: actionLabel === undefined
-            ? undefined
-            : { children: actionLabel, onClick: onAction }
-    };
-}
-/**
- * Raises toasts from anywhere under a `PlToastProvider`.
- *
- * A hook rather than a component, because the thing a caller has at the moment a
- * toast is warranted is a click handler, not a place in the tree — and a
- * `<PlToast open={…} />` they would have to keep mounted, with a piece of state
- * per message, is the shape this component exists to avoid.
- */
-export function usePlToast() {
-    const manager = BaseUIToast.useToastManager();
-    return React.useMemo(() => ({
-        /** Raises a toast and returns its id. */
-        add: (options) => manager.add(toManagerOptions(options)),
-        /** Closes one toast, or every toast when called with nothing. */
-        close: (id) => manager.close(id),
-        /** Changes a toast already on screen. */
-        update: (id, options) => manager.update(id, toManagerOptions(options)),
-        /**
-         * One toast that follows a promise: the loading message while it runs, then
-         * the success or the error. `timeout: 0` is applied to the loading state by
-         * Base UI, so a slow request cannot dismiss its own toast.
-         */
-        promise: (promise, options) => manager.promise(promise, {
-            loading: toManagerOptions(options.loading),
-            success: (value) => toManagerOptions(typeof options.success === 'function' ? options.success(value) : options.success),
-            error: (error) => toManagerOptions(typeof options.error === 'function' ? options.error(error) : options.error)
-        }),
-        /** Every toast currently in the stack, newest first. */
-        toasts: manager.toasts
-    }), [manager]);
-}
-function ToastItem({ toast, variant: providerVariant, color: providerColor, size, density, closeLabel, swipeDirection }) {
-    const variant = toast.data?.variant ?? providerVariant ?? 'glass';
-    const color = toast.data?.color ?? providerColor;
-    const glyph = toast.data?.icon === undefined ? severityIcon(color) : toast.data.icon;
-    const accent = accentClasses[variant];
-    const titled = hasContent(toast.title);
-    return (_jsxs(BaseUIToast.Root, { toast: toast, swipeDirection: swipeDirection, className: [
-            'pointer-events-auto flex w-full items-start',
-            sheetPaddingXClasses[density ?? 'default'][size],
-            sheetPaddingYClasses[density ?? 'default'][size],
-            radiusClasses[size],
-            sheetSectionGapClasses[size],
-            sheetBodyClasses[size],
-            rootClasses[variant],
-            iconClasses,
-            // Opacity, and only opacity — the same restraint the modal shows, and
-            // for the same reason: this is a box full of text. Base UI still moves
-            // it while a finger is dragging it, which is the reader's hand rather
-            // than a state change, and it stops the moment the finger lifts.
-            '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-            'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',
-            // A toast pushed out by the limit is kept in the DOM so it can come
-            // back; it just has nothing to say while it waits.
-            'data-[limited]:hidden',
-            focusRingClasses,
-            '[outline:none]'
-        ]
-            .filter(Boolean)
-            .join(' '), style: controlSlots(color, 3, variant), children: [hasContent(glyph) ? (_jsx("span", { className: `flex h-[1lh] shrink-0 items-center ${accent}`, children: glyph })) : null, _jsxs("div", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [_jsx(BaseUIToast.Title, { className: `plass-title font-semibold ${sheetTitleClasses[size]} ${accent}` }), _jsx(BaseUIToast.Description, { className: titled && variant !== 'solid' ? 'text-(--plass-muted-fg)' : '' })] }), _jsx(BaseUIToast.Action, { className: [
-                    'flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2',
-                    'font-medium underline-offset-2',
-                    accent || 'text-(--p-on-solid)',
-                    'hover:underline',
-                    focusRingClasses,
-                    metaTextClasses[size]
-                ].join(' ') }), _jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUIToast.Close, { "aria-label": closeLabel, className: [
-                        'inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full',
-                        'opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-                        'hover:opacity-100 focus-visible:opacity-100',
-                        focusRingClasses
-                    ].join(' '), children: _jsx(CloseIcon, {}) }) })] }));
-}
-/** The stack itself. Rendered by the provider, never by a caller. */
-function ToastViewport(props) {
-    const { toasts } = BaseUIToast.useToastManager();
-    const { position, width, ...rest } = props;
-    const swipeDirection = [
-        position.startsWith('top') ? 'up' : 'down',
-        'left',
-        'right'
-    ];
-    return (_jsx(BaseUIToast.Portal, { children: _jsx(BaseUIToast.Viewport, { className: [
-                // Full width and `pointer-events-none`, so the strip across the top or
-                // the bottom of the page is not a wall the rest of the app is behind.
-                // The toasts themselves take their events back.
-                'plass-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4',
-                viewportClasses[position]
-            ].join(' '), children: toasts.map((toast) => (_jsx("div", { className: "w-full", style: { maxWidth: typeof width === 'number' ? `${width}px` : width }, children: _jsx(ToastItem, { toast: toast, swipeDirection: swipeDirection, ...rest }) }, toast.id))) }) }));
-}
-/**
- * Puts the toast stack on the page and lets anything under it raise a message.
- *
- * Wrap the application once. Everything about how a toast *looks* is decided
- * here — where the stack sits, how wide it is, which material it wears, how long
- * it lasts — so the call site stays the one thing it should be: what happened.
- *
- * Base UI owns the parts of this that are genuinely hard and invisible when they
- * work: the timers and their pausing on hover and on window blur, the limit, the
- * swipe, the F6 focus hotkey, and the live region that makes a message which
- * appeared out of nowhere reach a screen reader at all.
- */
-export function PlToastProvider({ variant = 'glass', size = 'md', color = 'primary', density = 'default', position = 'bottom-end', timeout = 5000, limit = 3, width = 380, closeLabel = 'Close', children }) {
-    return (_jsxs(BaseUIToast.Provider, { timeout: timeout, limit: limit, children: [children, _jsx(ToastViewport, { position: position, variant: variant, size: size, color: color, density: density, width: width, closeLabel: closeLabel })] }));
-}
+"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{Toast as o}from"@base-ui/react/toast";import{CloseIcon as a,severityIcon as i}from"../../internal/icons.js";import{controlSlots as r,focusRingClasses as n,glassClasses as l,hasContent as c,iconClasses as p,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as u,sheetHeaderGapClasses as f,sheetPaddingXClasses as h,sheetPaddingYClasses as g,sheetSectionGapClasses as v,sheetTitleClasses as x}from"../../internal/styles.js";const b={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},y={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[l,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--p-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" "),ghost:/* @__PURE__ */[l,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},w={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:e,variant:s,icon:o,actionLabel:a,onAction:i,...r}=t;return{...r,data:{color:e,variant:s,icon:o},actionProps:void 0===a?void 0:{children:a,onClick:i}}}export function usePlToast(){const t=o.useToastManager();return s.useMemo(()=>({add:e=>t.add(toManagerOptions(e)),close:e=>t.close(e),update:(e,s)=>t.update(e,toManagerOptions(s)),promise:(e,s)=>t.promise(e,{loading:toManagerOptions(s.loading),success:t=>toManagerOptions("function"==typeof s.success?s.success(t):s.success),error:t=>toManagerOptions("function"==typeof s.error?s.error(t):s.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:s,variant:l,color:b,size:j,density:N,closeLabel:T,swipeDirection:M}){const O=s.data?.variant??l??"glass",P=s.data?.color??b,k=void 0===s.data?.icon?i(P):s.data.icon,z=w[O],$=c(s.title);return e(o.Root,{toast:s,swipeDirection:M,className:["pointer-events-auto flex w-full items-start",h[N??"default"][j],g[N??"default"][j],m[j],v[j],u[j],y[O],p,"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",n,"[outline:none]"].filter(Boolean).join(" "),style:r(P,3,O),children:[c(k)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${z}`,children:k}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${f[j]}`,children:[t(o.Title,{className:`plass-title font-semibold ${x[j]} ${z}`}),t(o.Description,{className:$&&"solid"!==O?"text-(--plass-muted-fg)":""})]}),t(o.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",z||"text-(--p-on-solid)","hover:underline",n,d[j]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(o.Close,{"aria-label":T,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",n].join(" "),children:t(a,{})})})]})}function ToastViewport(e){const{toasts:s}=o.useToastManager(),{position:a,width:i,...r}=e,n=[a.startsWith("top")?"up":"down","left","right"];return t(o.Portal,{children:t(o.Viewport,{className:["plass-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",b[a]].join(" "),children:s.map(e=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof i?`${i}px`:i},children:t(ToastItem,{toast:e,swipeDirection:n,...r})},e.id))})})}export function PlToastProvider({variant:s="glass",size:a="md",color:i="primary",density:r="default",position:n="bottom-end",timeout:l=5e3,limit:c=3,width:p=380,closeLabel:d="Close",children:m}){return e(o.Provider,{timeout:l,limit:c,children:[m,t(ToastViewport,{position:n,variant:s,size:a,color:i,density:r,width:p,closeLabel:d})]})}

package/dist/components/toast/index.js

@@ -1 +1 @@
-export { PlToastProvider, usePlToast } from './PlToast.js';
+export{PlToastProvider,usePlToast}from"./PlToast.js";

package/dist/components/toolbar/PlToolbar.js

@@ -1,65 +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, hasContent, radiusClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetSectionGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/**
- * The three materials, said the way a *container* says them — the bar is never
- * dyed, exactly as on a `PlBox` and a `PlCard`. A toolbar holds other people's
- * controls, and those controls arrive with colours of their own.
- */
-const variantClasses = sheetRestClasses;
-const positionClasses = {
-    static: { top: '', bottom: '' },
-    sticky: { top: 'sticky top-0 z-20', bottom: 'sticky bottom-0 z-20' },
-    fixed: { top: 'fixed inset-x-0 top-0 z-30', bottom: 'fixed inset-x-0 bottom-0 z-30' }
-};
-/**
- * The rule faces the content, so it moves to the other edge on a bottom bar.
- *
- * `--plass-divider` and not the sheet's own white edge line: this is a mark the
- * sheet makes on *itself*, and white light on a cut edge only reads when the
- * page wash is behind it.
- */
-const dividerClasses = {
-    top: 'border-b [border-color:var(--plass-divider)]',
-    bottom: 'border-t [border-color:var(--plass-divider)]'
-};
-/**
- * A bar of controls: an application header, a page's action row, the strip along
- * the bottom of an editor.
- *
- * Three slots and a row. `start` and `end` are pinned to their ends and
- * `children` takes what is left, which is the arrangement every toolbar has ever
- * had — so it is laid out here rather than left to a caller and a spacer `<div>`
- * they have to remember.
- *
- * The one thing it does not do is take a height. A toolbar is as tall as the
- * controls in it plus its padding, and that padding is the `size` / `density`
- * pair every other surface uses — so `density="compact"` gives the dense bar
- * without a second prop meaning the same thing, and without the type scale
- * moving.
- *
- * It has **no `role="toolbar"`**, deliberately. That role is a promise about
- * keyboard behaviour — one tab stop for the whole bar, arrow keys between the
- * controls in it — and a bar that claims it without implementing it is worse for
- * a keyboard reader than one that never claimed anything. What a page header
- * wants is `render={<header />}`; what a genuine roving-focus set of choices
- * wants is a `PlSegmentedButton`, which is one.
- */
-export const PlToolbar = /* @__PURE__ */ React.forwardRef(function PlToolbar({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, position = 'static', side = 'top', divider = false, start, end, render, className, style, children, ...props }, ref) {
-    const classNames = cx('flex w-full min-w-0 items-center', sheetPaddingXClasses[density][size], sheetPaddingYClasses[density][size], sheetSectionGapClasses[size], 
-    // A pinned bar spans an edge of the window, and a rounded corner against
-    // the edge of the screen is a gap with nothing behind it. Only a bar
-    // sitting in the flow is a sheet with corners.
-    position === 'static' ? radiusClasses[size] : '', variantClasses[variant], divider ? dividerClasses[side] : '', positionClasses[position][side], transitionClasses, className);
-    return useRender({
-        render: render ?? _jsx("div", {}),
-        ref,
-        props: {
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            children: (_jsxs(_Fragment, { children: [hasContent(start) ? (_jsx("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: start })) : null, _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: children }), hasContent(end) ? (_jsx("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: end })) : null] })),
-            ...props
-        }
-    });
-});
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{cx as o,hasContent as a,radiusClasses as l,sheetPaddingXClasses as n,sheetPaddingYClasses as c,sheetRestClasses as d,sheetSectionGapClasses as m,surfaceSlots as p,transitionClasses as f}from"../../internal/styles.js";const b=d,x={static:{top:"",bottom:""},sticky:{top:"sticky top-0 z-20",bottom:"sticky bottom-0 z-20"},fixed:{top:"fixed inset-x-0 top-0 z-30",bottom:"fixed inset-x-0 bottom-0 z-30"}},v={top:"border-b [border-color:var(--plass-divider)]",bottom:"border-t [border-color:var(--plass-divider)]"};export const PlToolbar=/* @__PURE__ */s.forwardRef(function PlToolbar({variant:s="glass",size:d="md",color:u="primary",density:h="default",elevation:y=0,position:w="static",side:g="top",divider:k=!1,start:z,end:N,render:j,className:P,style:T,children:F,...R},q){const A=o("flex w-full min-w-0 items-center",n[h][d],c[h][d],m[d],"static"===w?l[d]:"",b[s],k?v[g]:"",x[w][g],f,P);return i({render:j??e("div",{}),ref:q,props:{className:A,style:{...p(u,y),...T},children:r(t,{children:[a(z)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:z}):null,e("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:F}),a(N)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:N}):null]}),...R}})});

package/dist/components/toolbar/index.js

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

package/dist/components/tooltip/PlTooltip.js

@@ -1,117 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Tooltip as BaseUITooltip } from '@base-ui/react/tooltip';
-import { glassClasses, metaTextClasses, paddingXClasses, radiusClasses, surfaceSlots } from '../../internal/styles.js';
-/**
- * Shares one delay across a group of tooltips: once any of them has opened, its
- * neighbours open instantly, and the wait comes back after a pause.
- *
- * Worth wrapping a toolbar in. Without it, moving along a row of icon buttons
- * means waiting out the full delay at every stop, which is what makes tooltips
- * feel like they are fighting the pointer.
- */
-export const PlTooltipProvider = BaseUITooltip.Provider;
-/**
- * The plate, and it is the same floating sheet a `PlSelect`'s popup is: the
- * glass at its most opaque, a white hairline round it, shadow 3 under it.
- *
- * Not a filled key, which is what most libraries draw a tooltip as. A tooltip is
- * a note *about* something rather than a thing to press, and the library already
- * has one answer for a surface that floats over arbitrary content — inventing a
- * second would put two kinds of floating sheet on the same screen.
- *
- * `--plass-glass-press` is what makes that safe: at its most opaque the sheet is
- * dense enough to read a line of text off, which the 62% pane is not.
- */
-const popupClasses = /* @__PURE__ */ [
-    glassClasses,
-    'max-w-64 border text-(--plass-fg) bg-(--plass-glass-press)',
-    '[border-color:var(--plass-glass-line)]',
-    '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]',
-    '[outline:none]',
-    // Opacity only, and fast: a tooltip that slides in has moved its own text
-    // while the reader was already looking at it.
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',
-    // Base UI sets this while the pointer is moving between grouped tooltips.
-    // Fading in a tooltip that is meant to appear instantly is worse than not
-    // fading at all — it reads as lag.
-    'data-[instant]:[transition-duration:0ms]'
-].join(' ');
-/** A row's vertical padding, against the horizontal track `paddingXClasses` sets. */
-const paddingYClasses = {
-    xs: 'py-0.5',
-    sm: 'py-0.5',
-    md: 'py-1',
-    lg: 'py-1.5',
-    xl: 'py-2'
-};
-/** The wedge, at roughly a third of the plate's corner radius per step. */
-const arrowSizes = {
-    xs: 6,
-    sm: 7,
-    md: 8,
-    lg: 9,
-    xl: 10
-};
-/**
- * A short label that appears when the pointer rests on something.
- *
- * The whole component is a wrapper:
- * `<PlTooltip content="Copy"><PlButton …/></PlTooltip>`. Base UI's Trigger
- * merges itself onto the child rather than rendering a box of its own, so the
- * tooltip adds no element to the layout and the child stays whatever it was — a
- * button, a chip, a truncated cell.
- *
- * Base UI owns the parts that are genuinely hard: the delay and the group
- * timeout, opening on focus but not on a focus that came from a click, closing
- * on Escape, and keeping the popup off the edges of the window.
- *
- * The one thing it deliberately leaves open is the part that makes a tooltip
- * mean anything to a screen reader — `role="tooltip"` on the plate and an
- * `aria-describedby` pointing at it from the trigger — because a popup can be
- * many things and only the caller knows which. Here it is always a tooltip, so
- * this component wires both, and drops the reference while it is closed rather
- * than pointing at an element that is not in the document.
- */
-export function PlTooltip({ content, children, size = 'sm', 
-// A tooltip is a note about something else, never the thing itself, so the
-// neutral family is the honest default. A red tooltip on a delete button would
-// be saying something the tooltip does not know.
-color = 'secondary', density = 'default', side = 'top', align = 'center', sideOffset = 6, delay, closeDelay, arrow = true, open, defaultOpen, onOpenChange, disabled = false, className, style, ...props }) {
-    const arrowSize = arrowSizes[size];
-    const popupId = React.useId();
-    // Mirrored rather than owned: `open` still drives a controlled tooltip and
-    // Base UI still drives an uncontrolled one. This copy exists only so the
-    // trigger knows whether the plate it describes is on the page yet.
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
-    const isOpen = open ?? uncontrolledOpen;
-    return (_jsxs(BaseUITooltip.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: (next) => {
-            setUncontrolledOpen(next);
-            onOpenChange?.(next);
-        }, children: [_jsx(BaseUITooltip.Trigger, { render: children, delay: delay, closeDelay: closeDelay, disabled: disabled, "aria-describedby": isOpen ? popupId : undefined }), _jsx(BaseUITooltip.Portal, { children: _jsx(BaseUITooltip.Positioner, { className: "plass-portal z-50 [outline:none]", side: side, align: align, sideOffset: sideOffset, children: _jsxs(BaseUITooltip.Popup, { id: popupId, role: "tooltip", className: [
-                            popupClasses,
-                            radiusClasses[size],
-                            paddingXClasses[density][size],
-                            paddingYClasses[size],
-                            metaTextClasses[size],
-                            className ?? ''
-                        ]
-                            .filter(Boolean)
-                            .join(' '), style: { ...surfaceSlots(color, 3), ...style }, ...props, children: [arrow ? (_jsx(BaseUITooltip.Arrow
-                            // Base UI positions the arrow and reports which side it ended up
-                            // on. The wedge is drawn pointing down and turned to match — a
-                            // rotation of a glyph, which is the same allowance the chevron
-                            // takes. Nothing with text in it moves.
-                            , { 
-                                // Base UI positions the arrow and reports which side it ended up
-                                // on. The wedge is drawn pointing down and turned to match — a
-                                // rotation of a glyph, which is the same allowance the chevron
-                                // takes. Nothing with text in it moves.
-                                className: [
-                                    'data-[side=top]:bottom-[-1px]',
-                                    'data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180',
-                                    'data-[side=left]:right-[-1px] data-[side=left]:-rotate-90',
-                                    'data-[side=right]:left-[-1px] data-[side=right]:rotate-90'
-                                ].join(' '), children: _jsxs("svg", { width: arrowSize, height: arrowSize / 2, viewBox: "0 0 10 5", "aria-hidden": "true", className: "block", children: [_jsx("path", { d: "M0 0h10L5 5z", fill: "var(--plass-glass-line)" }), _jsx("path", { d: "M0 0h10L5 5z", fill: "var(--plass-glass-press)", transform: "translate(0 -1)" })] }) })) : null, content] }) }) })] }));
-}
+"use client";import{jsx as s,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{Tooltip as t}from"@base-ui/react/tooltip";import{glassClasses as o,metaTextClasses as l,paddingXClasses as i,radiusClasses as r,surfaceSlots as n}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const d=/* @__PURE__ */[o,"max-w-64 border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:o,children:m,size:g="sm",color:h="secondary",density:f="default",side:y="top",align:u="center",sideOffset:x=6,delay:b,closeDelay:v,arrow:j=!0,open:w,defaultOpen:P,onOpenChange:O,disabled:N=!1,className:z,style:T,...B}){const C=c[g],D=e.useId(),[L,M]=e.useState(P??!1),_=w??L;return a(t.Root,{open:w,defaultOpen:P,onOpenChange:s=>{M(s),O?.(s)},children:[s(t.Trigger,{render:m,delay:b,closeDelay:v,disabled:N,"aria-describedby":_?D:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-50 [outline:none]",side:y,align:u,sideOffset:x,children:a(t.Popup,{id:D,role:"tooltip",className:[d,r[g],i[f][g],p[g],l[g],z??""].filter(Boolean).join(" "),style:{...n(h,3),...T},...B,children:[j?s(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:C,height:C/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-line)"}),s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)",transform:"translate(0 -1)"})]})}):null,o]})})})]})}

package/dist/components/tooltip/index.js

@@ -1 +1 @@
-export { PlTooltip, PlTooltipProvider } from './PlTooltip.js';
+export{PlTooltip,PlTooltipProvider}from"./PlTooltip.js";

package/dist/components/typography/PlTypography.js

@@ -1,143 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-/**
- * The scale.
- *
- * Body sits on the sheet body ladder at `md` (13px/22px), so a paragraph inside
- * a `PlCard` and a standalone one are the same text. The headings step up from
- * there by roughly a major third, and the leading tightens as they grow — a 30px
- * line does not want the same 1.7 ratio a 13px one does.
- */
-const levelClasses = {
-    h1: 'text-[1.875rem]/[2.25rem] tracking-[-0.02em]',
-    h2: 'text-[1.5rem]/[1.875rem] tracking-[-0.015em]',
-    h3: 'text-[1.25rem]/[1.625rem] tracking-[-0.01em]',
-    h4: 'text-[1.0625rem]/[1.5rem]',
-    h5: 'text-[0.9375rem]/[1.375rem]',
-    h6: 'text-[0.8125rem]/[1.25rem]',
-    lead: 'text-[1.0625rem]/[1.75rem]',
-    body: 'text-[0.8125rem]/[1.375rem]',
-    caption: 'text-[0.75rem]/[1.125rem]',
-    overline: 'text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase'
-};
-/**
- * Weight is kept out of `levelClasses` and resolved here so that exactly one
- * `font-*` class is ever emitted. Passing both the level's weight and an
- * override would leave two utilities of equal specificity on the element, and
- * which of them wins is decided by their order in the generated stylesheet —
- * `font-semibold` beats `font-normal` there no matter which one was asked for.
- */
-const levelWeights = {
-    h1: 'semibold',
-    h2: 'semibold',
-    h3: 'semibold',
-    h4: 'semibold',
-    h5: 'semibold',
-    h6: 'semibold',
-    lead: 'regular',
-    body: 'regular',
-    caption: 'regular',
-    overline: 'medium'
-};
-/** The element each level renders as when `render` is not given. */
-const levelElements = {
-    h1: 'h1',
-    h2: 'h2',
-    h3: 'h3',
-    h4: 'h4',
-    h5: 'h5',
-    h6: 'h6',
-    lead: 'p',
-    body: 'p',
-    caption: 'span',
-    overline: 'span'
-};
-/**
- * The two quiet levels are muted by default. Everything else takes the page's
- * own foreground — a heading that arrived pre-greyed is a heading a designer has
- * to undo.
- */
-const mutedLevels = new Set(['caption', 'overline']);
-/** How much room a level leaves under itself when `gutter` is on. */
-const gutterClasses = {
-    h1: 'mb-4',
-    h2: 'mb-3.5',
-    h3: 'mb-3',
-    h4: 'mb-2.5',
-    h5: 'mb-2',
-    h6: 'mb-2',
-    lead: 'mb-4',
-    body: 'mb-3',
-    caption: 'mb-2',
-    overline: 'mb-2'
-};
-const weightClasses = {
-    regular: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold'
-};
-const alignClasses = {
-    start: 'text-start',
-    center: 'text-center',
-    end: 'text-end',
-    justify: 'text-justify'
-};
-/**
- * Clamping is two different mechanisms. One line is `text-overflow: ellipsis`,
- * which keeps the text on its own baseline; more than one needs the line-clamp
- * box, which only ellipsises because WebKit says so.
- */
-const clampClasses = {
-    1: 'truncate',
-    2: 'line-clamp-2',
-    3: 'line-clamp-3',
-    4: 'line-clamp-4',
-    5: 'line-clamp-5',
-    6: 'line-clamp-6'
-};
-/**
- * Text at one of the library's sizes.
- *
- * The type scale is the one thing in a design system that everything else is
- * measured against, and until now it only existed inside the components that
- * happened to need it — a card's title, a field's label. This is that ladder on
- * its own, so a page can use it without wrapping its prose in a card.
- *
- * `level` sets the scale *and* the element, which is the common case. When they
- * have to differ — a subheading that should not enter the document outline, a
- * `<p>` that has to look like an `h3` — `render` breaks the tie.
- *
- * There is no `variant` and no `elevation`, and there is no `size` either.
- * `level` is the size: a `size` prop alongside it would let a caller ask for an
- * `h1` at `xs`, which is a heading that is not a heading.
- */
-export const PlTypography = /* @__PURE__ */ React.forwardRef(function PlTypography({ level = 'body', color, weight, align, lines, gutter = false, render, className, style, children, ...props }, ref) {
-    const classNames = [
-        levelClasses[level],
-        weightClasses[weight ?? levelWeights[level]],
-        align ? alignClasses[align] : '',
-        lines ? (clampClasses[lines] ?? 'line-clamp-6') : '',
-        gutter ? gutterClasses[level] : '',
-        color
-            ? 'text-(--p-accent)'
-            : mutedLevels.has(level)
-                ? 'text-(--plass-muted-fg)'
-                : 'text-(--plass-fg)',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return useRender({
-        render: render ?? React.createElement(levelElements[level]),
-        ref,
-        props: {
-            className: classNames,
-            style: (color
-                ? { '--p-accent': `var(--plass-${color}-accent)`, ...style }
-                : style),
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),a={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},c={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const PlTypography=/* @__PURE__ */e.forwardRef(function PlTypography({level:s="body",color:h,weight:d,align:p,lines:b,gutter:u=!1,render:x,className:f,style:g,children:y,...v},k){const j=[r[s],o[d??m[s]],p?i[p]:"",b?c[b]??"line-clamp-6":"",u?a[s]:"",h?"text-(--p-accent)":n.has(s)?"text-(--plass-muted-fg)":"text-(--plass-fg)",f??""].filter(Boolean).join(" ");return t({render:x??e.createElement(l[s]),ref:k,props:{className:j,style:h?{"--p-accent":`var(--plass-${h}-accent)`,...g}:g,children:y,...v}})});

package/dist/components/typography/index.js

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

package/dist/index.js

@@ -1,75 +1 @@
-export * from './types.js';
-export * from './components/accordion/index.js';
-export * from './components/alert/index.js';
-export * from './components/animate-appear/index.js';
-export * from './components/animate-blink/index.js';
-export * from './components/animate-fade/index.js';
-export * from './components/animate-grow/index.js';
-export * from './components/animate-headline/index.js';
-export * from './components/animate-lighting/index.js';
-export * from './components/animate-marquee/index.js';
-export * from './components/animate-rotate/index.js';
-export * from './components/animate-slide/index.js';
-export * from './components/animate-typing/index.js';
-export * from './components/animate-zoom/index.js';
-export * from './components/aspect-ratio/index.js';
-export * from './components/avatar/index.js';
-export * from './components/badge/index.js';
-export * from './components/blockquote/index.js';
-export * from './components/bottom-navigation/index.js';
-export * from './components/box/index.js';
-export * from './components/breadcrumb/index.js';
-export * from './components/button/index.js';
-export * from './components/button-group/index.js';
-export * from './components/card/index.js';
-export * from './components/carousel/index.js';
-export * from './components/chat-bubble/index.js';
-export * from './components/checkbox/index.js';
-export * from './components/chip/index.js';
-export * from './components/collapsible/index.js';
-export * from './components/combobox/index.js';
-export * from './components/container/index.js';
-export * from './components/date-picker/index.js';
-export * from './components/date-range-picker/index.js';
-export * from './components/date-time-picker/index.js';
-export * from './components/divider/index.js';
-export * from './components/drawer/index.js';
-export * from './components/file-picker/index.js';
-export * from './components/floating-bottom-navigation/index.js';
-export * from './components/grid/index.js';
-export * from './components/highlight/index.js';
-export * from './components/hot-keys/index.js';
-export * from './components/icon/index.js';
-export * from './components/icon-button/index.js';
-export * from './components/list/index.js';
-export * from './components/menu/index.js';
-export * from './components/modal/index.js';
-export * from './components/number-field/index.js';
-export * from './components/otp-field/index.js';
-export * from './components/overlay/index.js';
-export * from './components/pagination/index.js';
-export * from './components/panes/index.js';
-export * from './components/pill/index.js';
-export * from './components/popover/index.js';
-export * from './components/progress-box/index.js';
-export * from './components/progress-circular/index.js';
-export * from './components/progress-linear/index.js';
-export * from './components/radio-group/index.js';
-export * from './components/rating/index.js';
-export * from './components/scroll-zone/index.js';
-export * from './components/segmented-button/index.js';
-export * from './components/select/index.js';
-export * from './components/skeleton/index.js';
-export * from './components/slider/index.js';
-export * from './components/spoiler/index.js';
-export * from './components/switch/index.js';
-export * from './components/table/index.js';
-export * from './components/tabs/index.js';
-export * from './components/text-field/index.js';
-export * from './components/text-link/index.js';
-export * from './components/time-picker/index.js';
-export * from './components/timeline/index.js';
-export * from './components/toast/index.js';
-export * from './components/toolbar/index.js';
-export * from './components/tooltip/index.js';
-export * from './components/typography/index.js';
+export*from"./types.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/combobox/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/grid/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/modal/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/typography/index.js";