plass-ui 1.0.3 → 1.2.0

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

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

package/dist/internal/page-layout.js

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

package/dist/internal/picker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlassPickerLabels } from './calendar.js';
-import type { PlassColor, PlassElevation, PlassSize, PlassStyleProps } from '../types.js';
+import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassSize, PlassStyleProps } from '../types.js';
 /**
  * The shell all four pickers wear: a field-shaped trigger with a popup hanging
  * off it.
@@ -59,6 +59,8 @@ export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.Compo
     invalid?: boolean;
     /** The glyph before the value — a calendar or a clock. */
     startIcon?: React.ReactNode;
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassFieldClassNames;
     /** Stretches to the width of the container. */
     fullWidth?: boolean;
     /** Unavailable. */
@@ -102,7 +104,7 @@ interface InternalShellProps extends PlassPickerShellProps {
  * and the way `invalid` re-points the whole colour family at `danger` so the
  * edge, the ring and the message turn over together.
  */
-export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
+export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Field as a}from"@base-ui/react/field";import{Popover as r}from"@base-ui/react/popover";import{CloseIcon as t}from"./icons.js";import{WidthSizer as i}from"./sizer.js";import{chipRemoveClasses as n,controlHeightClasses as o,controlTextLeadingClasses as p,cx as d,disabledClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as h,glassClasses as g,iconClasses as x,metaTextClasses as b,paddingXClasses as v,radiusClasses as y,stackGapClasses as N,surfaceSlots as P,transitionClasses as j}from"./styles.js";export function popupSlots(e,l){return{...P(e,l),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const w=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,f,x].join(" ");export const pickerPopupClasses=/* @__PURE__ */[g,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="glass",size:g="md",color:x="primary",density:j="default",elevation:k=0,label:C,description:$,error:z,invalid:O,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,style:B,display:E,samples:L,empty:T,clearable:V=!1,onClear:W,open:A,onOpenChange:G,labels:H,hiddenValues:J,children:K,triggerRef:M,...Q}){const U=s.useId(),X=I??`${U}-trigger`,Y=`${U}-label`,Z=`${U}-description`,ee=`${U}-error`,le=null!=z&&!1!==z&&""!==z,se=O??le,ae=se?"danger":x,re=S||q,te=[$?Z:null,le?ee:null].filter(Boolean).join(" ")||void 0;return l(a.Root,{disabled:S,invalid:se,className:d("flex-col align-top",N[g],R?"flex w-full":"inline-flex",_),style:{...P(ae,k),...B},...Q,children:[C?e(a.Label,{id:Y,htmlFor:X,className:d(b[g],"font-semibold",S?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:C}):null,l(r.Root,{open:A,onOpenChange:e=>G(e),children:[l("span",{className:d(w,o[g],p[g],y[g],h[g],v[j][g],S?c[f]:q?u[f]:m[f]),children:[l(r.Trigger,{id:X,ref:M,disabled:S,"aria-labelledby":C?Y:void 0,"aria-describedby":te,"aria-required":D||void 0,"aria-invalid":se||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",h[g],"[outline:none]",re?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:F}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:d("w-full truncate",T?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:E}),e(i,{samples:L??[]})]})]}),!V||T||re?null:e("button",{type:"button","aria-label":H.clear,className:d(n,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),W()},children:e(t,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(r.Popup,{initialFocus:!1,className:d(pickerPopupClasses,y[g],popupPaddingClasses[g],p[g]),style:popupSlots(ae,3),children:K})})})]}),$?e(a.Description,{id:Z,className:d(b[g],"text-(--plass-muted-fg)"),children:$}):null,le?e(a.Error,{id:ee,match:!0,className:d(b[g],"text-(--p-accent)"),children:z}):null,J?.map((l,s)=>e("input",{type:"hidden",name:l.name,value:l.value},s))]})}export function PickerFooter({size:l,children:s}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",h[l]),children:s})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Field as a}from"@base-ui/react/field";import{Popover as r}from"@base-ui/react/popover";import{CloseIcon as t}from"./icons.js";import{WidthSizer as i}from"./sizer.js";import{chipRemoveClasses as n,controlHeightClasses as o,controlTextLeadingClasses as p,cx as d,disabledClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as h,glassClasses as g,iconClasses as x,metaTextClasses as b,paddingXClasses as v,radiusClasses as y,stackGapClasses as N,surfaceSlots as P,transitionClasses as j}from"./styles.js";export function popupSlots(e,l){return{...P(e,l),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const w=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,f,x].join(" ");export const pickerPopupClasses=/* @__PURE__ */[g,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="glass",size:g="md",color:x="primary",density:j="default",elevation:k=0,label:C,description:$,error:z,invalid:O,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,classNames:B,style:E,display:L,samples:T,empty:V,clearable:W=!1,onClear:A,open:G,onOpenChange:H,labels:J,hiddenValues:K,children:M,triggerRef:Q,...U}){const X=s.useId(),Y=I??`${X}-trigger`,Z=`${X}-label`,ee=`${X}-description`,le=`${X}-error`,se=null!=z&&!1!==z&&""!==z,ae=O??se,re=ae?"danger":x,te=S||q,ie=[$?ee:null,se?le:null].filter(Boolean).join(" ")||void 0;return l(a.Root,{disabled:S,invalid:ae,className:d("flex-col align-top",N[g],R?"flex w-full":"inline-flex",_),style:{...P(re,k),...E},...U,children:[C?e(a.Label,{id:Z,htmlFor:Y,className:d(b[g],"font-semibold",S?"text-(--plass-muted-fg)":"text-(--plass-fg)",B?.label),children:C}):null,l(r.Root,{open:G,onOpenChange:e=>H(e),children:[l("span",{className:d(w,o[g],p[g],y[g],h[g],v[j][g],S?c[f]:q?u[f]:m[f],B?.control),children:[l(r.Trigger,{id:Y,ref:Q,disabled:S,"aria-labelledby":C?Z:void 0,"aria-describedby":ie,"aria-required":D||void 0,"aria-invalid":ae||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",h[g],"[outline:none]",te?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:F}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:d("w-full truncate",V?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:L}),e(i,{samples:T??[]})]})]}),!W||V||te?null:e("button",{type:"button","aria-label":J.clear,className:d(n,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),A()},children:e(t,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(r.Popup,{initialFocus:!1,className:d(pickerPopupClasses,y[g],popupPaddingClasses[g],p[g]),style:popupSlots(re,3),children:M})})})]}),$?e(a.Description,{id:ee,className:d(b[g],"text-(--plass-muted-fg)",B?.description),children:$}):null,se?e(a.Error,{id:le,match:!0,className:d(b[g],"text-(--p-accent)",B?.error),children:z}):null,K?.map((l,s)=>e("input",{type:"hidden",name:l.name,value:l.value},s))]})}export function PickerFooter({size:l,children:s}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",h[l]),children:s})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}

package/dist/internal/search.d.ts

@@ -0,0 +1,31 @@
+/**
+ * What "this matches what I typed" means, once.
+ *
+ * Two components let a reader type at a list of their own — `PlTransfer` and
+ * `PlCommandPalette` — and a `matches` in each of them is two answers to one
+ * question. They would disagree, and not because anybody chose: a reader who
+ * has learned what the filter in one part of a product does has learned the
+ * wrong thing about the rest of it.
+ *
+ * It is also where the fixed cost of typing lives. `String.prototype.normalize`
+ * is the expensive call here by a wide margin, so the shape of this is folding
+ * a haystack **once** and a needle **once** rather than folding both on every
+ * comparison — which is what a `matches(item, query)` signature quietly asks
+ * for, and what would put a `normalize` on every row on every keystroke.
+ */
+/**
+ * A value as something a query can be matched against.
+ *
+ * Case-folded and stripped of combining marks, so `jose` finds `José` and
+ * `SEOUL` finds `Seoul`. `NFD` splits an accented letter into the letter and
+ * its accent and the range then deletes the accent; a search field is the one
+ * place where losing that distinction is the point.
+ *
+ * Anything that is not a primitive folds to the empty string. What a reader
+ * sees came out of the caller's own rendering, and guessing at the text inside
+ * a React element is how a list ends up not finding a row that is on the
+ * screen — a row that wants to be searchable says so in a string.
+ */
+export declare function searchText(value: unknown): string;
+/** Every string a row can be found by, folded once and joined into one haystack. */
+export declare function searchHaystack(values: readonly unknown[]): string;

package/dist/internal/search.js

@@ -0,0 +1 @@
+const e=/[\u0300-\u036f]/g;export function searchText(t){return null==t||"object"==typeof t?"":String(t).normalize("NFD").replace(e,"").toLowerCase()}export function searchHaystack(e){return e.map(searchText).join("\0")}

package/dist/internal/styles.d.ts

@@ -365,6 +365,15 @@ export declare const sheetRestClasses: Record<PlassVariant, string>;
 export declare const fieldRestClasses: Record<PlassVariant, string>;
 /** The same three, held still. */
 export declare const fieldReadOnlyClasses: Record<PlassVariant, string>;
+/**
+ * A length a caller may have written as a bare number.
+ *
+ * Turns `2` into `2px` and leaves `'0.5rem'` alone, which is the one conversion
+ * every prop that accepts a CSS length needs — a divider's thickness, a page
+ * layout's height, a sidebar's width. Here rather than in each of them because
+ * three copies of two lines are three copies that can disagree about `0`.
+ */
+export declare function toLength(value: number | string | undefined): string | undefined;
 /** `false`, `null`, `undefined` and `''` all mean "this slot is not filled". */
 export declare function hasContent(node: React.ReactNode): boolean;
 /** Joins class name fragments, dropping the empty ones. */

package/dist/internal/styles.js

@@ -1 +1 @@
-export const radiusClasses={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)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,a){const r="solid"===a;return{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-tint":`var(--plass-${s}-tint)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-glow":r?"var(--plass-glow-on-fill)":`var(--plass-${s}-soft)`,"--p-flash":r?"var(--plass-flash-on-fill)":`var(--plass-${s}-soft-hover)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`,"--p-lift":"0 6px 16px -4px var(--p-tint)","--p-lift-hover":"0 10px 24px -6px var(--p-tint)","--p-lift-press":"0 2px 6px -2px var(--p-tint)"}}export function surfaceSlots(s,e){return{"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`}}export const disabledClasses={solid:/* @__PURE__ */["cursor-not-allowed text-(--p-on-solid) [background-image:var(--p-fill)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),glass:/* @__PURE__ */[glassClasses,"cursor-not-allowed border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),ghost:"cursor-not-allowed bg-transparent text-(--p-accent) opacity-50 saturate-[0.35]"};export const readOnlyFilterClasses="saturate-[0.55]";export const sheetRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[glassClasses,"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-transparent"};export const fieldRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-well)]","hover:bg-(--plass-glass-hover)","focus-within:bg-(--plass-glass-press)"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]","hover:bg-(--plass-glass-press) hover:[border-color:var(--p-line)]","focus-within:bg-(--plass-glass-press) focus-within:[border-color:var(--p-line-hover)]"].join(" "),ghost:/* @__PURE__ */["text-(--plass-fg) bg-transparent","hover:bg-(--p-soft)","focus-within:bg-(--p-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-well)] saturate-[0.55]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)] saturate-[0.55]"].join(" "),ghost:"text-(--plass-fg) bg-transparent saturate-[0.55]"};export function hasContent(s){return null!=s&&!1!==s&&""!==s}export function cx(...s){return s.filter(Boolean).join(" ")}
+export const radiusClasses={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)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,a){const r="solid"===a;return{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-tint":`var(--plass-${s}-tint)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-glow":r?"var(--plass-glow-on-fill)":`var(--plass-${s}-soft)`,"--p-flash":r?"var(--plass-flash-on-fill)":`var(--plass-${s}-soft-hover)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`,"--p-lift":"0 6px 16px -4px var(--p-tint)","--p-lift-hover":"0 10px 24px -6px var(--p-tint)","--p-lift-press":"0 2px 6px -2px var(--p-tint)"}}export function surfaceSlots(s,e){return{"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`}}export const disabledClasses={solid:/* @__PURE__ */["cursor-not-allowed text-(--p-on-solid) [background-image:var(--p-fill)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),glass:/* @__PURE__ */[glassClasses,"cursor-not-allowed border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),ghost:"cursor-not-allowed bg-transparent text-(--p-accent) opacity-50 saturate-[0.35]"};export const readOnlyFilterClasses="saturate-[0.55]";export const sheetRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[glassClasses,"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-transparent"};export const fieldRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-well)]","hover:bg-(--plass-glass-hover)","focus-within:bg-(--plass-glass-press)"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]","hover:bg-(--plass-glass-press) hover:[border-color:var(--p-line)]","focus-within:bg-(--plass-glass-press) focus-within:[border-color:var(--p-line-hover)]"].join(" "),ghost:/* @__PURE__ */["text-(--plass-fg) bg-transparent","hover:bg-(--p-soft)","focus-within:bg-(--p-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-well)] saturate-[0.55]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)] saturate-[0.55]"].join(" "),ghost:"text-(--plass-fg) bg-transparent saturate-[0.55]"};export function toLength(s){return"number"==typeof s?`${s}px`:s}export function hasContent(s){return null!=s&&!1!==s&&""!==s}export function cx(...s){return s.filter(Boolean).join(" ")}