plass-ui 0.0.1 → 1.0.0

package/dist/components/menu/PlMenu.js

@@ -0,0 +1,209 @@
+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 }) }) })] }) }));
+}

package/dist/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { PlContextMenu, PlMenu, PlMenuCheckboxItem, PlMenuGroup, PlMenuItem, PlMenuRadioGroup, PlMenuRadioItem, PlMenuSeparator, PlMenuSubmenu } from './PlMenu.js';
+export type { PlContextMenuProps, PlMenuCheckboxItemProps, PlMenuGroupProps, PlMenuItemProps, PlMenuProps, PlMenuRadioGroupProps, PlMenuRadioItemProps, PlMenuSeparatorProps, PlMenuSubmenuProps } from './PlMenu.js';

package/dist/components/menu/index.js

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

package/dist/components/modal/PlModal.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import type { PlassStyleProps } from '../../types.js';
+/**
+ * A modal takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`: the three materials answer "how much does this surface
+ * assert itself against the page around it", and a modal has already taken the
+ * page. There is no `elevation` either — see `popupClasses`.
+ */
+export interface PlModalProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /** The modal is shown. Use with `onOpenChange` for a controlled modal. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the modal, wired up by Base UI. Optional — a
+     * controlled modal opened from somewhere else in the app needs no trigger at
+     * all, and passing one here is only a convenience for the common case.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the `<h2>` that names the modal. */
+    title?: React.ReactNode;
+    /** A line under the title, and the modal's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row. Laid out end-aligned, so a pair of buttons needs no wrapper
+     * of its own — and `PlModalClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Scores the sheet between the header, the body and the actions instead of
+     * separating them with space. Worth turning on the moment the body scrolls:
+     * the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner.
+     *
+     * On by default, unlike most booleans in the library. A modal takes the page
+     * away until it is answered, and the visible way out should not have to be
+     * remembered.
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Accessible name of the × button. Never drawn.
+     * @default 'Close'
+     */
+    closeLabel?: string;
+    /**
+     * A hard cap on the sheet's width, overriding the one `size` implies. Numbers
+     * are pixels. For the modal whose content decides its width — a wide table, a
+     * narrow confirmation — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+    /**
+     * The sheet takes the full width its `size` allows.
+     *
+     * On by default, which is the other way round from every other component.
+     * Elsewhere `fullWidth` means "fill the container"; a modal's container is
+     * the viewport, and a modal that shrank to fit two words would be a tooltip.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /** Fills the viewport edge to edge. For a mobile-sized screen, or an editor. */
+    fullScreen?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the modal. Turn it off
+     * for the one that has to be answered — and then give it actions that answer
+     * it, because there will be no other way out.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+export type PlModalCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIDialog.Close>;
+/**
+ * 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 declare const PlModalClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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 declare function PlModal({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, style, children, ...props }: PlModalProps): React.JSX.Element;

package/dist/components/modal/PlModal.js

@@ -0,0 +1,150 @@
+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] }) })] })] }));
+}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { PlModal, PlModalClose } from './PlModal.js';
+export type { PlModalCloseProps, PlModalProps } from './PlModal.js';

package/dist/components/modal/index.js

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

package/dist/components/number-field/PlNumberField.d.ts

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * Where the two steppers sit.
+ *
+ * - `end` — both at the trailing edge, the way a spinner has always looked.
+ * - `split` — minus at the start, plus at the end, with the number between them.
+ *   For a quantity that is nudged rather than typed.
+ * - `none` — no buttons. The field is still a number field: the arrow keys, the
+ *   clamping and the formatting all stay.
+ *
+ * There is deliberately no stacked pair of half-height chevrons. At `xs` each
+ * arrow would be under three pixels tall, and a target that small is a target
+ * nobody hits.
+ */
+export type PlNumberFieldSteppers = 'end' | 'split' | 'none';
+export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /**
+     * Drop shadow depth. `0` is the default — a field is a well cut into the
+     * sheet, not a key resting on it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** The number. Use with `onValueChange` for a controlled field. */
+    value?: number | null;
+    /** The initial number, for an uncontrolled field. */
+    defaultValue?: number;
+    /** Called on every change — typing, stepping, the wheel. */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * Called when the value settles: on blur after typing, on pointer release
+     * after a press, and together with `onValueChange` for the keyboard.
+     */
+    onValueCommitted?: (value: number | null) => void;
+    /** The bottom of the range. Stepping stops here. */
+    min?: number;
+    /** The top of the range. */
+    max?: number;
+    /**
+     * How far one step goes. `'any'` turns step validation off.
+     * @default 1
+     */
+    step?: number | 'any';
+    /**
+     * The step taken while Shift is held.
+     * @default 10
+     */
+    largeStep?: number;
+    /**
+     * The step taken while Alt is held.
+     * @default 0.1
+     */
+    smallStep?: number;
+    /**
+     * Whether stepping snaps to multiples of the step.
+     * @default false
+     */
+    snapOnStep?: boolean;
+    /**
+     * Whether the wheel changes the value while the field is focused and hovered.
+     * Off by default: a page that scrolls under the pointer and a field that
+     * changes under it are the same gesture, and only one of them was meant.
+     * @default false
+     */
+    allowWheelScrub?: boolean;
+    /**
+     * How the number is written — currency, percent, decimal places. Passed
+     * straight to `Intl.NumberFormat`, so the field shows `$1,240.00` and still
+     * reports `1240`.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which locale the number is written and parsed in. Defaults to the runtime's. */
+    locale?: Intl.LocalesArgument;
+    /**
+     * Where the steppers sit, or `none` for a field without them.
+     * @default 'end'
+     */
+    steppers?: PlNumberFieldSteppers;
+    /**
+     * Accessible name of the increment button. Never drawn.
+     * @default 'Increase'
+     */
+    incrementLabel?: string;
+    /**
+     * Accessible name of the decrement button. Never drawn.
+     * @default 'Decrease'
+     */
+    decrementLabel?: string;
+    /**
+     * Label above the control, wired to it by Base UI's Field. There is no
+     * floating variant on purpose: floating labels need a `transform`.
+     */
+    label?: React.ReactNode;
+    /** Helper text below the control. */
+    description?: React.ReactNode;
+    /** Error message below the control. Its presence also turns the field invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    /** Content placed before the number — a currency mark, a unit, an icon. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the number, before the steppers. */
+    endIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The number is shown but cannot be changed. */
+    readOnly?: boolean;
+    /** Whether a value must be entered before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** Placeholder shown while the field is empty. */
+    placeholder?: string;
+    id?: string;
+}
+/**
+ * A field that only holds a number.
+ *
+ * The shell is a `PlTextField`'s, to the pixel, because a form where the
+ * quantity box is a different height or radius from the boxes around it is a
+ * form that looks assembled rather than designed. What is added on top is a real
+ * numeric control: arrow keys and the steppers move by `step` (Shift for
+ * `largeStep`, Alt for `smallStep`), the value clamps to `min`/`max`, and
+ * `format` writes it as currency or a percentage while `value` stays a plain
+ * number.
+ *
+ * Base UI owns the hard parts — parsing what was typed against the locale,
+ * clamping, the press-and-hold repeat on the steppers, and the hidden input that
+ * submits with a form.
+ */
+export declare function PlNumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, style, ...props }: PlNumberFieldProps): React.JSX.Element;