plass-ui 1.0.3 → 1.2.0

package/dist/components/toggle/PlToggle.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps, PlassVariant } from '../../types.js';
+export interface PlToggleProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color' | 'value'> {
+    /**
+     * What the key is made of while it is **off**. On is always the colour family
+     * asserting itself, whichever material was asked for.
+     *
+     * - `solid` — the densest clear glass, which fills with the family's gradient
+     *   when it goes on. The loudest, for a toggle a screen is steered by.
+     * - `glass` — the canonical sheet with a hairline round it. The default.
+     * - `ghost` — nothing at all until the pointer arrives or it goes on. What a
+     *   toolbar wants.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** Whether it is on. Use with `onPressedChange` for a controlled toggle. */
+    pressed?: boolean;
+    /** Whether it starts on, for an uncontrolled one. @default false */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Identifies the toggle inside a `PlToggleGroup`. */
+    value?: string;
+    /**
+     * Drop shadow depth. `0` — the default, and one below a `PlButton`'s — is
+     * flat: a toggle is a state rather than an action, and a state does not float
+     * off the page waiting to be taken.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Content placed before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label. */
+    endIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /**
+     * The label. Left out, the toggle goes square around whatever icon it was
+     * given — which is what a toolbar toggle is. An icon-only toggle still needs
+     * an `aria-label`.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A button that stays down.
+ *
+ * The difference from a `PlSwitch` is what the press *is*: a switch changes a
+ * setting and the change is the point; a toggle changes the state of the thing
+ * beside it — bold on the selected words, the grid on the canvas, the filter on
+ * the list. The difference from a `PlCheckbox` is that this one is a control
+ * rather than an answer, so it never goes in a form.
+ *
+ * Base UI's Toggle owns `aria-pressed` and the controlled/uncontrolled pair.
+ * What is left here is the surface, and the rule that off is neutral.
+ */
+export declare const PlToggle: React.ForwardRefExoticComponent<PlToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle/PlToggle.js

@@ -0,0 +1 @@
+"use client";import{jsxs as s}from"react/jsx-runtime";import*as e from"react";import{Toggle as o}from"@base-ui/react/toggle";import{ButtonGroupContext as a}from"../../internal/button-group.js";import{controlHeightClasses as l,controlSlots as r,controlSquareClasses as t,controlTextClasses as p,disabledClasses as i,focusRingClasses as n,gapClasses as v,glassClasses as g,hasContent as d,iconClasses as h,paddingXClasses as x,radiusClasses as c,transitionClasses as f}from"../../internal/styles.js";const b={xs:`${l.xs} ${v.xs} ${c.xs} ${p.xs}`,sm:`${l.sm} ${v.sm} ${c.sm} ${p.sm}`,md:`${l.md} ${v.md} ${c.md} ${p.md}`,lg:`${l.lg} ${v.lg} ${c.lg} ${p.lg}`,xl:`${l.xl} ${v.xl} ${c.xl} ${p.xl}`},m={xs:`${t.xs} px-0`,sm:`${t.sm} px-0`,md:`${t.md} px-0`,lg:`${t.lg} px-0`,xl:`${t.xl} px-0`},$=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,n,h].join(" "),u={solid:/* @__PURE__ */[g,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[g,"border text-(--plass-muted-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-muted-fg) bg-transparent"},w={solid:/* @__PURE__ */["hover:bg-(--plass-glass-press) hover:text-(--plass-fg)","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) hover:text-(--plass-fg) active:bg-(--p-soft-hover)"},j={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[g,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},y={solid:/* @__PURE__ */["hover:brightness-105 hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95 active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"};export const PlToggle=/* @__PURE__ */e.forwardRef(function PlToggle({variant:l,size:t,color:p,density:n,elevation:v,pressed:g,defaultPressed:h,onPressedChange:c,value:f,startIcon:P,endIcon:T,fullWidth:k=!1,disabled:C,className:z,style:E,children:I,onPointerMove:M,...N},B){const R=e.useContext(a),W=l??R?.variant??"glass",X=t??R?.size??"md",Y=p??R?.color??"primary",q=n??R?.density??"default",A=v??R?.elevation??0,D=C??R?.disabled??!1,F=!d(I);return s(o,{ref:B,value:f,pressed:g,defaultPressed:h,onPressedChange:s=>c?.(s),disabled:D,className:s=>[$,b[X],F?m[X]:x[q][X],D?i[W]:s.pressed?`${j[W]} ${y[W]}`:`${u[W]} ${w[W]}`,D?"":"plass-glow cursor-pointer",k?"w-full":"",z??""].filter(Boolean).join(" "),style:{...r(Y,A,W),...E},onPointerMove:s=>{const e=s.currentTarget;e.style.setProperty("--p-mx",`${s.nativeEvent.offsetX}px`),e.style.setProperty("--p-my",`${s.nativeEvent.offsetY}px`),M?.(s)},...N,children:[P,I,T]})});

package/dist/components/toggle/PlToggleGroup.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { PlassElevation, PlassOrientation, PlassStyleProps, PlassVariant } from '../../types.js';
+export interface PlToggleGroupProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** Passed to every toggle in the set. @default 'glass' */
+    variant?: PlassVariant;
+    /**
+     * Which toggles are on, by their `value`. An array in both the single and the
+     * multiple case — Base UI's own shape, and the one that does not change type
+     * when `multiple` is turned on.
+     */
+    value?: readonly string[];
+    /** Which start on, for an uncontrolled set. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Whether more than one can be on at a time. Off, turning one on turns the
+     * last one off — which is a one-of-a-set, and worth a second thought: if the
+     * choice is a *value* rather than a state, that is a `PlSegmentedButton` or a
+     * `PlRadioGroup`.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Which way the toggles run. @default 'horizontal' */
+    orientation?: PlassOrientation;
+    /** Drop shadow depth, passed to every toggle in the set. @default 0 */
+    elevation?: PlassElevation;
+    /** Disables every toggle in the set at once. */
+    disabled?: boolean;
+    /** Whether the arrow keys wrap around at the ends. @default true */
+    loopFocus?: boolean;
+    /** Stretches to the container and divides the width evenly between toggles. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A set of toggles that share one state.
+ *
+ * Two things are happening and only one of them is visual. The corners facing a
+ * neighbour are squared off — that is the look. The other half is that the set
+ * owns the value: the toggles report into one array, `multiple` decides whether
+ * more than one of them can be on, and `variant`, `size`, `color`, `density`,
+ * `elevation` and `disabled` are set once here rather than on every toggle.
+ *
+ * Base UI owns the roving tab index — one tab stop for the whole set, arrow keys
+ * between the members — which is what makes a toolbar of eight toggles two key
+ * presses deep instead of eight.
+ */
+export declare const PlToggleGroup: React.ForwardRefExoticComponent<PlToggleGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toggle/PlToggleGroup.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{ToggleGroup as l}from"@base-ui/react/toggle-group";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{cx as t}from"../../internal/styles.js";const n={horizontal:"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none",vertical:"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"},r={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"},a=/* @__PURE__ */["inline-flex align-middle","[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10","[&>*]:shrink-0"].join(" ");export const PlToggleGroup=/* @__PURE__ */o.forwardRef(function PlToggleGroup({variant:s,size:d,color:u,density:c,elevation:f,value:m,defaultValue:h,onValueChange:p,multiple:g=!1,orientation:v="horizontal",disabled:x,loopFocus:b=!0,fullWidth:z=!1,className:j,children:V,...w},y){const G=o.useMemo(()=>({variant:s,size:d,color:u,density:c,elevation:f,disabled:x}),[s,d,u,c,f,x]);return e(i.Provider,{value:G,children:e(l,{ref:y,value:m,defaultValue:h,onValueChange:e=>p?.(e),multiple:g,orientation:v,disabled:x,loopFocus:b,className:t(a,"vertical"===v?"flex-col":"flex-row",n[v],"glass"===(s??"glass")?r[v]:"",z?"flex w-full [&>*]:flex-1":"",j),...w,children:V})})});

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

@@ -0,0 +1,4 @@
+export { PlToggle } from './PlToggle.js';
+export type { PlToggleProps } from './PlToggle.js';
+export { PlToggleGroup } from './PlToggleGroup.js';
+export type { PlToggleGroupProps } from './PlToggleGroup.js';

package/dist/components/toggle/index.js

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

package/dist/components/transfer/PlTransfer.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { PlassStyleProps } from '../../types.js';
+/** One thing that can be on either side. */
+export interface PlTransferItem {
+    /** What identifies it, and what `value` is a list of. */
+    value: string;
+    /** What the row says. */
+    label: React.ReactNode;
+    /** In the list but not movable. */
+    disabled?: boolean;
+}
+export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** Everything that can be on either side, in the order the lists show it. */
+    items: readonly PlTransferItem[];
+    /** What is on the trailing side. Use with `onValueChange` for a controlled pair. */
+    value?: readonly string[];
+    /** What starts there, for an uncontrolled one. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** The heading over the leading list. @default 'Available' */
+    sourceLabel?: React.ReactNode;
+    /** And over the trailing one. @default 'Selected' */
+    targetLabel?: React.ReactNode;
+    /** Puts a filter above each list. @default false */
+    searchable?: boolean;
+    /** What that filter says while it is empty. @default 'Search' */
+    searchLabel?: string;
+    /** What a list with nothing in it says. @default 'Nothing here' */
+    emptyLabel?: string;
+    /** What the tick in a list's heading is announced as. @default 'Select all' */
+    selectAllLabel?: string;
+    /** What the two arrows are announced as. */
+    toTargetLabel?: string;
+    toSourceLabel?: string;
+    /** How tall each list is. A number of pixels or any CSS length. @default 220 */
+    height?: number | string;
+    /** Nothing can be ticked or moved. */
+    disabled?: boolean;
+}
+/**
+ * Two lists and the arrows between them: everything that could be chosen on one
+ * side, everything that has been on the other.
+ *
+ * It is the shape for a choice that is *long* — the columns in a report, the
+ * permissions on a role, the people on a channel — where a `PlCombobox` with
+ * forty chips in its field stops being readable and a list of forty checkboxes
+ * gives no answer to "what did I actually pick". Below about a dozen options,
+ * one of those two is the smaller component.
+ *
+ * The order of `items` is the order both lists show, so a row does not move when
+ * it is sent across and back. What ticks are for is choosing which rows to move;
+ * `value` is which side they are on, and the two are deliberately separate —
+ * **ticking is not choosing**.
+ */
+export declare const PlTransfer: React.ForwardRefExoticComponent<PlTransferProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/transfer/PlTransfer.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlCheckbox as t}from"../checkbox/PlCheckbox.js";import{PlIconButton as s}from"../icon-button/PlIconButton.js";import{PlTextField as r}from"../text-field/PlTextField.js";import{ArrowRightIcon as i}from"../../internal/icons.js";import{searchText as n}from"../../internal/search.js";import{cx as o,fieldRestClasses as c,hasContent as d,metaTextClasses as h,paddingXClasses as m,radiusClasses as u,surfaceSlots as b,toLength as f}from"../../internal/styles.js";const v={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},p={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function Panel({title:a,rows:s,ticked:i,onTick:n,onTickAll:d,search:f,onSearch:g,searchable:y,disabled:x,height:k,emptyLabel:w,searchLabel:S,selectAllLabel:L,style:N}){const{variant:T,size:j,color:A,density:C}=N,z=s.filter(e=>!e.disabled),P=z.filter(e=>i.has(e.value)),M=z.length>0&&P.length===z.length,V=P.length>0&&!M,_=m[C][j];return l("div",{className:o("flex min-w-0 flex-col overflow-hidden",c[T],u[j]),style:b(A,0),children:[l("div",{className:o("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",_,v[j]),children:[e(t,{size:j,color:A,checked:M,indeterminate:V,disabled:x||0===z.length,"aria-label":L,onCheckedChange:e=>d(!0===e)}),e("span",{className:o("min-w-0 flex-1 truncate font-medium",h[j]),children:a}),l("span",{className:o("shrink-0 tabular-nums text-(--plass-muted-fg)",h[j]),children:[P.length,"/",s.length]})]}),y?e("div",{className:o(_,v[j]),children:e(r,{size:j,color:A,density:C,fullWidth:!0,variant:"ghost",disabled:x,placeholder:S,"aria-label":S,value:f,onChange:e=>g(e.target.value)})}):null,e("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",style:void 0===k?void 0:{height:k},children:e("div",{className:o("flex flex-col",_,v[j]),children:0===s.length?e("span",{className:o("text-(--plass-muted-fg)",h[j],p[j]),children:w}):s.map(l=>e(t,{size:j,color:A,className:p[j],label:l.label,checked:i.has(l.value),disabled:x||l.disabled,onCheckedChange:e=>n(l.value,!0===e)},l.value))})})]})}function narrow(e,l){const a=n(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||n(e.label).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:t,value:r,defaultValue:n,onValueChange:c,sourceLabel:h="Available",targetLabel:m="Selected",searchable:u=!1,searchLabel:b="Search",emptyLabel:v="Nothing here",selectAllLabel:p="Select all",toTargetLabel:g="Move to selected",toSourceLabel:y="Move to available",height:x=220,disabled:k=!1,variant:w="glass",size:S="md",color:L="primary",density:N="default",className:T,...j},A){const[C,z]=a.useState(n??[]),P=r??C,[M,V]=a.useState(()=>new Set),[_,B]=a.useState(""),[F,I]=a.useState(""),R=a.useMemo(()=>new Set(P),[P]),W=a.useMemo(()=>t.filter(e=>!R.has(e.value)),[t,R]),q=a.useMemo(()=>t.filter(e=>R.has(e.value)),[t,R]),tick=(e,l)=>{V(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},tickAll=(e,l)=>{V(a=>{const t=new Set(a);for(const a of e)a.disabled||(l?t.add(a.value):t.delete(a.value));return t})},move=(e,l)=>{const a=e.filter(e=>!e.disabled&&M.has(e.value));if(0===a.length)return;const s=new Set(a.map(e=>e.value)),i=l?t.filter(e=>R.has(e.value)||s.has(e.value)).map(e=>e.value):P.filter(e=>!s.has(e));V(e=>new Set([...e].filter(e=>!s.has(e)))),(e=>{void 0===r&&z(e),c?.(e)})(i)},D=narrow(W,_),E=narrow(q,F),G=D.some(e=>!e.disabled&&M.has(e.value)),H=E.some(e=>!e.disabled&&M.has(e.value)),J=f(x),K={variant:w,size:S,color:L,density:N},O="ghost"===w?"ghost":"glass";return l("div",{ref:A,className:o("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",T),...j,children:[e(Panel,{title:d(h)?h:"Available",rows:D,ticked:M,onTick:tick,onTickAll:e=>tickAll(D,e),search:_,onSearch:B,searchable:u,disabled:k,height:J,emptyLabel:v,searchLabel:b,selectAllLabel:p,style:K}),l("div",{className:"flex flex-col gap-2",children:[e(s,{size:S,color:L,variant:O,label:g,disabled:k||!G,onClick:()=>move(D,!0),icon:e(i,{})}),e(s,{size:S,color:L,variant:O,label:y,disabled:k||!H,onClick:()=>move(E,!1),icon:e("span",{className:"flex rotate-180",children:e(i,{})})})]}),e(Panel,{title:d(m)?m:"Selected",rows:E,ticked:M,onTick:tick,onTickAll:e=>tickAll(E,e),search:F,onSearch:I,searchable:u,disabled:k,height:J,emptyLabel:v,searchLabel:b,selectAllLabel:p,style:K})]})});

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

@@ -0,0 +1,2 @@
+export { PlTransfer } from './PlTransfer.js';
+export type { PlTransferProps, PlTransferItem } from './PlTransfer.js';

package/dist/components/transfer/index.js

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

package/dist/css/avatar-group.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <avatar-group>. Needs `plass-ui/css/base.css` first. */
+@source '../components/avatar-group';

package/dist/css/color-picker.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <color-picker>. Needs `plass-ui/css/base.css` first. */
+@source '../components/color-picker';

package/dist/css/command-palette.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <command-palette>. Needs `plass-ui/css/base.css` first. */
+@source '../components/command-palette';

package/dist/css/fieldset.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <fieldset>. Needs `plass-ui/css/base.css` first. */
+@source '../components/fieldset';

package/dist/css/footer.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <footer>. Needs `plass-ui/css/base.css` first. */
+@source '../components/footer';

package/dist/css/form.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <form>. Needs `plass-ui/css/base.css` first. */
+@source '../components/form';

package/dist/css/header.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <header>. Needs `plass-ui/css/base.css` first. */
+@source '../components/header';

package/dist/css/menubar.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <menubar>. Needs `plass-ui/css/base.css` first. */
+@source '../components/menubar';

package/dist/css/navigation-menu.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <navigation-menu>. Needs `plass-ui/css/base.css` first. */
+@source '../components/navigation-menu';

package/dist/css/page-layout.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <page-layout>. Needs `plass-ui/css/base.css` first. */
+@source '../components/page-layout';

package/dist/css/sidebar.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <sidebar>. Needs `plass-ui/css/base.css` first. */
+@source '../components/sidebar';

package/dist/css/toggle.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <toggle>. Needs `plass-ui/css/base.css` first. */
+@source '../components/toggle';

package/dist/css/transfer.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <transfer>. Needs `plass-ui/css/base.css` first. */
+@source '../components/transfer';

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/animate-typing/index.js';
 export * from './components/animate-zoom/index.js';
 export * from './components/aspect-ratio/index.js';
 export * from './components/avatar/index.js';
+export * from './components/avatar-group/index.js';
 export * from './components/badge/index.js';
 export * from './components/blockquote/index.js';
 export * from './components/bottom-navigation/index.js';
@@ -27,26 +28,35 @@ export * from './components/chat-bubble/index.js';
 export * from './components/checkbox/index.js';
 export * from './components/chip/index.js';
 export * from './components/collapsible/index.js';
+export * from './components/color-picker/index.js';
 export * from './components/combobox/index.js';
+export * from './components/command-palette/index.js';
 export * from './components/container/index.js';
 export * from './components/date-picker/index.js';
 export * from './components/date-range-picker/index.js';
 export * from './components/date-time-picker/index.js';
 export * from './components/divider/index.js';
 export * from './components/drawer/index.js';
+export * from './components/fieldset/index.js';
 export * from './components/file-picker/index.js';
 export * from './components/floating-bottom-navigation/index.js';
+export * from './components/footer/index.js';
+export * from './components/form/index.js';
 export * from './components/grid/index.js';
+export * from './components/header/index.js';
 export * from './components/highlight/index.js';
 export * from './components/hot-keys/index.js';
 export * from './components/icon/index.js';
 export * from './components/icon-button/index.js';
 export * from './components/list/index.js';
 export * from './components/menu/index.js';
+export * from './components/menubar/index.js';
 export * from './components/modal/index.js';
+export * from './components/navigation-menu/index.js';
 export * from './components/number-field/index.js';
 export * from './components/otp-field/index.js';
 export * from './components/overlay/index.js';
+export * from './components/page-layout/index.js';
 export * from './components/pagination/index.js';
 export * from './components/panes/index.js';
 export * from './components/pill/index.js';
@@ -59,6 +69,7 @@ export * from './components/rating/index.js';
 export * from './components/scroll-zone/index.js';
 export * from './components/segmented-button/index.js';
 export * from './components/select/index.js';
+export * from './components/sidebar/index.js';
 export * from './components/skeleton/index.js';
 export * from './components/slider/index.js';
 export * from './components/spoiler/index.js';
@@ -70,6 +81,8 @@ export * from './components/text-link/index.js';
 export * from './components/time-picker/index.js';
 export * from './components/timeline/index.js';
 export * from './components/toast/index.js';
+export * from './components/toggle/index.js';
 export * from './components/toolbar/index.js';
 export * from './components/tooltip/index.js';
+export * from './components/transfer/index.js';
 export * from './components/typography/index.js';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/combobox/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/grid/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/modal/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/typography/index.js";
+export*from"./types.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/modal/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toggle/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";

package/dist/internal/avatar-group.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What a `PlAvatar` inherits from the `PlAvatarGroup` around it.
+ *
+ * `button-group.ts`'s arrangement, one component over and for the same two
+ * reasons. Cloning the children with `React.cloneElement` stops working the
+ * moment a caller wraps one of them in a `PlTooltip`, a `<Fragment>` or a
+ * `.map()` — which is most of the time — and a context reaches the avatar
+ * wherever it ended up. And it lives here rather than beside the group so that
+ * `PlAvatar` can read it without the two components importing each other.
+ *
+ * Every field is optional, and every one of them means *not specified* rather
+ * than a value: an avatar falls back to its own default, so a group with no
+ * props of its own changes nothing except the overlap.
+ */
+import * as React from 'react';
+import type { PlAvatarShape } from '../components/avatar/PlAvatar.js';
+import type { PlassColor, PlassElevation, PlassSize, PlassVariant } from '../types.js';
+export interface PlassAvatarGroupContextValue {
+    size?: PlassSize;
+    shape?: PlAvatarShape;
+    variant?: PlassVariant;
+    color?: PlassColor;
+    elevation?: PlassElevation;
+}
+export declare const AvatarGroupContext: React.Context<PlassAvatarGroupContextValue | null>;

package/dist/internal/avatar-group.js

@@ -0,0 +1,2 @@
+import*as t from"react";export const AvatarGroupContext=
+/* @__PURE__ */t.createContext(null);

package/dist/internal/color.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Colour arithmetic, written out rather than installed.
+ *
+ * `PlColorPicker` is the only component that has to *compute* a colour rather
+ * than name one, and the whole of what it needs is here: three representations,
+ * the conversions between them, one parser and one formatter. It is a hundred
+ * lines of trigonometry-free arithmetic, which is the entire reason a component
+ * that computes colours brings no colour library with it.
+ *
+ * Two decisions worth knowing before reading:
+ *
+ * - **HSV is the model the panel is drawn in, and it never leaves.** A
+ *   saturation/value square with a hue rail beside it *is* HSV, so the picker
+ *   keeps its state that way and converts on the way out. Round-tripping
+ *   through RGB instead would lose the hue of every greyscale colour — black is
+ *   `#000` at every hue — and the rail would jump to red the moment the pointer
+ *   reached a corner.
+ * - **`alpha` is 0–1, everything else is what CSS says it is.** `h` is degrees,
+ *   `s`/`v`/`l` are percentages, `r`/`g`/`b` are 0–255. Nothing here invents a
+ *   normalised unit, because every one of these numbers is eventually written
+ *   into a string a human reads.
+ *
+ * Nothing here is exported from `src/index.ts` except the two types the picker's
+ * own props need. It is the library talking to itself, in the sense that
+ * `internal/` always means.
+ */
+/** 0–255 per channel, the way a hex triplet and `rgb()` both spell it. */
+export interface PlassRgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** `h` in degrees, `s` and `v` as percentages. The panel's own model. */
+export interface PlassHsv {
+    h: number;
+    s: number;
+    v: number;
+}
+/** `h` in degrees, `s` and `l` as percentages. Only ever an output format. */
+export interface PlassHsl {
+    h: number;
+    s: number;
+    l: number;
+}
+/** A colour and how much of it there is. `alpha` is 0–1. */
+export interface PlassColorValue {
+    hsv: PlassHsv;
+    alpha: number;
+}
+/** The three ways the picker will write a colour back out. */
+export type PlColorFormat = 'hex' | 'rgb' | 'hsl';
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function hsvToRgb({ h, s, v }: PlassHsv): PlassRgb;
+export declare function rgbToHsv({ r, g, b }: PlassRgb): PlassHsv;
+export declare function rgbToHsl({ r, g, b }: PlassRgb): PlassHsl;
+export declare function hslToRgb({ h, s, l }: PlassHsl): PlassRgb;
+/**
+ * A CSS colour string, or `null` if it is not one this understands.
+ *
+ * Hex in all four lengths, `rgb()`/`rgba()` and `hsl()`/`hsla()` in both the
+ * comma and the space syntax. Named colours and `color()` are deliberately out:
+ * a picker has to be able to write every value it can read, and there is no
+ * honest way back from `rebeccapurple` to a point on the panel.
+ */
+export declare function parseColor(input: string): PlassColorValue | null;
+export declare function rgbToHex({ r, g, b }: PlassRgb, alpha?: number): string;
+/**
+ * The value the component hands back, in whichever notation was asked for.
+ *
+ * `hex` drops the alpha pair when the colour is opaque, and the two functional
+ * forms drop the fourth argument for the same reason — a caller who never
+ * turned `alpha` on should never see `rgba(…, 1)` come out of a control they
+ * only used three channels of.
+ */
+export declare function formatColor(hsv: PlassHsv, alpha: number, format: PlColorFormat): string;
+/** A plain `rgb()` for the swatches and rails, where alpha is drawn separately. */
+export declare function cssColor(hsv: PlassHsv, alpha?: number): string;
+/**
+ * Black or white, whichever can be read on top of this colour.
+ *
+ * The tick on a chosen swatch is the only thing the picker draws *on* an
+ * arbitrary colour, and a fixed white tick disappears on yellow. The threshold
+ * is relative luminance rather than plain lightness, because the eye weighs
+ * green about six times as heavily as blue and a colour model that pretends
+ * otherwise puts the tick the wrong way round on both.
+ */
+export declare function readableInk(hsv: PlassHsv): string;
+/**
+ * The swatches a picker shows when it was given none.
+ *
+ * Deliberately **not** the library's own six families: those are semantic roles
+ * and a picker is asked for a colour, not for a meaning. This is a plain
+ * spectrum plus the greys — the row somebody reaches for when they are
+ * labelling a calendar, a tag or a project, which is what a colour picker in an
+ * application is nearly always for.
+ */
+export declare const defaultSwatches: readonly string[];
+/**
+ * The chequerboard behind a translucent colour, as a background shorthand.
+ *
+ * Two conic gradients would be one declaration fewer, but a chequer drawn with
+ * conic gradients has a seam down the middle of every tile on a fractional
+ * device pixel ratio. Four linear stops at 45° do not.
+ */
+export declare const checkerBackground: {
+    readonly backgroundImage: "linear-gradient(45deg, var(--plass-border) 25%, transparent 25%), linear-gradient(-45deg, var(--plass-border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--plass-border) 75%), linear-gradient(-45deg, transparent 75%, var(--plass-border) 75%)";
+    readonly backgroundSize: "8px 8px";
+    readonly backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0";
+};

package/dist/internal/color.js

@@ -0,0 +1 @@
+export function clamp(r,n,t){return r<n?n:r>t?t:r}function wrapHue(r){const n=r%360;return n<0?n+360:n}function round(r){return Math.round(r)}export function hsvToRgb({h:r,s:n,v:t}){const e=wrapHue(r)/60,o=clamp(n,0,100)/100,a=clamp(t,0,100)/100,s=a*o,u=s*(1-Math.abs(e%2-1)),c=a-s,l=Math.floor(e)%6,[g,h,i]=[[s,u,0],[u,s,0],[0,s,u],[0,u,s],[u,0,s],[s,0,u]][l];return{r:round(255*(g+c)),g:round(255*(h+c)),b:round(255*(i+c))}}export function rgbToHsv({r,g:n,b:t}){const e=clamp(r,0,255)/255,o=clamp(n,0,255)/255,a=clamp(t,0,255)/255,s=Math.max(e,o,a),u=s-Math.min(e,o,a);let c=0;return 0!==u&&(c=s===e?(o-a)/u%6:s===o?(a-e)/u+2:(e-o)/u+4),{h:wrapHue(60*c),s:0===s?0:u/s*100,v:100*s}}export function rgbToHsl({r,g:n,b:t}){const{h:e,s:o,v:a}=rgbToHsv({r,g:n,b:t}),s=a/100,u=s*(1-o/100/2),c=Math.min(u,1-u);return{h:e,s:0===c?0:(s-u)/c*100,l:100*u}}export function hslToRgb({h:r,s:n,l:t}){const e=clamp(t,0,100)/100,o=e+clamp(n,0,100)/100*Math.min(e,1-e);return hsvToRgb({h:r,s:0===o?0:2*(1-e/o)*100,v:100*o})}const r=/^#?([0-9a-f]{3,8})$/i;export function parseColor(n){const t=n.trim().toLowerCase();if(!t)return null;if(t.startsWith("#")||r.test(t))return function hexToRgba(n){const t=r.exec(n.trim());if(!t)return null;const e=t[1],o=3===e.length||4===e.length?[...e].map(r=>r+r).join(""):e;if(6!==o.length&&8!==o.length)return null;const channel=r=>parseInt(o.slice(2*r,2*r+2),16);return{hsv:rgbToHsv({r:channel(0),g:channel(1),b:channel(2)}),alpha:8===o.length?channel(3)/255:1}}(t);const e=/^(rgba?|hsla?)\((.*)\)$/.exec(t);if(!e)return null;const[,o,a]=e,s=function numbersIn(r){return(r.match(/-?[\d.]+%?/g)??[]).map(r=>parseFloat(r))}(a);if(s.length<3||s.some(Number.isNaN))return null;const u=function alphaOf(r,n,t){if(n.length<=t)return 1;const e=r.match(/-?[\d.]+%?/g)??[];return clamp(e[t]?.endsWith("%")?n[t]/100:n[t],0,1)}(a,s,3);return o.startsWith("rgb")?{hsv:rgbToHsv({r:s[0],g:s[1],b:s[2]}),alpha:u}:{hsv:rgbToHsv(hslToRgb({h:s[0],s:s[1],l:s[2]})),alpha:u}}function hexPair(r){return clamp(round(r),0,255).toString(16).padStart(2,"0")}export function rgbToHex({r,g:n,b:t},e=1){const o=`#${hexPair(r)}${hexPair(n)}${hexPair(t)}`;return e>=1?o:`${o}${hexPair(255*e)}`}function alphaText(r){return String(Math.round(100*clamp(r,0,1))/100)}export function formatColor(r,n,t){const e=hsvToRgb(r);if("hex"===t)return rgbToHex(e,n);if("rgb"===t){const r=`${round(e.r)}, ${round(e.g)}, ${round(e.b)}`;return n>=1?`rgb(${r})`:`rgba(${r}, ${alphaText(n)})`}const{h:o,s:a,l:s}=rgbToHsl(e),u=`${round(o)}, ${round(a)}%, ${round(s)}%`;return n>=1?`hsl(${u})`:`hsla(${u}, ${alphaText(n)})`}export function cssColor(r,n=1){const{r:t,g:e,b:o}=hsvToRgb(r);return n>=1?`rgb(${t}, ${e}, ${o})`:`rgba(${t}, ${e}, ${o}, ${alphaText(n)})`}export function readableInk(r){const{r:n,g:t,b:e}=hsvToRgb(r),channel=r=>{const n=r/255;return n<=.03928?n/12.92:((n+.055)/1.055)**2.4};return.2126*channel(n)+.7152*channel(t)+.0722*channel(e)>.42?"#000000":"#ffffff"}export const defaultSwatches=["#000000","#4b5563","#9ca3af","#ffffff","#ef4444","#f97316","#f59e0b","#84cc16","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#d946ef","#ec4899"];export const checkerBackground={backgroundImage:"linear-gradient(45deg, var(--plass-border) 25%, transparent 25%), linear-gradient(-45deg, var(--plass-border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--plass-border) 75%), linear-gradient(-45deg, transparent 75%, var(--plass-border) 75%)",backgroundSize:"8px 8px",backgroundPosition:"0 0, 0 4px, 4px -4px, -4px 0"};

package/dist/internal/link.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The one thing a `rel` must not lose.
+ *
+ * `noopener` is what stops a page opened in a new tab reaching back through
+ * `window.opener`; `noreferrer` sits beside it for the browsers that still need
+ * the pair. The common reason to write a `rel` by hand is `nofollow` or
+ * `sponsored`, which is an SEO decision — and spelled as a plain override it
+ * would silently take the protection off a link that still opens elsewhere.
+ *
+ * So the caller's value is **merged** rather than replaced: whatever was asked
+ * for is kept, with the two tokens added if they are not already there, and a
+ * link that stays in this tab keeps exactly the `rel` it was given.
+ *
+ * Here rather than in either component that needs it — `PlTextLink` and
+ * `PlNavigationMenu` — because two copies of a security default are two copies
+ * that can drift, and the one that drifts is the one nobody reads.
+ */
+export declare function safeRel(target: string | undefined, rel: string | undefined): string | undefined;

package/dist/internal/link.js

@@ -0,0 +1 @@
+export function safeRel(e,n){return void 0===e||""===e||"_self"===e?n:[...new Set([...(n??"").split(/\s+/).filter(Boolean),"noopener","noreferrer"])].join(" ")}