plass-ui 1.0.0 → 1.0.2

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

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

@@ -1,111 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { NumberField as BaseUINumberField } from '@base-ui/react/number-field';
-import { Field } from '@base-ui/react/field';
-import { MinusIcon, PlusIcon } from '../../internal/icons.js';
-import { controlHeightClasses, controlTextLeadingClasses, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, focusRingClasses, focusWithinRingClasses, gapClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/** The shell is a `PlTextField`'s, to the pixel — see `fieldRestClasses`. */
-const shellBaseClasses = /* @__PURE__ */ [
-    'group relative flex w-full cursor-text items-center',
-    '[-webkit-tap-highlight-color:transparent]',
-    transitionClasses,
-    'focus-within:[transition-duration:0ms]',
-    focusWithinRingClasses,
-    iconClasses
-].join(' ');
-/**
- * A stepper. Square, tracking the text rather than the control, so the same
- * button works at every step of the scale without a table of its own.
- *
- * No `transform` on it, the same rule every control in the library keeps: what
- * moves under the finger is the tint, not the button.
- */
-const stepperClasses = /* @__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)',
-    focusRingClasses,
-    // A stepper that has run into `min` goes out like everything else that is
-    // unavailable here: the page shows through it.
-    'disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40'
-].join(' ');
-/**
- * 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 function PlNumberField({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub = false, format, locale, steppers = 'end', incrementLabel = 'Increase', decrementLabel = 'Decrease', label, description, error, invalid, startIcon, endIcon, fullWidth = false, disabled = false, readOnly = false, required = false, name, placeholder, id, className, style, ...props }) {
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    // Invalid re-points the whole slot family at `danger`, so the edge, the ring,
-    // the caret and the message all turn over together.
-    const family = isInvalid ? 'danger' : color;
-    // The steppers bring their own padding; stacking the shell's on top of them
-    // would leave the buttons floating in the middle of a gap. The shell keeps the
-    // padding on whichever side has no button.
-    const padX = paddingXClasses[density][size];
-    const insetClasses = {
-        end: `${padX} pe-1`,
-        split: 'px-1',
-        none: padX
-    };
-    const decrement = (_jsx(BaseUINumberField.Decrement, { "aria-label": decrementLabel, className: stepperClasses, children: _jsx(MinusIcon, {}) }));
-    const increment = (_jsx(BaseUINumberField.Increment, { "aria-label": incrementLabel, className: stepperClasses, children: _jsx(PlusIcon, {}) }));
-    const showSteppers = steppers !== 'none' && !readOnly;
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: [
-            'flex-col align-top',
-            stackGapClasses[size],
-            fullWidth ? 'flex w-full' : 'inline-flex',
-            className ?? ''
-        ]
-            .filter(Boolean)
-            .join(' '), style: { ...surfaceSlots(family, elevation), ...style }, ...props, children: [label ? (_jsx(Field.Label, { className: [
-                    metaTextClasses[size],
-                    'font-medium text-(--plass-fg)',
-                    disabled ? 'opacity-50' : ''
-                ]
-                    .filter(Boolean)
-                    .join(' '), children: label })) : null, _jsx(BaseUINumberField.Root, { id: id, name: name, className: "contents", value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), onValueCommitted: (next) => onValueCommitted?.(next), min: min, max: max, step: step, largeStep: largeStep, smallStep: smallStep, snapOnStep: snapOnStep, allowWheelScrub: allowWheelScrub, format: format, locale: locale, disabled: disabled, readOnly: readOnly, required: required, children: _jsxs(BaseUINumberField.Group, { className: [
-                        shellBaseClasses,
-                        controlHeightClasses[size],
-                        controlTextLeadingClasses[size],
-                        radiusClasses[size],
-                        gapClasses[size],
-                        showSteppers ? insetClasses[steppers] : padX,
-                        // An if/else rather than stacked variants: two Tailwind classes of
-                        // equal specificity resolve by their order in the generated sheet.
-                        disabled
-                            ? disabledClasses[variant]
-                            : readOnly
-                                ? fieldReadOnlyClasses[variant]
-                                : fieldRestClasses[variant]
-                    ].join(' '), children: [showSteppers && steppers === 'split' ? decrement : null, startIcon ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsx(BaseUINumberField.Input, { placeholder: placeholder, className: [
-                                'min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit',
-                                // Not `outline-none`: that utility zeroes `--tw-outline-style`, and
-                                // the shell's focus ring is drawn from the same family.
-                                '[outline:none]',
-                                'tabular-nums',
-                                // Split steppers put the number between the two buttons, so it
-                                // belongs in the middle rather than against an edge.
-                                steppers === 'split' && showSteppers ? 'text-center' : '',
-                                'placeholder:text-(--plass-muted-fg)',
-                                'caret-(--p-accent) selection:bg-(--p-soft-press)',
-                                'disabled:cursor-not-allowed'
-                            ]
-                                .filter(Boolean)
-                                .join(' ') }), endIcon ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: endIcon })) : null, showSteppers && steppers === 'end' ? (_jsxs("span", { className: "flex shrink-0 items-center gap-0.5", children: [decrement, increment] })) : null, showSteppers && steppers === 'split' ? increment : null] }) }), description ? (_jsx(Field.Description, { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null, hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }));
-}
+"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.js

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