plass-ui 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,165 @@
+# Plass UI for React
+
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/plass-ui/blob/main/LICENSE) [![npm latest package](https://img.shields.io/npm/v/plass-ui/latest.svg)](https://www.npmjs.com/package/plass-ui) [![npm downloads](https://img.shields.io/npm/dm/plass-ui.svg)](https://www.npmjs.com/package/plass-ui)
+
+### 📘 [**plass.cdget.com**](https://plass.cdget.com)
+
+Live previews and full props for every component — pick **React** in the sidebar. This README is just the quick start.
+
+---
+
+**Plass UI is a component library with a material rather than a theme.** Every surface answers one question — is this pressed, or does it hold something? — and the answer decides everything else.
+
+A thing that is pressed is **tinted glass**: a gradient that sweeps between two ends of its colour family at 135°, a drop shadow tinted with that family, and a bloom of light that follows the pointer across it. A thing that holds something is **clear glass**: translucent, heavily blurred, a white hairline round it, and never dyed. There is no third answer.
+
+This is the React half of that language. The [Flutter package](https://pub.dev/packages/plass_ui) is the other one, and the two are the same numbers.
+
+- **Two materials, one language** — `solid`, `glass`, `ghost`. Not `filled`, `outlined`, `text`.
+- **Light instead of relief** — no bevels and no highlights. The gradient carries the form, and a soft glow follows your pointer across the control.
+- **One shared vocabulary** — `size`, `color`, `variant`, `density`, `elevation`. An `md` is 40px on every control; `primary` is the same family everywhere, and the same family it is in Flutter.
+- **Accessible by construction** — real roles, labels, focus management and keyboard support, not `div`s with click handlers.
+- **Contrast that was checked** — every gradient stop clears 4.5:1 against its own label, the lightest corner included.
+- **Dark mode with no work** — follows `prefers-color-scheme`, and can be forced either way per subtree.
+- **ESM only**, TypeScript declarations included, tree-shakeable, with an entry point per component.
+- **One runtime dependency**, [Base UI](https://base-ui.com), which is where the interaction and accessibility behaviour comes from.
+
+> **Both packages ship the same library.** Every component listed below exists in each, under the same prop vocabulary and the same tokens. They version independently, so this package's number and the Flutter one's will not always agree.
+
+## Install
+
+```bash
+npm install plass-ui
+```
+
+`react` and `react-dom` are peer dependencies — React 18 or 19. Node.js 20.19 or later.
+
+### Setup
+
+Add one line to your app's CSS entry point:
+
+```css
+@import 'plass-ui/styles.css';
+```
+
+`plass-ui/styles.css` is finished CSS — the design tokens, the compiled rules for every utility class the components use, and a small reset whose every rule is specificity 0 so your own styles always win. [Tailwind CSS](https://tailwindcss.com) v4 builds this package; it does not have to be installed in yours.
+
+If your project already runs Tailwind v4, import the token sheet instead:
+
+```css
+@import 'tailwindcss';
+@import 'plass-ui/tailwind.css';
+```
+
+`plass-ui/tailwind.css` registers all 74 components with Tailwind, because Tailwind scans files rather than imports — nothing in a build connects `import { PlButton }` to the classes `PlSelect.js` spells out. A project that uses a handful of components can register the handful instead:
+
+```css
+@import 'tailwindcss';
+@import 'plass-ui/css/base.css'; /* tokens + what every component shares */
+@import 'plass-ui/css/button.css';
+@import 'plass-ui/css/text-field.css';
+```
+
+Still one Tailwind pass, so the utilities keep Tailwind's own order — and about 5 kB gzipped smaller for a small set of components. There is one manifest per component, named after its folder in `dist/components`.
+
+### The page under the components
+
+Plass draws controls and sheets. It does not paint your `<body>` — but a sheet of glass over a flat white page has nothing to be in front of, and every translucent surface in the library will read as opaque. Two tokens exist for exactly this:
+
+```css
+body {
+  background: linear-gradient(160deg, var(--plass-bg-from) 0%, var(--plass-bg-to) 100%);
+  background-attachment: fixed;
+  color: var(--plass-fg);
+}
+```
+
+Any backdrop with structure in it works. What does not work is nothing at all.
+
+## Use
+
+```tsx
+import { PlButton, PlTextField } from 'plass-ui';
+
+export default function SignIn() {
+  return (
+    <form onSubmit={submit}>
+      <PlTextField label="Email" type="email" fullWidth />
+      <PlButton type="submit">Sign in</PlButton>
+      <PlButton variant="glass" color="secondary">
+        Cancel
+      </PlButton>
+    </form>
+  );
+}
+```
+
+### One entry point per component
+
+Every component also has an entry point of its own, for a build that cannot tree-shake a barrel — or for a server render, where the barrel loads all 74 components and their dependencies before the first one is used:
+
+```tsx
+import { PlButton } from 'plass-ui/button';
+```
+
+Same component, same types. The barrel is the one to reach for by default; this is the escape hatch when a bundler, a test runner or Node's own loader is the thing paying for it.
+
+### Next.js and server components
+
+Every component carries `'use client'`, so a Server Component can import one directly and there is nothing to configure — no `transpilePackages`, no `next.config` entry, no provider. What the directive cannot do is carry a function across the server boundary: a file that passes `onClick`, `onValueChange` or `render` needs its own `'use client'`, which is React's rule for every client component rather than this library's. Outside a server-component graph the directive is inert.
+
+### Dark mode
+
+Follows `prefers-color-scheme` with no configuration. To force it either way, put `.dark` / `.light` — or `[data-theme='dark']` / `[data-theme='light']` — on any ancestor, `<html>` included.
+
+One thing does **not** change with the theme, and it is deliberate: the colour of a key. What changes is the sheet it rests on.
+
+## Components
+
+Every component is exported under a `Pl` prefix — `Button`, `Card` and `Table` are the most-taken identifiers in the ecosystem, and a consumer should not have to alias ours on import.
+
+### Display
+
+`PlAvatar` · `PlBadge` · `PlBlockquote` · `PlBreadcrumb` · `PlChip` · `PlDivider` · `PlHighlight` · `PlHotKeys` · `PlIcon` · `PlList` · `PlTable` · `PlTextLink` · `PlTimeline` · `PlTypography`
+
+### Feedback
+
+`PlAlert` · `PlDrawer` · `PlModal` · `PlOverlay` · `PlPopover` · `PlProgressBox` · `PlProgressCircular` · `PlProgressLinear` · `PlSkeleton` · `PlToast` · `PlTooltip`
+
+### Inputs
+
+`PlButton` · `PlButtonGroup` · `PlCheckbox` · `PlCombobox` · `PlDatePicker` · `PlDateRangePicker` · `PlDateTimePicker` · `PlFilePicker` · `PlIconButton` · `PlNumberField` · `PlOtpField` · `PlPagination` · `PlRadioGroup` · `PlRating` · `PlSegmentedButton` · `PlSelect` · `PlSlider` · `PlSwitch` · `PlTextField` · `PlTimePicker`
+
+### Layout
+
+`PlAspectRatio` · `PlContainer` · `PlGrid` · `PlPanes` · `PlScrollZone`
+
+### Navigation
+
+`PlBottomNavigation` · `PlContextMenu` · `PlFloatingBottomNavigation` · `PlMenu`
+
+### Surfaces
+
+`PlAccordion` · `PlBox` · `PlCard` · `PlCarousel` · `PlChatBubble` · `PlCollapsible` · `PlPill` · `PlSpoiler` · `PlTabs` · `PlToolbar`
+
+### Transitions
+
+`PlAnimateAppear` · `PlAnimateBlink` · `PlAnimateFade` · `PlAnimateGrow` · `PlAnimateHeadline` · `PlAnimateLighting` · `PlAnimateMarquee` · `PlAnimateRotate` · `PlAnimateSlide` · `PlAnimateTyping` · `PlAnimateZoom`
+
+## Development
+
+This package is installed and run from its own folder; there is no install at the repository root.
+
+```bash
+npm install
+npm test              # Vitest, single run (headless Chromium)
+npm run typecheck     # tsc --noEmit over both TS projects
+npm run build         # tsc + terser + build-styles → dist/
+npm run lint          # ESLint
+npm run size          # what the package costs, packed and installed
+```
+
+The documentation site lives at the repository root, in [`docs/`](https://github.com/jooy2/plass-ui/tree/main/docs), and renders these components from `src/` through a Vite alias — so `cd docs && npm run dev` is the develop-and-eyeball loop and there is no separate demo app. [CONTRIBUTING.md](https://github.com/jooy2/plass-ui/blob/main/CONTRIBUTING.md) has the rest.
+
+## License
+
+MIT © [CDGet](https://cdget.com)

package/dist/components/accordion/PlAccordion.js

@@ -1,131 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Accordion as BaseUIAccordion } from '@base-ui/react/accordion';
-import { ChevronIcon } from '../../internal/icons.js';
-import { focusRingClasses, focusRingInsetClasses, gapClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetTitleClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-const AccordionContext = /* @__PURE__ */ React.createContext({
-    size: 'md',
-    density: 'default',
-    dividers: true
-});
-/**
- * A section sits one step down the radius ladder from the sheet it is inside,
- * so a hovered header's corner is visibly inside the pane's own corner rather
- * than fighting it.
- */
-const itemRadiusClasses = {
-    xs: radiusClasses.xs,
-    sm: radiusClasses.xs,
-    md: radiusClasses.sm,
-    lg: radiusClasses.sm,
-    xl: radiusClasses.md
-};
-/**
- * The rule between two sections, written as `>div+div` rather than as a class
- * on each item so it holds however the caller composed them — through a
- * `.map()`, through fragments, through a component of their own that renders an
- * item.
- */
-const dividerClasses = '[&>div+div]:border-t [&>div+div]:[border-color:var(--plass-divider)]';
-/**
- * The space between a header and the body it opened.
- *
- * The header's own padding does **not** pay for it, which is what this used to
- * assume. An open header is a tinted band with its own bottom edge; the body
- * begins at that edge, and the first line of text lands against it with only
- * half a leading in between — the title and the paragraph explaining it read as
- * one run of text broken by a colour change. What the header's padding buys is
- * room around the *title*, and the body has to buy its own.
- *
- * It is a little under the padding below, because a paragraph's first line has
- * the leading above it and its last has nothing under, so equal numbers on the
- * two sides look bottom-heavy.
- */
-const panelPaddingTopClasses = {
-    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' }
-};
-/** And the space under it, on the same two tracks. */
-const panelPaddingBottomClasses = {
-    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' }
-};
-/**
- * A stack of sections, one of which is open.
- *
- * Base UI owns the parts that are genuinely hard: the `button` / `region`
- * pairing and the `aria-controls` / `aria-expanded` wiring between them, the
- * open set, and measuring the panel so it has a height to animate from.
- *
- * What is here is the sheet, the ladders and the one motion decision. 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. An accordion whose sections appear
- * instantly is a page that jumps, which is the failure the rule exists to
- * prevent.
- */
-export const PlAccordion = /* @__PURE__ */ React.forwardRef(function PlAccordion({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, multiple = false, value, defaultValue, onValueChange, dividers = true, disabled = false, hiddenUntilFound = false, keepMounted = false, className, style, children, ...props }, ref) {
-    const context = React.useMemo(() => ({ size, density, dividers }), [size, density, dividers]);
-    const classNames = [
-        'flex flex-col',
-        radiusClasses[size],
-        sheetRestClasses[variant],
-        transitionClasses,
-        // Scored, the rules have to reach both edges, so the sheet keeps no padding
-        // of its own and the corners clip whatever runs into them. Unscored, the
-        // sections are tiles and the sheet keeps a hair of padding so a hovered
-        // header does not run into the edge.
-        dividers ? `overflow-hidden ${dividerClasses}` : 'p-1',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx(AccordionContext.Provider, { value: context, children: _jsx(BaseUIAccordion.Root, { ref: ref, multiple: multiple, value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), disabled: disabled, hiddenUntilFound: hiddenUntilFound, keepMounted: keepMounted, className: classNames, style: { ...surfaceSlots(color, elevation), ...style }, ...props, children: children }) }));
-});
-/**
- * One section.
- *
- * The header is always a row; what is inside it is a real `<button>` covering
- * the title and the chevron, with `action` sitting outside that button as a
- * control of its own.
- */
-export const PlAccordionItem = /* @__PURE__ */ React.forwardRef(function PlAccordionItem({ value, title, subtitle, startIcon, action, disabled = false, className, children, ...props }, ref) {
-    const { size, density, dividers } = React.useContext(AccordionContext);
-    const padX = sheetPaddingXClasses[density][size];
-    const padY = sheetPaddingYClasses[density][size];
-    return (_jsxs(BaseUIAccordion.Item, { ref: ref, value: value, disabled: disabled, className: ['flex flex-col', className ?? ''].filter(Boolean).join(' '), ...props, children: [_jsxs(BaseUIAccordion.Header, { className: "m-0 flex w-full items-center [font:inherit]", children: [_jsxs(BaseUIAccordion.Trigger, { className: [
-                            'flex min-w-0 flex-1 cursor-pointer items-center text-start',
-                            padX,
-                            padY,
-                            gapClasses[size],
-                            transitionClasses,
-                            iconClasses,
-                            // An outline on a clipped sheet would be cut off at the first and
-                            // last section, so it is drawn inside the header instead. Two
-                            // whole classes rather than one plus an override: a variant that
-                            // only moves the offset resolves against the base by its position
-                            // in the generated stylesheet, which is not something to bet a
-                            // focus ring on.
-                            dividers ? focusRingInsetClasses : `${focusRingClasses} ${itemRadiusClasses[size]}`,
-                            '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'
-                        ]
-                            .filter(Boolean)
-                            .join(' '), children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [hasContent(title) ? (_jsx("span", { className: `plass-title truncate font-semibold ${sheetTitleClasses[size]}`, children: title })) : null, hasContent(subtitle) ? (_jsx("span", { className: `truncate text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: subtitle })) : null] }), _jsx("span", { className: [
-                                    'flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)',
-                                    '[transition:rotate_var(--plass-duration)_var(--plass-ease)]',
-                                    'data-[panel-open]:rotate-180'
-                                ].join(' '), children: _jsx(ChevronIcon, {}) })] }), hasContent(action) ? (_jsx("span", { className: `flex shrink-0 items-center ${padX}`, children: action })) : null] }), _jsx(BaseUIAccordion.Panel, { className: [
-                    'h-(--accordion-panel-height) overflow-hidden',
-                    '[transition:height_var(--plass-duration-slow)_var(--plass-ease)]',
-                    'data-[starting-style]:h-0 data-[ending-style]:h-0'
-                ].join(' '), children: _jsx("div", { className: [
-                        'text-(--plass-muted-fg)',
-                        sheetBodyClasses[size],
-                        padX,
-                        panelPaddingTopClasses[density][size],
-                        panelPaddingBottomClasses[density][size]
-                    ].join(' '), children: children }) })] }));
-});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Accordion as s}from"@base-ui/react/accordion";import{ChevronIcon as a}from"../../internal/icons.js";import{focusRingClasses as n,focusRingInsetClasses as i,gapClasses as r,hasContent as d,iconClasses as o,metaTextClasses as c,radiusClasses as p,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as u,sheetPaddingYClasses as x,sheetRestClasses as h,sheetTitleClasses as v,surfaceSlots as b,transitionClasses as g}from"../../internal/styles.js";const N=/* @__PURE__ */l.createContext({size:"md",density:"default",dividers:!0}),j={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md},y={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 PlAccordion=/* @__PURE__ */l.forwardRef(function PlAccordion({variant:t="glass",size:a="md",color:n="primary",density:i="default",elevation:r=0,multiple:d=!1,value:o,defaultValue:c,onValueChange:m,dividers:f=!0,disabled:u=!1,hiddenUntilFound:x=!1,keepMounted:v=!1,className:j,style:y,children:w,...P},$){const k=l.useMemo(()=>({size:a,density:i,dividers:f}),[a,i,f]),A=["flex flex-col",p[a],h[t],g,f?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--plass-divider)]":"p-1",j??""].filter(Boolean).join(" ");return e(N.Provider,{value:k,children:e(s.Root,{ref:$,multiple:d,value:o,defaultValue:c,onValueChange:e=>m?.(e),disabled:u,hiddenUntilFound:x,keepMounted:v,className:A,style:{...b(n,r),...y},...P,children:w})})});export const PlAccordionItem=/* @__PURE__ */l.forwardRef(function PlAccordionItem({value:p,title:h,subtitle:b,startIcon:P,action:$,disabled:k=!1,className:A,children:z,...C},I){const{size:V,density:_,dividers:B}=l.useContext(N),M=u[_][V],R=x[_][V];return t(s.Item,{ref:I,value:p,disabled:k,className:["flex flex-col",A??""].filter(Boolean).join(" "),...C,children:[t(s.Header,{className:"m-0 flex w-full items-center [font:inherit]",children:[t(s.Trigger,{className:["flex min-w-0 flex-1 cursor-pointer items-center text-start",M,R,r[V],g,o,B?i:`${n} ${j[V]}`,"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"].filter(Boolean).join(" "),children:[d(P)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:P}):null,t("span",{className:`flex min-w-0 flex-1 flex-col ${f[V]}`,children:[d(h)?e("span",{className:`plass-title truncate font-semibold ${v[V]}`,children:h}):null,d(b)?e("span",{className:`truncate text-(--plass-muted-fg) ${c[V]}`,children:b}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(a,{})})]}),d($)?e("span",{className:`flex shrink-0 items-center ${M}`,children:$}):null]}),e(s.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--plass-muted-fg)",m[V],M,y[_][V],w[_][V]].join(" "),children:z})})]})});

package/dist/components/accordion/index.js

@@ -1 +1 @@
-export { PlAccordion, PlAccordionItem } from './PlAccordion.js';
+export{PlAccordion,PlAccordionItem}from"./PlAccordion.js";

package/dist/components/alert/PlAlert.js

@@ -1,109 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { CloseIcon, severityIcon } from '../../internal/icons.js';
-import { controlSlots, focusRingClasses, glassClasses, hasContent, iconClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * An alert **is** the thing being coloured — it is a notice about a severity,
- * not a container holding someone else's content — so unlike a PlCard its sheet
- * takes the tint. The same three materials they mean everywhere.
- *
- * `solid` carries no gloss line, exactly as a filled PlButton does not: the
- * gradient is the form, and a white edge over the top of it reads as lacquer.
- */
-const restClasses = {
-    solid: /* @__PURE__ */ [
-        'text-(--p-on-solid) [background-image:var(--p-fill)]',
-        '[box-shadow:var(--p-elev),var(--p-lift)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--plass-fg) bg-(--plass-glass)',
-        '[border-color:var(--p-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    // No sheet and no edge, only the tint. For an alert set among form fields,
-    // where a second bordered rectangle is one rectangle too many.
-    ghost: 'text-(--plass-fg) bg-(--p-soft)'
-};
-/**
- * On `solid` the surface already carries the family, so the glyph and the title
- * ride on it as one ink. On the other two the surface is only faintly tinted:
- * the message has to stay ordinary reading text, and the accent is spent on the
- * two things that say which kind of alert this is.
- */
-const accentClasses = {
-    solid: '',
-    glass: 'text-(--p-accent)',
-    ghost: 'text-(--p-accent)'
-};
-/**
- * The detail line under a title.
- *
- * On a tinted surface it drops to the muted ink, the same step a field's
- * description takes. On a filled one there is no muted ink to drop to — the
- * page's grey is invisible on a gradient — so the ink stays and the title does
- * the separating with its weight.
- */
-const detailClasses = {
-    solid: '',
-    glass: 'text-(--plass-muted-fg)',
-    ghost: 'text-(--plass-muted-fg)'
-};
-/**
- * Which live region an alert belongs in.
- *
- * `alert` interrupts whatever a screen reader is in the middle of saying;
- * `status` waits for a pause. "This failed" is worth interrupting for and
- * "saved" is not, so the severity decides — and a caller who knows better still
- * wins, because their props spread after this.
- */
-const rolesFor = {
-    primary: 'status',
-    secondary: 'status',
-    info: 'status',
-    success: 'status',
-    warning: 'alert',
-    danger: 'alert'
-};
-/**
- * A message about something that happened, set into the page it is about.
- *
- * The three shapes people mean by "an alert" are one component with different
- * slots filled rather than three components: a bare line
- * (`<PlAlert icon={false}>`), a line with a glyph (the default), and a glyph
- * with a headline and the detail under it (`title` plus `children`). Nothing
- * about the surface changes between them — only how much of it is used.
- *
- * There is no Base UI primitive under this, and there should not be: an alert
- * has no interaction to delegate. It is a live region with a layout, and the
- * only interactive parts it can grow — the action and the dismiss button — are
- * real buttons that the caller either passes in or gets by passing `onClose`.
- */
-export const PlAlert = /* @__PURE__ */ React.forwardRef(function PlAlert({ variant = 'glass', size = 'md', 
-// An alert with no severity named is an informational one. This is the one
-// place `primary` would be a lie: it is not the primary anything, it is a
-// note, and the palette already has the word for that.
-color = 'info', density = 'default', elevation = 0, title, icon, action, onClose, closeLabel = 'Dismiss', className, style, children, ...props }, ref) {
-    const glyph = icon === undefined ? severityIcon(color) : icon;
-    const accent = accentClasses[variant];
-    const titled = hasContent(title);
-    return (_jsxs("div", { ref: ref, role: rolesFor[color], className: [
-            'flex w-full items-start',
-            sheetPaddingXClasses[density][size],
-            sheetPaddingYClasses[density][size],
-            radiusClasses[size],
-            sheetSectionGapClasses[size],
-            sheetBodyClasses[size],
-            transitionClasses,
-            restClasses[variant],
-            iconClasses,
-            className ?? ''
-        ]
-            .filter(Boolean)
-            .join(' '), style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [hasContent(glyph) ? (_jsx("span", { className: `flex h-[1lh] shrink-0 items-center ${accent}`, children: glyph })) : null, _jsxs("div", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [titled ? (_jsx("div", { className: `plass-title font-semibold ${sheetTitleClasses[size]} ${accent}`, children: title })) : null, hasContent(children) ? (_jsx("div", { className: titled ? detailClasses[variant] : undefined, children: children })) : null] }), hasContent(action) ? (_jsx("div", { className: "flex h-[1lh] shrink-0 items-center", children: action })) : null, onClose ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx("button", { type: "button", "aria-label": closeLabel, onClick: onClose, className: [
-                        'inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full',
-                        'opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-                        'hover:opacity-100 focus-visible:opacity-100',
-                        focusRingClasses
-                    ].join(' '), children: _jsx(CloseIcon, {}) }) })) : null] }));
-});
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{CloseIcon as t,severityIcon as a}from"../../internal/icons.js";import{controlSlots as i,focusRingClasses as r,glassClasses as n,hasContent as o,iconClasses as c,radiusClasses as d,sheetBodyClasses as f,sheetHeaderGapClasses as m,sheetPaddingXClasses as p,sheetPaddingYClasses as u,sheetSectionGapClasses as h,sheetTitleClasses as v,transitionClasses as x}from"../../internal/styles.js";const g={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[n,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--p-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft)"},b={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"},y={solid:"",glass:"text-(--plass-muted-fg)",ghost:"text-(--plass-muted-fg)"},j={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const PlAlert=/* @__PURE__ */l.forwardRef(function PlAlert({variant:l="glass",size:n="md",color:N="info",density:w="default",elevation:k=0,title:$,icon:z,action:A,onClose:C,closeLabel:P="Dismiss",className:_,style:B,children:D,...L},R){const q=void 0===z?a(N):z,E=b[l],F=o($);return e("div",{ref:R,role:j[N],className:["flex w-full items-start",p[w][n],u[w][n],d[n],h[n],f[n],x,g[l],c,_??""].filter(Boolean).join(" "),style:{...i(N,k,l),...B},...L,children:[o(q)?s("span",{className:`flex h-[1lh] shrink-0 items-center ${E}`,children:q}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${m[n]}`,children:[F?s("div",{className:`plass-title font-semibold ${v[n]} ${E}`,children:$}):null,o(D)?s("div",{className:F?y[l]:void 0,children:D}):null]}),o(A)?s("div",{className:"flex h-[1lh] shrink-0 items-center",children:A}):null,C?s("span",{className:"flex h-[1lh] shrink-0 items-center",children:s("button",{type:"button","aria-label":P,onClick:C,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",r].join(" "),children:s(t,{})})}):null]})});

package/dist/components/alert/index.js

@@ -1 +1 @@
-export { PlAlert } from './PlAlert.js';
+export{PlAlert}from"./PlAlert.js";

package/dist/components/animate-appear/PlAnimateAppear.js

@@ -1,71 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { animBaseClass, animationClasses, animationSlots, isInfinite, slideOffsets, useAnimationRun } from '../../internal/animate.js';
-import { cx } from '../../internal/styles.js';
-/**
- * A list of things settling into place one after another.
- *
- * Each child takes the same short drift and fade, held back by its position — so
- * the effect belongs to the *set* rather than to any one item, and a reader's
- * eye is walked down the list in the order it should be read.
- *
- * The animation is written onto the children themselves rather than onto
- * wrappers around them. A row of `<li>`s stays a row of `<li>`s, a grid's cells
- * stay its direct children, and nothing about the layout changes because the
- * list is being animated. Only a bare string has no element to write onto, so
- * that one is wrapped in a `<span>`.
- *
- * The stagger is per *child*, which means what you pass matters: eight children
- * are eight steps, and one child holding eight things is one step. That is also
- * how to opt part of a list out — group it.
- */
-export const PlAnimateAppear = /* @__PURE__ */ React.forwardRef(function PlAnimateAppear({ duration = 380, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, stagger = 70, from = 'bottom', distance = '0.75rem', fade = true, reverse = false, render, className, style, children, ...props }, ref) {
-    const run = useAnimationRun({
-        trigger,
-        play,
-        once,
-        threshold,
-        paused,
-        infinite: isInfinite(repeat)
-    });
-    const { x, y } = slideOffsets(from, distance);
-    const items = React.Children.toArray(children);
-    const itemClassName = `${animBaseClass} ${animationClasses.slide}`;
-    const animated = items.map((child, index) => {
-        const step = reverse ? items.length - 1 - index : index;
-        const slots = animationSlots({
-            duration,
-            delay: delay + step * stagger,
-            easing,
-            repeat,
-            alternate,
-            x,
-            y,
-            opacity: fade ? 0 : 1
-        });
-        if (!React.isValidElement(child)) {
-            return (_jsx("span", { className: itemClassName, style: slots, children: child }, index));
-        }
-        const childProps = child.props;
-        return React.cloneElement(child, {
-            className: cx(itemClassName, childProps.className),
-            style: { ...slots, ...childProps.style }
-        });
-    });
-    return useRender({
-        render,
-        ref: [ref, run.ref],
-        props: {
-            ...props,
-            className,
-            // Only the play state lives on the root. Every other slot is per child,
-            // because the delay is what the whole effect is made of.
-            style: { '--p-anim-state': run.state, ...style },
-            ...run.handlers,
-            'data-plass-animation': 'appear',
-            'data-state': run.state,
-            children: animated
-        }
-    });
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{animBaseClass as r,animationClasses as s,animationSlots as n,isInfinite as i,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{cx as m}from"../../internal/styles.js";export const PlAnimateAppear=/* @__PURE__ */a.forwardRef(function PlAnimateAppear({duration:p=380,delay:d=0,easing:c,repeat:f=1,alternate:y,paused:u,trigger:h="mount",play:g,once:x=!0,threshold:A=.2,stagger:N=70,from:j="bottom",distance:b="0.75rem",fade:E=!0,reverse:P=!1,render:$,className:v,style:w,children:C,...R},V){const k=o({trigger:h,play:g,once:x,threshold:A,paused:u,infinite:i(f)}),{x:q,y:z}=l(j,b),B=a.Children.toArray(C),D=`${r} ${s.slide}`,F=B.map((t,r)=>{const s=P?B.length-1-r:r,i=n({duration:p,delay:d+s*N,easing:c,repeat:f,alternate:y,x:q,y:z,opacity:E?0:1});if(!a.isValidElement(t))return e("span",{className:D,style:i,children:t},r);const l=t.props;return a.cloneElement(t,{className:m(D,l.className),style:{...i,...l.style}})});return t({render:$,ref:[V,k.ref],props:{...R,className:v,style:{"--p-anim-state":k.state,...w},...k.handlers,"data-plass-animation":"appear","data-state":k.state,children:F}})});

package/dist/components/animate-appear/index.js

@@ -1 +1 @@
-export { PlAnimateAppear } from './PlAnimateAppear.js';
+export{PlAnimateAppear}from"./PlAnimateAppear.js";

package/dist/components/animate-blink/PlAnimateBlink.js

@@ -1,47 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { isInfinite, useAnimateElement } from '../../internal/animate.js';
-import { cx } from '../../internal/styles.js';
-/**
- * Content pulsing between full opacity and a floor.
- *
- * The cycle is symmetric — full, faint, full — so however many times it runs it
- * ends where it started. A blink that finished halfway would leave the element
- * permanently half drawn, which reads as a rendering fault rather than as an
- * effect that ended.
- *
- * It repeats forever unless told otherwise, because a single blink is a flicker
- * and nobody asks for a flicker. Two things are worth saying about using it at
- * all: something that never stops moving in the corner of a page being read is
- * the one kind of motion this library otherwise refuses, and a reader with a
- * reduced-motion preference will see none of it — so `min` is a dimming, never
- * the only thing carrying the message. If it is urgent, say so in words too.
- */
-export const PlAnimateBlink = /* @__PURE__ */ React.forwardRef(function PlAnimateBlink({ duration = 1000, delay = 0, easing, repeat = 'infinite', alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, min = 0, render, className, style, children, ...props }, ref) {
-    const animate = useAnimateElement({
-        effect: 'blink',
-        duration,
-        delay,
-        easing,
-        repeat,
-        alternate,
-        opacity: min,
-        trigger,
-        play,
-        once,
-        threshold,
-        paused,
-        infinite: isInfinite(repeat)
-    });
-    return useRender({
-        render,
-        ref: [ref, animate.ref],
-        props: {
-            ...props,
-            className: cx(animate.className, className),
-            style: { ...animate.style, ...style },
-            ...animate.props,
-            children
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as a}from"../../internal/styles.js";export const PlAnimateBlink=/* @__PURE__ */e.forwardRef(function PlAnimateBlink({duration:e=1e3,delay:i=0,easing:s,repeat:l="infinite",alternate:o,paused:m,trigger:p="mount",play:c,once:d=!0,threshold:f=.2,min:u=0,render:y,className:g,style:h,children:k,...N},b){const j=n({effect:"blink",duration:e,delay:i,easing:s,repeat:l,alternate:o,opacity:u,trigger:p,play:c,once:d,threshold:f,paused:m,infinite:t(l)});return r({render:y,ref:[b,j.ref],props:{...N,className:a(j.className,g),style:{...j.style,...h},...j.props,children:k}})});

package/dist/components/animate-blink/index.js

@@ -1 +1 @@
-export { PlAnimateBlink } from './PlAnimateBlink.js';
+export{PlAnimateBlink}from"./PlAnimateBlink.js";

package/dist/components/animate-fade/PlAnimateFade.js

@@ -1,48 +1 @@
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { isInfinite, useAnimateElement } from '../../internal/animate.js';
-import { cx } from '../../internal/styles.js';
-/**
- * Content arriving or leaving on opacity alone.
- *
- * The plainest effect in the set and the one to reach for first: nothing moves,
- * so nothing reflows and nothing is resampled. A fade is the only entrance that
- * is safe on a block of text at any size.
- *
- * It is also the effect that suits glass. A Plass sheet is defined by what
- * shows through it, and opacity is the axis the material already answers on —
- * the same axis the glass ladder itself is built from.
- *
- * `mode="out"` is the same animation run backwards, and it is held at the end:
- * a faded-out element stays faded out rather than snapping back into view when
- * the animation finishes.
- */
-export const PlAnimateFade = /* @__PURE__ */ React.forwardRef(function PlAnimateFade({ duration = 300, delay = 0, easing, repeat = 1, alternate, paused, trigger = 'mount', play, once = true, threshold = 0.2, mode = 'in', from = 0, render, className, style, children, ...props }, ref) {
-    const animate = useAnimateElement({
-        effect: 'fade',
-        duration,
-        delay,
-        easing,
-        repeat,
-        alternate,
-        mode,
-        opacity: from,
-        trigger,
-        play,
-        once,
-        threshold,
-        paused,
-        infinite: isInfinite(repeat)
-    });
-    return useRender({
-        render,
-        ref: [ref, animate.ref],
-        props: {
-            ...props,
-            className: cx(animate.className, className),
-            style: { ...animate.style, ...style },
-            ...animate.props,
-            children
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as t}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateFade=/* @__PURE__ */e.forwardRef(function PlAnimateFade({duration:e=300,delay:s=0,easing:o,repeat:i=1,alternate:l,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,mode:u="in",from:y=0,render:g,className:h,style:N,children:j,...A},F){const P=t({effect:"fade",duration:e,delay:s,easing:o,repeat:i,alternate:l,mode:u,opacity:y,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:a(i)});return r({render:g,ref:[F,P.ref],props:{...A,className:n(P.className,h),style:{...P.style,...N},...P.props,children:j}})});

package/dist/components/animate-fade/index.js

@@ -1 +1 @@
-export { PlAnimateFade } from './PlAnimateFade.js';
+export{PlAnimateFade}from"./PlAnimateFade.js";