plass-ui 1.0.0 → 1.0.1

package/dist/components/chip/PlChip.js

@@ -1,144 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { CloseIcon } from '../../internal/icons.js';
-import { chipRemoveClasses, controlHeightClasses, controlSlots, controlTextClasses, disabledClasses, focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, paddingXClasses, radiusClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * A chip sits one step down the control ladder from everything else: a `md` chip
- * is a `sm` control — 32px, not 40px.
- *
- * This is the whole size difference between a chip and a button, and it is
- * deliberate. A chip is a token *inside* a row of content, not a control the row
- * lines up against; at full control height a `glass` chip and a `glass` button
- * are the same object, and a screen full of them says nothing about which one
- * can be pressed.
- *
- * Shifting the index rather than inventing a second set of numbers keeps a chip
- * inside the same five-step vocabulary, and keeps `xs` from falling off the
- * bottom of it.
- */
-const chipScale = {
-    xs: 'xs',
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-    xl: 'lg'
-};
-/**
- * The three materials. A chip **is** the thing being coloured — a tag names one
- * particular thing — so unlike a `PlCard` its sheet takes the tint.
- *
- * `glass` is the default rather than `solid`: a filter bar is a row of chips,
- * and a row of gradient keys is a row in which nothing is the primary action
- * because everything is.
- */
-const restClasses = {
-    solid: 'text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]',
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--p-accent) bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'text-(--p-accent) bg-(--p-soft)'
-};
-/**
- * Chosen is one step further up the ladder the chip is already on — the sheet
- * holds more light. Deliberately not a different colour family: a filter that is
- * on is still the same filter.
- *
- * `solid` has no opacity ladder to climb, because a gradient fill is the fill.
- * So it answers the other way the design language allows: it casts its own
- * colour onto the sheet under it. A chosen key lifts; an unchosen one lies flat.
- */
-const selectedClasses = {
-    solid: '[box-shadow:var(--p-elev),var(--p-lift)]',
-    glass: 'bg-(--plass-glass-press) [border-color:var(--p-line-hover)]',
-    ghost: 'bg-(--p-soft-press)'
-};
-/**
- * Only a chip that can be pressed answers the pointer, and it answers the way
- * every other control does: `brightness()` on the gradient, a step up the
- * opacity ladder on the other two.
- */
-const hoverClasses = {
-    solid: 'hover:brightness-105 active:brightness-95',
-    glass: 'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)',
-    ghost: 'hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)'
-};
-const baseClasses = /* @__PURE__ */ [
-    // `items-center`, not `items-stretch`: everything in a chip — the icon, the
-    // label, the count plate, the × — is centred on one line. The pressable label
-    // asks for the height it needs with `self-stretch` instead, so making the
-    // shell stretch to suit it would knock every other child off the centre line.
-    'relative inline-flex max-w-full shrink-0 items-center select-none',
-    'align-middle leading-none font-medium whitespace-nowrap',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    iconClasses
-].join(' ');
-/**
- * The label, when the chip is pressable, is its own `<button>` inside the shell
- * rather than the shell itself.
- *
- * That looks like indirection and is not: a chip can carry a delete affordance,
- * which has to be a button too, and a `<button>` inside a `<button>` is invalid
- * HTML that browsers un-nest on parse. Keeping the shell a `<span>` is what lets
- * "activate this chip" and "remove this chip" both be real, focusable buttons.
- *
- * `self-stretch` so its hit area is the full height of the chip rather than the
- * height of the words, and `rounded-[inherit]` so the focus ring traces the
- * shell's corners rather than drawing a second, squarer rectangle inside them.
- */
-const labelButtonClasses = /* @__PURE__ */ [
-    'flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]',
-    focusRingClasses
-].join(' ');
-/**
- * A compact token: a tag, a filter, a status, an entity plucked out of a list.
- *
- * The shell is always a `<span>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` is given — a real `<button>` wrapping that
- * content, plus a second button for `onDelete`. Both are reachable by keyboard,
- * and neither is nested inside the other.
- *
- * An inert `<span>` carrying a click handler is the single most common way a
- * component library loses its keyboard users, and a `<button>` inside a
- * `<button>` is the most common way it invents a chip that Chrome silently
- * rewrites. This shape is what avoids both.
- */
-export const PlChip = /* @__PURE__ */ React.forwardRef(function PlChip({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, startIcon, endIcon, count, onDelete, deleteLabel = 'Remove', selected = false, disabled = false, className, style, children, onClick, ...props }, ref) {
-    const interactive = Boolean(onClick) && !disabled;
-    const step = chipScale[size];
-    const padX = paddingXClasses[density][step];
-    const shellClasses = [
-        baseClasses,
-        controlHeightClasses[step],
-        controlTextClasses[step],
-        gapClasses[step],
-        radiusClasses[step],
-        // An if/else rather than stacked variants: two Tailwind classes of equal
-        // specificity resolve by their order in the generated stylesheet.
-        disabled ? disabledClasses[variant] : restClasses[variant],
-        !disabled && selected ? selectedClasses[variant] : '',
-        interactive ? hoverClasses[variant] : '',
-        // With a pressable label the padding belongs to the button, so its hit area
-        // covers the whole chip rather than just the words.
-        interactive ? 'ps-0' : padX,
-        // The delete button brings its own padding; stacking the chip's on top of it
-        // would leave the × floating in the middle of a gap.
-        onDelete ? 'pe-1' : interactive ? 'pe-0' : '',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const label = (_jsxs(_Fragment, { children: [startIcon, hasContent(children) ? _jsx("span", { className: "min-w-0 truncate", children: children }) : null, endIcon, hasContent(count) ? (_jsx("span", { className: [
-                    'ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px',
-                    'text-[0.85em] leading-none font-semibold tabular-nums',
-                    // On a filled chip the plate is light let through the fill; on a
-                    // tinted or a bare one it is the accent showing under the words.
-                    variant === 'solid'
-                        ? 'bg-(--plass-glow-on-fill) text-(--p-on-solid)'
-                        : 'bg-(--p-soft-press) text-(--p-accent)'
-                ].join(' '), children: count })) : null] }));
-    return (_jsxs("span", { ref: ref, className: shellClasses, style: { ...controlSlots(color, elevation, variant), ...style }, "aria-disabled": disabled && !interactive ? true : undefined, ...props, children: [interactive ? (_jsx("button", { type: "button", "aria-pressed": selected, className: `${labelButtonClasses} ${gapClasses[step]} ${padX}`, onClick: onClick, children: label })) : (label), onDelete ? (_jsx("button", { type: "button", "aria-label": deleteLabel, disabled: disabled, className: chipRemoveClasses, onClick: onDelete, children: _jsx(CloseIcon, {}) })) : null] }));
-});
+"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{CloseIcon as o}from"../../internal/icons.js";import{chipRemoveClasses as a,controlHeightClasses as n,controlSlots as r,controlTextClasses as i,disabledClasses as c,focusRingClasses as p,gapClasses as d,glassClasses as m,hasContent as g,iconClasses as h,paddingXClasses as b,radiusClasses as f,transitionClasses as u}from"../../internal/styles.js";const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},x={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]",glass:/* @__PURE__ */[m,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},j={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},w={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},y=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",u,h].join(" "),k=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",p].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:t="glass",size:p="md",color:m="primary",density:h="default",elevation:u=0,startIcon:N,endIcon:C,count:$,onDelete:B,deleteLabel:I="Remove",selected:P=!1,disabled:R=!1,className:z,style:D,children:F,onClick:L,...q},A){const E=Boolean(L)&&!R,G=v[p],H=b[h][G],J=[y,n[G],i[G],d[G],f[G],R?c[t]:x[t],!R&&P?j[t]:"",E?w[t]:"",E?"ps-0":H,B?"pe-1":E?"pe-0":"",z??""].filter(Boolean).join(" "),K=l(s,{children:[N,g(F)?e("span",{className:"min-w-0 truncate",children:F}):null,C,g($)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===t?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:$}):null]});return l("span",{ref:A,className:J,style:{...r(m,u,t),...D},"aria-disabled":!(!R||E)||void 0,...q,children:[E?e("button",{type:"button","aria-pressed":P,className:`${k} ${d[G]} ${H}`,onClick:L,children:K}):K,B?e("button",{type:"button","aria-label":I,disabled:R,className:a,onClick:B,children:e(o,{})}):null]})});

package/dist/components/chip/index.js

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

package/dist/components/collapsible/PlCollapsible.js

@@ -1,65 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Collapsible as BaseUICollapsible } from '@base-ui/react/collapsible';
-import { ChevronIcon } from '../../internal/icons.js';
-import { cx, focusRingInsetClasses, gapClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetTitleClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/**
- * The space between the header and the body it opened.
- *
- * The header's own padding does not pay for it, which is the correction
- * `PlAccordion` already carries: an open header is a tinted band with its own
- * bottom edge, the body begins at that edge, and its first line lands against
- * it with only half a leading in between — so the title and the paragraph
- * explaining it read as one run of text broken by a colour change.
- */
-const panelPaddingTopClasses = {
-    default: { xs: 'pt-1.5', sm: 'pt-2', md: 'pt-3', lg: 'pt-3.5', xl: 'pt-4' },
-    compact: { xs: 'pt-1', sm: 'pt-1.5', md: 'pt-2', lg: 'pt-2.5', xl: 'pt-3' }
-};
-/** And the space under it, on the same two tracks. */
-const panelPaddingBottomClasses = {
-    default: { xs: 'pb-2.5', sm: 'pb-3', md: 'pb-5', lg: 'pb-6', xl: 'pb-7' },
-    compact: { xs: 'pb-2', sm: 'pb-2.5', md: 'pb-3.5', lg: 'pb-4', xl: 'pb-5' }
-};
-/**
- * One section that folds, standing on its own.
- *
- * A `PlAccordion` is a *set* of these and owns which one of them is open; this
- * is the same fold with nothing else beside it, so what it needs is an `open` of
- * its own rather than a place in somebody's list. Reach for it for a "Show more"
- * on a form, an optional block of settings, the details under a row.
- *
- * Base UI owns the parts that are genuinely hard: the `button` / panel pairing
- * and the `aria-controls` / `aria-expanded` wiring between them,
- * `hidden="until-found"`, and measuring the panel so it has a height to animate
- * from.
- *
- * The panel's height *is* animated, which looks like an exception to the rule
- * against moving things and is not: nothing is transformed, no text is
- * resampled, and the content does not shift relative to the panel it is in — the
- * panel is a window opening onto it. Content that appears instantly is a page
- * that jumps, which is the failure the rule exists to prevent.
- */
-export const PlCollapsible = /* @__PURE__ */ React.forwardRef(function PlCollapsible({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, open, defaultOpen = false, onOpenChange, title, subtitle, startIcon, action, trigger, indicator = true, disabled = false, padded = true, hiddenUntilFound = false, keepMounted = false, className, style, children, ...props }, ref) {
-    const padX = sheetPaddingXClasses[density][size];
-    const padY = sheetPaddingYClasses[density][size];
-    return (_jsxs(BaseUICollapsible.Root, { ref: ref, open: open, defaultOpen: defaultOpen, onOpenChange: (next) => onOpenChange?.(next), disabled: disabled, className: cx(
-        // `overflow-hidden` is what makes the panel a window rather than
-        // something that spills past the sheet's own corners while it moves.
-        'flex flex-col overflow-hidden', radiusClasses[size], sheetRestClasses[variant], transitionClasses, className), style: { ...surfaceSlots(color, elevation), ...style }, ...props, children: [trigger ? (_jsx(BaseUICollapsible.Trigger, { render: trigger })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsxs(BaseUICollapsible.Trigger, { className: cx('flex min-w-0 flex-1 cursor-pointer items-center text-start', padX, padY, gapClasses[size], transitionClasses, iconClasses, 
-                        // Inset rather than offset. The sheet clips its children so the
-                        // panel can be a window, and `overflow: hidden` clips a
-                        // descendant's outline along with everything else — an offset
-                        // ring on a trigger that fills the top of the sheet would be
-                        // shaved off on three sides.
-                        focusRingInsetClasses, 'hover:bg-(--p-soft)', 'data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)', 'disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50'), children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: cx('flex min-w-0 flex-1 flex-col', sheetHeaderGapClasses[size]), children: [hasContent(title) ? (_jsx("span", { className: cx('plass-title truncate font-semibold', sheetTitleClasses[size]), children: title })) : null, hasContent(subtitle) ? (_jsx("span", { className: cx('truncate text-(--plass-muted-fg)', metaTextClasses[size]), children: subtitle })) : null] }), indicator ? (_jsx("span", { className: cx('flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)', '[transition:rotate_var(--plass-duration)_var(--plass-ease)]', 'data-[panel-open]:rotate-180'), children: _jsx(ChevronIcon, {}) })) : null] }), hasContent(action) ? (_jsx("span", { className: cx('flex shrink-0 items-center', padX), children: action })) : null] })), _jsx(BaseUICollapsible.Panel, { hiddenUntilFound: hiddenUntilFound, keepMounted: keepMounted, className: cx('h-(--collapsible-panel-height) overflow-hidden', '[transition:height_var(--plass-duration-slow)_var(--plass-ease)]', 'data-[starting-style]:h-0 data-[ending-style]:h-0'), children: _jsx("div", { className: cx('min-w-0 text-(--plass-muted-fg)', sheetBodyClasses[size], padded ? padX : '', 
-                    // The default header already paid for the space above, so the
-                    // body only owes what goes under it — otherwise a closed
-                    // collapsible would look padded. A caller's own `trigger` has paid
-                    // for nothing, so there the panel owes both.
-                    padded
-                        ? trigger
-                            ? `${panelPaddingTopClasses[density][size]} ${panelPaddingBottomClasses[density][size]}`
-                            : panelPaddingBottomClasses[density][size]
-                        : ''), children: children }) })] }));
-});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{Collapsible as s}from"@base-ui/react/collapsible";import{ChevronIcon as a}from"../../internal/icons.js";import{cx as n,focusRingInsetClasses as i,gapClasses as r,hasContent as p,iconClasses as d,metaTextClasses as o,radiusClasses as c,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as h,sheetPaddingYClasses as u,sheetRestClasses as x,sheetTitleClasses as b,surfaceSlots as g,transitionClasses as N}from"../../internal/styles.js";const v={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},w={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */t.forwardRef(function PlCollapsible({variant:t="glass",size:y="md",color:j="primary",density:k="default",elevation:C=0,open:O,defaultOpen:_=!1,onOpenChange:P,title:F,subtitle:M,startIcon:R,action:T,trigger:U,indicator:$=!0,disabled:z=!1,padded:I=!0,hiddenUntilFound:q=!1,keepMounted:A=!1,className:B,style:D,children:E,...G},H){const J=h[k][y],K=u[k][y];return l(s.Root,{ref:H,open:O,defaultOpen:_,onOpenChange:e=>P?.(e),disabled:z,className:n("flex flex-col overflow-hidden",c[y],x[t],N,B),style:{...g(j,C),...D},...G,children:[U?e(s.Trigger,{render:U}):l("div",{className:"flex w-full items-center",children:[l(s.Trigger,{className:n("flex min-w-0 flex-1 cursor-pointer items-center text-start",J,K,r[y],N,d,i,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[p(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,l("span",{className:n("flex min-w-0 flex-1 flex-col",f[y]),children:[p(F)?e("span",{className:n("plass-title truncate font-semibold",b[y]),children:F}):null,p(M)?e("span",{className:n("truncate text-(--plass-muted-fg)",o[y]),children:M}):null]}),$?e("span",{className:n("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"),children:e(a,{})}):null]}),p(T)?e("span",{className:n("flex shrink-0 items-center",J),children:T}):null]}),e(s.Panel,{hiddenUntilFound:q,keepMounted:A,className:n("h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"),children:e("div",{className:n("min-w-0 text-(--plass-muted-fg)",m[y],I?J:"",I?U?`${v[k][y]} ${w[k][y]}`:w[k][y]:""),children:E})})]})});

package/dist/components/collapsible/index.js

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

package/dist/components/combobox/PlCombobox.js

@@ -1,199 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Combobox as BaseUICombobox } from '@base-ui/react/combobox';
-import { Field } from '@base-ui/react/field';
-import { PlChip } from '../chip/PlChip.js';
-import { CheckIcon, ChevronIcon, CloseIcon, PlusIcon } from '../../internal/icons.js';
-import { chipRemoveClasses, controlHeightClasses, controlTextLeadingClasses, cx, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, focusWithinRingClasses, gapClasses, glassClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/** The field, and it is a PlTextField's shell to the pixel. */
-const shellBaseClasses = /* @__PURE__ */ [
-    'group relative flex w-full cursor-text items-center',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    focusWithinRingClasses,
-    iconClasses
-].join(' ');
-/**
- * With chips in it the field cannot have a fixed height — the chips wrap. The
- * padding is `(control height − chip height) / 2` instead, which makes a one-row
- * combobox exactly as tall as the field beside it, and `min-h-*` catches the
- * variant that carries no border.
- *
- * Keyed by `size` and never by `density`: density is horizontal padding only.
- */
-const chipsInsetClasses = {
-    xs: 'min-h-6 py-0',
-    sm: 'min-h-8 py-0.5',
-    md: 'min-h-10 py-1',
-    lg: 'min-h-12 py-1.5',
-    xl: 'min-h-14 py-2'
-};
-/**
- * The popup is one of the few surfaces in the library that is *supposed* to
- * float, so unlike everything else it carries a shadow by default — at level 3.
- * Identical to PlSelect's, because a combobox's list and a select's list are the
- * same list.
- *
- * Every `--p-*` it reads is set on the popup itself rather than inherited from
- * the Field around it. A portalled popup renders at the end of `<body>`, so it
- * is outside the element the slots were declared on, and a `var()` with nothing
- * to resolve to is not a fallback — `border-color` collapses to `currentColor`
- * and `background-color` to transparent.
- */
-const popupClasses = /* @__PURE__ */ [
-    glassClasses,
-    'max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain',
-    'w-[var(--anchor-width)] 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]'
-].join(' ');
-const itemClasses = /* @__PURE__ */ [
-    'relative flex cursor-pointer items-center gap-2 select-none',
-    'rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7',
-    transitionClasses,
-    // `data-highlighted` rather than `:hover`: it is also what the arrow keys
-    // move, so the mouse and the keyboard light the same row.
-    'data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)',
-    'data-[selected]:font-semibold data-[selected]:text-(--p-accent)',
-    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
-    '[outline:none]'
-].join(' ');
-/** The chevron and the ×, which sit in the field rather than in the list. */
-const adornmentClasses = /* @__PURE__ */ [
-    'inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center',
-    'rounded-(--plass-radius-xs) text-(--plass-muted-fg)',
-    '[transition:color_var(--plass-duration)_var(--plass-ease)]',
-    'hover:text-(--p-accent)',
-    'focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]',
-    'disabled:cursor-not-allowed disabled:opacity-50'
-].join(' ');
-/** Always an array inside, however the caller spells it. */
-function toArray(value) {
-    if (value === null || value === undefined) {
-        return [];
-    }
-    return Array.isArray(value) ? value.slice() : [value];
-}
-/**
- * A field you can type into and also choose from.
- *
- * The shell is a PlTextField's wearing a chevron, exactly as PlSelect's trigger
- * is — the three have to be indistinguishable in a form, or the form looks
- * assembled rather than designed. What is different is what the text does: it
- * filters the list, and — unless `allowCustom` is off — it can become the value
- * itself, offered as the last row rather than committed silently on blur.
- *
- * With `multiple` the chosen values become PlChips inside the field and the
- * input goes on filtering after each one, so a set of tags is built without the
- * field ever closing.
- *
- * Base UI owns everything hard about this: the filtering and its collator, the
- * popup's positioning and flipping, the `combobox`/`listbox` wiring, arrow-key
- * navigation across both the list and the chips, and the hidden input that makes
- * the whole thing submit with a form.
- */
-export function PlCombobox({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom = true, customLabel, clearable = false, emptyMessage = 'No matches', limit, placeholder, label, description, error, invalid, startIcon, fullWidth = false, disabled = false, readOnly = false, required = false, name, open, defaultOpen, onOpenChange, openLabel = 'Open', clearLabel = 'Clear', removeLabel = (chip) => `Remove ${chip}`, inputRef, 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;
-    const isMultiple = multiple === true;
-    const options = React.useMemo(() => items.map((item) => ({
-        value: item.value,
-        label: item.label ?? String(item.value),
-        disabled: item.disabled
-    })), [items]);
-    // The selection is mirrored internally even when the caller controls it. The
-    // "add this" row has to know what has already been chosen — otherwise a tag
-    // that was just added goes on being offered — and in uncontrolled mode there
-    // is nowhere else that knowledge lives.
-    const [ownSelection, setOwnSelection] = React.useState(() => toArray(defaultValue));
-    const selection = value === undefined ? ownSelection : toArray(value);
-    const [query, setQuery] = React.useState('');
-    /* A map rather than a `find`: this is called once per chosen item, and a
-       multi-select with a hundred options and twenty chips in it would otherwise
-       walk the list twenty times on every render. */
-    const byValue = React.useMemo(() => new Map(options.map((option) => [option.value, option])), [options]);
-    const entryFor = React.useCallback((item) => byValue.get(item) ?? { value: item, label: String(item), custom: true }, [byValue]);
-    // The row that offers what was typed. It is a real item rather than a special
-    // case in the keyboard handling, so Enter, a click and the arrow keys all
-    // reach it the same way every other row is reached — and Base UI's own filter
-    // keeps it visible, because its label *is* the query.
-    const trimmed = query.trim();
-    const folded = trimmed.toLocaleLowerCase();
-    const alreadyKnown = trimmed === '' ||
-        options.some((option) => option.label.toLocaleLowerCase() === folded ||
-            String(option.value).toLocaleLowerCase() === folded) ||
-        selection.some((item) => String(item).toLocaleLowerCase() === folded);
-    const customValue = allowCustom && !readOnly && !disabled && !alreadyKnown ? trimmed : null;
-    const listItems = React.useMemo(() => customValue === null
-        ? options
-        : [...options, { value: customValue, label: customValue, custom: true }], [options, customValue]);
-    const baseValue = isMultiple
-        ? selection.map(entryFor)
-        : selection.length > 0
-            ? entryFor(selection[0])
-            : null;
-    function commit(next) {
-        if (value === undefined) {
-            setOwnSelection(next);
-        }
-        onValueChange?.((isMultiple ? next : (next[0] ?? null)));
-    }
-    const shellClasses = cx(shellBaseClasses, controlTextLeadingClasses[size], radiusClasses[size], gapClasses[size], isMultiple ? chipsInsetClasses[size] : controlHeightClasses[size], 
-    // The chevron brings its own hit area; stacking the field's padding on top
-    // of it would leave the glyph floating in the middle of a gap.
-    `${paddingXClasses[density][size]} pe-1.5`, 
-    // An if/else rather than stacked variants: two Tailwind classes of equal
-    // specificity resolve by their order in the generated stylesheet.
-    disabled
-        ? disabledClasses[variant]
-        : readOnly
-            ? fieldReadOnlyClasses[variant]
-            : fieldRestClasses[variant]);
-    const inputClasses = /* @__PURE__ */ [
-        // `self-stretch` and no height of its own, in both modes. An input centres
-        // its own text in its box, so letting the box be the full height of the row
-        // it sits on — the field in single mode, the chip line in multiple — is what
-        // puts the placeholder on the same baseline as the chips beside it.
-        '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 variable family.
-        '[outline:none]',
-        'placeholder:text-(--plass-muted-fg)',
-        'caret-(--p-accent) selection:bg-(--p-soft-press)',
-        'disabled:cursor-not-allowed'
-    ].join(' ');
-    /**
-     * `afterChips` is the space between the last chip and where typing starts.
-     *
-     * The row's own `gap-1` is the distance between two chips, which is right
-     * between two things of the same kind and too little between a chip and a
-     * caret — the query reads as another chip's label rather than as the field's
-     * own text. It is only added when there is a chip to be clear of, so an empty
-     * multi-select lines its placeholder up with every other field in the form.
-     */
-    const renderInput = (afterChips) => (_jsx(BaseUICombobox.Input, { ref: inputRef, placeholder: placeholder, className: cx(inputClasses, isMultiple && 'min-w-16', isMultiple && afterChips && 'ms-1.5') }));
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: cx('flex-col align-top', stackGapClasses[size], fullWidth ? 'flex w-full' : 'inline-flex', className), style: { ...surfaceSlots(family, elevation), ...style }, ...props, children: [label ? (_jsx(Field.Label, { className: cx(metaTextClasses[size], 'font-semibold', disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'), children: label })) : null, _jsxs(BaseUICombobox.Root, { id: id, name: name, items: listItems, multiple: isMultiple, value: baseValue, onValueChange: (next) => {
-                    const chosen = next === null ? [] : Array.isArray(next) ? next : [next];
-                    commit(chosen.map((entry) => entry.value));
-                }, 
-                // The text is Base UI's to own, not ours: in single mode it is the
-                // chosen option's label, which has to be there from the first paint, and
-                // in multiple mode it empties itself after each pick. What is kept here
-                // is a copy, and only so the "add this" row knows what was typed.
-                onInputValueChange: (next) => {
-                    setQuery(next);
-                    onInputValueChange?.(next);
-                }, open: open, defaultOpen: defaultOpen, onOpenChange: (next) => onOpenChange?.(next), 
-                // The first match lights up as you type, so Enter commits without an
-                // arrow key first. This is what makes the "add this" row reachable from
-                // the keyboard at all: a value the list does not have is the only match
-                // there is, so it is the one Enter lands on.
-                autoHighlight: true, itemToStringLabel: (entry) => entry.label, itemToStringValue: (entry) => String(entry.value), isItemEqualToValue: (a, b) => a.value === b.value, limit: limit, disabled: disabled, readOnly: readOnly, required: required, children: [_jsxs(BaseUICombobox.InputGroup, { className: shellClasses, children: [startIcon ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, isMultiple ? (_jsx(BaseUICombobox.Chips, { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: _jsx(BaseUICombobox.Value, { children: (chosen) => (_jsxs(React.Fragment, { children: [chosen.map((entry) => (_jsx(BaseUICombobox.Chip, { render: _jsx(PlChip, { variant: "glass", size: size, color: family, density: "compact", disabled: disabled, endIcon: readOnly || disabled ? null : (_jsx(BaseUICombobox.ChipRemove, { "aria-label": removeLabel(entry.label), className: chipRemoveClasses, children: _jsx(CloseIcon, {}) })) }), children: entry.label }, String(entry.value)))), renderInput(chosen.length > 0)] })) }) })) : (renderInput(false)), clearable && !readOnly ? (_jsx(BaseUICombobox.Clear, { "aria-label": clearLabel, className: adornmentClasses, children: _jsx(CloseIcon, {}) })) : null, _jsx(BaseUICombobox.Trigger, { "aria-label": openLabel, className: adornmentClasses, children: _jsx(BaseUICombobox.Icon, { className: cx(
-                                    // The chevron is the one thing here that may turn: it is a
-                                    // glyph, not a label, and nothing about it resamples.
-                                    'flex items-center', '[transition:rotate_var(--plass-duration)_var(--plass-ease)]', 'data-[popup-open]:rotate-180'), children: _jsx(ChevronIcon, {}) }) })] }), _jsx(BaseUICombobox.Portal, { children: _jsx(BaseUICombobox.Positioner, { className: "plass-portal z-50 [outline:none]", sideOffset: 6, children: _jsxs(BaseUICombobox.Popup, { className: cx(popupClasses, radiusClasses[size], controlTextLeadingClasses[size]), style: surfaceSlots(family, 3), children: [_jsx(BaseUICombobox.Empty, { className: "px-2 py-1.5 text-(--plass-muted-fg) empty:hidden", children: emptyMessage }), _jsx(BaseUICombobox.List, { children: (entry) => (_jsx(BaseUICombobox.Item, { value: entry, disabled: entry.disabled, className: itemClasses, children: entry.custom ? (_jsxs(React.Fragment, { children: [_jsx("span", { className: "absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4", children: _jsx(PlusIcon, {}) }), _jsx("span", { className: "truncate", children: customLabel ? customLabel(entry.label) : `Add “${entry.label}”` })] })) : (_jsxs(React.Fragment, { children: [_jsx(BaseUICombobox.ItemIndicator, { className: "absolute start-1.5 flex size-4 items-center justify-center", children: _jsx(CheckIcon, {}) }), _jsx("span", { className: "truncate", children: entry.label })] })) }, `${entry.custom ? 'custom:' : ''}${String(entry.value)}`)) })] }) }) })] }), description ? (_jsx(Field.Description, { className: cx(metaTextClasses[size], 'text-(--plass-muted-fg)'), children: description })) : null, hasError ? (_jsx(Field.Error, { match: true, className: cx(metaTextClasses[size], 'text-(--p-accent)'), children: error })) : null] }));
-}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as s}from"@base-ui/react/field";import{PlChip as n}from"../chip/PlChip.js";import{CheckIcon as i,ChevronIcon as r,CloseIcon as o,PlusIcon as c}from"../../internal/icons.js";import{chipRemoveClasses as d,controlHeightClasses as m,controlTextLeadingClasses as u,cx as p,disabledClasses as h,fieldReadOnlyClasses as b,fieldRestClasses as g,focusWithinRingClasses as f,gapClasses as v,glassClasses as x,hasContent as y,iconClasses as N,metaTextClasses as w,paddingXClasses as C,radiusClasses as L,stackGapClasses as j,surfaceSlots as I,transitionClasses as S}from"../../internal/styles.js";const A=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",S,f,N].join(" "),O={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},V=/* @__PURE__ */[x,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] 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]"].join(" "),_=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",S,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)","data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),z=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed disabled:opacity-50"].join(" ");function toArray(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function PlCombobox({variant:f="glass",size:x="md",color:N="primary",density:S="default",elevation:M=0,items:P,multiple:R,value:$,defaultValue:k,onValueChange:T,onInputValueChange:q,allowCustom:E=!0,customLabel:F,clearable:D=!1,emptyMessage:G="No matches",limit:H,placeholder:W,label:B,description:J,error:K,invalid:Q,startIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:ae,open:le,defaultOpen:te,onOpenChange:se,openLabel:ne="Open",clearLabel:ie="Clear",removeLabel:re=e=>`Remove ${e}`,inputRef:oe,id:ce,className:de,style:me,...ue}){const pe=y(K),he=Q??pe,be=he?"danger":N,ge=!0===R,fe=l.useMemo(()=>P.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[P]),[ve,xe]=l.useState(()=>toArray(k)),ye=void 0===$?ve:toArray($),[Ne,we]=l.useState(""),Ce=l.useMemo(()=>new Map(fe.map(e=>[e.value,e])),[fe]),Le=l.useCallback(e=>Ce.get(e)??{value:e,label:String(e),custom:!0},[Ce]),je=Ne.trim(),Ie=je.toLocaleLowerCase(),Se=""===je||fe.some(e=>e.label.toLocaleLowerCase()===Ie||String(e.value).toLocaleLowerCase()===Ie)||ye.some(e=>String(e).toLocaleLowerCase()===Ie),Ae=!E||Z||Y||Se?null:je,Oe=l.useMemo(()=>null===Ae?fe:[...fe,{value:Ae,label:Ae,custom:!0}],[fe,Ae]),Ve=ge?ye.map(Le):ye.length>0?Le(ye[0]):null,_e=p(A,u[x],L[x],v[x],ge?O[x]:m[x],`${C[S][x]} pe-1.5`,Y?h[f]:Z?b[f]:g[f]),ze=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(t.Input,{ref:oe,placeholder:W,className:p(ze,ge&&"min-w-16",ge&&a&&"ms-1.5")});return a(s.Root,{disabled:Y,invalid:he,className:p("flex-col align-top",j[x],X?"flex w-full":"inline-flex",de),style:{...I(be,M),...me},...ue,children:[B?e(s.Label,{className:p(w[x],"font-semibold",Y?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:B}):null,a(t.Root,{id:ce,name:ae,items:Oe,multiple:ge,value:Ve,onValueChange:e=>{!function commit(e){void 0===$&&xe(e),T?.(ge?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{we(e),q?.(e)},open:le,defaultOpen:te,onOpenChange:e=>se?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:H,disabled:Y,readOnly:Z,required:ee,children:[a(t.InputGroup,{className:_e,children:[U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:U}):null,ge?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:s=>a(l.Fragment,{children:[s.map(a=>e(t.Chip,{render:e(n,{variant:"glass",size:x,color:be,density:"compact",disabled:Y,endIcon:Z||Y?null:e(t.ChipRemove,{"aria-label":re(a.label),className:d,children:e(o,{})})}),children:a.label},String(a.value))),renderInput(s.length>0)]})})}):renderInput(!1),D&&!Z?e(t.Clear,{"aria-label":ie,className:z,children:e(o,{})}):null,e(t.Trigger,{"aria-label":ne,className:z,children:e(t.Icon,{className:p("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(r,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:p(V,L[x],u[x]),style:I(be,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:G}),e(t.List,{children:s=>e(t.Item,{value:s,disabled:s.disabled,className:_,children:s.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(c,{})}),e("span",{className:"truncate",children:F?F(s.label):`Add “${s.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e("span",{className:"truncate",children:s.label})]})},`${s.custom?"custom:":""}${String(s.value)}`)})]})})})]}),J?e(s.Description,{className:p(w[x],"text-(--plass-muted-fg)"),children:J}):null,pe?e(s.Error,{match:!0,className:p(w[x],"text-(--p-accent)"),children:K}):null]})}

package/dist/components/combobox/index.js

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

package/dist/components/container/PlContainer.js

@@ -1,47 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { cx, sheetPaddingXClasses } from '../../internal/styles.js';
-/**
- * The measure ladder, in `rem` rather than in Tailwind's named `max-w-*` steps,
- * so that a container's `lg` and an `lg:` utility are the same 64rem.
- *
- * Tailwind's own container scale is a different set of numbers, and having two
- * ladders called `lg` on one page is how a layout drifts by a few pixels for no
- * reason anybody can find later.
- */
-const maxWidthClasses = {
-    xs: 'max-w-[30rem]',
-    sm: 'max-w-[40rem]',
-    md: 'max-w-[48rem]',
-    lg: 'max-w-[64rem]',
-    xl: 'max-w-[80rem]'
-};
-/**
- * Horizontal breathing room, and optionally a measure.
- *
- * It draws nothing — no sheet, no hairline, no shadow — for the same reason
- * `PlAspectRatio` does not. The outermost element on a page is the one thing
- * that must not decide what the page looks like, and a container that carried a
- * `variant` would put a second pane behind every card on it.
- *
- * The two questions it answers are deliberately separate from how the content
- * inside divides itself up: a container holds a `PlGrid` as happily as it holds
- * a single paragraph, and a grid needs no container around it.
- *
- * The gutter is the **sheet** padding track rather than the control one. What
- * sits inside a container is a page, and the margin a page keeps from the edge
- * of a window is the margin a card keeps around a paragraph — not the room a
- * label needs beside the edge of the key it is printed on.
- */
-export const PlContainer = /* @__PURE__ */ React.forwardRef(function PlContainer({ maxWidth = 'none', padded = true, size = 'md', density = 'default', centered = true, render, className, children, ...props }, ref) {
-    const classNames = cx('block w-full', maxWidth === 'none' ? '' : maxWidthClasses[maxWidth], centered ? 'mx-auto' : '', padded ? sheetPaddingXClasses[density][size] : '', className);
-    return useRender({
-        render,
-        ref,
-        props: {
-            className: classNames,
-            children,
-            ...props
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{cx as n,sheetPaddingXClasses as m}from"../../internal/styles.js";const a={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e="none",padded:t=!0,size:o="md",density:s="default",centered:d=!0,render:l,className:i,children:c,...x},f){const u=n("block w-full","none"===e?"":a[e],d?"mx-auto":"",t?m[s][o]:"",i);return r({render:l,ref:f,props:{className:u,children:c,...x}})});

package/dist/components/container/index.js

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

package/dist/components/date-picker/PlDatePicker.js

@@ -1,87 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlButton } from '../button/PlButton.js';
-import { Calendar, usePickerLabels } from '../../internal/calendar.js';
-import { CalendarIcon } from '../../internal/icons.js';
-import { PickerFooter, PickerShell } from '../../internal/picker.js';
-import { displaySamples, formatDate, isDayOutside, isValidDate, localeWeekStart, mergeDateAndTime, startOfDay, startOfMonth, toISODate, today, withPlaceholder } from '../../internal/date.js';
-import { cx } from '../../internal/styles.js';
-/**
- * One day, chosen from a calendar.
- *
- * The trigger is a `PlTextField`'s shell wearing a calendar glyph, on purpose
- * and for the reason a `PlSelect`'s is: a form where the date field is a
- * different height, radius or material from the fields around it is a form that
- * looks assembled.
- *
- * What the calendar is actually for is the header. A picker that only steps a
- * month at a time puts a birthday thirty years back a hundred and eighty clicks
- * away, so the month name and the year are each a button that opens a grid of
- * its own — twelve months, then twelve years at a time. Any month of the year on
- * screen is two clicks; any year at all is three.
- *
- * There is no typing into the trigger. Parsing a date out of free text is
- * locale-dependent in a way that cannot be done honestly without a date library,
- * and a field that understands `27/7/26` in one browser and not in the next is
- * worse than one that never claimed to.
- */
-export const PlDatePicker = /* @__PURE__ */ React.forwardRef(function PlDatePicker({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, defaultMonth, minDate, maxDate, shouldDisableDate, locale, weekStartsOn, format = { dateStyle: 'medium' }, placeholder, clearable = false, showTodayButton = true, closeOnSelect = true, labels: labelOverrides, name, size = 'md', color = 'primary', readOnly = false, disabled = false, startIcon, ...shell }, ref) {
-    const labels = usePickerLabels(labelOverrides);
-    const firstDay = weekStartsOn ?? localeWeekStart(locale);
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? null);
-    // `null` is a value a controlled picker legitimately holds — an emptied one —
-    // so the test is against `undefined` and never against falsiness.
-    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
-    const open = openProp ?? uncontrolledOpen;
-    const [month, setMonth] = React.useState(() => startOfMonth(isValidDate(value) ? value : (defaultMonth ?? today())));
-    // Opening puts the calendar back on the chosen day. Without this, a picker
-    // left on 2019 while browsing stays there the next time it is opened, which
-    // reads as the control having forgotten its own value.
-    React.useEffect(() => {
-        if (open) {
-            setMonth(startOfMonth(isValidDate(value) ? value : (defaultMonth ?? today())));
-        }
-        // Only when the popup opens — following `value` here would drag the
-        // calendar out from under someone typing into a form elsewhere.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
-    const setOpen = (next) => {
-        // A read-only picker does not open. What it holds is something to read, and
-        // a calendar whose every cell was inert would be a menu of nothing.
-        if (next && (readOnly || disabled)) {
-            return;
-        }
-        if (openProp === undefined) {
-            setUncontrolledOpen(next);
-        }
-        onOpenChange?.(next);
-    };
-    const commit = (next) => {
-        if (valueProp === undefined) {
-            setUncontrolledValue(next);
-        }
-        onValueChange?.(next);
-    };
-    const select = (date) => {
-        // The day changes; the time of day, if the value had one, does not. A
-        // picker bound to a field that also carries a time should not silently
-        // reset it to midnight every time the day is corrected.
-        const next = isValidDate(value) ? mergeDateAndTime(date, value) : startOfDay(date);
-        commit(next);
-        setMonth(startOfMonth(next));
-        if (closeOnSelect) {
-            setOpen(false);
-        }
-    };
-    const now = today();
-    const todayBlocked = isDayOutside(now, minDate, maxDate) || (shouldDisableDate?.(now) ?? false);
-    const hasFooter = showTodayButton || clearable;
-    // Holds the trigger open at the width of the longest date it could show, so
-    // choosing the 1st after the 28th does not shrink the field.
-    const samples = React.useMemo(() => withPlaceholder(displaySamples(locale, format), placeholder), [locale, format, placeholder]);
-    return (_jsx(PickerShell, { ...shell, size: size, color: color, readOnly: readOnly, disabled: disabled, triggerRef: ref, startIcon: startIcon ?? _jsx(CalendarIcon, {}), display: isValidDate(value) ? formatDate(value, locale, format) : (placeholder ?? ''), samples: samples, empty: !isValidDate(value), clearable: clearable, onClear: () => commit(null), open: open, onOpenChange: setOpen, labels: labels, hiddenValues: name ? [{ name, value: isValidDate(value) ? toISODate(value) : '' }] : undefined, children: _jsxs("div", { className: cx('flex flex-col', hasFooter && 'gap-1.5'), children: [_jsx(Calendar, { size: size, color: color, locale: locale, weekStartsOn: firstDay, month: month, onMonthChange: setMonth, selected: [value], onSelect: select, minDate: minDate, maxDate: maxDate, shouldDisableDate: shouldDisableDate, labels: labels, autoFocus: true }), hasFooter ? (_jsxs(PickerFooter, { size: size, children: [clearable ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", onClick: () => {
-                                commit(null);
-                                setOpen(false);
-                            }, children: labels.clear })) : null, showTodayButton ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", disabled: todayBlocked, onClick: () => select(now), children: labels.today })) : null] })) : null] }) }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{PlButton as t}from"../button/PlButton.js";import{Calendar as o,usePickerLabels as n}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as s,PickerShell as i}from"../../internal/picker.js";import{displaySamples as c,formatDate as d,isDayOutside as m,isValidDate as u,localeWeekStart as p,mergeDateAndTime as f,startOfDay as h,startOfMonth as b,toISODate as y,today as D,withPlaceholder as g}from"../../internal/date.js";import{cx as j}from"../../internal/styles.js";export const PlDatePicker=/* @__PURE__ */l.forwardRef(function PlDatePicker({value:v,defaultValue:x,onValueChange:O,open:S,defaultOpen:k,onOpenChange:C,defaultMonth:z,minDate:P,maxDate:w,shouldDisableDate:M,locale:V,weekStartsOn:B,format:I={dateStyle:"medium"},placeholder:R,clearable:E=!1,showTodayButton:F=!0,closeOnSelect:N=!0,labels:T,name:q,size:A="md",color:G="primary",readOnly:H=!1,disabled:J=!1,startIcon:K,...L},Q){const U=n(T),W=B??p(V),[X,Y]=l.useState(x??null),Z=void 0!==v?v:X,[$,_]=l.useState(k??!1),ee=S??$,[ae,le]=l.useState(()=>b(u(Z)?Z:z??D()));l.useEffect(()=>{ee&&le(b(u(Z)?Z:z??D()))},[ee]);const setOpen=e=>{e&&(H||J)||(void 0===S&&_(e),C?.(e))},commit=e=>{void 0===v&&Y(e),O?.(e)},select=e=>{const a=u(Z)?f(e,Z):h(e);commit(a),le(b(a)),N&&setOpen(!1)},te=D(),oe=m(te,P,w)||(M?.(te)??!1),ne=F||E,re=l.useMemo(()=>g(c(V,I),R),[V,I,R]);return e(i,{...L,size:A,color:G,readOnly:H,disabled:J,triggerRef:Q,startIcon:K??e(r,{}),display:u(Z)?d(Z,V,I):R??"",samples:re,empty:!u(Z),clearable:E,onClear:()=>commit(null),open:ee,onOpenChange:setOpen,labels:U,hiddenValues:q?[{name:q,value:u(Z)?y(Z):""}]:void 0,children:a("div",{className:j("flex flex-col",ne&&"gap-1.5"),children:[e(o,{size:A,color:G,locale:V,weekStartsOn:W,month:ae,onMonthChange:le,selected:[Z],onSelect:select,minDate:P,maxDate:w,shouldDisableDate:M,labels:U,autoFocus:!0}),ne?a(s,{size:A,children:[E?e(t,{variant:"ghost",size:A,color:G,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:U.clear}):null,F?e(t,{variant:"ghost",size:A,color:G,density:"compact",disabled:oe,onClick:()=>select(te),children:U.today}):null]}):null]})})});

package/dist/components/date-picker/index.js

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