plass-ui 1.2.0 → 1.3.0

package/dist/internal/media.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";const n=new Map;function listFor(e){if("undefined"==typeof window||!window.matchMedia)return null;let r=n.get(e);return r||(r=window.matchMedia(e),n.set(e,r)),r}function onServer(){return!1}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";export function useMediaQuery(n){const r=e.useCallback(e=>{const r=null===n?null:listFor(n);return r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{}},[n]),t=e.useCallback(()=>null!==n&&(listFor(n)?.matches??!1),[n]);return e.useSyncExternalStore(r,t,onServer)}export function usePrefersReducedMotion(){return useMediaQuery(reducedMotionQuery)}

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

@@ -114,12 +114,12 @@ 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.
+ * The store behind it is `internal/media.ts`, and the one reason that matters
+ * here is its server snapshot: 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;
 /**

package/dist/internal/page-layout.js

@@ -1 +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"}
+"use client";import*as e from"react";import{useMediaQuery as t}from"./media.js";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(e){return t("none"===e?null:n[e])}export function drawerSide(e){const t="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?t?"right":"left":t?"left":"right"}

package/dist/internal/steps.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The rail a sequence is drawn on, shared by `PlTimeline` and `PlStepper`.
+ *
+ * The two components are not the same thing — a timeline **reports** a sequence
+ * that happened and a stepper **is** one the reader is moving through, which is
+ * why one is an `<ol>` of text and the other is an `<ol>` of buttons with a
+ * panel under it — but they are the same *drawing*, and a reader who has learned
+ * what a haloed bullet means on one must not find it meaning something else on
+ * the other.
+ *
+ * So the marks live here and the behaviour lives in the components. This is the
+ * arrangement `internal/button-group.ts` and `internal/progress.ts` already
+ * make, and it is here for the reason `internal/icons.tsx` gives: two copies of
+ * twelve lines are not expensive, they are two copies that drift.
+ */
+import type { PlassColor, PlassSize } from '../types.js';
+/**
+ * How far along one step is.
+ *
+ * Three states rather than two, because "the one you are on" is not the same
+ * claim as "done", and a sequence that cannot say which step is current is a
+ * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
+ * around it, an empty one — rather than three shades of the same thing.
+ */
+export type PlassStepStatus = 'complete' | 'current' | 'upcoming';
+/** How the line between two steps is drawn. `none` leaves the gap open. */
+export type PlassStepConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+/**
+ * The bullet.
+ *
+ * Its own ladder rather than a step off `controlHeightClasses`, for the reason
+ * `tickSizeClasses` has one: a bullet is not a control you can put a label
+ * inside. It is a mark beside one, sized against the title next to it — which is
+ * why the steps are close to the tick ladder and not to the control ladder.
+ *
+ * It is written as a custom property rather than as a class because the
+ * connector has to know it: the line is centred on the bullet, and centring is
+ * arithmetic on this number.
+ */
+export declare const bulletSizeValues: Record<PlassSize, string>;
+/** Between the bullet column and the content beside it. */
+export declare const bulletGapClasses: Record<PlassSize, string>;
+/**
+ * The bullet at each of the three states.
+ *
+ * Every one of them is a different axis, never a different opacity: `complete`
+ * is the family's gradient, `current` is that gradient with a halo of the soft
+ * tint around it, and `upcoming` is a hairline ring on the page's own surface. A
+ * reader who cannot tell the colours apart still has a filled shape, a haloed
+ * shape and an empty one.
+ *
+ * There is no gloss line on the two filled ones, for the reason a filled
+ * `PlButton` has none — the gradient is the form. The `upcoming` ring is drawn
+ * in the neutral hairline rather than the sheet's white one, the same call a
+ * checkbox's edge makes: a bullet is small enough that its edge *is* the object,
+ * and white light on a translucent pane disappears on a light card.
+ */
+export declare const bulletStatusClasses: Record<PlassStepStatus, string>;
+/**
+ * The line *after* a step, which is what makes it the step's own property: a
+ * connector is coloured by whether the step it leaves has been reached, not by
+ * where it arrives.
+ */
+export declare const connectorColorClasses: Record<PlassStepStatus, string>;
+export declare const connectorStyleClasses: Record<PlassStepConnector, string>;
+export declare const titleStatusClasses: Record<PlassStepStatus, string>;
+/**
+ * Which of the three a step is, from where the sequence has got to.
+ *
+ * `active` is an **index**, not a value, because neither a timeline nor a
+ * stepper has a selection: everything before it is `complete`, the step at it is
+ * `current`, everything after it is `upcoming`.
+ */
+export declare function statusAt(index: number, active: number | null): PlassStepStatus;
+/** The slot family a step draws in, so the two components dye a rail alike. */
+export type StepFamily = PlassColor;

package/dist/internal/steps.js

@@ -0,0 +1 @@
+export const bulletSizeValues={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const bulletGapClasses={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const bulletStatusClasses={complete:"[background-image:var(--p-fill)] text-(--p-on-solid)",current:"[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)]",upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"};export const connectorColorClasses={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"};export const connectorStyleClasses={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const titleStatusClasses={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export function statusAt(e,o){return null===o?"upcoming":e<o?"complete":e===o?"current":"upcoming"}

package/dist/provider/PlColorSchemeScript.d.ts

@@ -0,0 +1,40 @@
+import { type PlColorScheme } from '../internal/color-scheme.js';
+export interface PlColorSchemeScriptProps {
+    /** Must match the hook's. @default 'plass-color-scheme' */
+    storageKey?: string;
+    /** What to apply when nothing has been stored. Must match the hook's. @default 'system' */
+    defaultScheme?: PlColorScheme;
+    /** The `nonce` a strict Content Security Policy requires on an inline script. */
+    nonce?: string;
+}
+/**
+ * Paints the reader's chosen theme before the first frame.
+ *
+ * Put it in `<head>`, above everything. It reads the stored choice and writes
+ * it onto `<html>` **synchronously**, while the parser is still in the head and
+ * before any content has been laid out — which is the only moment at which the
+ * white flash can be prevented. React runs long after that, so a theme applied
+ * from an effect is applied one paint too late, and the reader has already seen
+ * the wrong one.
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * <html suppressHydrationWarning>
+ *   <head>
+ *     <PlColorSchemeScript />
+ *   </head>
+ *   <body>{children}</body>
+ * </html>
+ * ```
+ *
+ * `suppressHydrationWarning` on `<html>` is the other half, and it is not a
+ * workaround: the script's whole job is to change that element before React
+ * hydrates, so React finding an attribute the server did not send is the thing
+ * working rather than failing.
+ *
+ * It renders nothing but a `<script>`, calls no hook and reads no context, so it
+ * stays a server component — the one place in this library where that matters
+ * most, since a client component here would arrive with the bundle and be too
+ * late by definition.
+ */
+export declare function PlColorSchemeScript({ storageKey, defaultScheme, nonce }: PlColorSchemeScriptProps): import("react").JSX.Element;

package/dist/provider/PlColorSchemeScript.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{DEFAULT_STORAGE_KEY as t}from"../internal/color-scheme.js";function inlineScript(e,t){return`(function(){try{var k=${JSON.stringify(e)},d=${JSON.stringify(t)};var s=localStorage.getItem(k);if(s!=="light"&&s!=="dark"&&s!=="system"){s=d}var e=document.documentElement;e.classList.remove("light","dark");if(s==="system"){delete e.dataset.theme}else{e.dataset.theme=s;e.classList.add(s)}}catch(_){}})()`}export function PlColorSchemeScript({storageKey:s=t,defaultScheme:r="system",nonce:n}){return e("script",{nonce:n,dangerouslySetInnerHTML:{__html:inlineScript(s,r)}})}

package/dist/provider/PlassProvider.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type PlassDefaults } from '../internal/defaults.js';
+export interface PlassProviderProps extends PlassDefaults {
+    children?: React.ReactNode;
+}
+/**
+ * The defaults every Plass component under it starts from.
+ *
+ * Optional, and the library is finished without it — this is not a theme file
+ * to fill in before the first screen looks like something. What it removes is
+ * transcription: an application whose controls are `sm` says so once instead of
+ * at every call site, and a Korean application names its locale once instead of
+ * on five pickers.
+ *
+ * ```tsx
+ * <PlassProvider size="sm" density="compact" locale="ko-KR">
+ *   <App />
+ * </PlassProvider>
+ * ```
+ *
+ * **It sets `size`, `color`, `density` and the date vocabulary, and it
+ * deliberately does not set `variant` or `elevation`.** Those two name what a
+ * surface is *made of* and how far off the page it sits, and both are decided
+ * per component by the design language rather than per application: a button is
+ * `solid` and rests on the sheet, a field is cut into it. One value for all of
+ * them would not be a default, it would be a flattening. `internal/defaults.ts`
+ * has the long version.
+ *
+ * Providers **nest and merge**, so a section of a page can be compact inside an
+ * application that is not, and a component's own prop always wins over both.
+ *
+ * **It also carries the reading direction**, and that one is not a default the
+ * caller sets — it is read off the document. `dir="rtl"` turns the layout over
+ * on its own, but Base UI reads the direction from a React context, so without
+ * this the arrow keys, the composite navigation and the popup alignment would
+ * all still be running left to right under a right-to-left page. See
+ * `internal/direction.ts`.
+ */
+export declare function PlassProvider({ size, color, density, locale, weekStartsOn, labels, direction, children }: PlassProviderProps): React.JSX.Element;

package/dist/provider/PlassProvider.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{DirectionProvider as i}from"@base-ui/react/direction-provider";import{DefaultsContext as t}from"../internal/defaults.js";import{useDocumentDirection as o}from"../internal/direction.js";export function PlassProvider({size:n,color:s,density:l,locale:c,weekStartsOn:a,labels:d,direction:m,children:u}){const f=r.useContext(t),p=r.useMemo(()=>({size:n??f.size,color:s??f.color,density:l??f.density,locale:c??f.locale,weekStartsOn:a??f.weekStartsOn,labels:d??f.labels,direction:m??f.direction}),[n,s,l,c,a,d,m,f]),b=o();return e(i,{direction:p.direction??b,children:e(t.Provider,{value:p,children:u})})}

package/dist/provider/index.d.ts

@@ -0,0 +1,5 @@
+export { PlColorSchemeScript } from './PlColorSchemeScript.js';
+export type { PlColorSchemeScriptProps } from './PlColorSchemeScript.js';
+export { PlassProvider } from './PlassProvider.js';
+export type { PlassProviderProps } from './PlassProvider.js';
+export { useDefaults as usePlassDefaults, type PlassDefaults } from '../internal/defaults.js';

package/dist/provider/index.js

@@ -0,0 +1 @@
+export{PlColorSchemeScript}from"./PlColorSchemeScript.js";export{PlassProvider}from"./PlassProvider.js";export{useDefaults as usePlassDefaults}from"../internal/defaults.js";