plass-ui 1.0.2 → 1.1.0

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/tooltip/PlTooltip.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{Tooltip as t}from"@base-ui/react/tooltip";import{glassClasses as o,metaTextClasses as l,paddingXClasses as i,radiusClasses as r,surfaceSlots as n}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const d=/* @__PURE__ */[o,"max-w-64 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","data-[instant]:[transition-duration:0ms]"].join(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:o,children:m,size:g="sm",color:h="secondary",density:f="default",side:y="top",align:u="center",sideOffset:x=6,delay:b,closeDelay:v,arrow:j=!0,open:w,defaultOpen:P,onOpenChange:O,disabled:N=!1,className:z,style:T,...B}){const C=c[g],D=e.useId(),[L,M]=e.useState(P??!1),_=w??L;return a(t.Root,{open:w,defaultOpen:P,onOpenChange:s=>{M(s),O?.(s)},children:[s(t.Trigger,{render:m,delay:b,closeDelay:v,disabled:N,"aria-describedby":_?D:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-50 [outline:none]",side:y,align:u,sideOffset:x,children:a(t.Popup,{id:D,role:"tooltip",className:[d,r[g],i[f][g],p[g],l[g],z??""].filter(Boolean).join(" "),style:{...n(h,3),...T},...B,children:[j?s(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:C,height:C/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-line)"}),s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)",transform:"translate(0 -1)"})]})}):null,o]})})})]})}
+"use client";import{jsx as s,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{Tooltip as t}from"@base-ui/react/tooltip";import{glassClasses as o,metaTextClasses as l,paddingXClasses as i,radiusClasses as r,surfaceSlots as n}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const d=/* @__PURE__ */[o,"max-w-64 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","data-[instant]:[transition-duration:0ms]"].join(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:o,children:m,size:g="sm",color:h="secondary",density:f="default",side:y="top",align:u="center",sideOffset:x=6,delay:b,closeDelay:v,arrow:j=!0,open:w,defaultOpen:P,onOpenChange:O,disabled:z=!1,className:N,style:T,...B}){const C=c[g],D=e.useId(),[L,M]=e.useState(P??!1),_=w??L;return a(t.Root,{open:w,defaultOpen:P,onOpenChange:s=>{M(s),O?.(s)},children:[s(t.Trigger,{render:m,delay:b,closeDelay:v,disabled:z,"aria-describedby":_?D:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:y,align:u,sideOffset:x,children:a(t.Popup,{id:D,role:"tooltip",className:[d,r[g],i[f][g],p[g],l[g],N??""].filter(Boolean).join(" "),style:{...n(h,3),...T},...B,children:[j?s(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:C,height:C/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-line)"}),s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)",transform:"translate(0 -1)"})]})}):null,o]})})})]})}

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(" ")}

package/dist/internal/page-layout.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import type { PlassBreakpoint, PlassSide } from '../types.js';
+/**
+ * The vocabulary a page's structure is written in, and the context the four
+ * components that build one share.
+ *
+ * It lives here for the reason `menu.ts` does rather than the reason
+ * `button-group.ts` does: five components read it — `PlPageLayout`, `PlHeader`,
+ * `PlFooter`, `PlSidebar` and `PlSidebarTrigger` — and every one of them is
+ * also usable on its own. Keeping the context in the layout's own file would
+ * make a header import a layout it may never be inside.
+ *
+ * Nothing here draws anything. The arrangement is flexbox and media queries,
+ * both of which CSS states better than JavaScript can; what needs a context is
+ * the handful of facts a slot cannot work out from where it sits — how wide the
+ * window has to be before a sidebar stops being a column, and whether a drawer
+ * is open.
+ */
+/** Which end of the band a sidebar takes. Logical, so it flips under RTL. */
+export type PlassSidebarSide = 'start' | 'end';
+/** The two slots a layout measures, because a sidebar has to start below them. */
+export type PlPageLayoutSlot = 'header' | 'footer';
+/**
+ * How far across a header or a footer reaches.
+ *
+ * - `full` — the whole width, with the sidebars beginning underneath it. The
+ *   arrangement of a website: one bar across the top, and the page below it.
+ * - `content` — only the column between the sidebars, which run the full height
+ *   of the window beside it. The arrangement of an application: the navigation
+ *   is the outermost thing on the screen and the bar belongs to the view.
+ *
+ * There is no third value, because there is no third arrangement: what is being
+ * decided is which of the two takes the corner.
+ */
+export type PlPageLayoutSpan = 'full' | 'content';
+/**
+ * What scrolls.
+ *
+ * - `page` — the document does, the way a website does. The header and the
+ *   sidebars hold their place with `position: sticky`, the browser's own
+ *   address bar hides on a phone, and the scroll position is restored on a back
+ *   navigation. This is the default, and it is what almost every page wants.
+ * - `content` — the layout takes exactly the height of the window and only the
+ *   region between the header and the footer scrolls, the way an application
+ *   does. Reach for it when the page is a workspace rather than a document.
+ */
+export type PlPageLayoutScroll = 'page' | 'content';
+/**
+ * The width below which a sidebar stops being part of the layout and becomes a
+ * drawer that is opened, or `none` to keep it a column at every width.
+ *
+ * `xs` is the breakpoint whose floor is `0`, so nothing is ever below it — it
+ * means the same as `none`, and is accepted only because `PlassBreakpoint` has
+ * five values everywhere else in the library.
+ */
+export type PlPageLayoutCollapse = PlassBreakpoint | 'none';
+export interface PlPageLayoutContextValue {
+    /**
+     * Whether there is a `PlPageLayout` above at all.
+     *
+     * A header, a footer and a sidebar all render perfectly well without one —
+     * they are a bar, a bar and a panel. What they cannot do on their own is
+     * agree with each other about where they sit, which is the whole of what a
+     * layout adds and the reason a component has to be able to tell.
+     */
+    present: boolean;
+    /**
+     * Hands the layout the element filling one of its slots.
+     *
+     * The layout measures it and writes its height onto its own root as a custom
+     * property, because a sidebar that holds its place has to start below a
+     * header whose height only the header knows. A callback rather than a
+     * `querySelector`, so a bar rendered through `render={<MyBar />}` is found as
+     * reliably as one that is not.
+     */
+    register: (slot: PlPageLayoutSlot, node: HTMLElement | null) => void;
+    /** Where the sidebars stop being columns. */
+    collapseBelow: PlPageLayoutCollapse;
+    /** Whether each sidebar's drawer is open. Only meaningful while it is collapsed. */
+    open: Record<PlassSidebarSide, boolean>;
+    setOpen: (side: PlassSidebarSide, open: boolean) => void;
+    /** How the page scrolls, which decides how a sidebar holds its place. */
+    scroll: PlPageLayoutScroll;
+}
+export declare const PlPageLayoutContext: React.Context<PlPageLayoutContextValue>;
+/**
+ * Which end of the band the sidebar being rendered right now takes.
+ *
+ * A second, one-value context rather than a field on the one above, because it
+ * is the one fact that differs *between* two sidebars in the same layout: the
+ * layout wraps each slot in its own provider, so a sidebar handed to the
+ * trailing slot needs no `side` prop of its own to know where it is. `null` is
+ * "nobody said", which a standalone sidebar reads as `start`.
+ */
+export declare const PlassSidebarSideContext: React.Context<PlassSidebarSide | null>;
+/**
+ * The same five widths as Tailwind variants, for the parts of this that are
+ * decided in CSS rather than in JavaScript.
+ *
+ * Written out per breakpoint because Tailwind only ever sees class names that
+ * appear literally in the source — the same reason every table in
+ * `internal/styles.ts` is a `Record` of complete strings.
+ *
+ * `collapsedOnlyClasses` hides something at and above the breakpoint, which is
+ * what a sidebar's own trigger wants: the hamburger exists exactly while the
+ * column does not. `expandedOnlyClasses` hides it below, which is what the
+ * column wants for the one paint between the server's HTML arriving and
+ * JavaScript finding out how wide the window is — without it a phone draws the
+ * sidebar full width and then throws it away.
+ */
+export declare const collapsedOnlyClasses: Record<PlPageLayoutCollapse, string>;
+export declare const expandedOnlyClasses: Record<PlPageLayoutCollapse, string>;
+/**
+ * Whether the window is currently narrower than the breakpoint a sidebar
+ * collapses at.
+ *
+ * `useSyncExternalStore` rather than an effect and a `useState`, for the one
+ * reason that matters here: it has a server snapshot, and the server's answer
+ * has to be "not collapsed". A collapsed sidebar is a `PlDrawer`, a drawer is a
+ * portal, and a portal rendered into `document.body` on the server is not a
+ * thing — so the markup that ships is the column, and the classes above are
+ * what keep that column off a narrow screen until this hook can say otherwise.
+ */
+export declare function useCollapsed(breakpoint: PlPageLayoutCollapse): boolean;
+/**
+ * `start` and `end` as the two sides a `PlDrawer` speaks.
+ *
+ * A sidebar says which end of the band it takes, because that is a layout
+ * question and a layout flips under RTL on its own. A drawer is attached to an
+ * edge of the *window*, which `PlassSide` names physically for the same reason
+ * a tooltip above a button is above it in every writing direction — so the two
+ * have to be translated, and the document's own direction is what translates
+ * them.
+ *
+ * Read during render rather than in an effect, which is safe here for a
+ * narrower reason than it looks: the only caller is a sidebar that has already
+ * collapsed, and collapsing is a client-side answer. There is no server render
+ * of this to disagree with.
+ */
+export declare function drawerSide(side: PlassSidebarSide): PlassSide;

package/dist/internal/page-layout.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);const n={xs:null,sm:"(width < 40rem)",md:"(width < 48rem)",lg:"(width < 64rem)",xl:"(width < 80rem)"};export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(t){const d="none"===t?null:n[t],o=e.useCallback(e=>{if(!d||"undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(d);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)},[d]),i=e.useCallback(()=>!(!d||"undefined"==typeof window||!window.matchMedia)&&window.matchMedia(d).matches,[d]);return e.useSyncExternalStore(o,i,()=>!1)}export function drawerSide(e){const n="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}