plass-ui 1.0.3 → 1.1.0

package/dist/components/command-palette/PlCommandPalette.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import type { PlassStyleProps } from '../../types.js';
+/** One thing the palette can do. */
+export interface PlCommandItem {
+    /** What identifies the command. */
+    value: string;
+    /** What the row says, and what the query is matched against. */
+    label: string;
+    /** A second line under it — where the command goes, or what it changes. */
+    description?: React.ReactNode;
+    /** A glyph before the label. */
+    icon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row. Written
+     * the way `PlHotKeys` writes them, so `Mod` resolves per platform. The palette
+     * **does not bind it** — the application does.
+     */
+    shortcut?: string;
+    /**
+     * The heading this command sits under. Commands are drawn in the order they
+     * are given, and a heading is drawn each time the group changes — so a
+     * group's commands have to be listed together.
+     */
+    group?: string;
+    /**
+     * Extra words the query is matched against but that are never drawn — the
+     * name somebody else's product gives the same command, an abbreviation, the
+     * word a reader would have searched for.
+     */
+    keywords?: readonly string[];
+    /** In the list but not runnable. */
+    disabled?: boolean;
+    /** What running it does. */
+    onSelect?: () => void;
+}
+export interface PlCommandPaletteProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'> {
+    /** Everything the palette can do. */
+    items: readonly PlCommandItem[];
+    /** Whether the palette is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Called when a command is run, after its own `onSelect`. The palette closes
+     * either way.
+     */
+    onSelect?: (item: PlCommandItem) => void;
+    /**
+     * The keystroke that opens the palette, bound on the window. Written the way
+     * `PlHotKeys` writes them, so `Mod` is Command on a Mac and Control everywhere
+     * else. `false` binds nothing.
+     * @default 'Mod+K'
+     */
+    shortcut?: string | false;
+    /** How wide the sheet may get. A number of pixels or any CSS length. */
+    width?: number | string;
+    /** How tall the list may get before it scrolls. @default 320 */
+    maxHeight?: number | string;
+    /** The placeholder in the field. @default 'Search commands' */
+    placeholder?: string;
+    /** The line where the rows would be, when nothing matched. @default 'No commands found' */
+    emptyMessage?: React.ReactNode;
+    /** The accessible name of the dialog, which has no visible title. @default 'Command palette' */
+    label?: string;
+}
+/**
+ * Everything an application can do, behind one field.
+ *
+ * The shape a keyboard-first product takes once it has more actions than a menu
+ * bar can hold: a reader types what they want instead of remembering where it
+ * was put.
+ *
+ * It is not a `PlMenu` — a menu is a short list in one place, and every row is
+ * visible before you look for it. It is not a `PlCombobox` either: what comes
+ * back is not a value, it is *something happening*.
+ *
+ * Base UI's Autocomplete owns the list — the highlight the pointer and the arrow
+ * keys share, `aria-activedescendant`, Enter running the highlighted row — and
+ * its Dialog owns the sheet, the scrim, the focus trap and returning the focus
+ * to wherever the reader was.
+ */
+export declare function PlCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, placeholder, emptyMessage, label, size, color, density }: PlCommandPaletteProps): React.ReactElement;

package/dist/components/command-palette/PlCommandPalette.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Autocomplete as s}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{PlHotKeys as o}from"../hot-keys/PlHotKeys.js";import{searchHaystack as r,searchText as n}from"../../internal/search.js";import{controlTextLeadingClasses as i,cx as c,glassClasses as p,hasContent as d,metaTextClasses as m,radiusClasses as u,surfaceSlots as h,toLength as f}from"../../internal/styles.js";const x=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) 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(" "),g=/* @__PURE__ */[p,"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-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(" "),y={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},b={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},v={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},w={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},k=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--plass-duration)_var(--plass-ease)]","data-[highlighted]:bg-(--p-soft) data-[highlighted]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return r([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:r,open:p,defaultOpen:N=!1,onOpenChange:j,onSelect:C,shortcut:K="Mod+K",width:z,maxHeight:S=320,placeholder:_="Search commands",emptyMessage:L="No commands found",label:O="Command palette",size:P="md",color:E="primary",density:M="default"}){const[H,V]=t.useState(N),[D,F]=t.useState(""),I=p??H,R=t.useCallback(e=>{void 0===p&&V(e),j?.(e)},[p,j]);t.useEffect(()=>{if(!1===K)return;const onKeyDown=e=>{(function pressed(e,a){const t=a.toLowerCase().split("+"),s=t[t.length-1],l=new Set(t.slice(0,-1)),o=/mac|iphone|ipad/i.test("undefined"==typeof navigator?"":navigator.platform||navigator.userAgent)?e.metaKey:e.ctrlKey;return!(l.has("mod")!==o||l.has("shift")!==e.shiftKey||l.has("alt")!==e.altKey||!l.has("mod")&&l.has("ctrl")!==e.ctrlKey||!l.has("mod")&&l.has("meta")!==e.metaKey||e.key.toLowerCase()!==s)})(e,K)&&(e.preventDefault(),R(!0))};return window.addEventListener("keydown",onKeyDown),()=>window.removeEventListener("keydown",onKeyDown)},[K,R]);const A=t.useMemo(()=>r.map(haystackOf),[r]),B=t.useMemo(()=>{const e=n(D);return""===e?r:r.filter((a,t)=>A[t].includes(e))},[r,A,D]),T=f(z),W=f(S);return e(l.Root,{open:I,onOpenChange:e=>{e||F(""),R(e)},children:a(l.Portal,{children:[e(l.Backdrop,{className:c("plass-portal",x)}),e(l.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(l.Popup,{"aria-label":O,className:c(g,u[P],i[P],void 0===T?y[P]:"","self-start"),style:{...h(E,3),...void 0===T?null:{maxWidth:T}},children:a(s.Root,{open:!0,mode:"list",items:B,filter:null,value:D,onValueChange:e=>F(e),itemToStringValue:e=>e.label,children:[e("div",{className:c("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",w[P]),children:e(s.Input,{autoFocus:!0,placeholder:_,className:c("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--plass-muted-fg) caret-(--p-accent)","selection:bg-(--p-soft-press)",b[P])})}),e(s.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:W},children:(l,r)=>a(t.Fragment,{children:[l.group&&l.group!==B[r-1]?.group?e("div",{role:"presentation",className:c(w[P],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",m[P]),children:l.group}):null,a(s.Item,{index:r,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),C?.(e),R(!1))})(l),className:c(k,u[P],w[P],v["compact"===M?"xs":P]),children:[d(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),d(l.description)?e("span",{className:c("truncate text-(--plass-muted-fg)",m[P]),children:l.description}):null]}),l.shortcut?e(o,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(s.Empty,{className:c(w[P],"py-6 text-center text-(--plass-muted-fg)",m[P]),children:L})]})})})]})})}

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1,2 @@
+export { PlCommandPalette } from './PlCommandPalette.js';
+export type { PlCommandPaletteProps, PlCommandItem } from './PlCommandPalette.js';

package/dist/components/command-palette/index.js

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

package/dist/components/divider/PlDivider.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{metaTextClasses as o}from"../../internal/styles.js";const a="[border-color:var(--p-rule-color)]";function toLength(e){return"number"==typeof e?`${e}px`:e}const i={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},n={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const PlDivider=/* @__PURE__ */t.forwardRef(function PlDivider({orientation:t="horizontal",color:s,size:c="md",length:d,thickness:f,textAlign:p="center",className:h,style:u,children:m,...x},v){const w="vertical"===t,g=null!=m&&!1!==m&&""!==m,b={"--p-rule-color":s?`var(--plass-${s}-line)`:"var(--plass-border)","--p-rule":toLength(f)??"1px"},$=toLength(d),j={...b,...void 0===$?null:w?{height:$}:{width:$},...u};if(!g)return e(l,{ref:v,orientation:t,className:[w?"w-0 border-l [border-left-width:var(--p-rule)] "+(void 0===$?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--p-rule)]",a,h??""].filter(Boolean).join(" "),style:j,...x});const[k,y]=i[t][p],N=w?"w-0 border-l [border-left-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(l,{ref:v,orientation:t,"aria-label":"string"==typeof m?m:void 0,className:["flex items-center",w?"w-auto flex-col "+(void 0===$?"self-stretch":""):"w-full",n[c],h??""].filter(Boolean).join(" "),style:j,...x,children:[e("span",{"aria-hidden":"true",className:`${N} ${k} ${a}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",o[c],w?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:m}),e("span",{"aria-hidden":"true",className:`${N} ${y} ${a}`})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{metaTextClasses as a,toLength as o}from"../../internal/styles.js";const i="[border-color:var(--p-rule-color)]",s={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},n={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const PlDivider=/* @__PURE__ */t.forwardRef(function PlDivider({orientation:t="horizontal",color:d,size:c="md",length:f,thickness:p,textAlign:h="center",className:m,style:u,children:x,...v},w){const b="vertical"===t,g=null!=x&&!1!==x&&""!==x,j={"--p-rule-color":d?`var(--plass-${d}-line)`:"var(--plass-border)","--p-rule":o(p)??"1px"},$=o(f),k={...j,...void 0===$?null:b?{height:$}:{width:$},...u};if(!g)return e(l,{ref:w,orientation:t,className:[b?"w-0 border-l [border-left-width:var(--p-rule)] "+(void 0===$?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--p-rule)]",i,m??""].filter(Boolean).join(" "),style:k,...v});const[N,y]=s[t][h],z=b?"w-0 border-l [border-left-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(l,{ref:w,orientation:t,"aria-label":"string"==typeof x?x:void 0,className:["flex items-center",b?"w-auto flex-col "+(void 0===$?"self-stretch":""):"w-full",n[c],m??""].filter(Boolean).join(" "),style:k,...v,children:[e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",a[c],b?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:x}),e("span",{"aria-hidden":"true",className:`${z} ${y} ${i}`})]})});

package/dist/components/fieldset/PlFieldset.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { PlassSize } from '../../types.js';
+export interface PlFieldsetProps extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'color'> {
+    /**
+     * What the group is called.
+     *
+     * It becomes part of the accessible name of every control inside, so it has
+     * to be a phrase that still reads correctly in front of each of them —
+     * "Billing address", not "Where should we send it?".
+     */
+    legend?: React.ReactNode;
+    /** A line under the legend. */
+    description?: React.ReactNode;
+    /** Disables every control inside at once, the way a `<fieldset>` always has. */
+    disabled?: boolean;
+    /** The type scale of the legend and the gap between the controls. @default 'md' */
+    size?: PlassSize;
+    children?: React.ReactNode;
+}
+/**
+ * A group of controls that answer one question together, with a name on it.
+ *
+ * It draws **no surface**, and that is deliberate: a group of fields is a
+ * *grouping* and not a sheet, and the sheet already exists — put this inside a
+ * `PlCard` or a `PlBox` when one is wanted. What it owns is the legend, the gap
+ * the controls stand at, and the one thing only a real `<fieldset>` can do:
+ * `disabled` reaches every control inside it, including ones a component three
+ * levels down rendered and never heard of it.
+ *
+ * The legend is a `<div>` pointed at by `aria-labelledby` rather than a
+ * `<legend>` — Base UI's decision, and the one that makes the group a normal
+ * flex container: a real rendered legend is lifted out of its fieldset's
+ * content box by every browser, so a `gap` would put no space under it at all.
+ */
+export declare const PlFieldset: React.ForwardRefExoticComponent<PlFieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/fieldset/PlFieldset.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as l from"react";import{Fieldset as r}from"@base-ui/react/fieldset";import{cx as i,hasContent as t,metaTextClasses as a,sheetHeaderGapClasses as n,sheetSectionGapClasses as d,sheetTitleClasses as o}from"../../internal/styles.js";export const PlFieldset=/* @__PURE__ */l.forwardRef(function PlFieldset({legend:l,description:c,disabled:m=!1,size:f="md",className:p,children:u,...x},b){const h=t(l)||t(c);return s(r.Root,{ref:b,disabled:m,className:i("m-0 flex min-w-0 flex-col border-0 p-0",d[f],p),...x,children:[h?s(r.Legend,{className:i("flex min-w-0 flex-col p-0",n[f]),children:[t(l)?e("span",{className:i("font-semibold",o[f]),children:l}):null,t(c)?e("span",{className:i("text-(--plass-muted-fg)",a[f]),children:c}):null]}):null,u]})});

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

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

package/dist/components/fieldset/index.js

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

package/dist/components/footer/PlFooter.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassSize, PlassVariant } from '../../types.js';
+/** How wide the content inside the sheet is allowed to get. */
+export type PlFooterWidth = PlassSize | 'none';
+export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'color' | 'title'> {
+    /**
+     * How the bar sits in the page's scroll.
+     *
+     * `static` — the default, and the opposite of `PlHeader`'s — is what a footer
+     * is: the thing at the end of the document, reached by scrolling to it.
+     * `sticky` and `fixed` are for the bar that has to stay in reach — a form's
+     * save row, a cookie notice — and a `PlPageLayout` reserves the height a
+     * `fixed` one takes out of the flow.
+     * @default 'static'
+     */
+    position?: PlassPosition;
+    /**
+     * What the sheet is made of, said the way a **container** says it: the bar is
+     * never dyed, because what is on it arrives with colours of its own.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /**
+     * The bar's scale — its gutter and the air above and below its content. As on
+     * `PlBox`, `size` here is the size of the *sheet*.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+    /** Drop shadow depth. `0` — the default — is flat. @default 0 */
+    elevation?: PlassElevation;
+    /**
+     * Draws a hairline along the top edge. On by default: a footer is the one
+     * sheet on the page with content directly above it and nothing below, so the
+     * line is the whole of what says the document ended.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Holds the content to a measure and centres it, while the sheet itself still
+     * spans the window. The same ladder `PlContainer`'s `maxWidth` uses.
+     * @default 'none'
+     */
+    maxWidth?: PlFooterWidth;
+    /** The gutter and the air above and below. @default true */
+    padded?: boolean;
+    /**
+     * The name the bar is announced by. Worth writing when a page has more than
+     * one `<footer>` in it — an article's own and the site's.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<footer>`. Base UI's own escape hatch, and
+     * rarely what you want: at the top level of a document that tag is the
+     * `contentinfo` landmark, and it is what says "this is the site's own
+     * information" rather than "this is more of the article".
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Everything in it. A footer's content is columns of links, a copyright line,
+     * a logo — all of it the caller's, none of it something a component could
+     * guess at, which is why this one has slots for nothing and space for
+     * anything.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The sheet at the end of a page.
+ *
+ * A real `<footer>`, which is the whole reason it is a component rather than a
+ * `<div>`: at the top level of a document that tag is the `contentinfo`
+ * landmark — the region a screen reader offers as "the site's own information"
+ * and a search engine reads the copyright, the address and the site map out of.
+ *
+ * **It has no slots on purpose**, which is the difference between it and
+ * `PlHeader`. A header's three regions are a fixed arrangement worth writing
+ * once; a footer's content is four columns on one site and one line on the
+ * next, and a component that guessed at the arrangement would be a component
+ * every second site fights. What it decides is the sheet: the surface, the
+ * gutter, the hairline that says the document ended, and whether it stays in
+ * reach.
+ *
+ * Inside a `PlPageLayout` it also registers itself, so a `fixed` footer's
+ * height is reserved rather than sitting on top of the last paragraph.
+ */
+export declare const PlFooter: React.ForwardRefExoticComponent<PlFooterProps & React.RefAttributes<HTMLElement>>;

package/dist/components/footer/PlFooter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{PlPageLayoutContext as o}from"../../internal/page-layout.js";import{cx as a,sheetPaddingXClasses as s,sheetPaddingYClasses as i,sheetRestClasses as l,surfaceSlots as m,transitionClasses as n}from"../../internal/styles.js";const d=l,c={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},f={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:l="static",variant:x="glass",size:u="md",color:p="primary",density:w="default",elevation:y=0,divider:b=!0,maxWidth:v="none",padded:g=!0,label:h,render:j,className:k,style:z,children:N,...C},F){const{register:P}=r.useContext(o),R=r.useCallback(e=>{P("footer",e),"function"==typeof F?F(e):F&&(F.current=e)},[P,F]),W=a("w-full min-w-0",d[x],b?"border-t [border-color:var(--plass-divider)]":"",c[l],n,k);return t({render:j??e("footer",{}),ref:R,props:{"aria-label":h,className:W,style:{...m(p,y),...z},children:e("div",{className:a("w-full",g?a(s[w][u],i[w][u]):"","none"===v?"":a(f[v],"mx-auto")),children:N}),...C}})});

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

@@ -0,0 +1,2 @@
+export { PlFooter } from './PlFooter.js';
+export type { PlFooterProps, PlFooterWidth } from './PlFooter.js';

package/dist/components/footer/index.js

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

package/dist/components/form/PlForm.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import type { PlassSize } from '../../types.js';
+/**
+ * When a field decides whether it is valid.
+ *
+ * Base UI's own three, kept under its own spelling because they are what a
+ * caller will read about everywhere else and a nicer synonym would only be a
+ * word to translate back.
+ */
+export type PlFormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+/** Errors that came from somewhere else, keyed by the field's `name`. */
+export type PlFormErrors = Record<string, string | string[]>;
+export interface PlFormProps extends Omit<React.ComponentPropsWithoutRef<'form'>, 'onSubmit'> {
+    /**
+     * When a field validates.
+     *
+     * - `onSubmit` — on submit, and on every change afterwards. The default, and
+     *   the only one that does not tell somebody their email is wrong while they
+     *   are still typing it.
+     * - `onBlur` — when a field loses focus.
+     * - `onChange` — on every keystroke.
+     * @default 'onSubmit'
+     */
+    validationMode?: PlFormValidationMode;
+    /**
+     * Errors from outside the browser's own validation — a server, a form action,
+     * a schema — keyed by the `name` of the field each belongs to. They are shown
+     * on the field, and cleared as soon as that field changes.
+     */
+    errors?: PlFormErrors;
+    /**
+     * Called on a valid submit, with the form's values. The native submit event is
+     * prevented, so nothing navigates.
+     */
+    onSubmit?: (values: Record<string, unknown>) => void;
+    /**
+     * The gap between the form's children. A form is a stack, and this is which
+     * rung of the ladder it stacks on.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    children?: React.ReactNode;
+}
+/**
+ * A `<form>` that knows which of its fields is wrong.
+ *
+ * On its own, a page of `PlTextField`s validates one field at a time and a
+ * failed submit leaves the reader to find the red one. What this adds is the
+ * part that has to be owned *above* the fields: a submit collects every field's
+ * validity at once, focuses the first one that failed, and `errors` puts a
+ * server's answer back on the field it belongs to rather than in a banner at
+ * the top.
+ *
+ * It is **not a form library**. There is no schema, no resolver and no field
+ * array here — a project that wants those keeps them and hands the result to
+ * `errors`, which is the seam this is built around.
+ *
+ * It draws no surface either. A form is a stack of controls, and the sheet it
+ * sits on is a `PlCard` or a `PlBox` when one is wanted.
+ */
+export declare const PlForm: React.ForwardRefExoticComponent<PlFormProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/form/PlForm.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{cx as m,sheetSectionGapClasses as t}from"../../internal/styles.js";export const PlForm=/* @__PURE__ */o.forwardRef(function PlForm({validationMode:o="onSubmit",errors:i,onSubmit:s,size:a="md",className:n,children:l,...c},f){return r(e,{ref:f,validationMode:o,errors:i,onFormSubmit:r=>s?.(r),className:m("flex flex-col",t[a],n),...c,children:l})});

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

@@ -0,0 +1,2 @@
+export { PlForm } from './PlForm.js';
+export type { PlFormProps, PlFormErrors, PlFormValidationMode } from './PlForm.js';

package/dist/components/form/index.js

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

package/dist/components/header/PlHeader.d.ts

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAlign, PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassSize, PlassVariant } from '../../types.js';
+/** How wide the row inside the bar is allowed to get. */
+export type PlHeaderWidth = PlassSize | 'none';
+export interface PlHeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'color' | 'title'> {
+    /**
+     * The leading slot: the logo, the product's name, the thing that is the same
+     * on every page.
+     *
+     * It is a slot rather than the first of `children` because the three regions
+     * of a bar are laid out against each other — the middle can only be centred
+     * in the bar if the two ends are measured — and a caller writing three
+     * wrappers by hand is a caller whose header drifts from the next one.
+     */
+    brand?: React.ReactNode;
+    /**
+     * The trailing slot: the account menu, the theme switch, the call to action.
+     * Laid out end-aligned, so a row of buttons needs no wrapper of its own.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Where the middle slot sits.
+     *
+     * - `start` — packed against the brand, taking whatever is left. The
+     *   arrangement of an application's bar, and the default.
+     * - `center` — centred in the bar itself, not in the space left over. The two
+     *   ends are given equal shares for this, so the middle stays on the bar's
+     *   own midline however wide the brand is.
+     * - `end` — packed against the actions.
+     * @default 'start'
+     */
+    align?: PlassAlign;
+    /**
+     * How the bar sits in the page's scroll, spelled the way CSS spells it.
+     *
+     * `sticky` — the default — holds it against the top of the window once the
+     * page has scrolled to it, while leaving it in the flow so nothing has to be
+     * padded out of its way. `fixed` takes it out of the flow entirely, which a
+     * `PlPageLayout` answers by reserving its height. `static` lets it scroll
+     * away.
+     * @default 'sticky'
+     */
+    position?: PlassPosition;
+    /**
+     * What the sheet is made of, said the way a **container** says it: the bar is
+     * never dyed, because what is on it arrives with colours of its own.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /**
+     * The bar's scale — its height floor, its gutter and the air around its
+     * slots. As on `PlBox`, `size` here is the size of the *sheet*.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+    /**
+     * Drop shadow depth. `0` — the default — is flat: a header is attached to the
+     * top of the window rather than floating over the middle of it, and `divider`
+     * is what separates it from the content.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Draws a hairline along the bottom edge, against the content the bar is
+     * over. On by default: a bar pinned over a scrolling page has content passing
+     * underneath it at every moment, and a translucent sheet with nothing marking
+     * its edge reads as part of that.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Holds the row of slots to a measure and centres it, while the sheet itself
+     * still spans the window. The same ladder `PlContainer`'s `maxWidth` uses, so
+     * a header and the container under it line up on the same edge.
+     * @default 'none'
+     */
+    maxWidth?: PlHeaderWidth;
+    /** The gutter down each side of the row. @default true */
+    padded?: boolean;
+    /**
+     * The name the bar is announced by. Worth writing when a page has more than
+     * one `<header>` in it — an article's own header and the site's — because
+     * "banner" twice tells a reader which is which not at all.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<header>`. Base UI's own escape hatch, and
+     * rarely what you want: the bar at the top of a page is a banner, and the tag
+     * is what says so to a search engine and to a screen reader's landmark list.
+     */
+    render?: useRender.RenderProp;
+    /** The middle slot. */
+    children?: React.ReactNode;
+}
+/**
+ * The bar across the top of a page.
+ *
+ * A real `<header>`, which is the whole reason it is a component rather than a
+ * row of `<div>`s: at the top level of a document that tag is the `banner`
+ * landmark, and it is what a screen reader's landmark list, a reader mode and a
+ * search engine's understanding of the page are all built out of.
+ *
+ * Its three slots are props rather than compound sub-components, for `PlCard`'s
+ * reason: the arrangement is fixed — brand, middle, actions — and what a caller
+ * wants to decide is what goes in each. That the middle can be centred on the
+ * bar's own midline is only possible because the ends are the component's to
+ * measure.
+ *
+ * Inside a `PlPageLayout` it also registers itself, so a sidebar that holds its
+ * place knows how far down the window to start. Outside one it is simply a bar,
+ * and everything above still works.
+ *
+ * It is not a `PlToolbar` with a tag on it. A toolbar is a row of controls
+ * anywhere on a screen and takes a height from its padding alone; a header is
+ * the page's banner, and it has a height floor, a measure, a brand slot and a
+ * place in a layout — none of which mean anything on a row of controls beside a
+ * table.
+ */
+export declare const PlHeader: React.ForwardRefExoticComponent<PlHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/header/PlHeader.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{PlPageLayoutContext as t}from"../../internal/page-layout.js";import{cx as a,hasContent as n,sheetPaddingXClasses as l,sheetRestClasses as m,sheetSectionGapClasses as d,surfaceSlots as c,transitionClasses as o}from"../../internal/styles.js";const x={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},f={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},p={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},u={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"},h=m,y={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},w={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},g={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */s.forwardRef(function PlHeader({brand:m,actions:v,align:b="start",position:j="sticky",variant:N="glass",size:k="md",color:z="primary",density:C="default",elevation:H=0,divider:P=!0,maxWidth:R="none",padded:W=!0,label:q,render:A,className:B,style:D,children:E,...F},G){const{register:I}=s.useContext(t),J=s.useCallback(e=>{I("header",e),"function"==typeof G?G(e):G&&(G.current=e)},[I,G]),K=a("w-full min-w-0",h[N],P?"border-b [border-color:var(--plass-divider)]":"",y[j],o,B);return i({render:A??e("header",{}),ref:J,props:{"aria-label":q,className:K,style:{...c(z,H),...D},children:r("div",{className:a("flex w-full items-center",x[k],f[k],p[k],W?l[C][k]:"","none"===R?"":a(u[R],"mx-auto")),children:[n(m)?e("div",{className:a("flex min-w-0 items-center",w[b],d[k]),children:m}):"center"===b?e("div",{"aria-hidden":"true",className:w[b]}):null,n(E)?e("div",{className:a(g[b],d[k]),children:E}):null,n(v)?e("div",{className:a("flex min-w-0 items-center justify-end",w[b],d[k]),children:v}):"center"===b?e("div",{"aria-hidden":"true",className:w[b]}):null]}),...F}})});

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

@@ -0,0 +1,2 @@
+export { PlHeader } from './PlHeader.js';
+export type { PlHeaderProps, PlHeaderWidth } from './PlHeader.js';

package/dist/components/header/index.js

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

package/dist/components/menubar/PlMenubar.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassStyleProps } from '../../types.js';
+export interface PlMenubarProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the bar runs. `vertical` is the shape a side rail of menus takes;
+     * the arrow keys follow it either way.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Whether an open menu takes the page away. On — the default, and Base UI's —
+     * an open menu is what the pointer is talking to.
+     * @default true
+     */
+    modal?: boolean;
+    /** Whether the arrow keys wrap around at the ends of the bar. @default true */
+    loopFocus?: boolean;
+    /** Disables every menu on the bar at once. */
+    disabled?: boolean;
+    /** The menus. */
+    children?: React.ReactNode;
+}
+export interface PlMenubarMenuProps {
+    /** The word on the bar. */
+    label: React.ReactNode;
+    /** Content before the label. Sized in `em`, so it tracks it. */
+    startIcon?: React.ReactNode;
+    /** Unavailable. The word stays on the bar and opens nothing. */
+    disabled?: boolean;
+    /** The rows, written exactly as they are inside a `PlMenu`. */
+    children?: React.ReactNode;
+}
+/**
+ * One menu on the bar: the word, and the rows behind it.
+ *
+ * It has no `size`, `color` or `density` of its own — all three belong to the
+ * bar, which is the only place they can be set once and hold for every menu on
+ * it. The rows inside are the same `PlMenuItem`, `PlMenuSeparator`,
+ * `PlMenuGroup` and `PlMenuSubmenu` a `PlMenu` takes, because it *is* the same
+ * menu.
+ */
+export declare function PlMenubarMenu({ label, startIcon, disabled, children }: PlMenubarMenuProps): React.ReactElement;
+/**
+ * The strip of words at the top of an application — File, Edit, View — each of
+ * which opens a menu.
+ *
+ * What makes it a bar rather than a row of separate menus is what happens once
+ * one is open: moving along the strip walks through the others instead of
+ * closing the one you left, and the arrow keys move between the menus as well
+ * as inside them. Base UI owns all of that, along with the `menubar` role.
+ *
+ * It draws **no surface of its own**. A menu bar sits *on* something — a
+ * `PlToolbar`, a `PlHeader` — and a sheet under a strip that is already on a
+ * sheet is two sheets.
+ */
+export declare const PlMenubar: React.ForwardRefExoticComponent<PlMenubarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/menubar/PlMenubar.js

@@ -0,0 +1 @@
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as s}from"@base-ui/react/menubar";import{PlMenu as r}from"../menu/PlMenu.js";import{MenuContext as n}from"../../internal/menu.js";import{controlTextClasses as a,cx as i,gapClasses as l,hasContent as c,iconClasses as p,paddingXClasses as d,radiusClasses as u,transitionClasses as m}from"../../internal/styles.js";const f={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},b=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,p,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:s,startIcon:p,disabled:m=!1,children:h}){const{size:v,color:x,density:g}=o.useContext(n);return t(r,{size:v,color:x,density:g,disabled:m,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:m,className:i(b,f[v],a[v],l[v],d["default"===g?"compact":g][v],u[v]),children:[c(p)?p:null,s]}),children:h})}export const PlMenubar=/* @__PURE__ */o.forwardRef(function PlMenubar({size:e="md",color:r="primary",density:a="default",orientation:c="horizontal",modal:p=!0,loopFocus:d=!0,disabled:u=!1,className:m,style:f,children:b,...h},v){const x=o.useMemo(()=>({size:e,color:r,density:a}),[e,r,a]);return t(n.Provider,{value:x,children:t(s,{ref:v,orientation:c,modal:p,loopFocus:d,disabled:u,className:i("flex items-center","vertical"===c?"flex-col items-stretch":"flex-row",l[e],m),style:{"--p-soft":`var(--plass-${r}-soft)`,"--p-soft-hover":`var(--plass-${r}-soft-hover)`,"--p-accent":`var(--plass-${r}-accent)`,"--p-ring":`var(--plass-${r}-ring)`,...f},...h,children:b})})});

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

@@ -0,0 +1,2 @@
+export { PlMenubar, PlMenubarMenu } from './PlMenubar.js';
+export type { PlMenubarProps, PlMenubarMenuProps } from './PlMenubar.js';

package/dist/components/menubar/index.js

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