plass-ui 1.0.0 → 1.0.1

package/dist/components/icon/index.js

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

package/dist/components/icon-button/PlIconButton.js

@@ -1,37 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlButton } from '../button/PlButton.js';
-/**
- * A round button with a glyph in it and nothing else.
- *
- * A `PlButton` with an icon and no children already goes square — the same
- * height, the same width, the house fillet cut off it. This is the other shape:
- * a disc.
- *
- * That disc is a deliberate exception to the radius rule, which holds every
- * corner well short of the 50% that would make a control a pill, because the
- * flat run along the top and bottom edge is what still reads as a sheet with its
- * corners cut. The rule is about *labelled* controls: the flat run is there for
- * the line of text to sit on, and a glyph has no line of text. A circle with a
- * single mark centred in it is a punched token rather than a moulded key, so it
- * says the thing the rule exists to protect by a different route.
- *
- * Everything else is `PlButton`'s, unchanged and on purpose: the three
- * materials, the elevation ladder, the pointer light, `loading`, `readOnly` and
- * `disabled`. Two components that draw the same surface out of two copies of the
- * same table are two components that will eventually disagree.
- */
-export const PlIconButton = /* @__PURE__ */ React.forwardRef(function PlIconButton({ icon, label, style, ...props }, ref) {
-    return (_jsx(PlButton, { ref: ref, "aria-label": label, 
-        // The icon goes in `startIcon` rather than in `children`, which is what
-        // puts PlButton on its icon-only path: square footprint, no horizontal
-        // padding, and the spinner taking the glyph's place while `loading`.
-        startIcon: icon, 
-        // An inline style rather than a `rounded-full`, and for once not as a
-        // shortcut. PlButton already writes a `rounded-*` utility of its own, and
-        // two utilities setting the same property resolve by their order in the
-        // generated stylesheet — which is not something a component may depend
-        // on. An inline declaration is the one form that wins deterministically,
-        // and it still leaves the caller's own `style` free to override it below.
-        style: { borderRadius: '9999px', ...style }, ...props }));
-});
+"use client";import{jsx as t}from"react/jsx-runtime";import*as o from"react";import{PlButton as r}from"../button/PlButton.js";export const PlIconButton=/* @__PURE__ */o.forwardRef(function PlIconButton({icon:o,label:e,style:n,...a},s){return t(r,{ref:s,"aria-label":e,startIcon:o,style:{borderRadius:"9999px",...n},...a})});

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

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

package/dist/components/list/PlList.js

@@ -1,160 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, sheetBodyClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-const ListContext = /* @__PURE__ */ React.createContext({
-    size: 'md',
-    density: 'default',
-    dividers: false
-});
-/**
- * The three materials, said the way a *container* says them — the sheet is never
- * dyed, exactly as on a `PlCard`. A list holds other people's content, and that
- * content arrives with its own colours.
- *
- * `ghost` is the one to reach for inside a card: the card is already a sheet,
- * and a second bordered rectangle inside it is a second rectangle.
- */
-const variantClasses = {
-    solid: /* @__PURE__ */ [
-        glassClasses,
-        'text-(--plass-fg) bg-(--plass-glass-press)',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].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-transparent'
-};
-/**
- * A row's vertical padding. Its own ladder rather than a sheet's, because a row
- * is a line of text in a stack of them and a sheet is a container: the same `md`
- * that gives a card 20px of air would give a list of eight rows the height of a
- * page.
- */
-const rowPaddingYClasses = {
-    default: { xs: 'py-1', sm: 'py-1.5', md: 'py-2', lg: 'py-2.5', xl: 'py-3' },
-    compact: { xs: 'py-0.5', sm: 'py-0.5', md: 'py-1', lg: 'py-1.5', xl: 'py-2' }
-};
-/**
- * A row's horizontal padding: a control's, not a sheet's. The words in a row are
- * a label on a line rather than a paragraph inside a container, and a sheet's
- * inset would push every row's text a third of the way across a narrow list.
- */
-const rowPaddingXClasses = paddingXClasses;
-/**
- * A row sits one step down the radius ladder from the sheet it is inside — a
- * tile cut out of a sheet cannot have the same corner as the sheet, or the two
- * curves fight along the edge.
- */
-const rowRadiusClasses = {
-    xs: radiusClasses.xs,
-    sm: radiusClasses.xs,
-    md: radiusClasses.sm,
-    lg: radiusClasses.sm,
-    xl: radiusClasses.md
-};
-/**
- * The rule between two rows, and the rule that makes the sheet give up its
- * padding: `>li+li` rather than a class on each item, so it holds however the
- * caller composed the rows — through a `.map()`, through fragments, through a
- * component of their own that renders a `PlListItem`.
- *
- * `--plass-divider` and not the sheet's white hairline, for the reason a
- * checkbox's edge takes a neutral one: white light on a translucent pane is
- * invisible the moment the list is set on something opaque. It is the same ink
- * a PlCard is scored with and a PlTable rules its rows in, so a list on a card
- * inside a table cell is one family of lines rather than three.
- */
-const dividerClasses = '[&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]';
-/**
- * A stack of rows.
- *
- * The list is a sheet and the rows are what is on it, which is the whole reason
- * the two are separate components: `size` and `density` are properties of the
- * stack, not of any one line in it, and a context is what carries them down.
- *
- * There is no Base UI primitive under this on purpose. A list is not a composite
- * widget — it has no roving focus, no selection model, no keyboard contract of
- * its own. Reaching for a menu or a listbox primitive to get one would hand
- * every consumer's plain list of links the semantics of a menu, which is the
- * most common way a component library breaks a screen reader.
- */
-export const PlList = /* @__PURE__ */ React.forwardRef(function PlList({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, dividers = false, render, className, style, children, ...props }, ref) {
-    const context = React.useMemo(() => ({ size, density, dividers }), [size, density, dividers]);
-    const classNames = [
-        'flex flex-col',
-        radiusClasses[size],
-        variantClasses[variant],
-        transitionClasses,
-        // Without dividers the rows are tiles and the sheet keeps a hair of padding
-        // so a hovered row does not run into the edge. With them the rules have to
-        // reach the edge, so the padding goes and the rows square off.
-        dividers ? `overflow-hidden ${dividerClasses}` : 'p-1',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const element = useRender({
-        render,
-        ref,
-        props: {
-            // Tailwind's reset takes the bullets off every `<ul>`, and Safari takes
-            // the list semantics off with them. Saying `role="list"` out loud is the
-            // one-line fix, and it costs nothing when the reset is not there.
-            role: 'list',
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            children,
-            ...props
-        }
-    });
-    return _jsx(ListContext.Provider, { value: context, children: element });
-});
-/**
- * One row.
- *
- * The shell is always an `<li>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` or `href` is given — a real `<button>` or
- * `<a>` wrapping that content, with `action` sitting outside it as a separate
- * control. This is the same shape a `PlChip` uses, for the same two reasons: a
- * `<span>` carrying a click handler is invisible to a keyboard, and a
- * `<button>` inside a `<button>` is markup the browser silently un-nests.
- */
-export const PlListItem = /* @__PURE__ */ React.forwardRef(function PlListItem({ startIcon, endIcon, description, action, href, selected = false, disabled = false, className, children, onClick, ...props }, ref) {
-    const { size, density, dividers } = React.useContext(ListContext);
-    const interactive = Boolean(onClick || href) && !disabled;
-    const padX = rowPaddingXClasses[density][size];
-    const padY = rowPaddingYClasses[density][size];
-    const bodyClassNames = [
-        'flex min-w-0 flex-1 items-center text-start',
-        padX,
-        padY,
-        gapClasses[size],
-        sheetBodyClasses[size],
-        transitionClasses,
-        iconClasses,
-        // Squared off when the rows are ruled, for the reason `dividerClasses`
-        // exists: a tile and a line are two different ideas about what a row is.
-        dividers ? '' : rowRadiusClasses[size],
-        // An if/else rather than stacked variants: two Tailwind classes of equal
-        // specificity resolve by their order in the generated stylesheet.
-        disabled
-            ? 'cursor-not-allowed opacity-50 saturate-[0.35]'
-            : selected
-                ? 'bg-(--p-soft-press) font-medium text-(--p-accent)'
-                : '',
-        interactive ? `cursor-pointer ${focusRingClasses}` : '',
-        // Hover deepens the same tint `selected` already uses, one step down, so a
-        // hovered row and the chosen row are the same idea at two strengths.
-        interactive && !selected ? 'hover:bg-(--p-soft)' : '',
-        interactive && selected ? 'hover:bg-(--p-soft-press)' : ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const body = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [hasContent(children) ? _jsx("span", { className: "truncate", children: children }) : null, hasContent(description) ? (_jsx("span", { className: `truncate text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: description })) : null] }), hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: endIcon })) : null] }));
-    return (_jsxs("li", { ref: ref, className: ['flex w-full items-center', className ?? ''].filter(Boolean).join(' '), ...props, children: [interactive && href ? (_jsx("a", { href: href, className: bodyClassNames, "aria-current": selected ? 'page' : undefined, onClick: onClick, children: body })) : interactive ? (_jsx("button", { type: "button", className: bodyClassNames, "aria-current": selected ? true : undefined, onClick: onClick, children: body })) : (_jsx("div", { className: bodyClassNames, "aria-disabled": disabled || undefined, children: body })), hasContent(action) ? (_jsx("div", { className: `flex shrink-0 items-center ${padX}`, children: action })) : null] }));
-});
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{focusRingClasses as a,gapClasses as i,glassClasses as n,hasContent as o,iconClasses as d,metaTextClasses as c,paddingXClasses as p,radiusClasses as m,sheetBodyClasses as f,surfaceSlots as x,transitionClasses as u}from"../../internal/styles.js";const h=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),g={solid:/* @__PURE__ */[n,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[n,"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-transparent"},v={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},y=p,b={xs:m.xs,sm:m.xs,md:m.sm,lg:m.sm,xl:m.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l="md",color:a="primary",density:i="default",elevation:n=0,dividers:o=!1,render:d,className:c,style:p,children:f,...v},y){const b=r.useMemo(()=>({size:l,density:i,dividers:o}),[l,i,o]),N=["flex flex-col",m[l],g[s],u,o?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",c??""].filter(Boolean).join(" "),j=t({render:d,ref:y,props:{role:"list",className:N,style:{...x(a,n),...p},children:f,...v}});return e(h.Provider,{value:b,children:j})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:n,description:p,action:m,href:x,selected:g=!1,disabled:N=!1,className:j,children:w,onClick:k,...C},P){const{size:z,density:B,dividers:I}=r.useContext(h),L=Boolean(k||x)&&!N,$=y[B][z],R=["flex min-w-0 flex-1 items-center text-start",$,v[B][z],i[z],f[z],u,d,I?"":b[z],N?"cursor-not-allowed opacity-50 saturate-[0.35]":g?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${a}`:"",L&&!g?"hover:bg-(--p-soft)":"",L&&g?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[o(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[o(w)?e("span",{className:"truncate",children:w}):null,o(p)?e("span",{className:`truncate text-(--plass-muted-fg) ${c[z]}`,children:p}):null]}),o(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:n}):null]});return s("li",{ref:P,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...C,children:[L&&x?e("a",{href:x,className:R,"aria-current":g?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!g||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":N||void 0,children:F}),o(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});

package/dist/components/list/index.js

@@ -1 +1 @@
-export { PlList, PlListItem } from './PlList.js';
+export{PlList,PlListItem}from"./PlList.js";

package/dist/components/menu/PlMenu.js

@@ -1,209 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { Menu as BaseUIMenu } from '@base-ui/react/menu';
-import { ContextMenu as BaseUIContextMenu } from '@base-ui/react/context-menu';
-import { MenuContext } from '../../internal/menu.js';
-import { CheckIcon, ChevronIcon, DotIcon } from '../../internal/icons.js';
-import { controlTextLeadingClasses, cx, gapClasses, glassClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/* ---------------------------------------------------------------------------
- * The surface
- * ------------------------------------------------------------------------- */
-/**
- * The popup, which is `PlSelect`'s popup to the pixel — deliberately, because a
- * select *is* a menu that remembers what you picked, and two floating lists of
- * rows that do not match are two lists the eye has to learn separately.
- */
-const popupClasses = /* @__PURE__ */ [
-    glassClasses,
-    'max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain',
-    'border bg-(--plass-glass-press) p-1',
-    '[border-color:var(--plass-glass-line)]',
-    '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]',
-    '[outline:none]',
-    // Opacity only. A menu that slides in has moved the row you were already
-    // reaching for, which is the one thing a menu must never do.
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
-].join(' ');
-/**
- * A row's padding, and a ladder of its own rather than the sheet track.
- *
- * A `PlList` row spans a sheet that something else decided the width of; a menu
- * row is inside a popup that is exactly as wide as its longest label. The sheet
- * track's `px-5` at `md` would add 40px to a menu that says "Cut", which is how
- * a five-row menu ends up the width of a dialog.
- */
-const rowPaddingClasses = {
-    default: {
-        xs: 'px-1.5 py-0.5',
-        sm: 'px-2 py-1',
-        md: 'px-2.5 py-1.5',
-        lg: 'px-3 py-2',
-        xl: 'px-3.5 py-2.5'
-    },
-    compact: {
-        xs: 'px-1 py-0.5',
-        sm: 'px-1.5 py-0.5',
-        md: 'px-2 py-1',
-        lg: 'px-2.5 py-1',
-        xl: 'px-3 py-1.5'
-    }
-};
-/**
- * A row sits one step down the radius ladder from the popup it is inside: a
- * tile cut out of a sheet cannot carry the sheet's own corner, or the two curves
- * fight along the edge.
- */
-const rowRadiusClasses = {
-    xs: radiusClasses.xs,
-    sm: radiusClasses.xs,
-    md: radiusClasses.sm,
-    lg: radiusClasses.sm,
-    xl: radiusClasses.md
-};
-/**
- * The row, in every one of its shapes — plain, link, submenu trigger, checkbox,
- * radio. They differ in which Base UI part renders them and in nothing else.
- *
- * `data-highlighted` rather than `:hover`, exactly as on a `PlSelect` option: it
- * is also what the arrow keys move, so the mouse and the keyboard light the same
- * row instead of the keyboard lighting nothing.
- *
- * `accented` is a parameter rather than a class the caller appends, and that is
- * not a style preference. Appending `text-(--p-accent)` next to the default
- * `text-(--plass-fg)` puts two utilities of equal specificity on one element,
- * and which of them wins is decided by their order in the generated stylesheet
- * rather than by the order they were written in — so `color="danger"` on a row
- * would silently do nothing. Branching here is what makes only one of the two
- * exist.
- */
-function rowClasses(size, density, accented, className) {
-    return cx('relative flex w-full cursor-pointer items-center select-none', accented ? 'text-(--p-accent)' : 'text-(--plass-fg)', rowPaddingClasses[density][size], rowRadiusClasses[size], gapClasses[size], controlTextLeadingClasses[size], transitionClasses, iconClasses, 'data-[highlighted]:bg-(--p-soft-hover)', 'data-[popup-open]:bg-(--p-soft)', 'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50', 
-    // Base UI moves focus onto the highlighted row itself, so a ring here would
-    // draw a rectangle inside the popup on every arrow press. The tint is the
-    // focus indicator, which is what makes it the same one the mouse gets.
-    '[outline:none]', className);
-}
-/** The fixed-width slot a check, a dot or a `startIcon` lands in. */
-const slotClasses = 'flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center';
-/** The muted run of text a shortcut is set in, at the end of the row. */
-function shortcutClasses(size) {
-    return cx('ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums', metaTextClasses[size]);
-}
-/**
- * The label, and the description under it when there is one.
- *
- * `min-w-0` so a long label truncates rather than pushing the shortcut off the
- * end of a popup that has already been positioned.
- */
-function RowBody({ children, description, size }) {
-    if (!hasContent(description)) {
-        return _jsx("span", { className: "min-w-0 flex-1 truncate text-start", children: children });
-    }
-    return (_jsxs("span", { className: "flex min-w-0 flex-1 flex-col text-start", children: [_jsx("span", { className: "truncate", children: children }), _jsx("span", { className: cx('truncate text-(--plass-muted-fg)', metaTextClasses[size]), children: description })] }));
-}
-/* ---------------------------------------------------------------------------
- * The parts
- * ------------------------------------------------------------------------- */
-/**
- * One row of a menu.
- *
- * Renders a real `<a>` when it is given an `href` and Base UI's own item
- * otherwise — the same split `PlListItem` makes, for the same reason. A menu of
- * links that are not links cannot be opened in a new tab, cannot be copied, and
- * tells a screen reader the wrong thing about every one of them.
- */
-export function PlMenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick = true, disabled = false, label, children, className, style }) {
-    const { size, density } = React.useContext(MenuContext);
-    const body = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: cx(slotClasses, 'text-(--plass-muted-fg)'), children: startIcon })) : null, _jsx(RowBody, { description: description, size: size, children: children }), hasContent(endIcon) ? (_jsx("span", { className: cx(slotClasses, 'text-(--plass-muted-fg)'), children: endIcon })) : null, hasContent(shortcut) ? _jsx("span", { className: shortcutClasses(size), children: shortcut }) : null] }));
-    // A row can name its own family — `color="danger"` on the one that deletes —
-    // and the slots are re-declared on the row so the tint, the hairline and the
-    // text all turn over together rather than one of them staying indigo.
-    const slots = color ? surfaceSlots(color, 0) : undefined;
-    const rowStyle = slots || style ? { ...slots, ...style } : undefined;
-    if (href !== undefined) {
-        return (_jsx(BaseUIMenu.LinkItem, { href: href, target: target, label: label, closeOnClick: closeOnClick, onClick: onClick, className: rowClasses(size, density, Boolean(color), className), style: rowStyle, children: body }));
-    }
-    return (_jsx(BaseUIMenu.Item, { disabled: disabled, label: label, closeOnClick: closeOnClick, onClick: onClick, className: rowClasses(size, density, Boolean(color), className), style: rowStyle, children: body }));
-}
-/** A row that ticks. The tick lands in the same slot a `startIcon` would. */
-export function PlMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick = false, disabled = false, label, children, className, style }) {
-    const { size, density } = React.useContext(MenuContext);
-    const slots = color ? surfaceSlots(color, 0) : undefined;
-    return (_jsxs(BaseUIMenu.CheckboxItem, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: (next) => onCheckedChange?.(next), disabled: disabled, label: label, closeOnClick: closeOnClick, className: rowClasses(size, density, Boolean(color), className), style: slots || style ? { ...slots, ...style } : undefined, children: [_jsx("span", { className: cx(slotClasses, 'text-(--p-accent)'), children: _jsx(BaseUIMenu.CheckboxItemIndicator, { className: "flex items-center justify-center", children: _jsx(CheckIcon, {}) }) }), _jsx(RowBody, { description: description, size: size, children: children }), hasContent(endIcon) ? (_jsx("span", { className: cx(slotClasses, 'text-(--plass-muted-fg)'), children: endIcon })) : null, hasContent(shortcut) ? _jsx("span", { className: shortcutClasses(size), children: shortcut }) : null] }));
-}
-/** One choice out of a set. Wraps the rows that make up the set. */
-export function PlMenuRadioGroup({ value, defaultValue, onValueChange, disabled = false, children, className }) {
-    return (_jsx(BaseUIMenu.RadioGroup, { value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), disabled: disabled, className: className, children: children }));
-}
-/**
- * A row inside a `PlMenuRadioGroup`.
- *
- * Marked with a dot rather than a tick, which is the same distinction
- * `PlCheckbox` and `PlRadioGroup` make everywhere else: a tick says "and", a dot
- * says "instead of".
- */
-export function PlMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick = false, disabled = false, label, children, className, style }) {
-    const { size, density } = React.useContext(MenuContext);
-    const slots = color ? surfaceSlots(color, 0) : undefined;
-    return (_jsxs(BaseUIMenu.RadioItem, { value: value, disabled: disabled, label: label, closeOnClick: closeOnClick, className: rowClasses(size, density, Boolean(color), className), style: slots || style ? { ...slots, ...style } : undefined, children: [_jsx("span", { className: cx(slotClasses, 'text-(--p-accent)'), children: _jsx(BaseUIMenu.RadioItemIndicator, { className: "flex items-center justify-center", children: _jsx(DotIcon, {}) }) }), _jsx(RowBody, { description: description, size: size, children: children }), hasContent(endIcon) ? (_jsx("span", { className: cx(slotClasses, 'text-(--plass-muted-fg)'), children: endIcon })) : null, hasContent(shortcut) ? _jsx("span", { className: shortcutClasses(size), children: shortcut }) : null] }));
-}
-/** A named run of rows. The label is a heading, not a row — it cannot be picked. */
-export function PlMenuGroup({ label, children, className }) {
-    const { size, density } = React.useContext(MenuContext);
-    return (_jsxs(BaseUIMenu.Group, { className: className, children: [hasContent(label) ? (_jsx(BaseUIMenu.GroupLabel, { className: cx(rowPaddingClasses[density][size], metaTextClasses[size], 'font-semibold tracking-wide text-(--plass-muted-fg) uppercase'), children: label })) : null, children] }));
-}
-/** The hairline between two runs of rows. */
-export function PlMenuSeparator({ className, ...props }) {
-    return (_jsx(BaseUIMenu.Separator, { className: cx('-mx-1 my-1 h-px bg-(--plass-divider)', className), ...props }));
-}
-/**
- * A menu inside a menu.
- *
- * The row that opens it is the same row every other item is, wearing a chevron —
- * and it opens on hover, on <kbd>Enter</kbd> and on the arrow key that points at
- * it, all of which is Base UI's. What is here is the surface and the glyph.
- *
- * Nesting is unlimited: a `PlMenuSubmenu` renders its children inside a popup
- * that is itself a menu, so a submenu of a submenu needs no different component.
- */
-export function PlMenuSubmenu({ label, startIcon, disabled = false, side = 'right', sideOffset = 4, children, className, style }) {
-    const { size, density, color } = React.useContext(MenuContext);
-    return (_jsxs(BaseUIMenu.SubmenuRoot, { children: [_jsxs(BaseUIMenu.SubmenuTrigger, { disabled: disabled, className: rowClasses(size, density, false), children: [hasContent(startIcon) ? (_jsx("span", { className: cx(slotClasses, 'text-(--plass-muted-fg)'), children: startIcon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate text-start", children: label }), _jsx("span", { className: cx(slotClasses, 'text-(--plass-muted-fg) -rotate-90'), children: _jsx(ChevronIcon, {}) })] }), _jsx(BaseUIMenu.Portal, { children: _jsx(BaseUIMenu.Positioner, { className: "plass-portal z-50 [outline:none]", side: side, sideOffset: sideOffset, align: "start", children: _jsx(BaseUIMenu.Popup, { className: cx(popupClasses, radiusClasses[size], controlTextLeadingClasses[size], className), style: { ...surfaceSlots(color, 3), ...style }, children: children }) }) })] }));
-}
-/**
- * A list of actions that appears when something is pressed.
- *
- * Everything that makes a menu a menu rather than a floating list of `<div>`s is
- * Base UI's: roving focus with the arrow keys, <kbd>Home</kbd> and
- * <kbd>End</kbd>, typeahead, <kbd>Esc</kbd>, closing on an outside click,
- * restoring focus to the trigger, submenus opening on hover with the safe
- * triangle so a diagonal reach does not close them, and the `menu` / `menuitem`
- * roles that make any of it mean something to a screen reader. What is here is
- * the surface, the ladders and the row layout.
- *
- * The rows are **composed rather than passed as data** — the opposite of
- * `PlSelect`, and deliberately. A select's options are values from a list a
- * caller already has; a menu's rows are *code*, each one a different handler, a
- * different icon, sometimes a submenu. Data would mean an `items` type with a
- * variant for every shape a row can take, which is a component tree spelled as a
- * discriminated union.
- */
-export function PlMenu({ size = 'md', color = 'primary', density = 'default', trigger, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 6, modal = true, openOnHover = false, loopFocus = true, disabled = false, className, style, children }) {
-    const context = React.useMemo(() => ({ size, color, density }), [size, color, density]);
-    return (_jsx(MenuContext.Provider, { value: context, children: _jsxs(BaseUIMenu.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: (next) => onOpenChange?.(next), modal: modal, loopFocus: loopFocus, disabled: disabled, children: [trigger ? (_jsx(BaseUIMenu.Trigger, { render: trigger, openOnHover: openOnHover, disabled: disabled })) : null, _jsx(BaseUIMenu.Portal, { children: _jsx(BaseUIMenu.Positioner, { className: "plass-portal z-50 [outline:none]", side: side, align: align, sideOffset: sideOffset, children: _jsx(BaseUIMenu.Popup, { className: cx(popupClasses, radiusClasses[size], controlTextLeadingClasses[size], className), style: { ...surfaceSlots(color, 3), ...style }, children: children }) }) })] }) }));
-}
-/**
- * The same menu, opened by a right-click or a long press instead of by a button.
- *
- * It takes the rows as `content` and the area as `children`, which is
- * `PlTooltip`'s shape rather than `PlMenu`'s — because here the trigger is not
- * one element you hand over, it is a region of the page, and the region is the
- * thing being wrapped. Base UI positions the popup at the pointer rather than
- * against an anchor, and the long press is what makes it reachable on a touch
- * screen at all.
- */
-export function PlContextMenu({ size = 'md', color = 'primary', density = 'default', content, children, open, defaultOpen, onOpenChange, loopFocus = true, disabled = false, className, style }) {
-    const context = React.useMemo(() => ({ size, color, density }), [size, color, density]);
-    return (_jsx(MenuContext.Provider, { value: context, children: _jsxs(BaseUIContextMenu.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: (next) => onOpenChange?.(next), loopFocus: loopFocus, disabled: disabled, children: [_jsx(BaseUIContextMenu.Trigger, { children: children }), _jsx(BaseUIContextMenu.Portal, { children: _jsx(BaseUIContextMenu.Positioner, { className: "plass-portal z-50 [outline:none]", children: _jsx(BaseUIContextMenu.Popup, { className: cx(popupClasses, radiusClasses[size], controlTextLeadingClasses[size], className), style: { ...surfaceSlots(color, 3), ...style }, children: content }) }) })] }) }));
-}
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as t}from"@base-ui/react/context-menu";import{MenuContext as o}from"../../internal/menu.js";import{CheckIcon as r,ChevronIcon as i,DotIcon as c}from"../../internal/icons.js";import{controlTextLeadingClasses as d,cx as p,gapClasses as u,glassClasses as m,hasContent as h,iconClasses as x,metaTextClasses as f,radiusClasses as g,surfaceSlots as y,transitionClasses as b}from"../../internal/styles.js";const C=/* @__PURE__ */[m,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[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"].join(" "),N={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},v={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function rowClasses(e,s,l,n){return p("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",N[s][e],v[e],u[e],d[e],b,x,"data-[highlighted]:bg-(--p-soft-hover)","data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const k="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return p("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",f[e])}function RowBody({children:l,description:n,size:a}){return h(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:p("truncate text-(--plass-muted-fg)",f[a]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:t,href:r,target:i,startIcon:c,endIcon:d,shortcut:u,description:m,color:x,closeOnClick:f=!0,disabled:g=!1,label:b,children:C,className:N,style:v}){const{size:w,density:O}=n.useContext(o),P=s(l,{children:[h(c)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:c}):null,e(RowBody,{description:m,size:w,children:C}),h(d)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:d}):null,h(u)?e("span",{className:shortcutClasses(w),children:u}):null]}),z=x?y(x,0):void 0,I=z||v?{...z,...v}:void 0;return void 0!==r?e(a.LinkItem,{href:r,target:i,label:b,closeOnClick:f,onClick:t,className:rowClasses(w,O,Boolean(x),N),style:I,children:P}):e(a.Item,{disabled:g,label:b,closeOnClick:f,onClick:t,className:rowClasses(w,O,Boolean(x),N),style:I,children:P})}export function PlMenuCheckboxItem({checked:l,defaultChecked:t,onCheckedChange:i,endIcon:c,shortcut:d,description:u,color:m,closeOnClick:x=!1,disabled:f=!1,label:g,children:b,className:C,style:N}){const{size:v,density:w}=n.useContext(o),O=m?y(m,0):void 0;return s(a.CheckboxItem,{checked:l,defaultChecked:t,onCheckedChange:e=>i?.(e),disabled:f,label:g,closeOnClick:x,className:rowClasses(v,w,Boolean(m),C),style:O||N?{...O,...N}:void 0,children:[e("span",{className:p(k,"text-(--p-accent)"),children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{})})}),e(RowBody,{description:u,size:v,children:b}),h(c)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:c}):null,h(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:t=!1,children:o,className:r}){return e(a.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:t,className:r,children:o})}export function PlMenuRadioItem({value:l,endIcon:t,shortcut:r,description:i,color:d,closeOnClick:u=!1,disabled:m=!1,label:x,children:f,className:g,style:b}){const{size:C,density:N}=n.useContext(o),v=d?y(d,0):void 0;return s(a.RadioItem,{value:l,disabled:m,label:x,closeOnClick:u,className:rowClasses(C,N,Boolean(d),g),style:v||b?{...v,...b}:void 0,children:[e("span",{className:p(k,"text-(--p-accent)"),children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(RowBody,{description:i,size:C,children:f}),h(t)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:t}):null,h(r)?e("span",{className:shortcutClasses(C),children:r}):null]})}export function PlMenuGroup({label:l,children:t,className:r}){const{size:i,density:c}=n.useContext(o);return s(a.Group,{className:r,children:[h(l)?e(a.GroupLabel,{className:p(N[c][i],f[i],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,t]})}export function PlMenuSeparator({className:s,...l}){return e(a.Separator,{className:p("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:t,disabled:r=!1,side:c="right",sideOffset:u=4,children:m,className:x,style:f}){const{size:b,density:N,color:v}=n.useContext(o);return s(a.SubmenuRoot,{children:[s(a.SubmenuTrigger,{disabled:r,className:rowClasses(b,N,!1),children:[h(t)?e("span",{className:p(k,"text-(--plass-muted-fg)"),children:t}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:p(k,"text-(--plass-muted-fg) -rotate-90"),children:e(i,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-50 [outline:none]",side:c,sideOffset:u,align:"start",children:e(a.Popup,{className:p(C,g[b],d[b],x),style:{...y(v,3),...f},children:m})})})]})}export function PlMenu({size:l="md",color:t="primary",density:r="default",trigger:i,open:c,defaultOpen:u,onOpenChange:m,side:h="bottom",align:x="start",sideOffset:f=6,modal:b=!0,openOnHover:N=!1,loopFocus:v=!0,disabled:k=!1,className:w,style:O,children:P}){const z=n.useMemo(()=>({size:l,color:t,density:r}),[l,t,r]);return e(o.Provider,{value:z,children:s(a.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:b,loopFocus:v,disabled:k,children:[i?e(a.Trigger,{render:i,openOnHover:N,disabled:k}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-50 [outline:none]",side:h,align:x,sideOffset:f,children:e(a.Popup,{className:p(C,g[l],d[l],w),style:{...y(t,3),...O},children:P})})})]})})}export function PlContextMenu({size:l="md",color:a="primary",density:r="default",content:i,children:c,open:u,defaultOpen:m,onOpenChange:h,loopFocus:x=!0,disabled:f=!1,className:b,style:N}){const v=n.useMemo(()=>({size:l,color:a,density:r}),[l,a,r]);return e(o.Provider,{value:v,children:s(t.Root,{open:u,defaultOpen:m,onOpenChange:e=>h?.(e),loopFocus:x,disabled:f,children:[e(t.Trigger,{children:c}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-50 [outline:none]",children:e(t.Popup,{className:p(C,g[l],d[l],b),style:{...y(a,3),...N},children:i})})})]})})}

package/dist/components/menu/index.js

@@ -1 +1 @@
-export { PlContextMenu, PlMenu, PlMenuCheckboxItem, PlMenuGroup, PlMenuItem, PlMenuRadioGroup, PlMenuRadioItem, PlMenuSeparator, PlMenuSubmenu } from './PlMenu.js';
+export{PlContextMenu,PlMenu,PlMenuCheckboxItem,PlMenuGroup,PlMenuItem,PlMenuRadioGroup,PlMenuRadioItem,PlMenuSeparator,PlMenuSubmenu}from"./PlMenu.js";

package/dist/components/modal/PlModal.js

@@ -1,150 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import { CloseIcon } from '../../internal/icons.js';
-import { focusRingClasses, glassClasses, hasContent, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetLineClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses, surfaceSlots } from '../../internal/styles.js';
-/**
- * How wide the sheet is allowed to get, per `size`.
- *
- * `size` and the width are one axis here rather than two. A second five-value
- * scale spelled `maxWidth` would be a second spelling of an idea the library
- * already has a word for, and the case it exists for — "small type, wide sheet"
- * — is what the `width` escape hatch is.
- *
- * The steps are wider apart than the control ladder because they answer a
- * different question: not how big is this thing, but how long a line of text is
- * comfortable inside it.
- */
-const maxWidthClasses = {
-    xs: 'max-w-80',
-    sm: 'max-w-96',
-    md: 'max-w-lg',
-    lg: 'max-w-2xl',
-    xl: 'max-w-4xl'
-};
-/**
- * The sheet, and — with the PlSelect popup — one of the two surfaces in the
- * library that is *supposed* to float. So unlike everything else it carries a
- * shadow by default, at level 3.
- *
- * It is the glass at its most opaque, because what is behind it is arbitrary:
- * a modal floats over whatever the page happens to be, and a 62%-translucent
- * pane over a photograph is a pane you read the photograph through.
- *
- * There is no `elevation` prop for the same reason there is no `variant`: a
- * modal that could be told to sit flat on the page would be a modal that could
- * be told to stop being one.
- */
-const popupClasses = /* @__PURE__ */ [
-    glassClasses,
-    'relative flex w-full flex-col overflow-hidden',
-    'border text-(--plass-fg) bg-(--plass-glass-press)',
-    '[border-color:var(--plass-glass-line)]',
-    '[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]',
-    '[outline:none]',
-    // Opacity only. A modal that scales or slides in drags its own text across
-    // the screen for 200ms, which is the exact thing the house style is against —
-    // and unlike a control, this one is full of text.
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
-].join(' ');
-const backdropClasses = /* @__PURE__ */ [
-    'fixed inset-0 z-50 bg-(--plass-scrim)',
-    '[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]',
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
-].join(' ');
-/**
- * Closes the modal it is inside.
- *
- * Exported because an uncontrolled modal has no `setOpen` for its Cancel button
- * to call, and the alternative — making every modal controlled — is a piece of
- * state per modal that exists only to answer a button.
- *
- * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
- * `<PlModalClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
- */
-export const PlModalClose = BaseUIDialog.Close;
-/**
- * A sheet that takes the page away until it is answered.
- *
- * The sections are props rather than compound sub-components, exactly as they
- * are on PlCard: the arrangement of a modal is fixed — heading, description,
- * body, actions — and what a caller wants to decide is what goes in each slot.
- * Base UI owns everything hard about it: the focus trap, the scroll lock, the
- * `aria-labelledby` / `aria-describedby` wiring, restoring focus to the trigger,
- * and the inert page behind.
- *
- * What is left here is the surface, the width ladder and the scroll behaviour —
- * the header and the actions stay put while only the body scrolls, which is why
- * `dividers` matters more here than on a PlCard.
- */
-export function PlModal({ size = 'md', color = 'primary', density = 'default', open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers = false, showClose = true, closeLabel = 'Close', width, fullWidth = true, fullScreen = false, modal = true, dismissible = true, className, style, children, ...props }) {
-    const insetX = sheetPaddingXClasses[density][size];
-    const insetY = sheetPaddingYClasses[density][size];
-    // With dividers the lines have to reach both edges, so the sheet gives up its
-    // padding and every section takes it on instead — the same trade PlCard makes.
-    const sectionClasses = dividers ? `${insetX} ${insetY}` : insetX;
-    const hasHeader = hasContent(title) || hasContent(description);
-    const hasActions = hasContent(actions);
-    return (_jsxs(BaseUIDialog.Root, { open: open, defaultOpen: defaultOpen, modal: modal, disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
-            // `disablePointerDismissal` covers the click outside; Escape has no prop
-            // of its own, so it is cancelled here by the reason it arrives with.
-            if (!dismissible && !next && details.reason === 'escape-key') {
-                details.cancel();
-                return;
-            }
-            onOpenChange?.(next);
-        }, children: [trigger ? _jsx(BaseUIDialog.Trigger, { render: trigger }) : null, _jsxs(BaseUIDialog.Portal, { children: [_jsx(BaseUIDialog.Backdrop, { className: `plass-portal ${backdropClasses}` }), _jsx(BaseUIDialog.Viewport, { className: [
-                            'plass-portal fixed inset-0 z-50 flex justify-center',
-                            // `items-center` alone would clip the top of a modal taller than the
-                            // viewport, because a centred flex item cannot scroll past its own
-                            // container's start edge. The popup caps its height instead and
-                            // scrolls its body, so the header and the actions stay put.
-                            fullScreen ? 'items-stretch' : 'items-center p-4'
-                        ].join(' '), children: _jsxs(BaseUIDialog.Popup, { className: [
-                                popupClasses,
-                                sheetBodyClasses[size],
-                                fullScreen
-                                    ? 'h-full max-w-none rounded-none'
-                                    : `max-h-full ${radiusClasses[size]} ${width === undefined ? maxWidthClasses[size] : ''}`,
-                                !fullScreen && !fullWidth ? 'w-auto' : '',
-                                dividers ? '' : `${insetY} ${sheetSectionGapClasses[size]}`,
-                                className ?? ''
-                            ]
-                                .filter(Boolean)
-                                .join(' '), style: {
-                                ...surfaceSlots(color, 3),
-                                ...(width === undefined
-                                    ? null
-                                    : { maxWidth: typeof width === 'number' ? `${width}px` : width }),
-                                ...style
-                            }, ...props, children: [hasHeader || showClose ? (_jsxs("div", { className: `flex shrink-0 items-start gap-3 ${sectionClasses}`, children: [_jsxs("div", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [hasContent(title) ? (_jsx(BaseUIDialog.Title, { className: `m-0 font-semibold ${sheetTitleClasses[size]}`, children: title })) : null, hasContent(description) ? (_jsx(BaseUIDialog.Description, { className: `m-0 text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: description })) : null] }), showClose ? (_jsx(BaseUIDialog.Close, { "aria-label": closeLabel, className: [
-                                                'flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center',
-                                                'rounded-full text-(--plass-muted-fg)',
-                                                '[&_svg]:size-[1.1em] [&_svg]:shrink-0',
-                                                '[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]',
-                                                'hover:bg-(--p-soft) hover:text-(--plass-fg)',
-                                                focusRingClasses
-                                            ].join(' '), children: _jsx(CloseIcon, {}) })) : null] })) : null, hasContent(children) ? (_jsx("div", { className: [
-                                        'min-h-0 flex-1 overflow-y-auto overscroll-contain',
-                                        sectionClasses,
-                                        dividers && (hasHeader || showClose) ? sheetLineClasses : '',
-                                        // A scroll container clips at its padding box, and a focus
-                                        // ring is drawn 2px outside the control that owns it — so a
-                                        // field at the top or bottom of an unruled body would have its
-                                        // ring sliced off. The padding is room for the ring and the
-                                        // negative margin hands the space straight back, so nothing on
-                                        // the sheet moves. Only without `dividers`: with them the body
-                                        // already carries `insetY`, and pulling it up would drag the
-                                        // rule into the section above.
-                                        dividers ? '' : '-my-1 py-1'
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' '), children: children })) : null, hasActions ? (_jsx("div", { className: [
-                                        'flex shrink-0 flex-wrap items-center justify-end gap-2',
-                                        sectionClasses,
-                                        dividers ? sheetLineClasses : ''
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' '), children: actions })) : null] }) })] })] }));
-}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Dialog as s}from"@base-ui/react/dialog";import{CloseIcon as a}from"../../internal/icons.js";import{focusRingClasses as i,glassClasses as o,hasContent as r,metaTextClasses as t,radiusClasses as n,sheetBodyClasses as d,sheetHeaderGapClasses as c,sheetLineClasses as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as x,surfaceSlots as h}from"../../internal/styles.js";const g={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},v=/* @__PURE__ */[o,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y=/* @__PURE__ */["fixed inset-0 z-50 bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=s.Close;export function PlModal({size:o="md",color:b="primary",density:w="default",open:j,defaultOpen:$,onOpenChange:N,trigger:k,title:_,description:C,actions:z,dividers:P=!1,showClose:B=!0,closeLabel:O="Close",width:D,fullWidth:M=!0,fullScreen:T=!1,modal:W=!0,dismissible:L=!0,className:R,style:S,children:V,...q}){const A=m[w][o],E=f[w][o],F=P?`${A} ${E}`:A,G=r(_)||r(C),H=r(z);return l(s.Root,{open:j,defaultOpen:$,modal:W,disablePointerDismissal:!L,onOpenChange:(e,l)=>{L||e||"escape-key"!==l.reason?N?.(e):l.cancel()},children:[k?e(s.Trigger,{render:k}):null,l(s.Portal,{children:[e(s.Backdrop,{className:`plass-portal ${y}`}),e(s.Viewport,{className:["plass-portal fixed inset-0 z-50 flex justify-center",T?"items-stretch":"items-center p-4"].join(" "),children:l(s.Popup,{className:[v,d[o],T?"h-full max-w-none rounded-none":`max-h-full ${n[o]} ${void 0===D?g[o]:""}`,T||M?"":"w-auto",P?"":`${E} ${u[o]}`,R??""].filter(Boolean).join(" "),style:{...h(b,3),...void 0===D?null:{maxWidth:"number"==typeof D?`${D}px`:D},...S},...q,children:[G||B?l("div",{className:`flex shrink-0 items-start gap-3 ${F}`,children:[l("div",{className:`flex min-w-0 flex-1 flex-col ${c[o]}`,children:[r(_)?e(s.Title,{className:`m-0 font-semibold ${x[o]}`,children:_}):null,r(C)?e(s.Description,{className:`m-0 text-(--plass-muted-fg) ${t[o]}`,children:C}):null]}),B?e(s.Close,{"aria-label":O,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",i].join(" "),children:e(a,{})}):null]}):null,r(V)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",F,P&&(G||B)?p:"",P?"":"-my-1 py-1"].filter(Boolean).join(" "),children:V}):null,H?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",F,P?p:""].filter(Boolean).join(" "),children:z}):null]})})]})]})}

package/dist/components/modal/index.js

@@ -1 +1 @@
-export { PlModal, PlModalClose } from './PlModal.js';
+export{PlModal,PlModalClose}from"./PlModal.js";