plass-ui 0.0.1 → 1.0.1

package/dist/components/otp-field/PlOtpField.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * What may be typed into a slot.
+ *
+ * `numeric` is the default because that is what a texted code is, and it is
+ * also what puts a number pad in front of a phone. `any` accepts whatever the
+ * keyboard produces — for a licence key with punctuation in it.
+ */
+export type PlOtpCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
+export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /** Drop shadow depth. `0` is the default — a field is cut into the sheet. */
+    elevation?: PlassElevation;
+    /**
+     * How many characters the code has. Clamped to 2–12: a single box is a
+     * `PlTextField`, and past twelve the row stops fitting a phone.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * What may be typed. Anything rejected is dropped rather than shown, and
+     * `onValueInvalid` reports it.
+     * @default 'numeric'
+     */
+    charset?: PlOtpCharset;
+    /** Hides the characters, the way a password field does. @default false */
+    mask?: boolean;
+    /**
+     * Splits the row every `groupSize` slots with a separator. `3` on a six-digit
+     * code gives the familiar two blocks of three.
+     */
+    groupSize?: number;
+    /** What is drawn between two groups. @default '–' */
+    separator?: React.ReactNode;
+    /** The code. Use with `onValueChange` for a controlled field. */
+    value?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires once every slot is filled — the moment to verify the code. */
+    onComplete?: (value: string) => void;
+    /** Fires when typed or pasted text held characters the charset rejects. */
+    onValueInvalid?: (value: string) => void;
+    /** Submits the owning form as soon as the code is complete. @default false */
+    autoSubmit?: boolean;
+    /** Label above the row, wired to the slots by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the row. */
+    description?: React.ReactNode;
+    /** Error message below the row. Its presence also turns the field invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when a form library owns
+     * the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** The form must have a complete code before it submits. @default false */
+    required?: boolean;
+    /** Unavailable. Every slot stops answering. */
+    disabled?: boolean;
+    /** Readable and copyable, but not typeable. @default false */
+    readOnly?: boolean;
+    /** Puts the caret in the first slot on mount. @default false */
+    autoFocus?: boolean;
+}
+/**
+ * A row of one-character slots: a PIN, a texted verification code, an invite
+ * key.
+ *
+ * Base UI owns everything that makes this harder than it looks — one hidden
+ * value behind however many inputs, paste spread across the slots from wherever
+ * the caret was, backspace stepping back a box, a click landing on the first
+ * empty slot rather than the one under the pointer, and the autofill hook that
+ * lets a phone offer the code straight from the message.
+ *
+ * What is here is the ladder a slot is drawn on and the field shell it shares
+ * with `PlTextField` and `PlSelect` — a slot is a field-shaped box, and a form
+ * holding both should not look like two form kits stacked on each other.
+ */
+export declare const PlOtpField: React.ForwardRefExoticComponent<PlOtpFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/otp-field/PlOtpField.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as l}from"@base-ui/react/field";import{OTPField as r}from"@base-ui/react/otp-field";import{cx as n,disabledClasses as s,fieldReadOnlyClasses as i,fieldRestClasses as o,hasContent as m,metaTextClasses as d,stackGapClasses as u,surfaceSlots as c,transitionClasses as p}from"../../internal/styles.js";const f={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},y={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:b="glass",size:v="md",color:N="primary",density:V="default",elevation:w=0,length:F=6,charset:j="numeric",mask:C=!1,groupSize:M,separator:O="–",value:I,defaultValue:R,onValueChange:S,onComplete:k,onValueInvalid:q,autoSubmit:z=!1,label:P,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,style:J,...K},Q){const U=Math.min(12,Math.max(2,Math.round(F))),W=m(A),X=D??W,Y=X?"danger":N,Z=n("text-center font-medium [font-family:inherit]",f[v],g[v],x[v],p,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",T?s[b]:B?i[b]:o[b]),$=M&&M>0?Math.round(M):0;return a(l.Root,{disabled:T,invalid:X,className:n("inline-flex flex-col align-top",u[v],H),style:{...c(Y,w),...J},children:[m(P)?e(l.Label,{className:n(d[v],"font-medium",T?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:P}):null,e(r.Root,{ref:Q,length:U,validationType:y[j],mask:C,name:E,required:L,disabled:T,readOnly:B,autoSubmit:z,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>k?.(e),onValueInvalid:e=>q?.(e),className:n("flex items-center",h[V][v]),...K,children:Array.from({length:U},(l,s)=>a(t.Fragment,{children:[$>0&&s>0&&s%$===0?e("span",{"aria-hidden":"true",className:n("select-none px-0.5 text-(--plass-muted-fg)",g[v]),children:O}):null,e(r.Input,{className:Z,autoFocus:G&&0===s})]},s))}),m(_)?e(l.Description,{className:n(d[v],"text-(--plass-muted-fg)"),children:_}):null,W?e(l.Error,{match:!0,className:n(d[v],"text-(--p-accent)"),children:A}):null]})});

package/dist/components/otp-field/index.d.ts

@@ -0,0 +1,2 @@
+export { PlOtpField } from './PlOtpField.js';
+export type { PlOtpCharset, PlOtpFieldProps } from './PlOtpField.js';

package/dist/components/otp-field/index.js

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

package/dist/components/overlay/PlOverlay.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassSize } from '../../types.js';
+/**
+ * How much of the page the overlay takes away.
+ *
+ * The four steps are one axis — how legible is what is behind — and they are
+ * tuned with the blur radius as much as with the alpha, because past about 16px
+ * a backdrop smears into flat colour and the scrim reads opaque no matter how
+ * low its alpha goes.
+ *
+ * - `scrim` — the neutral dim a `PlModal` puts behind itself. The page is still
+ *   there and still readable; it has only stopped being reachable.
+ * - `glass` — the house material at full strength, turned on the whole page. A
+ *   lighter dim over a real blur, so what is behind is present as shape and
+ *   colour but not as words. For "this is being replaced".
+ * - `solid` — the page surface, opaque. For a screen that is genuinely gone.
+ * - `clear` — nothing drawn at all. Still blocks the pointer, which is the whole
+ *   reason to reach for it: an invisible sheet that catches a click.
+ */
+export type PlOverlayTone = 'scrim' | 'glass' | 'solid' | 'clear';
+/**
+ * An overlay takes `size`, `color` and `align` and stops there.
+ *
+ * There is no `variant` — the three materials answer "how much does this surface
+ * assert itself against the page", and an overlay has taken the page; `tone` is
+ * the question it actually has to answer. There is no `elevation` either: the
+ * overlay *is* the plane everything else floats above, and a scrim with a drop
+ * shadow is a scrim with an edge.
+ */
+export interface PlOverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** The overlay is shown. Use with `onOpenChange` for a controlled overlay. */
+    open?: boolean;
+    /** Whether the overlay starts shown, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How much of the page is taken away.
+     * @default 'scrim'
+     */
+    tone?: PlOverlayTone;
+    /**
+     * Whether clicking the overlay or pressing Escape closes it.
+     *
+     * Off by default, which is the other way round from `PlModal`. A modal asks a
+     * question and Escape is the universal "no"; an overlay is not asking anything
+     * — it is saying *wait* — and a save that can be dismissed by a stray click is
+     * a save the user will think finished. Turn it on for the overlay whose job is
+     * to catch a click outside something.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Whether the page behind is taken away for the keyboard too. `'trap-focus'`
+     * leaves the page scrollable and clickable while still holding focus inside,
+     * which is what a `clear` overlay usually wants.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Where the content sits down the viewport.
+     * @default 'center'
+     */
+    align?: PlassAlign;
+    /**
+     * Scale of the padding around the content.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** Semantic colour role. Reaches the focus ring and whatever the content reads. */
+    color?: PlassColor;
+    /**
+     * The accessible name of the overlay. Never drawn.
+     *
+     * An overlay that holds nothing readable — a bare spinner, a `clear` sheet —
+     * still has to say what it is, which is why this has a default rather than
+     * being left empty.
+     * @default 'Overlay'
+     */
+    label?: string;
+    /** What sits on top of the scrim — a spinner, a line of text, a small card. */
+    children?: React.ReactNode;
+}
+/**
+ * A sheet over the whole page that stops it being used.
+ *
+ * The difference from a `PlModal` is what is *not* here: no surface, no border,
+ * no title, no actions. An overlay is the scrim on its own, with whatever the
+ * caller puts on top of it — most often a spinner and a line saying what is
+ * being waited for.
+ *
+ * It is not dismissible by default, and that is the one prop worth reading
+ * twice. Everything else Base UI owns: the portal, the scroll lock, the focus
+ * held inside, the page behind going inert, and focus returning to wherever it
+ * came from when the overlay closes.
+ */
+export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, label, className, style, children, ...props }: PlOverlayProps): React.JSX.Element;

package/dist/components/overlay/PlOverlay.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as s}from"@base-ui/react/dialog";import{surfaceSlots as l}from"../../internal/styles.js";const r={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},i={start:"items-start",center:"items-center",end:"items-end"},t={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},n=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:o,defaultOpen:c,onOpenChange:p,tone:m="scrim",dismissible:d=!1,modal:f=!0,align:u="center",size:b="md",color:x="primary",label:y="Overlay",className:g,style:j,children:k,...h}){return e(s.Root,{open:o,defaultOpen:c,modal:f,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?p?.(e):a.cancel()},children:a(s.Portal,{children:[e(s.Backdrop,{className:`plass-portal fixed inset-0 z-50 ${n} ${r[m]}`}),e(s.Viewport,{className:["plass-portal fixed inset-0 z-50 flex justify-center",i[u],t[b]].join(" "),children:e(s.Popup,{"aria-label":y,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",n,g??""].filter(Boolean).join(" "),style:{...l(x,0),...j},...h,children:k})})]})})}

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

@@ -0,0 +1,2 @@
+export { PlOverlay } from './PlOverlay.js';
+export type { PlOverlayProps, PlOverlayTone } from './PlOverlay.js';

package/dist/components/overlay/index.js

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

package/dist/components/pagination/PlPagination.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlPaginationProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /** How many pages there are. Fewer than two and the whole control renders nothing. */
+    count: number;
+    /** The current page, 1-based. Use with `onPageChange` for a controlled row. */
+    page?: number;
+    /** Which page starts current, for an uncontrolled one. @default 1 */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /**
+     * How many pages are always shown on either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many pages are always shown at each end, whatever the current page is.
+     * `0` drops the first and last page from the row, leaving only the window.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /** Shows the jump-to-first and jump-to-last steppers. @default false */
+    showEdges?: boolean;
+    /** Shows the previous and next steppers. @default true */
+    showArrows?: boolean;
+    /**
+     * Drop shadow depth of the page buttons. `0` is the default: a row of nine
+     * keys each casting its own shadow is nine shadows.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Unavailable. Every button in the row stops answering. */
+    disabled?: boolean;
+    /**
+     * The address of a page, which turns every number in the row into a real
+     * link.
+     *
+     * Without it the row is buttons, and a crawler cannot press one — so a paged
+     * list of articles, products or search results exists for a reader and stops
+     * at page one for everything else. With it the numbers are `<a href>`, the
+     * two arrows carry `rel="prev"` / `rel="next"`, and the browser's own
+     * behaviour comes back: open in a new tab, copy the address, see where a
+     * press is going before making it.
+     *
+     * `onPageChange` still fires and the press is still cancelled first, so a
+     * client-side router keeps the page it already has. A link with nowhere to go
+     * — the current page, a stepper at the end of the row — stays a `<button>`,
+     * because `disabled` is not something an `<a>` can be.
+     */
+    getPageHref?: (page: number) => string;
+    /**
+     * The accessible names, none of which is ever drawn.
+     *
+     * They are props rather than being read from a message catalogue for the same
+     * reason `PlTable` takes its `empty` line as one: a library that shipped
+     * translations would have to be told which language a page is in, and the page
+     * already knows.
+     */
+    label?: string;
+    /** Accessible name of a page button. @default `Page {n}` */
+    pageLabel?: (page: number) => string;
+    previousLabel?: string;
+    nextLabel?: string;
+    firstLabel?: string;
+    lastLabel?: string;
+    /** The live-region sentence a screen reader hears when the page changes. */
+    statusLabel?: (page: number, count: number) => string;
+}
+/**
+ * A row of page numbers.
+ *
+ * Every button in it is a real `PlButton`, which is the point: a pagination is
+ * not a new kind of control, it is buttons in a row that happen to know about
+ * each other. Reusing the component means the row inherits the glass, the
+ * pointer bloom, the press signature, the focus ring and every future change to
+ * any of them for free — and it means an `lg` pagination lines up with an `lg`
+ * button beside it, because it *is* one.
+ *
+ * `variant` sets how the pages at rest look; the current page is always `solid`,
+ * which is the one thing the row has to say without being read. That is why the
+ * default here is `ghost` rather than the `solid` a lone PlButton takes — nine
+ * panes of tinted glass in a row say that all nine are the primary action.
+ *
+ * The markup is a `<nav>` around a `<ul>` because that is what a screen reader
+ * needs to hear: a named landmark it can skip, holding a list whose length says
+ * how far the pages go, with `aria-current="page"` marking where it is.
+ */
+export declare const PlPagination: React.ForwardRefExoticComponent<PlPaginationProps & React.RefAttributes<HTMLElement>>;

package/dist/components/pagination/PlPagination.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{PlButton as n}from"../button/PlButton.js";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextClasses as l,gapClasses as i,srOnlyClasses as o}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,t)=>e+t)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const s={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"};export const PlPagination=/* @__PURE__ */t.forwardRef(function PlPagination({variant:c="ghost",size:m="md",color:u="primary",density:h="compact",elevation:d=0,count:f,page:g,defaultPage:p=1,onPageChange:x,siblingCount:b=1,boundaryCount:v=1,showEdges:y=!1,showArrows:M=!0,disabled:P=!1,getPageHref:j,label:w="Pagination",pageLabel:N=e=>`Page ${e}`,previousLabel:C="Previous page",nextLabel:L="Next page",firstLabel:k="First page",lastLabel:$="Last page",statusLabel:D=(e,a)=>`Page ${e} of ${a}`,className:I,children:K,...z},B){const[A,R]=t.useState(p),E=Math.min(Math.max(g??A,1),Math.max(f,1));if(f<2)return null;const F=function paginationRange(e,a,t,n){const r=range(1,Math.min(n,e)),l=range(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(a-t,e-n-2*t-1),n+2),o=Math.min(Math.max(a+t,n+2*t+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(i,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(f,E,b,v),H=E<=1,S=E>=f,linkProps=(a,t,n)=>j&&!t?{render:e("a",{href:j(a),rel:n})}:null,press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||j&&!x||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),f);a!==E&&(void 0===g&&R(a),x?.(a))})(a))},stepper=(a,t,r,l,i,o,s)=>e("li",{className:"flex",children:e(n,{variant:c,size:m,color:u,density:h,elevation:d,disabled:P||l,"aria-label":t,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,r),...linkProps(r,P||l,s)})},a);return a("nav",{ref:B,"aria-label":w,className:["flex items-center",I??""].filter(Boolean).join(" "),...z,children:[a("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${i[m]}`,children:[y?stepper("first",k,1,H,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,M?stepper("previous",C,E-1,H,"rotate-90 rtl:-rotate-90",e(r,{}),"prev"):null,F.map((a,t)=>e("li","number"==typeof a?{className:"flex",children:e(n,{variant:a===E?"solid":c,size:m,color:u,density:h,elevation:d,disabled:P,"aria-label":N(a),"aria-current":a===E?"page":void 0,className:"tabular-nums",onClick:e=>press(e,a),...linkProps(a,P||a===E),children:a})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",l[m],s[m]].join(" "),children:"…"},`slot-${t}`)),M?stepper("next",L,E+1,S,"-rotate-90 rtl:rotate-90",e(r,{}),"next"):null,y?stepper("last",$,f,S,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:o,"aria-live":"polite",children:D(E,f)}),K]})});

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

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

package/dist/components/pagination/index.js

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

package/dist/components/panes/PlPanes.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { PlassColor, PlassOrientation, PlassSize } from '../../types.js';
+/**
+ * A pane's share of the split, as a percentage of the container or as a CSS
+ * length.
+ *
+ * A bare number is a percentage — that is what a split is usually described in,
+ * and a percentage keeps its meaning when the window changes size. A string is
+ * an absolute length (`'240px'`, `'15rem'`, `'20%'`), which is what a sidebar
+ * with a minimum actually needs: "at least 200 pixels" does not survive being
+ * written down as a percentage of a width nobody knows yet.
+ */
+export type PlPaneSize = number | string;
+export interface PlPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the panes run. `horizontal` puts them side by side with upright
+     * handles between them; `vertical` stacks them.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Whether the handles between the panes can be dragged. Turn it off for a
+     * split that is a layout rather than a control.
+     * @default true
+     */
+    resizable?: boolean;
+    /** The colour family the handles light up in. @default 'primary' */
+    color?: PlassColor;
+    /** How thick a handle is, and how far it reaches. @default 'md' */
+    size?: PlassSize;
+    /** Fires with every pane's share, in percent, while a handle is dragged. */
+    onResize?: (sizes: number[]) => void;
+    /** Fires once, with the same shape, when the handle is let go. */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** The panes. Anything that is not a `PlPane` is still laid out, but has no size. */
+    children?: React.ReactNode;
+}
+export interface PlPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * The share this pane starts with. Panes with no `defaultSize` split whatever
+     * is left over equally.
+     */
+    defaultSize?: PlPaneSize;
+    /** How small it may be dragged. @default 0 */
+    minSize?: PlPaneSize;
+    /** How large it may be dragged. Unbounded when left out. */
+    maxSize?: PlPaneSize;
+    /** What is inside the pane. */
+    children?: React.ReactNode;
+}
+/**
+ * A set of panes with draggable handles between them.
+ *
+ * The panes are sized in **fractions**, written out as
+ * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
+ * rest of this file follows from: a split described in percentages survives the
+ * window being resized without a single line of JavaScript running, so the
+ * component measures itself only twice — once on mount, to turn a `'240px'`
+ * default into a fraction, and once at the start of each drag, to know what a
+ * pixel of pointer movement is worth.
+ *
+ * The handles are interleaved here rather than written by the caller, so the
+ * children of a `PlPanes` are just panes. That does mean the direct children have
+ * to *be* `PlPane`s: the constraints are read off their props, and a pane wrapped
+ * in something else is a pane with no minimum.
+ */
+export declare const PlPanes: React.ForwardRefExoticComponent<PlPanesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One region of a split.
+ *
+ * It carries no surface of its own on purpose: a split is layout, and the moment
+ * a pane drew a sheet it would stop being usable as the thing a `PlCard`, a
+ * `PlTable` or an editor is put inside. Put a `PlCard` in it when a surface is
+ * wanted.
+ *
+ * `defaultSize`, `minSize` and `maxSize` are read by the `PlPanes` around it
+ * rather than used here — a pane cannot know what "half" is, only the split can.
+ */
+export declare const PlPane: React.ForwardRefExoticComponent<PlPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/panes/PlPanes.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{cx as r,transitionClasses as i}from"../../internal/styles.js";const s=/* @__PURE__ */n.createContext({basis:null}),o={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const i=Number(r[1]);if(!Number.isNaN(i))switch(r[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */n.forwardRef(function PlPanes({orientation:l="horizontal",resizable:c=!0,color:u="primary",size:d="md",onResize:m,onResizeEnd:p,className:f,style:g,children:h,...x},v){const b=n.Children.toArray(h).filter(n.isValidElement),y=b.length,w=n.useRef(null),z=n.useCallback(e=>{w.current=e,"function"==typeof v?v(e):v&&(v.current=e)},[v]),P=n.useRef([]);P.current=b.map(e=>e.props);const[S,R]=n.useState(null),E=S&&S.length===y?S:null,k=n.useRef(null);k.current=E;const C="horizontal"===l,N=a[d]*Math.max(0,y-1);function grip(e){const t=w.current,n=k.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),i=(C?r.width:r.height)-N;if(i<=0)return null;const s=P.current[e],o=P.current[e+1],a=n[e]*i,l=a+n[e+1]*i,u=Math.max(toPixels(s?.minSize,i,t)??0,l-(toPixels(o?.maxSize,i,t)??l)),d=Math.min(toPixels(s?.maxSize,i,t)??l,l-(toPixels(o?.minSize,i,t)??0));return d<u?null:{root:t,current:n,extent:i,start:a,pair:l,resize(t){const r=Math.min(d,Math.max(u,a+t)),s=[...n];return s[e]=r/i,s[e+1]=(l-r)/i,R(s),m?.(s.map(e=>100*e)),s}}}n.useEffect(()=>{const e=w.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),n=(C?t.width:t.height)-N;n<=0||R(t=>t&&t.length===y?t:function initialFractions(e,t,n){const r=e.map(e=>toPixels(e.defaultSize,t,n)),i=r.reduce((e,t)=>e+(t??0),0),s=r.filter(e=>void 0===e).length,o=s>0?Math.max(0,t-i)/s:0,a=r.map(e=>Math.max(0,e??o)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(P.current,n,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[y,C,N]);const M=n.useRef(null);n.useEffect(()=>()=>M.current?.(),[]);const L=r("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",o[d],i,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",c?r(C?"cursor-col-resize":"cursor-row-resize","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:z,className:r("flex h-full w-full",C?"flex-row":"flex-col","min-h-0 min-w-0",f),style:{"--p-accent":`var(--plass-${u}-accent)`,"--p-soft":`var(--plass-${u}-soft)`,"--p-ring":`var(--plass-${u}-ring)`,...g},...x,children:b.map((o,a)=>t(n.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":C?"vertical":"horizontal","aria-valuenow":E?Math.round(100*E[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,tabIndex:c?0:-1,className:L,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const n=grip(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const i=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const s=C?t.clientX:t.clientY,o=C&&"rtl"===getComputedStyle(n.root).direction?-1:1;let a=n.current;const move=e=>{const t=C?e.clientX:e.clientY;a=n.resize((t-s)*o)},release=()=>{M.current=null,r.removeEventListener("pointermove",move),r.removeEventListener("pointerup",end),r.removeEventListener("pointercancel",end),delete r.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{release(),p?.(a.map(e=>100*e))};M.current=release,r.addEventListener("pointermove",move),r.addEventListener("pointerup",end),r.addEventListener("pointercancel",end)}(a-1,e)},onKeyDown:e=>{const t=C?"ArrowLeft":"ArrowUp",n=C?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function nudge(e,t){const n=grip(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(a-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:r("pointer-events-none bg-(--plass-border)",i,C?"h-full w-px":"h-px w-full",c?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(s.Provider,{value:{basis:E?`calc((100% - ${N}px) * ${E[a].toFixed(6)})`:null},children:o})]},o.key??a))})});export const PlPane=/* @__PURE__ */n.forwardRef(function PlPane({defaultSize:t,minSize:i,maxSize:o,className:a,style:l,children:c,...u},d){const{basis:m}=n.useContext(s);return e("div",{ref:d,className:r("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});

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

@@ -0,0 +1,2 @@
+export { PlPane, PlPanes } from './PlPanes.js';
+export type { PlPaneProps, PlPanesProps, PlPaneSize } from './PlPanes.js';

package/dist/components/panes/index.js

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

package/dist/components/pill/PlPill.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
+export interface PlPillProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick' | 'title'> {
+    /**
+     * Drop shadow depth. `2` here, against the `0` almost everything else takes.
+     *
+     * That is not an inconsistency: a pill is defined by **not** being part of the
+     * page. Every other surface in the library rests on the page and earns its
+     * separation from the glass edge, so a shadow is opt-in. This one hovers over
+     * whatever is underneath it, and a lozenge lying flat on the content it is
+     * floating over reads as a mistake — the same argument
+     * `PlFloatingBottomNavigation` makes for its own `2`.
+     * @default 2
+     */
+    elevation?: PlassElevation;
+    /**
+     * The leading slot — a glyph, an avatar, a status dot, a photo.
+     *
+     * It is given a square box of its own and clipped to a circle, so an `<img>`
+     * lands in it as readily as an icon does: the image fills the box and is
+     * cropped rather than letterboxed, which is what a 20px portrait wants.
+     */
+    startIcon?: React.ReactNode;
+    /** The trailing slot. Outside the pressable area, so it can be a control. */
+    endIcon?: React.ReactNode;
+    /**
+     * The headline in the middle — what the pill is currently about.
+     *
+     * A prop rather than something to compose, for the reason `PlCard`'s title is
+     * one: the arrangement is fixed and what a caller wants to decide is what goes
+     * in each slot. Almost every pill is a line of text and an optional second
+     * line under it, and spelling that as children means every caller inventing
+     * their own centring and type scale.
+     */
+    title?: React.ReactNode;
+    /** The second line, under the title. One step down and quieter. */
+    description?: React.ReactNode;
+    /**
+     * The second half, revealed when `expanded`.
+     *
+     * The pill grows downward into it rather than swapping to a different shape:
+     * one object saying more.
+     */
+    details?: React.ReactNode;
+    /** Whether `details` is showing. @default false */
+    expanded?: boolean;
+    /**
+     * How it sits in the page's scroll. `fixed` pins it against the viewport and
+     * centres it horizontally, which is the arrangement this shape exists for.
+     * @default 'static'
+     */
+    position?: PlassPosition;
+    /** Which edge it is held against when `position` is not `static`. @default 'top' */
+    side?: 'top' | 'bottom';
+    /** Passing it makes the middle a real button. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Anything the middle needs that `title` and `description` cannot say — a
+     * pair of small readouts, a live counter. Rendered under them, in the same
+     * centred column.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A floating lozenge holding a small amount of live information.
+ *
+ * The shape is a **stadium**, which the house radius rule otherwise forbids:
+ * every control is held just short of the 50% that would make it a pill, because
+ * the flat run along its top and bottom edge is what still reads as a sheet with
+ * the corners cut off it. This is the exception the rule is drawn against, and
+ * it works for the same reason the rule does — this is not a sheet lying on the
+ * page. It is an object hovering over one, and an object hovering over the page
+ * should not look as though it was cut from the same material.
+ *
+ * `details` is revealed by animating a measured height, exactly as a
+ * `PlAccordion` panel is: nothing is transformed and no text is resampled, the
+ * pill is simply a window that opens. The measurement is a `ResizeObserver`
+ * rather than a hardcoded height, so a details area whose content changes —
+ * which is what live information does — grows with it.
+ */
+export declare const PlPill: React.ForwardRefExoticComponent<PlPillProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pill/PlPill.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{controlSlots as n,controlTextClasses as r,cx as o,focusRingClasses as i,gapClasses as a,glassClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as p,metaTextClasses as f,paddingXClasses as x,sheetBodyClasses as u,transitionClasses as h}from"../../internal/styles.js";const g={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]",glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${c} text-(--p-accent) bg-(--p-soft)`},v={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},b={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},w={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},y={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},N={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:c="solid",size:k="md",color:j="secondary",density:z="default",elevation:_=2,startIcon:P,endIcon:R,title:C,description:H,details:I,expanded:O=!1,position:$="static",side:B="top",className:E,style:F,children:S,onClick:q,...A},D){const G=l.useRef(null),[J,K]=l.useState(0);l.useEffect(()=>{const e=G.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>K(e.scrollHeight));return s.observe(e),K(e.scrollHeight),()=>s.disconnect()},[I]);const L=Boolean(q),M=x[z][k],Q=s(t,{children:[d(P)?e("span",{className:o("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",p[k]),children:P}):null,d(C)||d(H)||d(S)?s("span",{className:o("flex min-w-0 flex-1 flex-col items-center justify-center text-center",y[z][k]),children:[d(C)?e("span",{className:"max-w-full truncate",children:C}):null,d(H)?e("span",{className:o("max-w-full truncate font-normal",f[k],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:H}):null,S]}):null]});return s("div",{ref:D,className:o("inline-flex max-w-full flex-col overflow-hidden align-middle",w[k],"font-medium whitespace-nowrap select-none",r[k],g[c],h,m,L?`plass-glow ${v[c]}`:"",N[$][B],E),style:{...n(j,_,c),...F},...A,children:[s("div",{className:o("flex shrink-0 items-center py-1",b[k],a[k],L?"ps-0":M,d(R)?"pe-1":L?"pe-0":""),children:[L?e("button",{type:"button",className:o("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",a[k],M,i),onClick:q,children:Q}):Q,d(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:R}):null]}),d(I)?e("div",{className:o("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:O?J:0},inert:!O,children:e("div",{ref:G,className:o("whitespace-normal pb-2",M,u[k]),children:I})}):null]})});

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

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

package/dist/components/pill/index.js

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

package/dist/components/popover/PlPopover.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Popover as BaseUIPopover } from '@base-ui/react/popover';
+import type { PlassAlign, PlassSide, PlassStyleProps } from '../../types.js';
+/**
+ * A popover takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for `PlMenu`'s reason: the three materials answer "how
+ * much does this surface assert itself against the page", and a popup that had
+ * to be asked for has already answered it. There is no `elevation` either — a
+ * popover genuinely floats, which is the one case the ladder exists for, so it
+ * is fixed at its top rung.
+ */
+export interface PlPopoverProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /**
+     * The element the popup hangs off and that opens it. Exactly one element,
+     * which must accept a ref and spread props — every Plass component does.
+     *
+     * Optional: a controlled popover anchored from elsewhere needs none, though it
+     * then has nothing to position against and will sit against the viewport.
+     */
+    trigger?: React.ReactElement;
+    /** The heading, rendered as the element that names the popup. */
+    title?: React.ReactNode;
+    /** A line under the title, and the popup's accessible description. */
+    description?: React.ReactNode;
+    /** The body. */
+    children?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips to the opposite side when
+     * there is no room, which is Base UI's doing and is the right behaviour.
+     * @default 'bottom'
+     */
+    side?: PlassSide;
+    /** Where it sits along that edge. @default 'center' */
+    align?: PlassAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /** Shift along that edge, in pixels. @default 0 */
+    alignOffset?: number;
+    /**
+     * Draws the little wedge pointing at the trigger.
+     *
+     * Off by default, unlike on a `PlTooltip`. A tooltip is a filled plate and its
+     * wedge is the same solid colour; this surface is translucent over a blurred
+     * backdrop, and a wedge sticking out past the popup's own box cannot carry
+     * that backdrop with it. Turn it on where the trigger is far enough away that
+     * the popup needs to say what it belongs to.
+     * @default false
+     */
+    arrow?: boolean;
+    /** Whether the popover is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the page behind is taken away. `false` — the default — leaves the
+     * page scrollable and clickable, which is what separates a popover from a
+     * `PlModal`: it is a detail beside the page, not instead of it.
+     * `'trap-focus'` holds focus inside without locking the scroll.
+     * @default false
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the popup. Turn it off
+     * only for a popup with its own way out, because there will be no other.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** Shows the × in the corner. @default false */
+    showClose?: boolean;
+    /** Accessible name of the × button. Never drawn. @default 'Close' */
+    closeLabel?: string;
+    /**
+     * A hard cap on the popup's width, overriding the one `size` implies. Numbers
+     * are pixels. For the popover whose content decides its width — a form, a
+     * single line of help — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+}
+export type PlPopoverCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIPopover.Close>;
+/**
+ * Closes the popover it is inside.
+ *
+ * Exported for `PlModalClose`'s reason: an uncontrolled popover has no `setOpen`
+ * for its Cancel button to call, and making every popover controlled is a piece
+ * of state per popover that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
+ * `<PlPopoverClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
+ */
+export declare const PlPopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that opens beside the thing that opened it.
+ *
+ * The difference from a `PlTooltip` is that this one can be **reached**: it
+ * stays up until it is dismissed, it can be entered with the pointer or the
+ * keyboard, and what is inside it can be clicked and typed into. The difference
+ * from a `PlModal` is that it does not take the page — it is anchored to a
+ * control, and the page behind goes on working.
+ *
+ * Base UI owns everything hard about it: the anchoring and the flip at the
+ * window edge, the click-outside and Escape, returning focus to the trigger, and
+ * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
+ * surface, the width ladder and the header.
+ */
+export declare function PlPopover({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;

package/dist/components/popover/PlPopover.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Popover as a}from"@base-ui/react/popover";import{CloseIcon as l}from"../../internal/icons.js";import{cx as t,focusRingClasses as o,glassClasses as r,hasContent as i,metaTextClasses as n,radiusClasses as d,sheetBodyClasses as p,sheetHeaderGapClasses as c,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetSectionGapClasses as g,sheetTitleClasses as h,surfaceSlots as u}from"../../internal/styles.js";const x={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},v=/* @__PURE__ */[r,"relative flex flex-col","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(" "),b={xs:8,sm:9,md:10,lg:11,xl:12},w=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",o].join(" ");export const PlPopoverClose=a.Close;export function PlPopover({size:o="md",color:r="primary",density:y="default",trigger:N,title:k,description:j,children:O,side:P="bottom",align:_="center",sideOffset:C=6,alignOffset:z=0,arrow:L=!1,open:M,defaultOpen:T,onOpenChange:W,modal:A=!1,dismissible:B=!0,showClose:D=!1,closeLabel:E="Close",width:R,className:$,style:q,...F}){const G=m[y][o],H=f[y][o],I=b[o],J=i(k)||i(j);return s(a.Root,{open:M,defaultOpen:T,modal:A,onOpenChange:(e,s)=>{B||e||"escape-key"!==s.reason&&"outside-press"!==s.reason&&"focus-out"!==s.reason?W?.(e):s.cancel()},children:[N?e(a.Trigger,{render:N}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-50 [outline:none]",side:P,align:_,sideOffset:C,alignOffset:z,children:s(a.Popup,{className:t(v,d[o],p[o],g[o],G,H,void 0===R?x[o]:"",$),style:{...u(r,3),...void 0===R?null:{maxWidth:"number"==typeof R?`${R}px`:R},...q},...F,children:[L?e(a.Arrow,{className:t("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"),children:s("svg",{width:I,height:I/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,J||D?s("div",{className:"flex shrink-0 items-start gap-3",children:[s("div",{className:t("flex min-w-0 flex-1 flex-col",c[o]),children:[i(k)?e(a.Title,{className:t("m-0 font-semibold",h[o]),children:k}):null,i(j)?e(a.Description,{className:t("m-0 text-(--plass-muted-fg)",n[o]),children:j}):null]}),D?e(a.Close,{"aria-label":E,className:w,children:e(l,{})}):null]}):null,i(O)?e("div",{className:"min-w-0",children:O}):null]})})})]})}

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

@@ -0,0 +1,2 @@
+export { PlPopover, PlPopoverClose } from './PlPopover.js';
+export type { PlPopoverCloseProps, PlPopoverProps } from './PlPopover.js';

package/dist/components/popover/index.js

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