plass-ui 1.0.0 → 1.0.2

package/dist/components/progress-box/PlProgressBox.js

@@ -1,34 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Progress } from '@base-ui/react/progress';
-import { fillTransitionClasses, plateGapClasses, plateRadiusClasses, plateSizeClasses, progressAriaText, progressFraction, progressSlots, progressText, trackClasses } from '../../internal/progress.js';
-import { cx, metaTextClasses, stackGapClasses } from '../../internal/styles.js';
-/**
- * A row of small glass plates that light up.
- *
- * The third shape, and the one that is about the material rather than about the
- * quantity. A bar and a ring both say "this much of it is done"; a row of
- * plates says "this is working" in the library's own vocabulary — the same
- * groove, the same corner, the same gradient — which is what makes it the right
- * one for a loading state inside a Plass surface, where a foreign grey spinner
- * would look borrowed.
- *
- * It answers a value when it has one: the plates fill in order, the leading one
- * partially, so four plates read as a four-segment bar rather than as four
- * quarters. Without a value they cycle, each held back by its own index — and
- * what cycles is the fill's **opacity**, because a gradient has no interpolation
- * between itself and nothing.
- */
-export const PlProgressBox = /* @__PURE__ */ React.forwardRef(function PlProgressBox({ size = 'md', color = 'primary', count = 4, value = null, min = 0, max = 100, label, showValue = false, format, className, style, ...props }, ref) {
-    const fraction = progressFraction(value, min, max);
-    const indeterminate = fraction === null;
-    const hasFormat = format !== undefined;
-    // A row of no plates is not a loading indicator, and a fractional count is a
-    // caller who divided something. Both land on one plate rather than on none.
-    const plates = Math.max(1, Math.floor(count));
-    return (_jsxs(Progress.Root, { ref: ref, value: value ?? null, min: min, max: max, format: format, getAriaValueText: progressAriaText(fraction, hasFormat), className: cx('inline-flex flex-col', stackGapClasses[size], className), style: { ...progressSlots(color), ...style }, ...props, children: [label || showValue ? (_jsxs("div", { className: cx('flex items-baseline gap-2', label ? 'justify-between' : 'justify-end', metaTextClasses[size]), children: [label ? (_jsx(Progress.Label, { className: "min-w-0 truncate text-(--plass-fg)", children: label })) : null, showValue ? (_jsx(Progress.Value, { className: "shrink-0 tabular-nums text-(--plass-muted-fg)", children: (formatted) => progressText(fraction, formatted, hasFormat) })) : null] })) : null, _jsx(Progress.Track, { className: cx('flex', plateGapClasses[size]), children: Array.from({ length: plates }, (_, index) => (_jsx("span", { className: cx('relative overflow-hidden', trackClasses, plateSizeClasses[size], plateRadiusClasses[size]), children: _jsx("span", { "aria-hidden": "true", className: cx('absolute inset-y-0 start-0 [background-image:var(--p-fill)]', indeterminate ? 'plass-plate-wave w-full' : fillTransitionClasses), style: indeterminate
-                            ? { '--p-i': index }
-                            : {
-                                width: `${Math.min(100, Math.max(0, (fraction * plates - index) * 100))}%`
-                            } }) }, index))) })] }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{fillTransitionClasses as r,plateGapClasses as t,plateRadiusClasses as n,plateSizeClasses as i,progressAriaText as o,progressFraction as m,progressSlots as c,progressText as u,trackClasses as f}from"../../internal/progress.js";import{cx as d,metaTextClasses as p,stackGapClasses as x}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */l.forwardRef(function PlProgressBox({size:l="md",color:h="primary",count:g=4,value:y=null,min:b=0,max:v=100,label:w,showValue:N=!1,format:j,className:M,style:P,...k},V){const A=m(y,b,v),B=null===A,R=void 0!==j,T=Math.max(1,Math.floor(g));return a(s.Root,{ref:V,value:y??null,min:b,max:v,format:j,getAriaValueText:o(A,R),className:d("inline-flex flex-col",x[l],M),style:{...c(h),...P},...k,children:[w||N?a("div",{className:d("flex items-baseline gap-2",w?"justify-between":"justify-end",p[l]),children:[w?e(s.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:w}):null,N?e(s.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>u(A,e,R)}):null]}):null,e(s.Track,{className:d("flex",t[l]),children:Array.from({length:T},(a,s)=>e("span",{className:d("relative overflow-hidden",f,i[l],n[l]),children:e("span",{"aria-hidden":"true",className:d("absolute inset-y-0 start-0 [background-image:var(--p-fill)]",B?"plass-plate-wave w-full":r),style:B?{"--p-i":s}:{width:`${Math.min(100,Math.max(0,100*(A*T-s)))}%`}})},s))})]})});

package/dist/components/progress-box/index.js

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

package/dist/components/progress-circular/PlProgressCircular.js

@@ -1,47 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Progress } from '@base-ui/react/progress';
-import { progressAriaText, progressFraction, progressSlots, progressText, ringDiameters, ringStrokes } from '../../internal/progress.js';
-import { cx, gapClasses, metaTextClasses } from '../../internal/styles.js';
-/**
- * A ring that fills, and the one to reach for where there is no room for a bar
- * — inside a button, at the end of a table row, next to a field.
- *
- * The arc is the family's gradient rather than a flat colour, which takes a
- * `<linearGradient>` of its own: an SVG stroke cannot be given a CSS gradient,
- * so the two ends of the fill are lifted out of the slots and rebuilt at 135°.
- * It is worth the extra element — a flat ring beside a swept bar is two
- * materials for one idea.
- *
- * The value and the label sit *beside* the ring rather than inside it. A number
- * in the middle of a dial is the picture everyone has of this component, and it
- * only works at two of the five sizes: at `xs` the ring is fourteen pixels
- * across and there is nowhere for "40%" to go. Beside it, every size reads.
- */
-export const PlProgressCircular = /* @__PURE__ */ React.forwardRef(function PlProgressCircular({ size = 'md', color = 'primary', value = null, min = 0, max = 100, label, showValue = false, format, className, style, ...props }, ref) {
-    const fraction = progressFraction(value, min, max);
-    const indeterminate = fraction === null;
-    const hasFormat = format !== undefined;
-    const gradientId = `${React.useId()}-fill`;
-    const diameter = ringDiameters[size];
-    const stroke = ringStrokes[size];
-    const centre = diameter / 2;
-    // The stroke straddles the path, so the radius has to come in by half of it
-    // or the ring is clipped by its own viewBox.
-    const radius = centre - stroke / 2;
-    const circumference = 2 * Math.PI * radius;
-    // Indeterminate draws a fixed quarter-arc and turns; determinate holds still
-    // and lets the gap close. Both are one dash pattern on one circle.
-    const dashArray = indeterminate ? `${circumference * 0.28} ${circumference}` : `${circumference}`;
-    const dashOffset = indeterminate ? 0 : circumference * (1 - fraction);
-    return (_jsxs(Progress.Root, { ref: ref, value: value ?? null, min: min, max: max, format: format, getAriaValueText: progressAriaText(fraction, hasFormat), className: cx('inline-flex items-center', gapClasses[size], metaTextClasses[size], className), style: { ...progressSlots(color), ...style }, ...props, children: [_jsxs("svg", { 
-                // The rotation is on the whole `<svg>` and not on a group inside it:
-                // `transform-origin: center` resolves against an element's border box,
-                // which an SVG child does not have one of unless `transform-box` is set
-                // as well. One element, one rule, no surprises across browsers.
-                className: cx('shrink-0', indeterminate && 'plass-ring-spin'), width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, fill: "none", "aria-hidden": "true", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--p-solid)" }), _jsx("stop", { offset: "100%", stopColor: "var(--p-solid-to)" })] }) }), _jsx("circle", { cx: centre, cy: centre, r: radius, stroke: "var(--plass-track)", strokeWidth: stroke }), _jsx("circle", { cx: centre, cy: centre, r: radius, stroke: `url(#${gradientId})`, strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: dashArray, strokeDashoffset: dashOffset, 
-                        // An SVG geometry attribute rather than a CSS transform: this is where
-                        // the arc starts, not something the ring does when its state changes.
-                        // Without it a determinate ring would fill from three o'clock.
-                        transform: `rotate(-90 ${centre} ${centre})`, className: "[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]" })] }), label ? (_jsx(Progress.Label, { className: "min-w-0 truncate text-(--plass-fg)", children: label })) : null, showValue ? (_jsx(Progress.Value, { className: "shrink-0 tabular-nums text-(--plass-muted-fg)", children: (formatted) => progressText(fraction, formatted, hasFormat) })) : null] }));
-});
+"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{Progress as a}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as l,progressSlots as o,progressText as i,ringDiameters as n,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as f,metaTextClasses as u}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:d="md",color:p="primary",value:h=null,min:x=0,max:k=100,label:g,showValue:v=!1,format:y,className:$,style:w,...N},j){const P=l(h,x,k),b=null===P,C=void 0!==y,V=`${e.useId()}-fill`,D=n[d],I=c[d],L=D/2,R=L-I/2,W=2*Math.PI*R,_=b?`${.28*W} ${W}`:`${W}`,z=b?0:W*(1-P);return s(a.Root,{ref:j,value:h??null,min:x,max:k,format:y,getAriaValueText:t(P,C),className:m("inline-flex items-center",f[d],u[d],$),style:{...o(p),...w},...N,children:[s("svg",{className:m("shrink-0",b&&"plass-ring-spin"),width:D,height:D,viewBox:`0 0 ${D} ${D}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:V,x1:"0",y1:"0",x2:"1",y2:"1",children:[r("stop",{offset:"0%",stopColor:"var(--p-solid)"}),r("stop",{offset:"100%",stopColor:"var(--p-solid-to)"})]})}),r("circle",{cx:L,cy:L,r:R,stroke:"var(--plass-track)",strokeWidth:I}),r("circle",{cx:L,cy:L,r:R,stroke:`url(#${V})`,strokeWidth:I,strokeLinecap:"round",strokeDasharray:_,strokeDashoffset:z,transform:`rotate(-90 ${L} ${L})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]"})]}),g?r(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:g}):null,v?r(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>i(P,r,C)}):null]})});

package/dist/components/progress-circular/index.js

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

package/dist/components/progress-linear/PlProgressLinear.js

@@ -1,40 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Progress } from '@base-ui/react/progress';
-import { barThicknessClasses, fillTransitionClasses, progressAriaText, progressFraction, progressSlots, progressText, trackClasses } from '../../internal/progress.js';
-import { cx, metaTextClasses, stackGapClasses } from '../../internal/styles.js';
-/**
- * A bar that fills.
- *
- * The workhorse of the three: it is the only one that can show *how much* is
- * left at a glance, because length is the one quantity a reader can compare
- * without counting.
- *
- * The groove is `--plass-track`, the same neutral ink a PlSlider's rail and a
- * PlSwitch's off state are cut in, and the segment over it is the family's
- * gradient — so the filled part of the run is made of exactly the same material
- * as the button that submits the form it is in. Which is also why the movement
- * is on `width`: a gradient cannot be transitioned, and a length can.
- *
- * Both the groove and the segment are fully rounded, and that is the one place
- * the library's rule about pills does not apply. The rule protects the flat run
- * along a control's edge that a line of text sits on; at six pixels tall there
- * is no flat run left to protect, and a square-ended bar reads as a rendering
- * fault rather than as a cut edge.
- *
- * Base UI owns the semantics — `role="progressbar"`, the value and range
- * attributes, `aria-valuetext`, and dropping the value entirely when the bar is
- * indeterminate — and it computes the fill width too, so the determinate case
- * here is a class list and nothing else.
- */
-export const PlProgressLinear = /* @__PURE__ */ React.forwardRef(function PlProgressLinear({ size = 'md', color = 'primary', value = null, min = 0, max = 100, label, showValue = false, format, className, style, ...props }, ref) {
-    const fraction = progressFraction(value, min, max);
-    const indeterminate = fraction === null;
-    const hasFormat = format !== undefined;
-    return (_jsxs(Progress.Root, { ref: ref, value: value ?? null, min: min, max: max, format: format, getAriaValueText: progressAriaText(fraction, hasFormat), className: cx('flex w-full flex-col', stackGapClasses[size], className), style: { ...progressSlots(color), ...style }, ...props, children: [label || showValue ? (_jsxs("div", { className: cx('flex items-baseline gap-2', label ? 'justify-between' : 'justify-end', metaTextClasses[size]), children: [label ? (_jsx(Progress.Label, { className: "min-w-0 truncate text-(--plass-fg)", children: label })) : null, showValue ? (_jsx(Progress.Value, { className: "shrink-0 tabular-nums text-(--plass-muted-fg)", children: (formatted) => progressText(fraction, formatted, hasFormat) })) : null] })) : null, _jsx(Progress.Track, { className: cx('relative w-full overflow-hidden rounded-full', trackClasses, barThicknessClasses[size]), children: _jsx(Progress.Indicator, { className: cx('rounded-full [background-image:var(--p-fill)]', 
-                    // `plass-progress-sweep` supplies the position, the width and the
-                    // animation; with a value Base UI supplies the width instead and
-                    // this transition is what makes it travel rather than jump. Both
-                    // change an inline size, never a transform.
-                    indeterminate ? 'plass-progress-sweep' : `absolute top-0 ${fillTransitionClasses}`) }) })] }));
-});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as a,fillTransitionClasses as t,progressAriaText as n,progressFraction as o,progressSlots as i,progressText as m,trackClasses as u}from"../../internal/progress.js";import{cx as c,metaTextClasses as f,stackGapClasses as d}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */s.forwardRef(function PlProgressLinear({size:s="md",color:p="primary",value:x=null,min:g=0,max:b=100,label:h,showValue:w=!1,format:j,className:v,style:N,...y},P){const k=o(x,g,b),L=null===k,V=void 0!==j;return l(r.Root,{ref:P,value:x??null,min:g,max:b,format:j,getAriaValueText:n(k,V),className:c("flex w-full flex-col",d[s],v),style:{...i(p),...N},...y,children:[h||w?l("div",{className:c("flex items-baseline gap-2",h?"justify-between":"justify-end",f[s]),children:[h?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:h}):null,w?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>m(k,e,V)}):null]}):null,e(r.Track,{className:c("relative w-full overflow-hidden rounded-full",u,a[s]),children:e(r.Indicator,{className:c("rounded-full [background-image:var(--p-fill)]",L?"plass-progress-sweep":`absolute top-0 ${t}`)})})]})});

package/dist/components/progress-linear/index.js

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

package/dist/components/radio-group/PlRadioGroup.js

@@ -1,99 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Radio as BaseUIRadio } from '@base-ui/react/radio';
-import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
-import { Field } from '@base-ui/react/field';
-import { controlSlots, focusRingClasses, glassClasses, hasContent, metaTextClasses, tickDotClasses, tickRowTextClasses, tickSizeClasses, transitionClasses } from '../../internal/styles.js';
-const RadioGroupContext = /* @__PURE__ */ React.createContext({
-    size: 'md',
-    color: 'primary',
-    readOnly: false
-});
-/**
- * The dot. Round, and one of the two things in the library allowed to be —
- * roundness is exactly what tells a reader "one of these" rather than "any of
- * these", and it is the one convention old enough that breaking it would cost
- * more than it bought.
- */
-const dotBaseClasses = /* @__PURE__ */ [
-    'relative inline-flex shrink-0 items-center justify-center rounded-full border',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    focusRingClasses
-].join(' ');
-/**
- * No gloss line and no tinted lift, for the reason a PlCheckbox's tick has
- * neither: a 1px white edge is light on a cut edge at 40px and a grey smudge at
- * 18px, and a `0 6px 16px` shadow under an 18px circle is bigger than the
- * circle. The glass stays; only the two decorations go.
- *
- * The edge is `--plass-border` rather than the sheet's own `--plass-glass-line`,
- * and that is not a slip. The glass hairline is white light on a translucent
- * pane, which is invisible the moment the tick is set on a light card rather
- * than on the page wash — and a tick nobody can see is a control nobody can
- * find. A neutral hairline reads on both.
- */
-const restDotClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]',
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105'
-].join(' ');
-const readOnlyDotClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'saturate-[0.55]',
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent]'
-].join(' ');
-const disabledDotClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'opacity-50 saturate-[0.35]',
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent]'
-].join(' ');
-/** The inner dot: `currentColor`, so it inherits the on-fill ink. */
-const indicatorClasses = 'rounded-full bg-current';
-/**
- * One option in a `PlRadioGroup`.
- *
- * It has no `size` and no `color` of its own — both come from the group, which
- * is the only place they can be set once and mean the same thing for every
- * option in the set.
- */
-export const PlRadio = /* @__PURE__ */ React.forwardRef(function PlRadio({ label, description, disabled = false, className, style, ...props }, ref) {
-    const group = React.useContext(RadioGroupContext);
-    const readOnly = props.readOnly ?? group.readOnly;
-    return (_jsx(Field.Root, { disabled: disabled, className: ['flex flex-col', className ?? ''].filter(Boolean).join(' '), style: style, children: _jsxs("div", { className: `flex items-start gap-2 ${tickRowTextClasses[group.size]}`, children: [_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUIRadio.Root, { ref: ref, className: [
-                            dotBaseClasses,
-                            tickSizeClasses[group.size],
-                            disabled ? disabledDotClasses : readOnly ? readOnlyDotClasses : restDotClasses
-                        ].join(' '), disabled: disabled, ...props, children: _jsx(BaseUIRadio.Indicator, { className: `${indicatorClasses} ${tickDotClasses[group.size]}` }) }) }), label || description ? (_jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [label ? (_jsx(Field.Label, { className: disabled ? 'text-(--plass-muted-fg)' : 'cursor-pointer text-(--plass-fg)', children: label })) : null, description ? (_jsx(Field.Description, { className: `${metaTextClasses[group.size]} text-(--plass-muted-fg)`, children: description })) : null] })) : null] }) }));
-});
-/**
- * A set of options where exactly one is chosen.
- *
- * Base UI owns the roving tab index and the arrow-key navigation, which is the
- * whole reason a radio group is a component at all rather than a `<div>` full of
- * inputs: the set takes one tab stop, and the arrows move within it.
- */
-export const PlRadioGroup = /* @__PURE__ */ React.forwardRef(function PlRadioGroup({ size = 'md', color = 'primary', orientation = 'vertical', label, description, error, invalid, disabled = false, readOnly = false, className, style, children, ...props }, ref) {
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    // Invalid re-points the whole slot family at `danger`, so every dot, the
-    // ring and the message all turn over together.
-    const family = isInvalid ? 'danger' : color;
-    const context = React.useMemo(() => ({ size, color: family, readOnly }), [size, family, readOnly]);
-    return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: ['flex flex-col gap-1.5', className ?? ''].filter(Boolean).join(' '), 
-            // `solid`, because a checked dot *is* the coloured thing.
-            style: { ...controlSlots(family, 0, 'solid'), ...style }, children: [label ? (_jsx(Field.Label, { className: [
-                        metaTextClasses[size],
-                        'font-semibold',
-                        disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'
-                    ].join(' '), children: label })) : null, description ? (_jsx(Field.Description, { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null, _jsx(BaseUIRadioGroup, { ref: ref, disabled: disabled, readOnly: readOnly, className: [
-                        'flex',
-                        orientation === 'horizontal' ? 'flex-row flex-wrap gap-x-5 gap-y-2' : 'flex-col gap-2'
-                    ].join(' '), ...props, children: children }), hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }) }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as l}from"@base-ui/react/radio";import{RadioGroup as o}from"@base-ui/react/radio-group";import{Field as s}from"@base-ui/react/field";import{controlSlots as t,focusRingClasses as i,glassClasses as d,hasContent as n,metaTextClasses as c,tickDotClasses as p,tickRowTextClasses as m,tickSizeClasses as f,transitionClasses as u}from"../../internal/styles.js";const h=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1}),b=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",u,i].join(" "),g=/* @__PURE__ */[d,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105"].join(" "),x=/* @__PURE__ */[d,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),v=/* @__PURE__ */[d,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" ");export const PlRadio=/* @__PURE__ */r.forwardRef(function PlRadio({label:o,description:t,disabled:i=!1,className:d,style:n,...u},k){const y=r.useContext(h),N=u.readOnly??y.readOnly;return e(s.Root,{disabled:i,className:["flex flex-col",d??""].filter(Boolean).join(" "),style:n,children:a("div",{className:`flex items-start gap-2 ${m[y.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:k,className:[b,f[y.size],i?v:N?x:g].join(" "),disabled:i,...u,children:e(l.Indicator,{className:`rounded-full bg-current ${p[y.size]}`})})}),o||t?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[o?e(s.Label,{className:i?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:o}):null,t?e(s.Description,{className:`${c[y.size]} text-(--plass-muted-fg)`,children:t}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */r.forwardRef(function PlRadioGroup({size:l="md",color:i="primary",orientation:d="vertical",label:p,description:m,error:f,invalid:u,disabled:b=!1,readOnly:g=!1,className:x,style:v,children:k,...y},N){const j=n(f),R=u??j,z=R?"danger":i,w=r.useMemo(()=>({size:l,color:z,readOnly:g}),[l,z,g]);return e(h.Provider,{value:w,children:a(s.Root,{disabled:b,invalid:R,className:["flex flex-col gap-1.5",x??""].filter(Boolean).join(" "),style:{...t(z,0,"solid"),...v},children:[p?e(s.Label,{className:[c[l],"font-semibold",b?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:p}):null,m?e(s.Description,{className:`${c[l]} text-(--plass-muted-fg)`,children:m}):null,e(o,{ref:N,disabled:b,readOnly:g,className:["flex","horizontal"===d?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2"].join(" "),...y,children:k}),j?e(s.Error,{match:!0,className:`${c[l]} text-(--p-accent)`,children:f}):null]})})});

package/dist/components/radio-group/index.js

@@ -1 +1 @@
-export { PlRadio, PlRadioGroup } from './PlRadioGroup.js';
+export{PlRadio,PlRadioGroup}from"./PlRadioGroup.js";

package/dist/components/rating/PlRating.js

@@ -1,101 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { StarIcon, StarOutlineIcon } from '../../internal/icons.js';
-import { controlSlots, cx, focusWithinRingClasses, gapClasses, iconSizeClasses, radiusClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * The box one copy of the glyph is drawn in. Both copies get exactly this, or
- * the clipped one would not line up with the outline underneath it.
- */
-const starClasses = 'flex items-center justify-center';
-/** The default accessible name of a score. */
-function defaultValueLabel(value, count) {
-    return value <= 0 ? 'No rating' : `${value} out of ${count}`;
-}
-/**
- * A score out of five, as a row of stars.
- *
- * Underneath an interactive rating is a radio group of real `<input>`s, one per
- * choosable score, each visually hidden under the fraction of a star it stands
- * for. That is the whole accessibility argument: a rating *is* "exactly one of
- * these", so it gets one tab stop for the row, arrow keys within it,
- * `aria-checked` on the one that is taken, and a value in a form submission —
- * none of which a row of `<button>`s or a `<div>` with a click handler would
- * have.
- *
- * The fraction is drawn by laying the filled star over the empty one and
- * clipping it to a percentage of the width. Nothing is transformed and no glyph
- * is scaled, so a half star is the left half of exactly the star beside it —
- * which is also the no-transform rule holding on a component whose whole job is
- * a partial shape. The clip runs from the inline start, so it fills from the
- * right under RTL without anything being told to.
- *
- * `readOnly` is a different component in the same clothes: no inputs, no radio
- * group, and one `role="img"` carrying the score as a sentence. A star display
- * that kept twenty focusable radios would be twenty tab stops on a page that
- * was only reporting a number.
- */
-export const PlRating = /* @__PURE__ */ React.forwardRef(function PlRating({ value: valueProp, defaultValue = 0, onValueChange, count = 5, precision = 1, icon, emptyIcon, clearable = true, readOnly = false, disabled = false, name: nameProp, required = false, size = 'md', color = 'warning', label = 'Rating', valueLabel = defaultValueLabel, className, style, onPointerLeave, ...props }, ref) {
-    const generatedName = React.useId();
-    const name = nameProp ?? generatedName;
-    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
-    const controlled = valueProp !== undefined;
-    const value = controlled ? valueProp : uncontrolled;
-    // What the pointer is currently promising, which is not the value until it is
-    // clicked. `null` is "the pointer is not on the row", not "zero stars".
-    const [hovered, setHovered] = React.useState(null);
-    const stars = Math.max(1, Math.floor(count));
-    const step = precision > 0 && precision <= 1 ? precision : 1;
-    const stepsPerStar = Math.round(1 / step);
-    const shown = Math.max(0, Math.min(stars, hovered ?? value));
-    const change = (next) => {
-        if (!controlled) {
-            setUncontrolled(next);
-        }
-        onValueChange?.(next);
-    };
-    const marks = Array.from({ length: stars }, (_, index) => {
-        // How much of *this* star is filled, from 0 to 1.
-        const fill = Math.max(0, Math.min(1, shown - index));
-        return (_jsxs("span", { className: cx('relative inline-flex shrink-0', iconSizeClasses[size], radiusClasses.xs, readOnly || disabled ? '' : focusWithinRingClasses), children: [_jsx("span", { className: cx(starClasses, iconSizeClasses[size], 'text-(--p-empty)'), children: emptyIcon ?? _jsx(StarOutlineIcon, {}) }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 start-0 overflow-hidden", style: { width: `${fill * 100}%` }, children: _jsx("span", { className: cx(starClasses, iconSizeClasses[size], 'text-(--p-accent)', transitionClasses), children: icon ?? _jsx(StarIcon, {}) }) }), readOnly
-                    ? null
-                    : Array.from({ length: stepsPerStar }, (_, part) => {
-                        const score = Number((index + (part + 1) * step).toFixed(4));
-                        return (_jsx("label", { className: cx('absolute inset-y-0', disabled ? 'cursor-not-allowed' : 'cursor-pointer'), style: {
-                                insetInlineStart: `${(part * 100) / stepsPerStar}%`,
-                                width: `${100 / stepsPerStar}%`
-                            }, onPointerEnter: () => {
-                                if (!disabled) {
-                                    setHovered(score);
-                                }
-                            }, children: _jsx("input", { type: "radio", className: srOnlyClasses, name: name, value: score, checked: value === score, disabled: disabled, required: required, "aria-label": valueLabel(score, stars), onChange: () => change(score), 
-                                // Clearing cannot ride on `change`: clicking a radio that is
-                                // already checked fires a click and no change at all, and
-                                // that click is exactly the gesture being listened for.
-                                onClick: () => {
-                                    if (clearable && value === score) {
-                                        change(0);
-                                    }
-                                } }) }, score));
-                    })] }, index));
-    });
-    const classNames = cx('inline-flex items-center align-middle', gapClasses[size], 
-    // The house treatment, not a grey token: the light goes out of the row and
-    // the page shows through it, which is what unavailable looks like
-    // everywhere else in the library.
-    disabled ? 'cursor-not-allowed opacity-50 saturate-[0.35]' : '', className);
-    const styles = {
-        ...controlSlots(color, 0, 'solid'),
-        // An empty star is not a disabled one and not a hairline: it is the ghost of
-        // the star beside it, so it takes the muted ink at enough strength to read
-        // as a shape and not enough to compete with the ones that are filled.
-        '--p-empty': 'color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)',
-        ...style
-    };
-    if (readOnly) {
-        return (_jsx("div", { ref: ref, role: "img", "aria-label": valueLabel(Math.max(0, Math.min(stars, value)), stars), className: classNames, style: styles, onPointerLeave: onPointerLeave, ...props, children: marks }));
-    }
-    return (_jsx("div", { ref: ref, role: "radiogroup", "aria-label": label, "aria-disabled": disabled || undefined, "aria-required": required || undefined, className: classNames, style: styles, onPointerLeave: (event) => {
-            setHovered(null);
-            onPointerLeave?.(event);
-        }, ...props, children: marks }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{StarIcon as n,StarOutlineIcon as r}from"../../internal/icons.js";import{controlSlots as l,cx as i,focusWithinRingClasses as s,gapClasses as o,iconSizeClasses as c,radiusClasses as d,srOnlyClasses as u,transitionClasses as m}from"../../internal/styles.js";const h="flex items-center justify-center";function defaultValueLabel(e,a){return e<=0?"No rating":`${e} out of ${a}`}export const PlRating=/* @__PURE__ */t.forwardRef(function PlRating({value:p,defaultValue:f=0,onValueChange:y,count:b=5,precision:x=1,icon:v,emptyIcon:g,clearable:N=!0,readOnly:M=!1,disabled:w=!1,name:j,required:L=!1,size:P="md",color:k="warning",label:R="Rating",valueLabel:V=defaultValueLabel,className:q,style:C,onPointerLeave:I,...S},A){const $=t.useId(),z=j??$,[E,F]=t.useState(f),O=void 0!==p,B=O?p:E,[D,G]=t.useState(null),H=Math.max(1,Math.floor(b)),J=x>0&&x<=1?x:1,K=Math.round(1/J),Q=Math.max(0,Math.min(H,D??B)),change=e=>{O||F(e),y?.(e)},T=Array.from({length:H},(t,l)=>{const o=Math.max(0,Math.min(1,Q-l));return a("span",{className:i("relative inline-flex shrink-0",c[P],d.xs,M||w?"":s),children:[e("span",{className:i(h,c[P],"text-(--p-empty)"),children:g??e(r,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*o+"%"},children:e("span",{className:i(h,c[P],"text-(--p-accent)",m),children:v??e(n,{})})}),M?null:Array.from({length:K},(a,t)=>{const n=Number((l+(t+1)*J).toFixed(4));return e("label",{className:i("absolute inset-y-0",w?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*t/K+"%",width:100/K+"%"},onPointerEnter:()=>{w||G(n)},children:e("input",{type:"radio",className:u,name:z,value:n,checked:B===n,disabled:w,required:L,"aria-label":V(n,H),onChange:()=>change(n),onClick:()=>{N&&B===n&&change(0)}})},n)})]},l)}),U=i("inline-flex items-center align-middle",o[P],w?"cursor-not-allowed opacity-50 saturate-[0.35]":"",q),W={...l(k,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...C};return e("div",M?{ref:A,role:"img","aria-label":V(Math.max(0,Math.min(H,B)),H),className:U,style:W,onPointerLeave:I,...S,children:T}:{ref:A,role:"radiogroup","aria-label":R,"aria-disabled":w||void 0,"aria-required":L||void 0,className:U,style:W,onPointerLeave:e=>{G(null),I?.(e)},...S,children:T})});

package/dist/components/rating/index.js

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