plass-ui 0.0.1 → 1.0.1

package/dist/components/file-picker/PlFilePicker.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{CloseIcon as l}from"../../internal/icons.js";import{controlTextLeadingClasses as t,disabledClasses as a,focusRingClasses as o,gapClasses as n,glassClasses as i,hasContent as c,iconClasses as d,metaTextClasses as p,radiusClasses as u,readOnlyFilterClasses as f,sheetTitleClasses as m,stackGapClasses as h,surfaceSlots as v,transitionClasses as g}from"../../internal/styles.js";const b={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},x={solid:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},y={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:i="glass",size:k="md",color:N="primary",density:j="default",elevation:$=0,accept:w,multiple:z=!1,maxSize:C,maxFiles:I,value:L,defaultValue:B,onFilesChange:D,onReject:F,label:M,description:_,error:W,invalid:S,title:P,hint:R,icon:T,showList:A=!0,removeLabel:V=e=>`Remove ${e}`,fullWidth:E=!0,disabled:O=!1,readOnly:q=!1,required:U=!1,name:G,id:H,className:Y,style:J,...K},Q){const X=s.useRef(null);s.useImperativeHandle(Q,()=>X.current);const[Z,ee]=s.useState(()=>[...B??[]]),re=s.useMemo(()=>L?[...L]:Z,[L,Z]),se=s.useRef(0),[le,te]=s.useState(!1),ae=c(W),oe=S??ae,ne=oe?"danger":N,ie=O||q,ce=s.useId(),de=s.useCallback(e=>{L||ee(e),D?.(e)},[D,L]),pe=s.useCallback(e=>{const r=[],s=[],l=z?I??Number.POSITIVE_INFINITY:1,t=z?re.length:0;for(const a of e)w&&!matchesAccept(a,w)?s.push({file:a,reason:"type"}):void 0!==C&&a.size>C?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[w,re.length,I,C,z]),ue=s.useCallback(e=>{const{kept:r,rejections:s}=pe(e);s.length>0&&F?.(s),r.length>0&&de(z?[...re,...r]:r)},[pe,de,re,z,F]),fe=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",b[j][k],u[k],n[k],g,d,o,O?`${a[i]} border-2 border-dashed`:q?`${x[i]} ${f} cursor-default`:x[i],ie?"":y[i],le&&!ie?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",h[k],E?"flex w-full":"inline-flex",Y??""].filter(Boolean).join(" "),style:{...v(ne,$),...J},...K,children:[c(M)?e("span",{className:[p[k],"font-semibold",O?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:M}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{ie||(e.preventDefault(),se.current+=1,te(!0))},onDragOver:e=>{ie||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{ie||(se.current=Math.max(0,se.current-1),0===se.current&&te(!1))},onDrop:e=>{ie||(e.preventDefault(),se.current=0,te(!1),ue(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:H,disabled:O,"aria-describedby":c(_)||ae?ce:void 0,"aria-invalid":oe||void 0,className:fe,onClick:()=>{ie||X.current&&(X.current.value="",X.current.click())},children:[void 0===T?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):c(T)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:T}):null,e("span",{className:`font-semibold ${m[k]}`,children:P??"Drop files here, or click to browse"}),c(R)?e("span",{className:`text-(--plass-muted-fg) ${p[k]}`,children:R}):null]}),e("input",{ref:X,type:"file",name:G,accept:w,multiple:z,required:U&&0===re.length,disabled:ie,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ue(Array.from(e.target.files??[]))})]}),A&&re.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${h[k]} m-0 list-none p-0`,children:re.map((s,a)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",u.xs,t[k],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${p[k]}`,children:formatFileSize(s.size)}),ie?null:e("button",{type:"button","aria-label":V(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",o].join(" "),onClick:()=>de(re.filter((e,r)=>r!==a)),children:e(l,{})})]},`${s.name}-${s.size}-${s.lastModified}-${a}`))}):null,c(_)&&!ae?e("span",{id:ce,className:`${p[k]} text-(--plass-muted-fg)`,children:_}):null,ae?e("span",{id:ce,className:`${p[k]} text-(--p-accent)`,children:W}):null]})});

package/dist/components/file-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { PlFilePicker, formatFileSize } from './PlFilePicker.js';
+export type { PlFilePickerProps, PlFileRejection, PlFileRejectionReason } from './PlFilePicker.js';

package/dist/components/file-picker/index.js

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

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
+/** A destination's value. The same restraint `PlBottomNavigation` puts on its own. */
+export type PlFloatingBottomNavigationValue = string | number;
+export interface PlFloatingBottomNavigationProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * What the capsule is made of.
+     *
+     * `glass` is the default and the whole point: a clear sheet over a blurred
+     * backdrop with a hairline around it, floating clear of the page. `solid` is
+     * the same sheet at its most opaque, for a bar that sits over photography.
+     * `ghost` has no capsule at all — the discs float on their own.
+     * @default 'glass'
+     */
+    variant?: PlassStyleProps['variant'];
+    /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
+    value?: PlFloatingBottomNavigationValue | null;
+    /** Which starts current, for an uncontrolled bar. */
+    defaultValue?: PlFloatingBottomNavigationValue | null;
+    onValueChange?: (value: PlFloatingBottomNavigationValue) => void;
+    /**
+     * How the bar sits in the page's scroll.
+     * @default 'fixed'
+     */
+    position?: PlassPosition;
+    /**
+     * Keeps the bar clear of the home indicator on a phone, by adding
+     * `env(safe-area-inset-bottom)` to the gap under it.
+     * @default true
+     */
+    safeArea?: boolean;
+    /**
+     * Drop shadow depth. `2`, against the `0` a bar attached to the window edge
+     * takes.
+     *
+     * That is not an inconsistency: this bar is defined by **not** being part of
+     * the page. Every other sheet in the library rests on the page and earns its
+     * separation from the glass edge, so a shadow is opt-in; this one hovers over
+     * whatever is underneath it, and a capsule lying flat on the content it is
+     * floating over reads as a mistake.
+     * @default 2
+     */
+    elevation?: PlassElevation;
+    /** Every destination stops answering. */
+    disabled?: boolean;
+    /** The name the bar is announced by — "Main", "Sections". */
+    label?: string;
+    /**
+     * Renders something other than a `<nav>`. Rarely what you want here: a row of
+     * destinations is navigation.
+     */
+    render?: useRender.RenderProp;
+    /** The `PlFloatingBottomNavigationItem`s. */
+    children?: React.ReactNode;
+}
+export interface PlFloatingBottomNavigationItemProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {
+    /** Identifies the destination. What `onValueChange` reports. */
+    value: PlFloatingBottomNavigationValue;
+    /** The glyph. It is the whole of what a reader sees. */
+    icon?: React.ReactNode;
+    /** Renders the item as a link rather than as a button. */
+    href?: string;
+    /** Unavailable, but still part of the set. */
+    disabled?: boolean;
+    /**
+     * The destination's name.
+     *
+     * **Never drawn, always read.** A row of glyphs with no names is a row of
+     * unnamed buttons, which is the defect this prop exists to make impossible.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A row of round destinations floating clear of the bottom edge of the window.
+ *
+ * The other half of `PlBottomNavigation`, and a different object rather than a
+ * variant of one: that bar is **attached** to the edge of the window — full
+ * width, a hairline against the content, its sheet running under the home
+ * indicator — and this one is **not part of the page at all**. Everything that
+ * follows comes from that one difference: the capsule, the gap under it, the
+ * shadow it defaults to, and the pill corners it is allowed.
+ *
+ * Every destination is a disc with a glyph in it and no name drawn, which is
+ * what keeps a row of five inside the width of a phone. The name is still
+ * required and still read out — a row of glyphs with no accessible names is the
+ * defect `PlIconButton`'s `label` exists to make impossible, and it would be
+ * exactly as easy to ship here.
+ *
+ * The current destination is a key of **tinted glass** riding in the clear
+ * sheet, which is the design language's own sentence with nothing added to it.
+ * The key is **one element that travels**, measured off whichever disc is
+ * current and animated the way a `PlSegmentedButton`'s tile is — not a fill
+ * that appears on one disc while it disappears from another. Two discs
+ * cross-fading is two objects; a bar with a key in it has one, and where it
+ * goes is the whole of what the component has to say.
+ *
+ * Nothing is transformed: the key is an empty box, and no glyph is resampled
+ * while it travels. That is what lets the house no-transform rule survive a
+ * component whose entire point is that something moves.
+ *
+ * It reads `controlSlots` and not the `surfaceSlots` every other container
+ * takes, which is the one place this bar is not a container: the slots a
+ * container is given are deliberately undyed — no `--p-fill`, no `--p-on-solid`
+ * and no `--p-lift` — and the key is made of all three. Asking a container's
+ * slot set for a control's colours is asking for `var(--p-fill)` to resolve to
+ * nothing, which is a `background-image` the browser drops on the floor and a
+ * current destination that looks exactly like the four beside it.
+ */
+export declare const PlFloatingBottomNavigation: React.ForwardRefExoticComponent<PlFloatingBottomNavigationProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One destination, as a disc.
+ *
+ * It has no `size`, no `color` and no `variant` of its own: all three belong to
+ * the bar, which is the only place they can be set once and mean the same thing
+ * for every disc.
+ */
+export declare const PlFloatingBottomNavigationItem: React.ForwardRefExoticComponent<PlFloatingBottomNavigationItemProps & React.RefAttributes<HTMLElement>>;

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useRender as r}from"@base-ui/react/use-render";import{controlHeightClasses as i,controlSlots as l,controlSquareClasses as o,cx as n,focusRingClasses as d,glassClasses as c,hasContent as p,iconSizeClasses as u,srOnlyClasses as f,transitionClasses as m}from"../../internal/styles.js";const g=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},b={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},h={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},x={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},y={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},w={solid:/* @__PURE__ */[c,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},N=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:i="md",color:o="primary",density:d="default",elevation:c=2,value:p,defaultValue:u=null,onValueChange:f,position:k="fixed",safeArea:z=!0,disabled:j=!1,label:P,render:C,className:A,style:R,children:F,...q},B){const[$,E]=s.useState(u),I=void 0!==p,L=I?p:$,O=s.useRef(null),S=s.useRef(null),V=s.useCallback(e=>{const t=O.current,a=S.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{V(!0)},[V,L,a,i,d,j,F]),s.useEffect(()=>{const e=O.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>V(!1));return t.observe(e),()=>t.disconnect()},[V]);const W=s.useCallback(e=>{I||E(e),f?.(e)},[I,f]),D=s.useMemo(()=>({value:L??null,change:W,size:i,disabled:j}),[L,W,i,j]),H=n("flex w-full justify-center px-4","static"===k?"":"pointer-events-none",z?b[i]:v[i],y[k],A);return r({render:C??e("nav",{}),ref:B,props:{"aria-label":P,className:H,style:{...l(o,c,"solid"),...R},children:e(g.Provider,{value:D,children:t("div",{ref:O,className:n("pointer-events-auto relative inline-flex items-center rounded-full",w[a],h[d][i],x[d][i],m),children:[null!=L?e("span",{ref:S,"aria-hidden":"true",className:N}):null,F]})}),...q}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:l,href:c,disabled:v=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(g),k=v||N.disabled,z=null!==N.value&&N.value===r,j=n("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",i[N.size],o[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":z?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[p(l)?e("span",{className:n("flex shrink-0 items-center justify-center",u[N.size]),children:l}):null,p(h)?e("span",{className:f,children:h}):null]}),C={"data-disc":"","data-current":z?"":void 0,"data-disabled":k?"":void 0},press=e=>{k?e.preventDefault():(N.change(r),x?.(e))};return c?e("a",{ref:w,href:k?void 0:c,"aria-current":z?"page":void 0,"aria-disabled":k||void 0,...C,className:j,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:k,"aria-current":z?"page":void 0,...C,className:j,onClick:press,...y,children:P})});

package/dist/components/floating-bottom-navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { PlFloatingBottomNavigation, PlFloatingBottomNavigationItem } from './PlFloatingBottomNavigation.js';
+export type { PlFloatingBottomNavigationItemProps, PlFloatingBottomNavigationProps, PlFloatingBottomNavigationValue } from './PlFloatingBottomNavigation.js';

package/dist/components/floating-bottom-navigation/index.js

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

package/dist/components/grid/PlGrid.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAlignItems, PlassJustify, PlassResponsive } from '../../types.js';
+export interface PlGridProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many columns a row is divided into. Every `span` and every `offset`
+     * inside is read against this number, so `columns={24}` makes `span={12}` a
+     * half and not a full width.
+     * @default 12
+     */
+    columns?: PlassResponsive<number>;
+    /**
+     * The gutter between items, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     * @default 2
+     */
+    spacing?: PlassResponsive<number>;
+    /** The gutter between rows only. Falls back to `spacing`. */
+    rowSpacing?: PlassResponsive<number>;
+    /** The gutter between columns only. Falls back to `spacing`. */
+    columnSpacing?: PlassResponsive<number>;
+    /** How a row distributes the space its items did not use. */
+    justify?: PlassJustify;
+    /** How items sit against each other across the row. @default 'stretch' */
+    alignItems?: PlassAlignItems;
+    /** Where the rows sit when the grid is shorter than the box holding it. */
+    alignContent?: PlassJustify;
+    /**
+     * Whether a row that runs out of columns continues on the next one. Turning
+     * it off gives one row that overflows, which is what a horizontally scrolling
+     * strip wants.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<ul />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    /** The `PlGridItem`s. */
+    children?: React.ReactNode;
+}
+/**
+ * A twelve-column row, and the parent every `PlGridItem` needs.
+ *
+ * It owns the three numbers an item cannot know on its own — how many columns
+ * there are and how wide the two gutters are — and hands them down as inherited
+ * custom properties rather than through a React context. That is not a
+ * shortcut: the values are responsive, and a media query can change an inherited
+ * custom property without React hearing about it, so the column count an item
+ * lays itself out against is always the one that is actually on screen. A
+ * context would have to re-render the tree at every breakpoint to say the same
+ * thing.
+ *
+ * It draws nothing, and it takes no `variant`, `color`, `elevation`, `size` or
+ * `density`. A grid is not a surface — it is the arrangement of the surfaces
+ * inside it — and there is no padding here either: the gutter round a page is a
+ * `PlContainer`'s and the padding round content is a `PlCard`'s, and a grid that
+ * had a track of its own would be a third one to keep in step. `spacing` is the
+ * only measurement it owns, and it is the space *between* items.
+ *
+ * Nesting is a `PlGrid` inside a `PlGridItem`, not an item that is also a grid:
+ * the inner grid re-declares the column count for its own subtree while the item
+ * around it keeps the width the outer grid gave it.
+ */
+export declare const PlGrid: React.ForwardRefExoticComponent<PlGridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/PlGrid.js

@@ -0,0 +1 @@
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as a,alignItemsClasses as n,columnCount as s,justifyClasses as p,responsiveSlots as i,spacingValue as l,withBaseline as t}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGrid=/* @__PURE__ */r.forwardRef(function PlGrid({columns:r,spacing:c,rowSpacing:g,columnSpacing:m,justify:f,alignItems:d,alignContent:u,wrap:x=!0,render:y,className:w,style:j,children:h,...G},N){const P=o("plass-grid flex",x?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",f?p[f]:"",d?n[d]:"",u?a[u]:"",w);return e({render:y,ref:N,props:{className:P,style:{...i("cols",t(r,12),s),...i("gap-x",t(m??c,2),l),...i("gap-y",t(g??c,2),l),...j},children:h,...G}})});

package/dist/components/grid/PlGridItem.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAlignSelf, PlassResponsive } from '../../types.js';
+export interface PlGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many of the grid's columns the item takes. Read against the grid's
+     * `columns`, so `span={6}` is a half of the default twelve and a quarter of
+     * `columns={24}`.
+     *
+     * Responsive: `span={{ xs: 12, md: 6, lg: 4 }}` is full width on a phone, half
+     * from 48rem and a third from 64rem. Every entry applies from its own
+     * breakpoint up, so two of them usually describe a whole layout.
+     *
+     * A span wider than the row is clamped to the row rather than overflowing.
+     * @default the grid's full width
+     */
+    span?: PlassResponsive<number>;
+    /**
+     * Columns left empty *before* the item — space pushed in ahead of it, not an
+     * absolute position in the row. First in a twelve-column row, `offset={4}`
+     * with `span={4}` is the middle third; after an item that already took four
+     * columns, the same offset skips four more and lands on the last third.
+     *
+     * Responsive in the same way `span` is.
+     * @default 0
+     */
+    offset?: PlassResponsive<number>;
+    /** Overrides the row's `alignItems` for this item alone. */
+    alignSelf?: PlassAlignSelf;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<article />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * One cell of a `PlGrid`.
+ *
+ * It is a width and nothing else — no sheet, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a cell and a `PlCard`
+ * are two components: wrapping something in a layout must not change how it
+ * looks, and a cell that drew a sheet would make `span` a visual decision.
+ *
+ * The column count it divides by is inherited from the grid as a custom
+ * property, so an item with no `PlGrid` above it falls back to twelve rather
+ * than breaking — but it will be a lone width in a plain parent, which is not a
+ * layout. Always wrap.
+ */
+export declare const PlGridItem: React.ForwardRefExoticComponent<PlGridItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/PlGridItem.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as t,responsiveSlots as n,spanValue as i}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGridItem=/* @__PURE__ */e.forwardRef(function PlGridItem({span:e,offset:a,alignSelf:l,render:f,className:m,style:c,children:d,...p},u){const g=o("plass-grid-item",l?s[l]:"",m);return r({render:f,ref:u,props:{className:g,style:{...n("span",e,i),...n("offset",a,t),...c},children:d,...p}})});

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

@@ -0,0 +1,4 @@
+export { PlGrid } from './PlGrid.js';
+export type { PlGridProps } from './PlGrid.js';
+export { PlGridItem } from './PlGridItem.js';
+export type { PlGridItemProps } from './PlGridItem.js';

package/dist/components/grid/index.js

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

package/dist/components/highlight/PlHighlight.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import type { PlTypographyWeight } from '../typography/PlTypography.js';
+import type { PlassColor, PlassVariant } from '../../types.js';
+export interface PlHighlightProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * What to find.
+     *
+     * A string is one term, an array is several — the longest is tried first, so
+     * `['data', 'database']` marks the whole word rather than the first four
+     * letters of it. A `RegExp` is used as written, with the global flag forced
+     * on; `caseSensitive` and `wholeWord` are ignored for it, because a regular
+     * expression already says both of those things itself.
+     */
+    query: string | string[] | RegExp;
+    /**
+     * What the mark is made of.
+     *
+     * - `solid` — the family's gradient with its own ink on it: the highlighter
+     *   pen. The default.
+     * - `glass` — a hairline box with the family's soft tint inside it, for a page
+     *   where a filled run would be too much.
+     * - `ghost` — the accent colour and nothing else, for marking a word inside a
+     *   heading that is already loud.
+     *
+     * `glass` is deliberately **not** blurred here, which is the one place in the
+     * library the material is quoted rather than used. A mark is a 20px-tall
+     * inline box sitting on a line of text; there is no backdrop behind it worth
+     * smearing, and `box-decoration-clone` across a line break would smear two.
+     * @default 'solid'
+     */
+    variant?: PlassVariant;
+    /**
+     * Semantic colour role. `warning` by default, and not arbitrarily: it is the
+     * one family whose gradient is light with dark ink on it, so a `solid`
+     * `warning` mark is a yellow highlighter over black text rather than a white
+     * word on a block of colour.
+     * @default 'warning'
+     */
+    color?: PlassColor;
+    /**
+     * Whether `a` and `A` are different letters.
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Whether a term has to be a word on its own — `cat` marking "cat" but not
+     * "concatenate".
+     *
+     * A word here is a run of letters, digits and underscores in any script, so it
+     * means what it should for `café` and `naïve`. It means very little for Korean
+     * or Japanese, where a phrase is not delimited by spaces at all; that is a
+     * property of the writing system rather than of this prop, and is the reason
+     * it is off by default.
+     * @default false
+     */
+    wholeWord?: boolean;
+    /** Underlines the mark as well. Combines with every variant. */
+    underline?: boolean;
+    /**
+     * Sets the mark's weight. Omit it and the mark is the weight of the text
+     * around it — the surface is already saying "this one", and a bolded word
+     * inside a sentence changes the rhythm of the whole line.
+     */
+    weight?: PlTypographyWeight;
+    /**
+     * The text to search. Elements are walked into and left otherwise untouched,
+     * so a match inside a `<strong>` is still marked and the `<strong>` survives.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Marks the words a reader is looking for, inside text they were already
+ * reading.
+ *
+ * The component is the search, not just the styling: `query` is what a search
+ * box holds, and everything about *how* the matching is done — case, whole
+ * words, a regular expression — is a prop rather than something a caller has to
+ * pre-compute into a list of offsets.
+ *
+ * The mark is a real `<mark>`, which is the element for "text of relevance to
+ * the reader" and is announced as such. That has one consequence worth knowing:
+ * marking eleven words in a paragraph tells a screen reader that eleven things
+ * are important, which is a way of saying nothing. A highlight is for a handful
+ * of matches.
+ *
+ * Nothing here is stateful and nothing measures — the whole component is a pure
+ * function of `children` and `query`, so it re-marks on its own the moment the
+ * search box changes.
+ */
+export declare const PlHighlight: React.ForwardRefExoticComponent<PlHighlightProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/highlight/PlHighlight.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{transitionClasses as r}from"../../internal/styles.js";const t={solid:"[background-image:var(--p-fill)] text-(--p-on-solid)",glass:"border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]",ghost:"bg-transparent text-(--p-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,n,r){const t=n>0?e[n-1]:"",o=r<e.length?e[r]:"";return!l.test(t)&&!l.test(o)}function markString(e,n,r,t){n.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=n.exec(e));){if(""===l[0]){n.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;r&&!isWholeWord(e,s,a)||(s>i&&o.push(e.slice(i,s)),o.push(t(l[0],`${s}`)),i=a)}return 0===o.length?e:(i<e.length&&o.push(e.slice(i)),o)}function markNode(e,r,t,o){if("string"==typeof e)return markString(e,r,t,o);if("number"==typeof e)return markString(String(e),r,t,o);if(Array.isArray(e))return n.Children.map(e,e=>markNode(e,r,t,o));if(n.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:n.cloneElement(e,void 0,markNode(l,r,t,o))}return e}export const PlHighlight=/* @__PURE__ */n.forwardRef(function PlHighlight({query:l,variant:i="solid",color:s="warning",caseSensitive:a=!1,wholeWord:c=!1,underline:p=!1,weight:u,className:d,style:f,children:g,...m},h){const x=n.useMemo(()=>function buildPattern(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const r=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===r.length?null:new RegExp(r.map(escapeRegExp).join("|"),n?"gu":"giu")}(l,a),[l,a]),b=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",t[i],p?"underline decoration-2 underline-offset-2":"",u?o[u]:"",r].filter(Boolean).join(" "),v=x?markNode(g,x,c,(n,r)=>e("mark",{className:b,children:n},r)):g;return e("span",{ref:h,className:d,style:{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-line":`var(--plass-${s}-line)`,...f},...m,children:v})});

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

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

package/dist/components/highlight/index.js

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

package/dist/components/hot-keys/PlHotKeys.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * Which keyboard the shortcut is being read on.
+ *
+ * `auto` asks the browser, which is right for a shortcut a reader is about to
+ * press. The three explicit values are for documentation that has to name a
+ * platform rather than the reader's own — a support page describing the Windows
+ * build, a table comparing the two.
+ */
+export type PlHotKeysOS = 'auto' | 'mac' | 'windows' | 'linux';
+/** Four keys laid out as an inverted T: one on top, three beneath. */
+export interface PlHotKeysCluster {
+    up: string;
+    left: string;
+    down: string;
+    right: string;
+}
+export interface PlHotKeysProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
+    /**
+     * The keys, innermost punctuation and all.
+     *
+     * A string is split on `+` — `'Mod+Shift+P'` — which covers everything except
+     * a shortcut whose key *is* a plus. For that one, pass the array form:
+     * `keys={['Ctrl', '+']}`.
+     */
+    keys?: string | string[];
+    /**
+     * Draws the four movement keys as an inverted T instead of an inline combo —
+     * `WASD`, or the arrow cluster. Takes precedence over `keys`.
+     *
+     * It is its own prop rather than a `layout` on `keys`, because the two are
+     * different objects: a combo is keys pressed *together*, and a cluster is four
+     * keys pressed one at a time whose arrangement on the keyboard is the point.
+     */
+    cluster?: PlHotKeysCluster;
+    /**
+     * Which keyboard to name the modifiers for.
+     * @default 'auto'
+     */
+    os?: PlHotKeysOS;
+    /**
+     * What goes between two keys. Omit it for the platform's own convention: a `+`
+     * on Windows and Linux, and nothing at all on macOS, where a shortcut is
+     * written as a run of symbols — `⇧⌘P`, never `⇧+⌘+P`.
+     */
+    separator?: React.ReactNode;
+    /**
+     * Drop shadow depth. `0` is the default. A key cap already has a lip under it
+     * — this is a picture of a key, not a key, and raising it off the page as well
+     * is one depth cue too many.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+}
+export interface PlKbdProps extends Pick<PlassStyleProps, 'variant' | 'size' | 'density'>, Omit<React.ComponentPropsWithoutRef<'kbd'>, 'color'> {
+    children?: React.ReactNode;
+}
+/**
+ * One key cap.
+ *
+ * Exported so a caller can compose a layout this component does not draw — a
+ * numeric keypad, a row of function keys — out of the same object the shortcut
+ * strip is made of.
+ *
+ * It reads its colour slots from whatever set them, which is the `PlHotKeys`
+ * around it in the common case. On its own it falls back to the page's own ink,
+ * so a bare `<PlKbd>` still draws.
+ */
+export declare const PlKbd: React.ForwardRefExoticComponent<PlKbdProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A keyboard key, a combination of them, or the four movement keys as they sit
+ * on the keyboard.
+ *
+ * Two things make this more than a styled `<kbd>`, and both are about the label
+ * rather than the box around it.
+ *
+ * The first is `Mod`. A shortcut written as `Ctrl+K` is wrong for every Mac
+ * reader and one written as `⌘K` is wrong for everybody else, so the token that
+ * means "the modifier shortcuts are built on" resolves per platform — and `os`
+ * is there for the pages that have to name a platform rather than the reader's.
+ *
+ * The second is that `⌘` is not a word. A screen reader reads it as "place of
+ * interest sign", so every key drawn as a glyph carries its name beside it, in
+ * the clipped box `srOnlyClasses` describes. What is announced is "Command K",
+ * which is what the shortcut is called.
+ *
+ * The keys are real `<kbd>` elements; the wrapper around them is a `<span>`.
+ * Nesting `<kbd>` inside `<kbd>` is allowed and would also be defensible, but a
+ * `kbd` wrapper is a second box for a host stylesheet to reach into for no gain
+ * — the semantics are carried by the keys themselves either way.
+ */
+export declare const PlHotKeys: React.ForwardRefExoticComponent<PlHotKeysProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/hot-keys/PlHotKeys.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as r,controlSlots as s,controlTextClasses as t,glassClasses as l,paddingXClasses as i,radiusClasses as m,srOnlyClasses as c,transitionClasses as d}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),p={mod:{mac:{symbol:"⌘",name:"Command"},windows:word("Ctrl"),linux:word("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:word("Win"),linux:word("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:word("Ctrl"),linux:word("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:word("Alt"),linux:word("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:word("Shift"),linux:word("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:word("Enter"),linux:word("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:word("Tab"),linux:word("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:word("Esc"),linux:word("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:word("Backspace"),linux:word("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:word("Del"),linux:word("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:word("Caps Lock"),linux:word("Caps Lock")}},u={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},w={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,n=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(n)?"mac":/win/i.test(n)?"windows":"linux"}function subscribe(){return()=>{}}function serverOS(){return"windows"}const b={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},f={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]"].join(" "),glass:/* @__PURE__ */[l,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--plass-shadow-ambient)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},x={xs:"min-w-6",sm:"min-w-8",md:"min-w-10",lg:"min-w-12",xl:"min-w-14"};export const PlKbd=/* @__PURE__ */o.forwardRef(function PlKbd({variant:n="glass",size:a="md",density:o="compact",className:s,children:l,...c},p){const u=b[a];return e("kbd",{ref:p,className:["inline-flex shrink-0 items-center justify-center","font-mono leading-none font-medium tabular-nums whitespace-nowrap",r[u],t[u],x[u],i[o][u],m[u],f[n],d,s??""].filter(Boolean).join(" "),...c,children:l})});export const PlHotKeys=/* @__PURE__ */o.forwardRef(function PlHotKeys({variant:r="glass",size:t="md",color:l="secondary",density:i="compact",elevation:m=0,keys:d,cluster:b,os:f="auto",separator:x,className:y,style:g,...h},v){const k=function useDetectedOS(){return o.useSyncExternalStore(subscribe,detectOS,serverOS)}(),A="auto"===f?k:f,C={...s(l,m,r),...g},S={variant:r,size:t,density:i},j="xs"===t||"sm"===t?"gap-1":"gap-1.5";if(b)return n("span",{ref:v,className:["inline-flex flex-col items-center align-middle",j,y??""].filter(Boolean).join(" "),style:C,...h,children:[e(PlKbd,{...S,children:b.up}),n("span",{className:`inline-flex ${j}`,children:[e(PlKbd,{...S,children:b.left}),e(PlKbd,{...S,children:b.down}),e(PlKbd,{...S,children:b.right})]})]});const K=function tokenize(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(d??[]).map(e=>function labelFor(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),o=u[a]??a,r=w[o];if(r)return r;const s=p[o];return s?s[n]:word(1===e.length?e.toUpperCase():e)}(e,A)),P=void 0===x?"mac"===A?null:"+":x;return e("span",{ref:v,className:["inline-flex max-w-full items-center gap-1 align-middle",y??""].filter(Boolean).join(" "),style:C,...h,children:K.map((r,s)=>n(o.Fragment,{children:[s>0&&null!==P?e("span",{"aria-hidden":"true",className:"text-(--plass-muted-fg)",children:P}):null,e(PlKbd,{...S,children:r.symbol===r.name?r.symbol:n(a,{children:[e("span",{"aria-hidden":"true",children:r.symbol}),e("span",{className:c,children:r.name})]})})]},s))})});

package/dist/components/hot-keys/index.d.ts

@@ -0,0 +1,2 @@
+export { PlHotKeys, PlKbd } from './PlHotKeys.js';
+export type { PlHotKeysCluster, PlHotKeysOS, PlHotKeysProps, PlKbdProps } from './PlHotKeys.js';

package/dist/components/hot-keys/index.js

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

package/dist/components/icon/PlIcon.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+export interface PlIconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The glyph. An `<svg>` element, an `<img>`, a component from an icon set, or
+     * a character — whatever is passed is laid into a box of the right size and
+     * given a colour to inherit.
+     *
+     * It is a prop rather than `children` on purpose. An icon set hands you an
+     * element you did not draw, and the two things you always want to change about
+     * it — how big it is and what colour it is — are the two you cannot reach once
+     * it is a child of something. As a prop it is content the icon *sizes*, not
+     * content the icon merely wraps.
+     */
+    icon: React.ReactNode;
+    /**
+     * The box the glyph is drawn in: 14, 16, 20, 24 and 28px. Its own ladder
+     * rather than the control heights, because an icon is not a control.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * Semantic colour role, or `inherit` — the default — to take the colour of
+     * whatever the icon sits in.
+     *
+     * `inherit` and not `primary`, which is the one place this prop departs from
+     * every other component in the library. An icon is content, and the
+     * overwhelmingly common case is an icon inside something that has already
+     * decided what colour its content is: a `PlButton`'s label, a muted caption, a
+     * `PlAlert`'s own family. An icon that arrived pre-dyed would have to be turned
+     * off again at every one of those.
+     * @default 'inherit'
+     */
+    color?: PlassColor | 'inherit';
+    /**
+     * What the icon says, for a reader who cannot see it.
+     *
+     * Without it the icon is hidden from the accessibility tree entirely, which is
+     * the right default: the overwhelming majority of icons sit next to a word that
+     * already says the same thing, and reading both out loud is worse than reading
+     * one. Pass this only when the glyph is carrying meaning on its own.
+     */
+    label?: string;
+}
+/**
+ * A glyph at a known size, in a known colour.
+ *
+ * The library draws no icons of its own beyond the handful its components need —
+ * an icon set is a decision that belongs to the app, not to the component
+ * library it installs. What this does is give whatever icon the app chose the
+ * same two axes everything else here has.
+ *
+ * The box is `inline-flex` with the glyph told to fill it, and `font-size` is
+ * set to the same length — so an `<svg>` with its own `width`, an `<svg>` sized
+ * in `em`, and a bare character all come out the same size. That is the whole
+ * component: a box, a length written twice, and a colour.
+ *
+ * There is no `variant` and no `elevation`. An icon is not a surface: it is ink,
+ * and the only thing the design language has to say about ink is which family it
+ * is drawn in.
+ */
+export declare const PlIcon: React.ForwardRefExoticComponent<PlIconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/icon/PlIcon.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{iconSizeClasses as i}from"../../internal/styles.js";const r={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const PlIcon=/* @__PURE__ */t.forwardRef(function PlIcon({icon:t,size:n="md",color:l="inherit",label:s,className:o,style:a,...c},m){const f=["inline-flex shrink-0 items-center justify-center align-middle",i[n],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${r[n]}`,"inherit"===l?"":"text-(--p-accent)",o??""].filter(Boolean).join(" ");return e("span",{ref:m,className:f,style:"inherit"===l?a:{"--p-accent":`var(--plass-${l}-accent)`,...a},role:s?"img":void 0,"aria-label":s,"aria-hidden":!s||void 0,...c,children:t})});

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

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

package/dist/components/icon/index.js

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

package/dist/components/icon-button/PlIconButton.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type PlButtonProps } from '../button/PlButton.js';
+export interface PlIconButtonProps extends Omit<PlButtonProps, 'children' | 'startIcon' | 'endIcon'> {
+    /**
+     * The glyph. Wrap it in a `PlIcon` when it needs a size of its own; passed
+     * bare it is sized in `em` against the button, exactly as a `startIcon` is.
+     */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "an icon button with no
+     * `aria-label`" is the single most common accessibility defect a component
+     * library ships. Making it required is the only fix that survives review.
+     */
+    label: string;
+}
+/**
+ * A round button with a glyph in it and nothing else.
+ *
+ * A `PlButton` with an icon and no children already goes square — the same
+ * height, the same width, the house fillet cut off it. This is the other shape:
+ * a disc.
+ *
+ * That disc is a deliberate exception to the radius rule, which holds every
+ * corner well short of the 50% that would make a control a pill, because the
+ * flat run along the top and bottom edge is what still reads as a sheet with its
+ * corners cut. The rule is about *labelled* controls: the flat run is there for
+ * the line of text to sit on, and a glyph has no line of text. A circle with a
+ * single mark centred in it is a punched token rather than a moulded key, so it
+ * says the thing the rule exists to protect by a different route.
+ *
+ * Everything else is `PlButton`'s, unchanged and on purpose: the three
+ * materials, the elevation ladder, the pointer light, `loading`, `readOnly` and
+ * `disabled`. Two components that draw the same surface out of two copies of the
+ * same table are two components that will eventually disagree.
+ */
+export declare const PlIconButton: React.ForwardRefExoticComponent<PlIconButtonProps & React.RefAttributes<HTMLButtonElement>>;