plass-ui 0.0.1 → 1.0.1

package/dist/components/select/PlSelect.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * What a select's value may be.
+ *
+ * Deliberately not generic over arbitrary objects. A select is a form control,
+ * its value is what a form submits, and every escape from that — object values,
+ * custom equality, a stringifier for the trigger — buys flexibility by making
+ * the common case harder to write. Keep the identifier here and look the object
+ * up on the other side.
+ */
+export type PlSelectValue = string | number;
+export interface PlSelectOption {
+    /** Submitted, and what `value` / `onValueChange` speak in. */
+    value: PlSelectValue;
+    /** Shown in the list and in the trigger. Defaults to the value itself. */
+    label?: React.ReactNode;
+    /** Unavailable, but still listed — the option exists, it just cannot be picked. */
+    disabled?: boolean;
+}
+export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /**
+     * The options, as data. There is no `<PlSelect.Option>` to compose: what a
+     * caller has is almost always an array already, and the list has to be
+     * available to the trigger before the popup has ever been opened.
+     */
+    items: readonly PlSelectOption[];
+    /** The chosen value. Use with `onValueChange` for a controlled select. */
+    value?: PlSelectValue | null;
+    /** The initially chosen value, for an uncontrolled select. */
+    defaultValue?: PlSelectValue | null;
+    onValueChange?: (value: PlSelectValue | null) => void;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /**
+     * Drop shadow depth of the *trigger*. `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, which is the one case elevation
+     * is for.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Label above the trigger, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the trigger. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the select invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to whether `error` has content. */
+    invalid?: boolean;
+    /** Content placed before the value. 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;
+    id?: string;
+}
+/**
+ * One value chosen from a list of them.
+ *
+ * The trigger is a PlTextField's shell wearing a chevron, on purpose: a form
+ * where the select is a different height, radius or material from the fields
+ * around it is a form that looks assembled rather than designed. That is why
+ * `fieldRestClasses` lives in `internal/styles` and not in either component.
+ *
+ * Base UI owns everything hard about this — the popup's positioning and
+ * flipping, the focus trap, typeahead, the hidden input that makes it submit —
+ * and the work here is the surface it all wears.
+ */
+export declare const PlSelect: React.ForwardRefExoticComponent<PlSelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/select/PlSelect.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Select as t}from"@base-ui/react/select";import{Field as s}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as n}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,disabledClasses as d,fieldReadOnlyClasses as m,fieldRestClasses as u,focusWithinRingClasses as p,gapClasses as h,glassClasses as f,hasContent as g,iconClasses as x,metaTextClasses as v,paddingXClasses as b,radiusClasses as j,stackGapClasses as N,surfaceSlots as w,transitionClasses as y}from"../../internal/styles.js";const I=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,p,x].join(" "),S=/* @__PURE__ */[f,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-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",y,"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(" ");export const PlSelect=/* @__PURE__ */l.forwardRef(function PlSelect({variant:p="glass",size:f="md",color:x="primary",density:y="default",elevation:P=0,items:V,value:z,defaultValue:k,onValueChange:O,placeholder:R,label:T,description:q,error:C,invalid:M,startIcon:W,fullWidth:_=!1,disabled:B=!1,readOnly:D=!1,required:E=!1,name:L,id:A,className:F,style:G,...H},J){const K=g(C),Q=M??K,U=Q?"danger":x,X=l.useMemo(()=>V.map(e=>({label:e.label??String(e.value),value:e.value})),[V]),Y=l.useMemo(()=>[...V.map(e=>e.label??String(e.value)),...g(R)?[R]:[]],[V,R]);return a(s.Root,{disabled:B,invalid:Q,className:["flex-col align-top",N[f],_?"flex w-full":"inline-flex",F??""].filter(Boolean).join(" "),style:{...w(U,P),...G},...H,children:[T?e(s.Label,{className:[v[f],"font-semibold",B?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:T}):null,a(t.Root,{id:A,name:L,items:X,value:z,defaultValue:k,onValueChange:e=>O?.(e),disabled:B,readOnly:D,required:E,children:[a(t.Trigger,{ref:J,className:[I,o[f],c[f],j[f],h[f],b[y][f],B?d[p]:D?`${m[p]} cursor-default`:u[p]].join(" "),children:[W?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:W}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(t.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)"].join(" "),placeholder:R}),e(n,{samples:Y})]}),e(t.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(t.Popup,{className:`${S} ${j[f]} ${c[f]}`,style:w(U,3),children:V.map(l=>a(t.Item,{value:l.value,disabled:l.disabled,className:$,children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(t.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)))})})})]}),q?e(s.Description,{className:`${v[f]} text-(--plass-muted-fg)`,children:q}):null,K?e(s.Error,{match:!0,className:`${v[f]} text-(--p-accent)`,children:C}):null]})});

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

@@ -0,0 +1,2 @@
+export { PlSelect } from './PlSelect.js';
+export type { PlSelectOption, PlSelectProps, PlSelectValue } from './PlSelect.js';

package/dist/components/select/index.js

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

package/dist/components/skeleton/PlSkeleton.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassColor, PlassSize } from '../../types.js';
+/**
+ * What the placeholder is standing in for.
+ *
+ * - `line` — a run of text. Sized off the type scale, so a `md` line is exactly
+ *   as tall as the `md` type it will be replaced by.
+ * - `rect` — a block: an image, a chart, a card, a map.
+ * - `circle` — an avatar, or anything else round.
+ */
+export type PlSkeletonShape = 'line' | 'rect' | 'circle';
+export interface PlSkeletonProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'line' */
+    shape?: PlSkeletonShape;
+    /**
+     * How many lines to draw, for `shape="line"`. The last one is drawn short, the
+     * way the last line of a paragraph is, so a block of them reads as prose
+     * rather than as a barcode. Ignored by the other two shapes.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The scale of the thing being stood in for: the type scale for a `line`, the
+     * diameter for a `circle`, the default block height for a `rect`.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * Colour family. `secondary` by default, and it is worth leaving there: a
+     * placeholder that carries a semantic colour is saying something about content
+     * that has not arrived yet.
+     * @default 'secondary'
+     */
+    color?: PlassColor;
+    /** An explicit width. Numbers are pixels. */
+    width?: number | string;
+    /** An explicit height. Numbers are pixels. */
+    height?: number | string;
+    /**
+     * The travelling highlight. Turn it off for a page holding dozens of them, or
+     * where the wait is expected to be long enough that motion becomes noise.
+     *
+     * A reduced-motion preference already replaces the sweep with a colour pulse
+     * without being asked, so this is not the accessibility switch.
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * What a screen reader is told, if anything.
+     *
+     * Unset — the default — the placeholder is `aria-hidden`, because a dozen
+     * boxes each announcing themselves is worse than silence. Give the *one*
+     * skeleton that stands for the whole region a label and it becomes a live
+     * `status` instead.
+     */
+    label?: string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * The shape of something that has not loaded yet.
+ *
+ * It reserves the space the real thing will take, which is the whole job: a card
+ * that grows by 200px when its image arrives has moved everything below it while
+ * somebody was reading. A spinner cannot do that.
+ *
+ * The three shapes are the three things a layout is made of — a run of text, a
+ * block and a circle — and each is sized off the ladder the real component uses,
+ * so a `md` line is as tall as `md` type and a `md` circle is exactly a
+ * `PlAvatar` at `md`.
+ */
+export declare const PlSkeleton: React.ForwardRefExoticComponent<PlSkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/PlSkeleton.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as s,controlSquareClasses as d,surfaceSlots as n}from"../../internal/styles.js";const o={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},a={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},m={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"},u="relative overflow-hidden bg-(--p-soft-hover)";function length(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const PlSkeleton=/* @__PURE__ */r.forwardRef(function PlSkeleton({shape:r="line",lines:h=1,size:f="md",color:p="secondary",width:c,height:g,animated:x=!0,label:w,render:y,className:$,style:b,...v},j){const k=x?"plass-skeleton":"",N="circle"===r?`shrink-0 rounded-full ${s[f]} ${d[f]}`:"rect"===r?`w-full ${t[f]} ${void 0===g?i[f]:""}`:`w-full ${m[f]} ${o[f]}`,B=w?{role:"status","aria-busy":!0,"aria-label":w}:{"aria-hidden":!0},P="line"===r&&h>1;return l({render:y,ref:j,props:{className:(P?["flex w-full flex-col",a[f],$??""]:[u,k,N,$??""]).filter(Boolean).join(" "),style:{...n(p,0),width:length(c),height:length(g),...b},...B,...P?{children:Array.from({length:h},(r,l)=>e("div",{className:[u,k,m[f],o[f],l===h-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});

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

@@ -0,0 +1,2 @@
+export { PlSkeleton } from './PlSkeleton.js';
+export type { PlSkeletonProps, PlSkeletonShape } from './PlSkeleton.js';

package/dist/components/skeleton/index.js

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

package/dist/components/slider/PlSlider.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Slider as BaseUISlider } from '@base-ui/react/slider';
+import type { PlassColor, PlassElevation, PlassOrientation, PlassSize } from '../../types.js';
+type BaseSliderProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISlider.Root>, 'className' | 'style' | 'render' | 'children' | 'orientation'>;
+export interface PlSliderProps extends BaseSliderProps {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Drop shadow depth of the **thumb**. `1`, like a PlButton: the thumb is the
+     * one part of a slider you press, and it rests on the sheet.
+     * @default 1
+     */
+    elevation?: PlassElevation;
+    /**
+     * Which way the slider runs. A vertical slider has no length of its own, so
+     * give it a height — the default `h-40` is a starting point, not a rule.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /** The label above the track. */
+    label?: React.ReactNode;
+    /** Helper text below the track. */
+    description?: React.ReactNode;
+    /**
+     * Shows the current value beside the label. Pass a function to format it —
+     * the raw numbers and Base UI's already-localised strings are both handed in.
+     * @default false
+     */
+    showValue?: boolean | ((formatted: readonly string[], values: readonly number[]) => React.ReactNode);
+    /** Class names for the wrapper, not for the track. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A value chosen along a range.
+ *
+ * Pass an array to `value` or `defaultValue` and it becomes a range slider with
+ * one thumb per entry — there is no separate `range` prop, because the shape of
+ * the value already says which one this is.
+ */
+export declare const PlSlider: React.ForwardRefExoticComponent<PlSliderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/slider/PlSlider.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Slider as a}from"@base-ui/react/slider";import{controlSlots as r,focusRingClasses as o,metaTextClasses as t,transitionClasses as i}from"../../internal/styles.js";const n={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},c={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},d={xs:"size-3",sm:"size-3.5",md:"size-4.5",lg:"size-5",xl:"size-6"},m={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},u={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},f="rounded-full bg-(--plass-track)",h=`rounded-full [background-image:var(--p-fill)] ${i}`,p=/* @__PURE__ */["rounded-full border-2 [background-image:var(--p-fill)]","[border-color:var(--plass-surface)]","[box-shadow:var(--p-elev),var(--p-lift)]","cursor-grab select-none active:cursor-grabbing",i,"hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]",o,"data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]"].join(" ");export const PlSlider=/* @__PURE__ */s.forwardRef(function PlSlider({size:s="md",color:o="primary",elevation:i=1,orientation:x="horizontal",label:g,description:v,showValue:w=!1,disabled:b=!1,className:y,style:N,...j},$){const _="vertical"===x,z=j.value??j.defaultValue,k=Array.isArray(z)?z.length:1;return l(a.Root,{ref:$,orientation:x,disabled:b,className:["flex",_?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",b?"opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed":"",y??""].filter(Boolean).join(" "),style:{...r(o,i,"solid"),...N},...j,children:[g||w?l("div",{className:`flex w-full items-baseline gap-2 ${t[s]}`,children:[g?e(a.Label,{className:"font-semibold text-(--plass-fg)",children:g}):null,w?e(a.Value,{className:"ms-auto tabular-nums text-(--plass-muted-fg)",children:"function"==typeof w?w:null}):null]}):null,e(a.Control,{className:["flex touch-none items-center justify-center select-none",_?`${u[s]} h-40 flex-col`:`w-full ${m[s]}`].join(" "),children:l(a.Track,{className:[f,_?`${c[s]} h-full`:`${n[s]} w-full`].join(" "),children:[e(a.Indicator,{className:h}),Array.from({length:k},(l,r)=>e(a.Thumb,{index:r,className:`${p} ${d[s]}`},r))]})}),v?e("div",{className:`${t[s]} text-(--plass-muted-fg)`,children:v}):null]})});

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

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

package/dist/components/slider/index.js

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

package/dist/components/spoiler/PlSpoiler.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+export interface PlSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
+    /** Whether the content is uncovered. Use with `onRevealedChange` for a controlled one. */
+    revealed?: boolean;
+    /** Where an uncontrolled spoiler starts. @default false */
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** The reveal button's label. @default 'Reveal' */
+    label?: React.ReactNode;
+    /** The hide button's label, when `reversible` is on. @default 'Hide' */
+    hideLabel?: React.ReactNode;
+    /**
+     * The line above the button, saying why the content is covered. Pass `false`
+     * for a cover with nothing written on it.
+     * @default 'This may contain spoilers'
+     */
+    description?: React.ReactNode | false;
+    /**
+     * Replaces the default reveal button entirely.
+     *
+     * The replacement is yours to wire up: pass `revealed` and `onRevealedChange`
+     * and drive it from your own control. `label` is the prop for the far
+     * commoner case of wanting different words on the button that is already
+     * there.
+     */
+    action?: React.ReactNode;
+    /**
+     * Keeps the content coverable: once revealed, a hide button appears under it.
+     * @default false
+     */
+    reversible?: boolean;
+    /**
+     * Clamps the covered box to this height — a CSS length, or a number in pixels.
+     * Revealing releases it and the content takes whatever height it needs.
+     *
+     * Left out, the box is exactly as tall as what it holds, which is the right
+     * default for a paragraph or a picture. Set it for something long enough that
+     * a page of blurred content would be a page of nothing.
+     */
+    maxHeight?: number | string;
+    /** How hard the content is blurred, in pixels. @default 10 */
+    blur?: number;
+    /**
+     * Inner padding around the content, on the sheet's `size` / `density` scale.
+     * Turn it off for something that should reach the edges — a picture, a video.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * What the sheet is made of. `ghost` draws no box at all, which is what a
+     * spoiler sitting inside running prose usually wants.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** The sheet's radius, and the size of the button on it. @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** Padding around the cover's own text and button. @default 'default' */
+    density?: PlassDensity;
+    /** Drop shadow depth. `0` is the default and it is flat. @default 0 */
+    elevation?: PlassElevation;
+    /** What is being covered. */
+    children?: React.ReactNode;
+}
+/**
+ * Content that is covered until somebody asks for it.
+ *
+ * The cover is a **blur** rather than a `display: none`, which is the whole
+ * point: a reader can see that there is something there, roughly how much of it
+ * there is, and — with `maxHeight` — that it has been clamped. What they cannot
+ * do is read it by accident, which is the one thing a spoiler is for.
+ *
+ * While it is covered the content is `inert`, so it is not tabbable, not
+ * readable by a screen reader and not selectable by a drag across the page. A
+ * spoiler that could be defeated by <kbd>Ctrl</kbd>+<kbd>A</kbd> is not a
+ * spoiler.
+ *
+ * The sheet is never dyed, exactly as on a `PlCard`: what a spoiler holds is a
+ * photograph, a paragraph, a plot twist, and it arrives with its own colours.
+ * The family shows up on the button and in the hairline and stops there.
+ */
+export declare const PlSpoiler: React.ForwardRefExoticComponent<PlSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/PlSpoiler.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as a from"react";import{PlButton as r}from"../button/PlButton.js";import{cx as l,hasContent as s,metaTextClasses as t,radiusClasses as n,sheetPaddingXClasses as o,sheetPaddingYClasses as d,sheetRestClasses as c,surfaceSlots as m,transitionClasses as u}from"../../internal/styles.js";export const PlSpoiler=/* @__PURE__ */a.forwardRef(function PlSpoiler({revealed:p,defaultRevealed:f=!1,onRevealedChange:v,label:h="Reveal",hideLabel:x="Hide",description:g="This may contain spoilers",action:y,reversible:b=!1,maxHeight:j,blur:N=10,padded:w=!0,variant:k="glass",size:z="md",color:R="primary",density:_="default",elevation:C=0,className:H,style:P,children:S,...$},B){const I=a.useId(),[L,T]=a.useState(f),q=p??L,change=e=>{void 0===p&&T(e),v?.(e)},A=o[_][z],D=d[_][z],E=!1===g?null:g;return i("div",{ref:B,className:l("isolate grid overflow-hidden",n[z],c[k],u,H),style:{...m(R,C),...P},...$,children:[e("div",{id:I,className:l("min-w-0 [grid-area:1/1]",w?`${A} ${D}`:"","[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",q?"":"select-none"),style:{filter:q?void 0:`blur(${N}px)`,maxHeight:q?void 0:j,overflow:q?void 0:"hidden"},inert:!q,children:S}),q?null:i("div",{className:l("z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]",A,D,"[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]"),children:[s(E)?e("p",{className:l("m-0 text-(--plass-muted-fg)",t[z]),children:E}):null,y??e(r,{size:z,color:R,density:_,onClick:()=>change(!0),"aria-expanded":!1,"aria-controls":I,children:h})]}),q&&b?e("div",{className:l("flex justify-end",A,D,"pt-0"),children:e(r,{variant:"ghost",size:z,color:R,density:_,onClick:()=>change(!1),"aria-expanded":!0,"aria-controls":I,children:x})}):null]})});

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

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

package/dist/components/spoiler/index.js

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

package/dist/components/switch/PlSwitch.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Switch as BaseUISwitch } from '@base-ui/react/switch';
+import type { PlassAlign, PlassColor, PlassSize } from '../../types.js';
+/** Which side of the track the label sits on. */
+export type PlSwitchLabelPlacement = Extract<PlassAlign, 'start' | 'end'>;
+type BaseSwitchProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISwitch.Root>, 'className' | 'style' | 'render' | 'children'>;
+export interface PlSwitchProps extends BaseSwitchProps {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** The text beside the track. 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 switch 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;
+    /**
+     * Which side the label sits on. `end` reads as a caption for the control;
+     * `start` is for a settings list, where the labels form a column and every
+     * switch lines up on the right.
+     * @default 'end'
+     */
+    labelPlacement?: PlSwitchLabelPlacement;
+    /** Class names for the field wrapper, not for the track. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * An immediate on/off.
+ *
+ * The difference from a PlCheckbox is not visual, it is temporal: a checkbox is
+ * a value that gets submitted with a form, a switch takes effect the moment it
+ * moves. If there is a Save button underneath, it should have been a checkbox.
+ */
+export declare const PlSwitch: React.ForwardRefExoticComponent<PlSwitchProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/switch/PlSwitch.js

@@ -0,0 +1 @@
+"use client";import{jsx as a,jsxs as e,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{Switch as r}from"@base-ui/react/switch";import{Field as s}from"@base-ui/react/field";import{controlSlots as i,focusRingClasses as c,hasContent as n,metaTextClasses as o,tickRowTextClasses as d}from"../../internal/styles.js";const h={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},m={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},p=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition-property:background-color,background-image,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",c].join(" "),f=/* @__PURE__ */["cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),u=/* @__PURE__ */["cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),g=/* @__PURE__ */["cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),b=/* @__PURE__ */["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","[transition:left_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */l.forwardRef(function PlSwitch({size:l="md",color:c="primary",label:x,description:k,error:w,invalid:v,labelPlacement:j="end",disabled:N=!1,readOnly:y=!1,className:_,style:$,...P},R){const S=n(w),B=v??S,O=B?"danger":c,q=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(r.Root,{ref:R,className:[p,h[l],N?g:y?u:f].join(" "),disabled:N,readOnly:y,...P,children:a(r.Thumb,{className:`${b} ${m[l]}`})})}),z=x||k?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===j?"flex-1":""].filter(Boolean).join(" "),children:[x?a(s.Label,{className:N?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:x}):null,k?a(s.Description,{className:`${o[l]} text-(--plass-muted-fg)`,children:k}):null]}):null;return e(s.Root,{disabled:N,invalid:B,className:["inline-flex flex-col gap-1 align-top",_??""].filter(Boolean).join(" "),style:{...i(O,0,"solid"),...$},children:[a("div",{className:`flex items-start gap-2.5 ${d[l]}`,children:e(t,"start"===j?{children:[z,q]}:{children:[q,z]})}),S?a(s.Error,{match:!0,className:`${o[l]} text-(--p-accent)`,children:w}):null]})});

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

@@ -0,0 +1,2 @@
+export { PlSwitch } from './PlSwitch.js';
+export type { PlSwitchLabelPlacement, PlSwitchProps } from './PlSwitch.js';

package/dist/components/switch/index.js

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

package/dist/components/table/PlTable.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import type { PlassAlign, PlassElevation, PlassStyleProps } from '../../types.js';
+/** Which edge the text in a column lines up against. */
+export type PlTableAlign = PlassAlign;
+/**
+ * A column: its heading, its default width, and how to get a cell out of a row.
+ *
+ * This is the whole reason a table takes data rather than markup. A `<td>`
+ * written out per row can silently disagree with the `<th>` above it about how
+ * many there are or what order they come in; a column list cannot.
+ */
+export interface PlTableColumn<Row> {
+    /**
+     * Identifies the column, and — unless `render` says otherwise — names the
+     * property to read off each row.
+     */
+    key: string;
+    /** The heading. Defaults to the `key`, which is usually not what you want. */
+    header?: React.ReactNode;
+    /**
+     * The column's default width. A number is pixels; a string is any CSS length
+     * (`'30%'`, `'12rem'`).
+     *
+     * "Default" is meant: the table still balances its columns to fill the sheet,
+     * so this is a starting proportion rather than a guarantee.
+     */
+    width?: number | string;
+    /**
+     * Text alignment. Numbers usually want `end` so their digits line up in a
+     * column; everything else wants `start`.
+     * @default 'start'
+     */
+    align?: PlTableAlign;
+    /**
+     * Renders the cell. Without it the cell is `row[key]` rendered as-is, which
+     * covers strings and numbers and nothing else.
+     */
+    render?: (row: Row, index: number) => React.ReactNode;
+}
+export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default — a table is a grid set into the page
+     * rather than a panel floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** The columns, in the order they appear. */
+    columns: readonly PlTableColumn<Row>[];
+    /** The rows. */
+    rows: readonly Row[];
+    /**
+     * A stable key per row. Defaults to the row's index, which is fine for a
+     * static table and wrong for one that sorts or filters.
+     */
+    getRowKey?: (row: Row, index: number) => React.Key;
+    /** Shown above the grid, and read out as the table's accessible name. */
+    caption?: React.ReactNode;
+    /**
+     * What to show instead of rows when `rows` is empty.
+     * @default 'No data'
+     */
+    empty?: React.ReactNode;
+    /**
+     * Tints every other row. Useful on a wide table where the eye has to track
+     * across; noise on a narrow one.
+     * @default false
+     */
+    striped?: boolean;
+    /** Lights the row under the pointer. @default false */
+    hoverable?: boolean;
+    /**
+     * Pins the header while the rows scroll under it.
+     *
+     * It needs something to scroll *in*: a `position: sticky` header in a box
+     * that is as tall as its content has nowhere to stick, so this does nothing
+     * on its own. `maxHeight` is the usual answer and the two are made for each
+     * other; a table inside a pane that already caps its own height works just as
+     * well.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * A hard cap on the grid's height. A number is pixels; a string is any CSS
+     * length (`'24rem'`, `'60vh'`).
+     *
+     * Past it the rows scroll inside the sheet rather than the page growing, and
+     * the sheet keeps the size the layout around it was drawn for. It is the
+     * other half of `stickyHeader`: capped without pinning, the column names
+     * scroll away and the rest of the table is a grid of unlabelled numbers.
+     *
+     * The **grid** and not the sheet: a `caption` sits above the rows and outside
+     * what is capped, because a caption that scrolled away would take the table's
+     * accessible name with it.
+     */
+    maxHeight?: number | string;
+    /** Makes rows activatable. Also turns on the hover treatment. */
+    onRowClick?: (row: Row, index: number) => void;
+}
+/**
+ * A grid of data on a sheet of glass.
+ *
+ * The sheet is the ordinary Plass container — `variant`, `size`, `color`,
+ * `density` and `elevation` all mean what they mean everywhere else, and it is
+ * never dyed. What the table adds is the part that is genuinely tabular: the
+ * columns, the rows, and the fact that the two cannot drift apart.
+ *
+ * Not a `forwardRef`, because it is generic: a component wrapped in
+ * `React.forwardRef` loses its type parameter, and `Row` is the whole point of
+ * the API. `ref` is not offered rather than being offered with `Row` widened to
+ * `any`.
+ */
+export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;

package/dist/components/table/PlTable.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{controlTextLeadingClasses as t,focusRingInsetClasses as l,metaTextClasses as o,paddingXValues as s,radiusClasses as i,sheetRestClasses as n,surfaceSlots as d}from"../../internal/styles.js";const c={default:{xs:"0.375rem",sm:"0.5rem",md:"0.75rem",lg:"0.875rem",xl:"1rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.4375rem",lg:"0.5625rem",xl:"0.6875rem"}},p={display:"table",width:"100%",margin:0,borderCollapse:"collapse",borderSpacing:0},m=/* @__PURE__ */["[--p-row:transparent]","[transition:background-color_var(--plass-duration)_var(--plass-ease)]"].join(" "),g=/* @__PURE__ */["cursor-pointer [outline:none]",l].join(" "),v="1px solid var(--plass-divider)";export function PlTable({variant:l="glass",size:h="md",color:y="primary",density:u="default",elevation:x=0,columns:b,rows:f,getRowKey:w,caption:k,empty:j="No data",striped:N=!1,hoverable:B=!1,stickyHeader:$=!1,maxHeight:A,onRowClick:C,className:H,style:S,...T}){const z=s[u][h],D=c[u][h],I=Boolean(C),K=B||I,R=void 0!==A,_=a.useId(),E={padding:`${D} ${z}`,border:0,background:"none"},P={...E,...$?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:"1px solid var(--plass-border)"},...$?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?E:{...E,borderTop:v};return r("div",{className:["overflow-hidden",i[h],n[l],H??""].filter(Boolean).join(" "),style:{...d(y,x),...S},...T,children:[k?e("div",{id:_,className:`${o[h]} font-semibold text-(--plass-muted-fg)`,style:{...E,borderBottom:v,textAlign:"start"},children:k}):null,e("div",{className:["overflow-x-auto",R?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:R?{maxHeight:A}:void 0,children:r("table",{"aria-labelledby":k?_:void 0,className:`text-start ${t[h]} text-(--plass-fg)`,style:p,children:[e("colgroup",{children:b.map(r=>e("col",{style:void 0===r.width?void 0:{width:"number"==typeof r.width?`${r.width}px`:r.width}},r.key))}),e("thead",{children:e("tr",{children:b.map(r=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",$?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...P,textAlign:r.align??"start"},children:r.header??r.key},r.key))})}),e("tbody",{children:0===f.length?e("tr",{className:m,children:e("td",{colSpan:b.length,className:"text-(--plass-muted-fg)",style:{...E,padding:`2rem ${z}`,textAlign:"center"},children:j})}):f.map((r,a)=>e("tr",{className:[m,N&&a%2==1?"[--p-row:var(--plass-stripe)]":"",K?"hover:[--p-row:var(--p-soft)]":"",I?g:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:I?0:void 0,onClick:C?()=>C(r,a):void 0,onKeyDown:C?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),C(r,a)))}:void 0,children:b.map(t=>e("td",{style:{...bodyCellStyle(a),textAlign:t.align??"start"},children:t.render?t.render(r,a):r[t.key]},t.key))},w?w(r,a):a))})]})})]})}

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

@@ -0,0 +1,2 @@
+export { PlTable } from './PlTable.js';
+export type { PlTableAlign, PlTableColumn, PlTableProps } from './PlTable.js';

package/dist/components/table/index.js

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

package/dist/components/tabs/PlTabs.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassStyleProps, PlassVariant } from '../../types.js';
+/** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
+export type PlTabValue = string | number;
+export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * What the tab *bar* is made of, not the panels under it.
+     *
+     * - `solid` — a groove cut into the sheet with a clear pane riding in it, the
+     *   way a segmented control works. (The tile is deliberately *not* the
+     *   gradient: that is what a `PlSegmentedButton` is, and a screen with both
+     *   should be able to tell them apart.)
+     * - `glass` — the classic: a rule along the edge of the bar with the indicator
+     *   riding on it. The default.
+     * - `ghost` — the same bar with the rule taken away, for tabs inside a PlCard
+     *   that already has an edge of its own.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** The chosen tab. Use with `onValueChange` for a controlled set. */
+    value?: PlTabValue | null;
+    /** Which starts chosen, for an uncontrolled set. */
+    defaultValue?: PlTabValue | null;
+    onValueChange?: (value: PlTabValue | null) => void;
+    /**
+     * Which way the bar runs. `vertical` puts the tabs down the side and the panel
+     * beside them, and moves the arrow keys onto the other axis — which is Base
+     * UI's doing, and is what makes a vertical tab bar reachable.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Whether moving the arrow keys also chooses the tab it lands on.
+     *
+     * `false` by default. Automatic activation is only kind when every panel is
+     * already on the page; the moment one of them fetches, walking past four tabs
+     * fires four requests.
+     * @default false
+     */
+    activateOnFocus?: boolean;
+    /**
+     * Whether the arrow keys wrap from the last tab back to the first.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /** The tabs share the bar's full width, each taking an equal part of it. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+export interface PlTabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {
+    /** Identifies the tab, and picks out the panel with the same value. */
+    value: PlTabValue;
+    /** Content before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content after the label — a count, a status dot. */
+    endIcon?: React.ReactNode;
+    /** Unavailable, but still listed. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export interface PlTabPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Which tab shows this panel. */
+    value: PlTabValue;
+    /**
+     * Keeps the panel in the DOM while it is hidden. For a panel that is expensive
+     * to build, or that holds form state which should survive being switched away
+     * from.
+     * @default false
+     */
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * One tab, and one place a tab differs from a PlButton: `solid` puts the tile
+ * *behind* the tab rather than on it, so the tab needs a stacking context of its
+ * own or the indicator would cover the label it is meant to be under.
+ */
+export declare const PlTab: React.ForwardRefExoticComponent<PlTabProps & React.RefAttributes<HTMLButtonElement>>;
+/** The content behind one tab. */
+export declare const PlTabPanel: React.ForwardRefExoticComponent<PlTabPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One set of panels, one of which is shown.
+ *
+ * Base UI owns everything that makes a tab bar a tab bar rather than a row of
+ * buttons: roving focus so the whole bar is one tab stop, the arrow keys on
+ * whichever axis the bar runs, Home and End, the `tab` / `tabpanel` roles and
+ * the `aria-controls` wiring between them, and the measurement that puts the
+ * indicator under the chosen tab. What is here is the surface and the ladders.
+ *
+ * The tabs and the panels are composed rather than passed as data, unlike
+ * `PlSelect` — because a panel is a subtree, and there is no useful shape for
+ * "an array of arbitrary React trees" that is not just children.
+ */
+export declare const PlTabs: React.ForwardRefExoticComponent<PlTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tabs/PlTabs.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as l}from"@base-ui/react/tabs";import{controlHeightClasses as o,controlTextClasses as s,focusRingClasses as i,focusRingInsetClasses as n,gapClasses as r,glassClasses as c,hasContent as d,iconClasses as h,paddingXClasses as f,radiusClasses as u,surfaceSlots as p,transitionClasses as b}from"../../internal/styles.js";const v=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),m={solid:{horizontal:`${c} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${c} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},x={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},g={solid:`${c} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},w="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:i,startIcon:c,endIcon:p,disabled:m=!1,className:x,children:g,...z},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(v);return t(l.Tab,{ref:y,value:i,disabled:m,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",o[j],s[j],r[j],f[N][j],"solid"===P?u[j]:"",b,h,w,n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...z,children:[d(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null,g,d(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:o=!1,className:s,children:n,...r},c){const{size:d}=a.useContext(v);return e(l.Panel,{ref:c,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--plass-fg)",i,u[d],s??""].filter(Boolean).join(" "),...r,children:n})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:o="glass",size:s="md",color:i="primary",density:n="default",value:r,defaultValue:c,onValueChange:d,orientation:h="horizontal",activateOnFocus:f=!1,loopFocus:b=!0,fullWidth:w=!1,className:z,style:y,children:P,...j},N){const T=a.useMemo(()=>({variant:o,size:s,density:n,orientation:h,fullWidth:w}),[o,s,n,h,w]),k=[],C=[];return a.Children.forEach(P,e=>{a.isValidElement(e)&&e.type===PlTabPanel?C.push(e):null!=e&&!1!==e&&k.push(e)}),e(v.Provider,{value:T,children:t(l.Root,{ref:N,value:r,defaultValue:c,onValueChange:e=>d?.(e),orientation:h,className:["flex min-w-0","vertical"===h?"flex-row gap-4":"flex-col gap-4",z??""].filter(Boolean).join(" "),style:{...p(i,0),...y},...j,children:[t(l.List,{activateOnFocus:f,loopFocus:b,className:["relative shrink-0",m[o][h],"solid"===o?u[s]:"",w&&"horizontal"===h?"w-full":"","horizontal"===h?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[k,e(l.Indicator,{className:["pointer-events-none",x[o][h],g[o],"solid"===o?u[s]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),C]})})});