plass-ui 0.0.1 → 1.0.1

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

@@ -0,0 +1 @@
+"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.d.ts

@@ -0,0 +1,2 @@
+export { PlIconButton } from './PlIconButton.js';
+export type { PlIconButtonProps } from './PlIconButton.js';

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

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

package/dist/components/list/PlList.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlListProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default — a list is a sheet lying flat, not a
+     * key resting on one.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Separates the rows with a hairline instead of with space.
+     *
+     * It changes more than it sounds like: with dividers the rules have to reach
+     * both edges of the sheet, so the list gives up its inner padding and the rows
+     * give up their rounded corners. A row cannot be a floating tile and a ruled
+     * line at the same time.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Renders something other than a `<ul>` — `render={<ol />}` for a list where
+     * the order is the point. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface PlListItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /**
+     * Passing it is what turns the row into a real `<button>`. It lands on that
+     * button rather than on the `<li>`, which is why the type is loosened from the
+     * list item the shell actually is.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — an icon, an avatar, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area. */
+    endIcon?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row — a switch, a menu button.
+     *
+     * Deliberately outside the pressable area: a row that both navigates and holds
+     * a toggle has two things to press, and nesting one button inside another is
+     * markup the browser rewrites on parse.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
+    href?: string;
+    /** Marks the row as the chosen one — the open page, the current filter. */
+    selected?: boolean;
+    /** Unavailable. The light goes out, the same way it does everywhere else. */
+    disabled?: boolean;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlList: React.ForwardRefExoticComponent<PlListProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * 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 declare const PlListItem: React.ForwardRefExoticComponent<PlListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/PlList.js

@@ -0,0 +1 @@
+"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.d.ts

@@ -0,0 +1,2 @@
+export { PlList, PlListItem } from './PlList.js';
+export type { PlListItemProps, PlListProps } from './PlList.js';

package/dist/components/list/index.js

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

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

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassSide, PlassStyleProps } from '../../types.js';
+/**
+ * A menu takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for the reason `PlModal` has none: the three materials
+ * answer "how much does this surface assert itself against the page", and a
+ * popup that has taken the pointer has already answered it. There is no
+ * `elevation` either — a menu genuinely floats, which is the one case the
+ * ladder exists for, so it is fixed at its top rung.
+ */
+interface MenuSurfaceProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlMenuProps extends MenuSurfaceProps {
+    /**
+     * The element that opens the menu, wired up by Base UI. Optional — a
+     * controlled menu opened from elsewhere needs no trigger of its own.
+     */
+    trigger?: React.ReactElement;
+    /** Whether the menu is open. Use with `onOpenChange` for a controlled menu. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge of the trigger it hangs off. @default 'bottom' */
+    side?: PlassSide;
+    /** Where it sits along that edge. @default 'start' */
+    align?: PlassAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /** Whether the page behind is taken away while the menu is open. @default true */
+    modal?: boolean;
+    /**
+     * Opens on hover as well as on click. For a menu bar, where crossing the row
+     * with an open menu should walk through the others rather than close them.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /** Whether the arrow keys wrap from the last row back to the first. @default true */
+    loopFocus?: boolean;
+    /** Unavailable. The trigger stops opening anything. */
+    disabled?: boolean;
+    /** The rows. */
+    children?: React.ReactNode;
+}
+export interface PlContextMenuProps extends MenuSurfaceProps {
+    /** The rows, exactly as they are written inside a `PlMenu`. */
+    content: React.ReactNode;
+    /**
+     * The area that answers a right-click or a long press. Rendered inside a
+     * `<div>` of Base UI's, which is what listens for the gesture.
+     */
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default true */
+    loopFocus?: boolean;
+    disabled?: boolean;
+}
+export interface PlMenuItemProps {
+    /** What the row does. Not given, and not a link, the row is a label. */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Renders the row as a real `<a>`. A menu of links has to be links. */
+    href?: string;
+    /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
+    target?: string;
+    /** Content before the label — an icon, a swatch, a check. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, before any `shortcut`. */
+    endIcon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row and
+     * muted. Text only — the row does not bind it, the application does.
+     */
+    shortcut?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * Re-points the row's colour family — `danger` for the one that deletes.
+     * Defaults to the menu's own.
+     */
+    color?: PlassColor;
+    /** Whether picking the row closes the menu. @default true */
+    closeOnClick?: boolean;
+    /** Unavailable. Still listed, and still found by typeahead. */
+    disabled?: boolean;
+    /** What typeahead matches against, when the label is not a plain string. */
+    label?: string;
+    /** The label. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlMenuSubmenuProps {
+    /** The label on the row that opens it. */
+    label?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    disabled?: boolean;
+    /** Which edge of the parent row it opens against. @default 'right' */
+    side?: PlassSide;
+    /** Distance from the parent menu, in pixels. @default 4 */
+    sideOffset?: number;
+    /** The nested rows. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlMenuGroupProps {
+    /** The heading over the group. Wired to it by Base UI. */
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether ticking the row closes the menu. `false` here, against the `true` a
+     * plain row takes: a list of things to tick is a list you tick more than one
+     * of.
+     * @default false
+     */
+    closeOnClick?: boolean;
+}
+export interface PlMenuRadioGroupProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (value: string | number) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    /** What this row sets the group to. */
+    value: string | number;
+    /** @default false */
+    closeOnClick?: boolean;
+}
+export type PlMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * 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 declare function PlMenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
+/** A row that ticks. The tick lands in the same slot a `startIcon` would. */
+export declare function PlMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuCheckboxItemProps): React.JSX.Element;
+/** One choice out of a set. Wraps the rows that make up the set. */
+export declare function PlMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: PlMenuRadioGroupProps): React.JSX.Element;
+/**
+ * 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 declare function PlMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuRadioItemProps): React.JSX.Element;
+/** A named run of rows. The label is a heading, not a row — it cannot be picked. */
+export declare function PlMenuGroup({ label, children, className }: PlMenuGroupProps): React.JSX.Element;
+/** The hairline between two runs of rows. */
+export declare function PlMenuSeparator({ className, ...props }: PlMenuSeparatorProps): React.JSX.Element;
+/**
+ * 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 declare function PlMenuSubmenu({ label, startIcon, disabled, side, sideOffset, children, className, style }: PlMenuSubmenuProps): React.JSX.Element;
+/**
+ * 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 declare function PlMenu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
+/**
+ * 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 declare function PlContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
+export {};

package/dist/components/menu/PlMenu.js

@@ -0,0 +1 @@
+"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.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 @@
+"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.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;

package/dist/components/number-field/PlNumberField.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{NumberField as a}from"@base-ui/react/number-field";import{Field as t}from"@base-ui/react/field";import{MinusIcon as s,PlusIcon as n}from"../../internal/icons.js";import{controlHeightClasses as r,controlTextLeadingClasses as i,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusRingClasses as p,focusWithinRingClasses as m,gapClasses as u,hasContent as f,iconClasses as h,metaTextClasses as b,paddingXClasses as x,radiusClasses as g,stackGapClasses as v,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";const y=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",j,"focus-within:[transition-duration:0ms]",m,h].join(" "),w=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",p,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:p="glass",size:m="md",color:h="primary",density:j="default",elevation:k=0,value:S,defaultValue:_,onValueChange:V,onValueCommitted:I,min:C,max:O,step:z,largeStep:B,smallStep:D,snapOnStep:L,allowWheelScrub:W=!1,format:$,locale:q,steppers:F="end",incrementLabel:R="Increase",decrementLabel:E="Decrease",label:G,description:P,error:A,invalid:H,startIcon:J,endIcon:K,fullWidth:M=!1,disabled:Q=!1,readOnly:T=!1,required:U=!1,name:X,placeholder:Y,id:Z,className:ee,style:le,...ae}){const te=f(A),se=H??te,ne=se?"danger":h,re=x[j][m],ie={end:`${re} pe-1`,split:"px-1",none:re},oe=e(a.Decrement,{"aria-label":E,className:w,children:e(s,{})}),ce=e(a.Increment,{"aria-label":R,className:w,children:e(n,{})}),de="none"!==F&&!T;return l(t.Root,{disabled:Q,invalid:se,className:["flex-col align-top",v[m],M?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...N(ne,k),...le},...ae,children:[G?e(t.Label,{className:[b[m],"font-medium text-(--plass-fg)",Q?"opacity-50":""].filter(Boolean).join(" "),children:G}):null,e(a.Root,{id:Z,name:X,className:"contents",value:S,defaultValue:_,onValueChange:e=>V?.(e),onValueCommitted:e=>I?.(e),min:C,max:O,step:z,largeStep:B,smallStep:D,snapOnStep:L,allowWheelScrub:W,format:$,locale:q,disabled:Q,readOnly:T,required:U,children:l(a.Group,{className:[y,r[m],i[m],g[m],u[m],de?ie[F]:re,Q?o[p]:T?c[p]:d[p]].join(" "),children:[de&&"split"===F?oe:null,J?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:J}):null,e(a.Input,{placeholder:Y,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===F&&de?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:K}):null,de&&"end"===F?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[oe,ce]}):null,de&&"split"===F?ce:null]})}),P?e(t.Description,{className:`${b[m]} text-(--plass-muted-fg)`,children:P}):null,te?e(t.Error,{match:!0,className:`${b[m]} text-(--p-accent)`,children:A}):null]})}

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

@@ -0,0 +1,2 @@
+export { PlNumberField } from './PlNumberField.js';
+export type { PlNumberFieldProps, PlNumberFieldSteppers } from './PlNumberField.js';

package/dist/components/number-field/index.js

@@ -0,0 +1 @@
+export{PlNumberField}from"./PlNumberField.js";