plass-ui 0.0.1 → 1.0.1

package/dist/components/chat-bubble/PlChatBubble.d.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+/**
+ * Whose message this is.
+ *
+ * `start` and `end` rather than `them`/`me` or `left`/`right`: a thread runs the
+ * way the language does, and the same two words already mean this everywhere
+ * else in the library. `start` is the default because a message from someone
+ * else is the one you have no other way of knowing about.
+ */
+export type PlChatBubbleSide = 'start' | 'end';
+/**
+ * How far a message has got.
+ *
+ * The four steps are a ladder and the fifth is not on it: `failed` is the
+ * message that did not go, which is why it is the only one drawn in another
+ * colour family.
+ */
+export type PlChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+/** What a link inside a message unfurls to. */
+export interface PlChatBubbleLinkPreview {
+    /** Where the card goes. */
+    url: string;
+    /** The page's title. */
+    title?: React.ReactNode;
+    /** Its summary, clamped to two lines. */
+    description?: React.ReactNode;
+    /** The share image, drawn across the top of the card. */
+    image?: string;
+    /** Who published it — a domain, a site name. */
+    site?: React.ReactNode;
+    /**
+     * Opens the card in a new tab.
+     * @default false
+     */
+    newTab?: boolean;
+}
+export interface PlChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Whose message this is.
+     * @default 'start'
+     */
+    side?: PlChatBubbleSide;
+    /** Who sent it, above the bubble. */
+    name?: React.ReactNode;
+    /** When it was sent, beside the name. */
+    time?: React.ReactNode;
+    /**
+     * The sender's picture — a `PlAvatar`, at the size the thread uses. Left out,
+     * the bubble takes the whole row.
+     */
+    avatar?: React.ReactNode;
+    /**
+     * How far the message has got, drawn as a mark under the bubble. Left out,
+     * nothing is drawn — a received message has no delivery state worth showing.
+     */
+    status?: PlChatBubbleStatus;
+    /**
+     * What the mark is read out as. Never drawn. Defaults to the English word for
+     * whichever `status` is set.
+     */
+    statusLabel?: string;
+    /**
+     * Draws the three dots instead of the message. What `children` holds is left
+     * alone, so the same bubble can go back to it when the message arrives.
+     * @default false
+     */
+    typing?: boolean;
+    /**
+     * What the dots are read out as. Never drawn.
+     * @default 'Typing…'
+     */
+    typingLabel?: string;
+    /**
+     * A picture, a video, a map — drawn edge to edge above the text, so the
+     * bubble's corners crop it.
+     */
+    media?: React.ReactNode;
+    /** A link in the message, unfurled into a card under the text. */
+    preview?: PlChatBubbleLinkPreview;
+    /**
+     * The message's own actions — a menu trigger, most of the time. Sits beside
+     * the bubble and stays out of the way until the row is hovered or something in
+     * it takes focus.
+     */
+    actions?: React.ReactNode;
+    /**
+     * What the bubble's surface is made of. `solid` is the usual way to tell your
+     * own messages from everyone else's; `side` deliberately does not decide this,
+     * because which end is filled is a decision about the product, not about the
+     * component.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Padding inside the bubble, and nothing else.
+     * @default 'default'
+     */
+    density?: PlassDensity;
+    /**
+     * Drop shadow depth. `0` is the default — a message lies in the thread rather
+     * than floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * One message in a conversation.
+ *
+ * Everything around the bubble is optional and nothing about it is fixed by
+ * `side`: the avatar, the sender's name, the time, the delivery mark, the media
+ * above the text and the link card below it are each drawn only when they are
+ * given something. What `side` decides is which way the row runs and which
+ * corner of the sheet is cut short.
+ *
+ * `variant` is what tells your own messages from everyone else's, and it is
+ * deliberately not tied to `side` — filling the right-hand column is a
+ * convention, not a law, and a thread that fills neither is a perfectly good
+ * thread.
+ */
+export declare const PlChatBubble: React.ForwardRefExoticComponent<PlChatBubbleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/chat-bubble/PlChatBubble.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{CheckIcon as a,ClockIcon as r,LinkIcon as n,severityIcon as i}from"../../internal/icons.js";import{controlSlots as t,focusRingClasses as o,glassClasses as d,hasContent as c,metaTextClasses as p,radiusClasses as m,sheetBodyClasses as u,sheetHeaderGapClasses as v,srOnlyClasses as f,transitionClasses as g}from"../../internal/styles.js";const x={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},h={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},b={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[d,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft) [box-shadow:var(--p-elev)]"};function DoubleCheckIcon(){return l("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const y={sending:e(r,{}),sent:e(a,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */i("danger")},k={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not delivered"},w={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},N=/* @__PURE__ */["block overflow-hidden rounded-(--plass-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",o].join(" "),j=/* @__PURE__ */["shrink-0 opacity-0","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const PlChatBubble=/* @__PURE__ */s.forwardRef(function PlChatBubble({side:s="start",name:a,time:r,avatar:n,status:i,statusLabel:o,typing:d=!1,typingLabel:N="Typing…",media:_,preview:C,actions:L,variant:D="glass",size:B="md",color:z="primary",density:P="default",elevation:T=0,className:I,style:R,children:S,...W},M){const $="end"===s,q=c(a)||c(r),A=d||c(S)||Boolean(C),E=["flex min-w-0 flex-col overflow-hidden",m[B],h[s],b[D],g].join(" ");return l("div",{ref:M,className:["group/bubble flex w-full items-start gap-2",$?"flex-row-reverse":"",I??""].filter(Boolean).join(" "),style:{...t(z,T,D),...R},...W,children:[c(n)?e("div",{className:"shrink-0",children:n}):null,l("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",v[B],$?"items-end":"items-start"].join(" "),children:[q?l("div",{className:`flex items-baseline gap-2 ${p[B]}`,children:[c(a)?e("span",{className:"font-semibold",children:a}):null,c(r)?e("span",{className:"text-(--plass-muted-fg)",children:r}):null]}):null,l("div",{className:"flex min-w-0 items-center gap-1 "+($?"flex-row-reverse":""),children:[l("div",{className:E,children:[c(_)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:_}):null,A?l("div",{className:[x[P][B],"flex min-w-0 flex-col gap-2",u[B]].join(" "),children:[d?e(TypingDots,{label:N}):c(S)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:S}):null,C?e(LinkPreview,{preview:C}):null]}):null]}),c(L)?e("div",{className:j,children:L}):null]}),i?l("div",{className:["flex items-center gap-1",p[B],w[i],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[y[i],e("span",{className:f,children:o??k[i]})]}):null]})]})});function TypingDots({label:s}){return l("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(l=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":l}},l)),e("span",{className:f,children:s})]})}function LinkPreview({preview:s}){const{url:a,title:r,description:i,image:t,site:o,newTab:d=!1}=s;return l("a",{href:a,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:N,children:[t?e("img",{src:t,alt:"",className:"block h-28 w-full object-cover"}):null,l("div",{className:"flex flex-col gap-0.5 p-2",children:[c(o)?l("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(n,{}),e("span",{className:"truncate",children:o})]}):null,c(r)?e("span",{className:"font-semibold",children:r}):null,c(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}

package/dist/components/chat-bubble/index.d.ts

@@ -0,0 +1,2 @@
+export { PlChatBubble } from './PlChatBubble.js';
+export type { PlChatBubbleLinkPreview, PlChatBubbleProps, PlChatBubbleSide, PlChatBubbleStatus } from './PlChatBubble.js';

package/dist/components/chat-bubble/index.js

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

package/dist/components/checkbox/PlCheckbox.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
+import type { PlassColor, PlassSize } from '../../types.js';
+/**
+ * Base UI's own props, minus the ones this component owns: `className` and
+ * `style` land on the field wrapper rather than on the tick, and `render` would
+ * replace the tick with something that is no longer a checkbox.
+ */
+type BaseCheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUICheckbox.Root>, 'className' | 'style' | 'render' | 'children'>;
+export interface PlCheckboxProps extends BaseCheckboxProps {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** The text beside the tick. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the checkbox invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Class names for the field wrapper, not for the tick itself. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A single yes/no, or one member of a set of them.
+ *
+ * `label`, `description` and `error` are props rather than children for the same
+ * reason they are on PlTextField: the arrangement is fixed and what a caller
+ * wants to decide is what goes in each slot. `children` is not accepted at all —
+ * anything a checkbox has to say belongs in one of the three.
+ */
+export declare const PlCheckbox: React.ForwardRefExoticComponent<PlCheckboxProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/checkbox/PlCheckbox.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as o}from"@base-ui/react/field";import{controlSlots as l,focusRingClasses as s,glassClasses as i,hasContent as n,metaTextClasses as c,tickRadiusClasses as d,tickRowTextClasses as p,tickSizeClasses as h,transitionClasses as m}from"../../internal/styles.js";const u=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,s].join(" "),f=/* @__PURE__ */[i,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),k=/* @__PURE__ */[i,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),b=/* @__PURE__ */[i,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a="md",color:s="primary",label:i,description:m,error:g,invalid:x,disabled:v=!1,readOnly:j=!1,className:N,style:y,...C},w){const M=n(g),z=x??M,L=z?"danger":s,B=[u,h[a],d[a],v?b:j?k:f].join(" ");return r(o.Root,{disabled:v,invalid:z,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...l(L,0,"solid"),...y},children:[r("div",{className:`flex items-start gap-2 ${p[a]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(t.Root,{ref:w,className:B,disabled:v,readOnly:j,...C,children:e(t.Indicator,{className:"flex size-[70%] items-center justify-center",children:C.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),i||m?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[i?e(o.Label,{className:v?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:i}):null,m?e(o.Description,{className:`${c[a]} text-(--plass-muted-fg)`,children:m}):null]}):null]}),M?e(o.Error,{match:!0,className:`${c[a]} text-(--p-accent)`,children:g}):null]})});

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

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

package/dist/components/checkbox/index.js

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

package/dist/components/chip/PlChip.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlChipProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default — a chip is a token sitting *on*
+     * something else, so it is raised even less often than a `PlButton`.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Content placed before the label — an icon, a status dot, an avatar. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label, before any `count`. */
+    endIcon?: React.ReactNode;
+    /**
+     * A number set into the end of the chip. Drawn on its own small plate, so
+     * "Errors 12" reads as one token with a count rather than as two words.
+     */
+    count?: React.ReactNode;
+    /**
+     * Called when the chip's delete affordance is pressed. Passing it is what
+     * makes the affordance appear.
+     */
+    onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible name of the delete button. Never drawn.
+     * @default 'Remove'
+     */
+    deleteLabel?: string;
+    /**
+     * Marks the chip as chosen — a filter that is on.
+     *
+     * It moves the chip one step up the ladder its own variant already sits on,
+     * rather than changing the colour family, so a row of chips stays one row of
+     * chips.
+     * @default false
+     */
+    selected?: boolean;
+    /** Unavailable. The light goes out, the same way it does everywhere else. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A compact token: a tag, a filter, a status, an entity plucked out of a list.
+ *
+ * The shell is always a `<span>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` is given — a real `<button>` wrapping that
+ * content, plus a second button for `onDelete`. Both are reachable by keyboard,
+ * and neither is nested inside the other.
+ *
+ * An inert `<span>` carrying a click handler is the single most common way a
+ * component library loses its keyboard users, and a `<button>` inside a
+ * `<button>` is the most common way it invents a chip that Chrome silently
+ * rewrites. This shape is what avoids both.
+ */
+export declare const PlChip: React.ForwardRefExoticComponent<PlChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/chip/PlChip.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{CloseIcon as o}from"../../internal/icons.js";import{chipRemoveClasses as a,controlHeightClasses as n,controlSlots as r,controlTextClasses as i,disabledClasses as c,focusRingClasses as p,gapClasses as d,glassClasses as m,hasContent as g,iconClasses as h,paddingXClasses as b,radiusClasses as f,transitionClasses as u}from"../../internal/styles.js";const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},x={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]",glass:/* @__PURE__ */[m,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},j={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},w={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},y=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",u,h].join(" "),k=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",p].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:t="glass",size:p="md",color:m="primary",density:h="default",elevation:u=0,startIcon:N,endIcon:C,count:$,onDelete:B,deleteLabel:I="Remove",selected:P=!1,disabled:R=!1,className:z,style:D,children:F,onClick:L,...q},A){const E=Boolean(L)&&!R,G=v[p],H=b[h][G],J=[y,n[G],i[G],d[G],f[G],R?c[t]:x[t],!R&&P?j[t]:"",E?w[t]:"",E?"ps-0":H,B?"pe-1":E?"pe-0":"",z??""].filter(Boolean).join(" "),K=l(s,{children:[N,g(F)?e("span",{className:"min-w-0 truncate",children:F}):null,C,g($)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===t?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:$}):null]});return l("span",{ref:A,className:J,style:{...r(m,u,t),...D},"aria-disabled":!(!R||E)||void 0,...q,children:[E?e("button",{type:"button","aria-pressed":P,className:`${k} ${d[G]} ${H}`,onClick:L,children:K}):K,B?e("button",{type:"button","aria-label":I,disabled:R,className:a,onClick:B,children:e(o,{})}):null]})});

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

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

package/dist/components/chip/index.js

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

package/dist/components/collapsible/PlCollapsible.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlCollapsibleProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onChange'> {
+    /**
+     * Drop shadow depth. `0` is the default — a fold is part of the page it is set
+     * into, not a panel floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Whether the panel is showing. Use with `onOpenChange` for a controlled fold. */
+    open?: boolean;
+    /** Where an uncontrolled fold starts. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The heading on the trigger. */
+    title?: React.ReactNode;
+    /** A second line under the title, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /** Content before the title — an icon, a status dot, a count. */
+    startIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the header, outside the trigger.
+     *
+     * Deliberately outside it: a header that both folds and holds a switch has
+     * two things to press, and one of them cannot be nested inside the other —
+     * the browser rewrites a `<button>` inside a `<button>` on parse. The same
+     * shape `PlAccordionItem` uses.
+     */
+    action?: React.ReactNode;
+    /**
+     * Replaces the header entirely with a control of your own — a `PlButton`, a
+     * `PlChip`, a line of text you made pressable.
+     *
+     * The element you pass *becomes* the trigger: it is handed the click handler,
+     * `aria-expanded` and the `aria-controls` pointing at the panel, so nothing
+     * has to be wired up. `title` and the slots around it are for the far commoner
+     * case of wanting the header that is already there.
+     */
+    trigger?: React.ReactElement;
+    /** The chevron at the end of the header, turned to report the state. @default true */
+    indicator?: boolean;
+    /** Unavailable. The trigger stops answering and the panel stays as it is. */
+    disabled?: boolean;
+    /**
+     * Inner padding around the panel's content. Turn it off for something that
+     * should reach the edges — a table, a picture, a list of its own.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Keeps a closed panel in the DOM so the browser's own page search can find
+     * and open it. Overrides `keepMounted`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Keeps a closed panel in the DOM. For content that is expensive to build, or
+     * that holds form state which should survive being folded away.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+/**
+ * One section that folds, standing on its own.
+ *
+ * A `PlAccordion` is a *set* of these and owns which one of them is open; this
+ * is the same fold with nothing else beside it, so what it needs is an `open` of
+ * its own rather than a place in somebody's list. Reach for it for a "Show more"
+ * on a form, an optional block of settings, the details under a row.
+ *
+ * Base UI owns the parts that are genuinely hard: the `button` / panel pairing
+ * and the `aria-controls` / `aria-expanded` wiring between them,
+ * `hidden="until-found"`, and measuring the panel so it has a height to animate
+ * from.
+ *
+ * The panel's height *is* animated, which looks like an exception to the rule
+ * against moving things and is not: nothing is transformed, no text is
+ * resampled, and the content does not shift relative to the panel it is in — the
+ * panel is a window opening onto it. Content that appears instantly is a page
+ * that jumps, which is the failure the rule exists to prevent.
+ */
+export declare const PlCollapsible: React.ForwardRefExoticComponent<PlCollapsibleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/PlCollapsible.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{Collapsible as s}from"@base-ui/react/collapsible";import{ChevronIcon as a}from"../../internal/icons.js";import{cx as n,focusRingInsetClasses as i,gapClasses as r,hasContent as p,iconClasses as d,metaTextClasses as o,radiusClasses as c,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as h,sheetPaddingYClasses as u,sheetRestClasses as x,sheetTitleClasses as b,surfaceSlots as g,transitionClasses as N}from"../../internal/styles.js";const v={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},w={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */t.forwardRef(function PlCollapsible({variant:t="glass",size:y="md",color:j="primary",density:k="default",elevation:C=0,open:O,defaultOpen:_=!1,onOpenChange:P,title:F,subtitle:M,startIcon:R,action:T,trigger:U,indicator:$=!0,disabled:z=!1,padded:I=!0,hiddenUntilFound:q=!1,keepMounted:A=!1,className:B,style:D,children:E,...G},H){const J=h[k][y],K=u[k][y];return l(s.Root,{ref:H,open:O,defaultOpen:_,onOpenChange:e=>P?.(e),disabled:z,className:n("flex flex-col overflow-hidden",c[y],x[t],N,B),style:{...g(j,C),...D},...G,children:[U?e(s.Trigger,{render:U}):l("div",{className:"flex w-full items-center",children:[l(s.Trigger,{className:n("flex min-w-0 flex-1 cursor-pointer items-center text-start",J,K,r[y],N,d,i,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[p(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,l("span",{className:n("flex min-w-0 flex-1 flex-col",f[y]),children:[p(F)?e("span",{className:n("plass-title truncate font-semibold",b[y]),children:F}):null,p(M)?e("span",{className:n("truncate text-(--plass-muted-fg)",o[y]),children:M}):null]}),$?e("span",{className:n("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"),children:e(a,{})}):null]}),p(T)?e("span",{className:n("flex shrink-0 items-center",J),children:T}):null]}),e(s.Panel,{hiddenUntilFound:q,keepMounted:A,className:n("h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"),children:e("div",{className:n("min-w-0 text-(--plass-muted-fg)",m[y],I?J:"",I?U?`${v[k][y]} ${w[k][y]}`:w[k][y]:""),children:E})})]})});

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

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

package/dist/components/collapsible/index.js

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

package/dist/components/combobox/PlCombobox.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * What a combobox's value may be — the same two types a PlSelect submits, and
+ * for the same reason: a form control's value is what a form sends, and every
+ * escape from that buys flexibility by making the common case harder to write.
+ *
+ * A value the list does not contain is a `string`: it is what the user typed.
+ */
+export type PlComboboxValue = string | number;
+export interface PlComboboxOption {
+    /** Submitted, and what `value` / `onValueChange` speak in. */
+    value: PlComboboxValue;
+    /**
+     * Shown in the list, in the input and on the chip. Defaults to the value.
+     *
+     * A `string` rather than a `ReactNode`, which is the one place this differs
+     * from PlSelect: the label is typed against by the filter and written into a
+     * text input, and neither of those can be done to an element.
+     */
+    label?: string;
+    /** Unavailable, but still listed — the option exists, it just cannot be picked. */
+    disabled?: boolean;
+}
+/** One value, or an array of them, depending on `multiple`. */
+type Selection<Multiple extends boolean | undefined> = Multiple extends true ? PlComboboxValue[] : PlComboboxValue | null;
+export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /**
+     * The options, as data — the same shape PlSelect takes, and for the same
+     * reason: what a caller has is almost always an array already.
+     */
+    items: readonly PlComboboxOption[];
+    /**
+     * Whether more than one value may be held. The chosen ones become chips
+     * inside the field, and the input goes on filtering after each.
+     * @default false
+     */
+    multiple?: Multiple;
+    /** The chosen value. Use with `onValueChange` for a controlled combobox. */
+    value?: Selection<Multiple> | null;
+    /** The initially chosen value, for an uncontrolled combobox. */
+    defaultValue?: Selection<Multiple> | null;
+    onValueChange?: (value: Selection<Multiple>) => void;
+    /** Called as the text in the input changes — the filter query, not the value. */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Whether a value the list does not contain may be committed.
+     *
+     * On by default, and it is what separates this from a searchable PlSelect: the
+     * typed text is offered as its own row at the end of the list, so committing
+     * it is a choice the user makes rather than something that happens to them on
+     * blur. Turn it off for a field whose values are a closed set.
+     * @default true
+     */
+    allowCustom?: boolean;
+    /**
+     * What that row says. Receives the trimmed query.
+     * @default (query) => `Add “${query}”`
+     */
+    customLabel?: (query: string) => React.ReactNode;
+    /**
+     * Shows a × that empties the field. Off by default — a field that can be
+     * cleared in one click is a field that can be emptied by accident.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Shown in the popup when nothing matched and no value may be added.
+     * @default 'No matches'
+     */
+    emptyMessage?: React.ReactNode;
+    /** The most rows the list will show at once. `-1` is all of them. @default -1 */
+    limit?: number;
+    /** Shown in the input while nothing is typed. */
+    placeholder?: string;
+    /**
+     * Drop shadow depth of the *field*. `0`, like a PlTextField: a field is cut
+     * into the sheet rather than resting on it. The popup has its own, fixed at
+     * `3` — it genuinely floats above the page.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Label above the field, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the field. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the combobox invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to whether `error` has content. */
+    invalid?: boolean;
+    /** Content placed before the input. Sized in `em`, so it tracks the text. */
+    startIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The value is shown but cannot be changed. */
+    readOnly?: boolean;
+    /** Whether a value must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** The popup is open. Use with `onOpenChange` for a controlled popup. */
+    open?: boolean;
+    /** Whether the popup starts open. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the button that opens the list. @default 'Open' */
+    openLabel?: string;
+    /** Accessible name of the clear button. @default 'Clear' */
+    clearLabel?: string;
+    /**
+     * Accessible name of a chip's remove button. Receives the chip's label.
+     * @default (label) => `Remove ${label}`
+     */
+    removeLabel?: (label: string) => string;
+    /** A ref to the text input the user types into. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    id?: string;
+}
+/**
+ * A field you can type into and also choose from.
+ *
+ * The shell is a PlTextField's wearing a chevron, exactly as PlSelect's trigger
+ * is — the three have to be indistinguishable in a form, or the form looks
+ * assembled rather than designed. What is different is what the text does: it
+ * filters the list, and — unless `allowCustom` is off — it can become the value
+ * itself, offered as the last row rather than committed silently on blur.
+ *
+ * With `multiple` the chosen values become PlChips inside the field and the
+ * input goes on filtering after each one, so a set of tags is built without the
+ * field ever closing.
+ *
+ * Base UI owns everything hard about this: the filtering and its collator, the
+ * popup's positioning and flipping, the `combobox`/`listbox` wiring, arrow-key
+ * navigation across both the list and the chips, and the hidden input that makes
+ * the whole thing submit with a form.
+ */
+export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel, clearLabel, removeLabel, inputRef, id, className, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
+export {};

package/dist/components/combobox/PlCombobox.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as s}from"@base-ui/react/field";import{PlChip as n}from"../chip/PlChip.js";import{CheckIcon as i,ChevronIcon as r,CloseIcon as o,PlusIcon as c}from"../../internal/icons.js";import{chipRemoveClasses as d,controlHeightClasses as m,controlTextLeadingClasses as u,cx as p,disabledClasses as h,fieldReadOnlyClasses as b,fieldRestClasses as g,focusWithinRingClasses as f,gapClasses as v,glassClasses as x,hasContent as y,iconClasses as N,metaTextClasses as w,paddingXClasses as C,radiusClasses as L,stackGapClasses as j,surfaceSlots as I,transitionClasses as S}from"../../internal/styles.js";const A=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",S,f,N].join(" "),O={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},V=/* @__PURE__ */[x,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]"].join(" "),_=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",S,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)","data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),z=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed disabled:opacity-50"].join(" ");function toArray(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function PlCombobox({variant:f="glass",size:x="md",color:N="primary",density:S="default",elevation:M=0,items:P,multiple:R,value:$,defaultValue:k,onValueChange:T,onInputValueChange:q,allowCustom:E=!0,customLabel:F,clearable:D=!1,emptyMessage:G="No matches",limit:H,placeholder:W,label:B,description:J,error:K,invalid:Q,startIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:ae,open:le,defaultOpen:te,onOpenChange:se,openLabel:ne="Open",clearLabel:ie="Clear",removeLabel:re=e=>`Remove ${e}`,inputRef:oe,id:ce,className:de,style:me,...ue}){const pe=y(K),he=Q??pe,be=he?"danger":N,ge=!0===R,fe=l.useMemo(()=>P.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[P]),[ve,xe]=l.useState(()=>toArray(k)),ye=void 0===$?ve:toArray($),[Ne,we]=l.useState(""),Ce=l.useMemo(()=>new Map(fe.map(e=>[e.value,e])),[fe]),Le=l.useCallback(e=>Ce.get(e)??{value:e,label:String(e),custom:!0},[Ce]),je=Ne.trim(),Ie=je.toLocaleLowerCase(),Se=""===je||fe.some(e=>e.label.toLocaleLowerCase()===Ie||String(e.value).toLocaleLowerCase()===Ie)||ye.some(e=>String(e).toLocaleLowerCase()===Ie),Ae=!E||Z||Y||Se?null:je,Oe=l.useMemo(()=>null===Ae?fe:[...fe,{value:Ae,label:Ae,custom:!0}],[fe,Ae]),Ve=ge?ye.map(Le):ye.length>0?Le(ye[0]):null,_e=p(A,u[x],L[x],v[x],ge?O[x]:m[x],`${C[S][x]} pe-1.5`,Y?h[f]:Z?b[f]:g[f]),ze=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(t.Input,{ref:oe,placeholder:W,className:p(ze,ge&&"min-w-16",ge&&a&&"ms-1.5")});return a(s.Root,{disabled:Y,invalid:he,className:p("flex-col align-top",j[x],X?"flex w-full":"inline-flex",de),style:{...I(be,M),...me},...ue,children:[B?e(s.Label,{className:p(w[x],"font-semibold",Y?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:B}):null,a(t.Root,{id:ce,name:ae,items:Oe,multiple:ge,value:Ve,onValueChange:e=>{!function commit(e){void 0===$&&xe(e),T?.(ge?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{we(e),q?.(e)},open:le,defaultOpen:te,onOpenChange:e=>se?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:H,disabled:Y,readOnly:Z,required:ee,children:[a(t.InputGroup,{className:_e,children:[U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:U}):null,ge?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:s=>a(l.Fragment,{children:[s.map(a=>e(t.Chip,{render:e(n,{variant:"glass",size:x,color:be,density:"compact",disabled:Y,endIcon:Z||Y?null:e(t.ChipRemove,{"aria-label":re(a.label),className:d,children:e(o,{})})}),children:a.label},String(a.value))),renderInput(s.length>0)]})})}):renderInput(!1),D&&!Z?e(t.Clear,{"aria-label":ie,className:z,children:e(o,{})}):null,e(t.Trigger,{"aria-label":ne,className:z,children:e(t.Icon,{className:p("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(r,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:p(V,L[x],u[x]),style:I(be,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:G}),e(t.List,{children:s=>e(t.Item,{value:s,disabled:s.disabled,className:_,children:s.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(c,{})}),e("span",{className:"truncate",children:F?F(s.label):`Add “${s.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e("span",{className:"truncate",children:s.label})]})},`${s.custom?"custom:":""}${String(s.value)}`)})]})})})]}),J?e(s.Description,{className:p(w[x],"text-(--plass-muted-fg)"),children:J}):null,pe?e(s.Error,{match:!0,className:p(w[x],"text-(--p-accent)"),children:K}):null]})}

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

@@ -0,0 +1,2 @@
+export { PlCombobox } from './PlCombobox.js';
+export type { PlComboboxOption, PlComboboxProps, PlComboboxValue } from './PlCombobox.js';

package/dist/components/combobox/index.js

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

package/dist/components/container/PlContainer.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassDensity, PlassSize } from '../../types.js';
+/**
+ * How wide the content is allowed to get.
+ *
+ * `none` is the extra step and the default, because a `PlContainer`'s job is
+ * the gutter — a measure is a second decision, and a page should have to ask
+ * for one.
+ */
+export type PlContainerWidth = PlassSize | 'none';
+export interface PlContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How wide the content is allowed to get, on the same ladder the breakpoints
+     * use — `xs` 30rem, `sm` 40rem, `md` 48rem, `lg` 64rem, `xl` 80rem.
+     * @default 'none'
+     */
+    maxWidth?: PlContainerWidth;
+    /**
+     * The gutter, on the `size`/`density` scale. Turn it off to keep the centring
+     * and the measure without the padding.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The gutter's scale.
+     *
+     * `size` here is the size of the *sheet* — it never touches a height or the
+     * type scale — and it is independent of `maxWidth`, which is how wide the
+     * content gets rather than how far it sits from the edge.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** @default 'default' */
+    density?: PlassDensity;
+    /**
+     * Centres the content once `maxWidth` is narrower than the page. No effect
+     * while `maxWidth` is `none`, because there is nothing left over to centre in.
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<main />}`,
+     * `render={<section />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Horizontal breathing room, and optionally a measure.
+ *
+ * It draws nothing — no sheet, no hairline, no shadow — for the same reason
+ * `PlAspectRatio` does not. The outermost element on a page is the one thing
+ * that must not decide what the page looks like, and a container that carried a
+ * `variant` would put a second pane behind every card on it.
+ *
+ * The two questions it answers are deliberately separate from how the content
+ * inside divides itself up: a container holds a `PlGrid` as happily as it holds
+ * a single paragraph, and a grid needs no container around it.
+ *
+ * The gutter is the **sheet** padding track rather than the control one. What
+ * sits inside a container is a page, and the margin a page keeps from the edge
+ * of a window is the margin a card keeps around a paragraph — not the room a
+ * label needs beside the edge of the key it is printed on.
+ */
+export declare const PlContainer: React.ForwardRefExoticComponent<PlContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/container/PlContainer.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{cx as n,sheetPaddingXClasses as m}from"../../internal/styles.js";const a={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e="none",padded:t=!0,size:o="md",density:s="default",centered:d=!0,render:l,className:i,children:c,...x},f){const u=n("block w-full","none"===e?"":a[e],d?"mx-auto":"",t?m[s][o]:"",i);return r({render:l,ref:f,props:{className:u,children:c,...x}})});

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

@@ -0,0 +1,2 @@
+export { PlContainer } from './PlContainer.js';
+export type { PlContainerProps, PlContainerWidth } from './PlContainer.js';

package/dist/components/container/index.js

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