plass-ui 0.0.1 → 1.0.1

package/dist/components/progress-box/PlProgressBox.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type PlassProgressProps } from '../../internal/progress.js';
+export interface PlProgressBoxProps extends PlassProgressProps {
+    /** Size of one plate. */
+    size?: PlassProgressProps['size'];
+    /**
+     * How many plates the row is made of.
+     *
+     * Four by default: enough that the wave reads as a wave, few enough that a
+     * determinate row can be counted at a glance rather than measured. Set it to
+     * the number of steps when the thing being waited on genuinely has steps.
+     * @default 4
+     */
+    count?: number;
+}
+/**
+ * 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 declare const PlProgressBox: React.ForwardRefExoticComponent<PlProgressBoxProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"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.d.ts

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

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

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

package/dist/components/progress-circular/PlProgressCircular.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type PlassProgressProps } from '../../internal/progress.js';
+export interface PlProgressCircularProps extends PlassProgressProps {
+    /** Diameter of the ring. Sits just under the control ladder at every step. */
+    size?: PlassProgressProps['size'];
+}
+/**
+ * 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 declare const PlProgressCircular: React.ForwardRefExoticComponent<PlProgressCircularProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"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.d.ts

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

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

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

package/dist/components/progress-linear/PlProgressLinear.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type PlassProgressProps } from '../../internal/progress.js';
+export interface PlProgressLinearProps extends PlassProgressProps {
+    /** Thickness of the groove. Nothing else on a bar has a size. */
+    size?: PlassProgressProps['size'];
+}
+/**
+ * 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 declare const PlProgressLinear: React.ForwardRefExoticComponent<PlProgressLinearProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"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.d.ts

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

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

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

package/dist/components/radio-group/PlRadioGroup.d.ts

@@ -0,0 +1,54 @@
+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 type { PlassColor, PlassOrientation, PlassSize } from '../../types.js';
+export interface PlRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadioGroup>, 'className' | 'style' | 'render'> {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Which way the options stack. Vertical by default — a column of options is
+     * scannable at any length, and a row silently becomes unreadable the moment
+     * one label is longer than expected.
+     * @default 'vertical'
+     */
+    orientation?: PlassOrientation;
+    /** The question the options answer. Rendered as the group's label. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below the options. Its presence also turns the group invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlRadioProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadio.Root>, 'className' | 'style' | 'render' | 'children'> {
+    /** The text beside the dot. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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 declare const PlRadio: React.ForwardRefExoticComponent<PlRadioProps & React.RefAttributes<HTMLElement>>;
+/**
+ * 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 declare const PlRadioGroup: React.ForwardRefExoticComponent<PlRadioGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"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.d.ts

@@ -0,0 +1,2 @@
+export { PlRadio, PlRadioGroup } from './PlRadioGroup.js';
+export type { PlRadioGroupProps, PlRadioProps } from './PlRadioGroup.js';

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

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

package/dist/components/rating/PlRating.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+export interface PlRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** How much is rated. Use with `onValueChange` for a controlled rating. */
+    value?: number;
+    /** Where an uncontrolled rating starts. @default 0 */
+    defaultValue?: number;
+    /** Called with the new score. `0` is what a cleared rating reports. */
+    onValueChange?: (value: number) => void;
+    /** How many stars there are, and therefore the highest score. @default 5 */
+    count?: number;
+    /**
+     * The smallest step that can be *chosen*, as a fraction of one star — `0.5`
+     * gives half stars, `1` whole ones. Anything outside `0 < precision <= 1`
+     * falls back to `1`.
+     *
+     * It bounds what a reader can pick and nothing else: a `value` of `4.3` is
+     * drawn as four stars and a third at every precision, because an average is
+     * not a choice and rounding it to the nearest half would be reporting a
+     * different number from the one the component was handed.
+     * @default 1
+     */
+    precision?: number;
+    /** The glyph a filled star is drawn with. */
+    icon?: React.ReactNode;
+    /** And the one an empty star is drawn with. Has to be the same shape. */
+    emptyIcon?: React.ReactNode;
+    /** Choosing the score that is already chosen clears it back to `0`. @default true */
+    clearable?: boolean;
+    /**
+     * Shows the score without letting it be changed — a product's average, a
+     * rating somebody else left.
+     *
+     * This is the one `readOnly` in the library that does **not** drain the
+     * saturation, because it is not a control being held still: there are no
+     * inputs at all, and what is left is a picture of a number. A row of grey
+     * stars would say the score itself was unavailable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Unavailable. The light goes out of the whole row. */
+    disabled?: boolean;
+    /** Identifies the value when a form is submitted. */
+    name?: string;
+    /** A form will not submit until a star has been chosen. */
+    required?: boolean;
+    /** Height of one star, on the standalone-glyph ladder. @default 'md' */
+    size?: PlassSize;
+    /**
+     * Semantic colour role.
+     *
+     * `warning` by default — the amber a star is expected to be — rather than the
+     * `primary` everything else takes. It is the one place in the library where a
+     * component's default colour is chosen by what the object *is* instead of by
+     * what it means.
+     * @default 'warning'
+     */
+    color?: PlassColor;
+    /** Names the whole control. @default 'Rating' */
+    label?: string;
+    /**
+     * What one star, and the whole control once it is read only, is called.
+     * @default `{value} out of {count}`
+     */
+    valueLabel?: (value: number, count: number) => string;
+}
+/**
+ * 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 declare const PlRating: React.ForwardRefExoticComponent<PlRatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/rating/PlRating.js

@@ -0,0 +1 @@
+"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.d.ts

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

package/dist/components/rating/index.js

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

package/dist/components/scroll-zone/PlScrollZone.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassStyleProps } from '../../types.js';
+/**
+ * When the scroll buttons are drawn.
+ *
+ * - `auto` — only the one that has somewhere to go, and neither of them while
+ *   everything fits. The default: a control that cannot do anything is worse
+ *   than no control, and a row that does not overflow is not a scroller.
+ * - `always` — both, from the first paint, with the one that has nowhere to go
+ *   `disabled` rather than gone. What a row whose content arrives later wants,
+ *   since the buttons do not appear under the pointer half a second in.
+ * - `none` — none at all. Dragging, the wheel and the arrow keys are still
+ *   there; this is the strip that scrolls the way a phone scrolls.
+ */
+export type PlScrollZoneButtons = 'auto' | 'always' | 'none';
+/**
+ * What pressing a scroll button does.
+ *
+ * - `item` — moves to the next child along, `step` of them at a time. The
+ *   default, and the only one that lands on something rather than between two
+ *   things.
+ * - `page` — moves by everything currently on screen, the way Page Down does.
+ * - `hold` — scrolls for as long as the button is held, at `speed` pixels a
+ *   second. A press too short to be a hold falls back to one `item`, so the
+ *   button is never dead to a quick tap.
+ */
+export type PlScrollZoneMode = 'item' | 'page' | 'hold';
+/**
+ * Where the scroll buttons sit, which is also where the strip ends.
+ *
+ * - `overlay` — over the ends of the strip, which keeps every pixel of the box
+ *   for content and lets an item pass under a button. The default, and what a
+ *   shelf of pictures wants.
+ * - `inline` — beside the strip, in the layout. The scroller stops where the
+ *   button starts, so an item is *cut off* at the button's edge rather than
+ *   sliding beneath it: nothing is ever half-hidden behind a control, and the
+ *   button is legible over the page rather than over whatever it landed on.
+ *
+ * The lane an `inline` button sits in is kept even while that button has
+ * nowhere to go, or the strip would resize under the pointer every time it
+ * reached an end.
+ */
+export type PlScrollZoneButtonPlacement = 'overlay' | 'inline';
+export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the children run, and therefore which way the zone scrolls.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * How many rows a horizontal zone lays its children out in before it starts a
+     * new column — and how many columns a vertical one uses. `2` is the shelf
+     * that holds twice as much in the same width.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The gap between children, on Tailwind's spacing scale: `2` is `0.5rem`, the
+     * same step `gap-2` is. The same ladder `PlGrid`'s own `spacing` is on.
+     * @default 2
+     */
+    spacing?: number;
+    /** When the scroll buttons are drawn. @default 'auto' */
+    buttons?: PlScrollZoneButtons;
+    /**
+     * Whether the buttons sit over the strip or beside it. `inline` is what to
+     * reach for when an item disappearing under a button reads as a bug rather
+     * than as depth.
+     * @default 'overlay'
+     */
+    buttonPlacement?: PlScrollZoneButtonPlacement;
+    /** What pressing one does. @default 'item' */
+    mode?: PlScrollZoneMode;
+    /** How many children one press moves, in `item` mode. @default 1 */
+    step?: number;
+    /** How fast a held button scrolls, in pixels a second. @default 900 */
+    speed?: number;
+    /**
+     * Snaps the nearest child to the leading edge when the scrolling stops —
+     * dragging and the wheel included, not only the buttons.
+     * @default false
+     */
+    snap?: boolean;
+    /**
+     * Lets a mouse or a pen drag the strip along, the way a finger already does.
+     * Touch is left to the browser, whose own scrolling is better than anything a
+     * handler can imitate: momentum, rubber-banding and the scrollbar all come
+     * with it.
+     * @default true
+     */
+    drag?: boolean;
+    /** Shows the native scrollbar. @default false */
+    scrollbar?: boolean;
+    /** What the scrollable region is called — "Categories", "Recent files". */
+    label?: string;
+    /**
+     * What the buttons are called. Never drawn — a disc with a chevron in it has
+     * no accessible name of its own, which is the defect `PlIconButton`'s `label`
+     * exists to make impossible.
+     * @default 'Previous'
+     */
+    previousLabel?: string;
+    /** @default 'Next' */
+    nextLabel?: string;
+    /** What is being laid out. Every top-level child is one item of the strip. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of anything, laid out in one direction and scrolled in it.
+ *
+ * The mechanism is an ordinary scroll container, and everything the component
+ * offers is a way of driving one. Swiping on a phone, two-finger dragging on a
+ * trackpad, the wheel, the arrow keys and the scrollbar are the browser's own
+ * and are never intercepted; what is added on top is a pair of buttons for the
+ * pointer that has neither a wheel nor a finger, and a mouse drag for the strip
+ * that reads as something to pull rather than something to page.
+ *
+ * Nothing is transformed. A translated track would have to argue for an
+ * exception to the house rule; a scroll offset does not, and it is also what
+ * makes the strip run the other way under RTL without being told, keeps the
+ * scrollbar honest, and lets the browser scroll a focused child into view.
+ *
+ * It draws no sheet of its own, and there is no `elevation` to give it one: a
+ * shelf is a way of laying children out, and the children arrive with their own
+ * surfaces. `variant`, `size`, `color` and `density` reach the two buttons,
+ * which are real `PlIconButton`s.
+ *
+ * `lines` is what separates this from a `PlCarousel`: a carousel is one thing at
+ * a time and knows which one, a scroll zone is a shelf that happens to be longer
+ * than the room it is in.
+ */
+export declare const PlScrollZone: React.ForwardRefExoticComponent<PlScrollZoneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-zone/PlScrollZone.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{PlIconButton as r}from"../icon-button/PlIconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{ChevronIcon as s}from"../../internal/icons.js";import{cx as i}from"../../internal/styles.js";const l={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},a={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const PlScrollZone=/* @__PURE__ */n.forwardRef(function PlScrollZone({orientation:c="horizontal",lines:u=1,spacing:d=2,buttons:p="auto",buttonPlacement:f="overlay",mode:m="item",step:v=1,speed:b=900,snap:g=!1,drag:w=!0,scrollbar:h=!1,variant:y="glass",size:x="md",color:k="primary",density:L="default",label:E,previousLabel:C="Previous",nextLabel:P="Next",className:R,style:B,children:j,...N},M){const T="horizontal"===c,A=Math.max(1,Math.round(u)),z=Math.max(1,Math.round(v)),D=n.useRef(null),S=n.useRef(null),[H,F]=n.useState({back:!1,forward:!1}),I=n.useCallback(()=>{const e=D.current;if(!e)return;const t=T?e.clientWidth:e.clientHeight,n=T?e.scrollWidth:e.scrollHeight,r=Math.abs(T?e.scrollLeft:e.scrollTop);F(e=>{const o=r>1,s=n-t-r>1;return e.back===o&&e.forward===s?e:{back:o,forward:s}})},[T]);n.useEffect(()=>{const e=D.current,t=S.current;if(!e)return;if(I(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(I);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[I]);const W=n.useCallback(()=>{const e=D.current;return e&&T&&"rtl"===getComputedStyle(e).direction?-1:1},[T]),$=n.useCallback((e,t)=>{const n=D.current;if(!n)return;const r=t?function scrollBehavior(){return"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}():"auto";n.scrollBy(T?{left:e,behavior:r}:{top:e,behavior:r})},[T]),q=n.useCallback(()=>{const e=D.current,t=S.current;if(!e||!t)return[];const n=T&&"rtl"===getComputedStyle(e).direction,r=T?n?"right":"left":"top",o=n?-1:1,s=e.getBoundingClientRect()[r],i=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-s)*o);i.includes(t)||i.push(t)}return i.sort((e,t)=>e-t)},[T]),O=n.useCallback((e,t=m)=>{const n=D.current;if(!n)return;const r=W(),o=T?n.clientWidth:n.clientHeight;if("page"===t)return void $(o*(e?1:-1)*r,!0);const s=q(),i=s.filter(e=>e>1),l=s.filter(e=>e<-1),a=e?i[z-1]:l[l.length-z];$(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[W,T,q,z,m,$]),X=n.useRef(null);n.useEffect(()=>()=>X.current?.(),[]);const Y=n.useCallback((e,t)=>{if(X.current)return;const n=W(),r=performance.now();let o=r,s=0;const tick=t=>{const r=t-o;o=t,$(b*r/1e3*(e?1:-1)*n,!1),s=requestAnimationFrame(tick)};s=requestAnimationFrame(tick);const release=()=>{cancelAnimationFrame(s),X.current=null,window.removeEventListener(t,release),window.removeEventListener("pointercancel",release),window.removeEventListener("blur",release),performance.now()-r<140&&O(e,"item")};X.current=release,window.addEventListener(t,release),window.addEventListener("pointercancel",release),window.addEventListener("blur",release)},[O,W,$,b]),Z=n.useRef(null);function pressHandlers(e){return"hold"!==m?{onClick:()=>O(e)}:{onPointerDown:t=>{0===t.button&&Y(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),Y(e,"keyup"))}}}n.useEffect(()=>()=>Z.current?.(),[]);const _="none"!==p&&("always"===p||H.back||H.forward),K="inline"===f;function scrollButton(t){const n=t?H.forward:H.back;if("auto"===p&&!n&&!K)return e("span",{});const o="auto"===p&&!n,l=e(r,{variant:y,size:x,color:k,density:L,elevation:1,label:t?P:C,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:i("flex items-center",T?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180"),children:e(s,{})}),...pressHandlers(t)});return K?e("span",{className:i("flex shrink-0 items-center justify-center",o?"invisible":""),inert:o,children:l}):l}return t("div",{ref:M,className:i("relative flex min-w-0",K&&T?"flex-row items-stretch":"flex-col",K?a[x]:"",R),style:{"--p-ring":`var(--plass-${k}-ring)`,...B},...N,children:[_&&K?scrollButton(!1):null,e("div",{ref:D,tabIndex:0,role:E?"group":void 0,"aria-label":E,className:i("min-h-0 min-w-0 grow",T?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",g?T?"snap-x snap-mandatory":"snap-y snap-mandatory":"",h?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",w&&(H.back||H.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:I,onPointerDown:function beginDrag(e){if(!w||"touch"===e.pointerType||0!==e.button)return;Z.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,s=t.scrollTop;let i=!1;const l=document.body.style.getPropertyValue("-webkit-user-select"),move=e=>{const l=e.clientX-n,a=e.clientY-r;if(!i){if(Math.abs(T?l:a)<4)return;i=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}T?t.scrollLeft=o-l:t.scrollTop=s-a},release=()=>{Z.current=null,t.removeEventListener("pointermove",move),t.removeEventListener("pointerup",end),t.removeEventListener("pointercancel",release),delete t.dataset.dragging,l?document.body.style.setProperty("-webkit-user-select",l):document.body.style.removeProperty("-webkit-user-select")},end=()=>{const e=i;if(release(),!e)return;const swallow=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",swallow,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",swallow,!0),0)};Z.current=release,t.addEventListener("pointermove",move),t.addEventListener("pointerup",end),t.addEventListener("pointercancel",release)},children:e("div",{ref:S,className:i(g?"[&>*]:snap-start":""),style:{display:"grid",gap:o(d),gridAutoFlow:T?"column":"row",...T?{width:"max-content",gridTemplateRows:`repeat(${A}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${A}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:j})}),_&&K?scrollButton(!0):null,_&&!K?t("div",{className:i("pointer-events-none absolute inset-0 flex justify-between",T?"items-center":"flex-col items-center",l[x]),children:[scrollButton(!1),scrollButton(!0)]}):null]})});

package/dist/components/scroll-zone/index.d.ts

@@ -0,0 +1,2 @@
+export { PlScrollZone } from './PlScrollZone.js';
+export type { PlScrollZoneButtonPlacement, PlScrollZoneButtons, PlScrollZoneMode, PlScrollZoneProps } from './PlScrollZone.js';

package/dist/components/scroll-zone/index.js

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

package/dist/components/segmented-button/PlSegmentedButton.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps, PlassVariant } from '../../types.js';
+/** A segment's value. The same restraint `PlSelect` puts on its own. */
+export type PlSegmentValue = string | number;
+export interface PlSegmentedButtonProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * What the groove and the tile riding in it are made of.
+     *
+     * - `solid` — a groove cut into the sheet with a **tinted-glass key** riding
+     *   in it. The loudest, and the one for a control a screen is about to be
+     *   steered by.
+     * - `glass` — the same groove with a hairline round it and a clear tile
+     *   rather than a coloured one. The default.
+     * - `ghost` — no groove at all: the segments sit straight on the page and only
+     *   the chosen one has a surface.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** The chosen segment. Use with `onValueChange` for a controlled set. */
+    value?: PlSegmentValue | null;
+    /** Which starts chosen, for an uncontrolled set. */
+    defaultValue?: PlSegmentValue | null;
+    onValueChange?: (value: PlSegmentValue | null) => void;
+    /**
+     * Drop shadow depth of the groove. `0` is the default — a groove is cut into
+     * the page, not laid on it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Disables every segment at once. */
+    disabled?: boolean;
+    /** Shows which one is chosen but does not let it be changed. */
+    readOnly?: boolean;
+    /** Identifies the value when a form is submitted. */
+    name?: string;
+    /** The segments share the full width, each taking an equal part of it. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+export interface PlSegmentProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'value' | 'color'> {
+    /** Identifies the segment. What `onValueChange` reports. */
+    value: PlSegmentValue;
+    /** Content before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content after the label — a count, a status dot. */
+    endIcon?: React.ReactNode;
+    /** Unavailable, but still part of the set. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * One choice in a segmented button.
+ *
+ * It has no `size`, no `color` and no `variant` of its own: all three belong to
+ * the set, which is the only place they can be set once and mean the same thing
+ * for every segment.
+ */
+export declare const PlSegment: React.ForwardRefExoticComponent<PlSegmentProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Two or more choices in one pill, exactly one of them taken.
+ *
+ * Underneath it is a radio group, and that is the whole accessibility argument:
+ * a segmented button *is* "exactly one of these", so it gets
+ * `role="radiogroup"`, one tab stop for the set, arrow keys within it, and
+ * `aria-checked` on the one that is taken. Building it out of `aria-pressed`
+ * toggles — which is what a row of buttons would give — would announce four
+ * independent switches, three of which happen to be off.
+ *
+ * The tile slides because its `left`, `top`, `width` and `height` are measured
+ * off the chosen segment and animated. Nothing is transformed: the tile is an
+ * empty box, and no label is resampled while it travels. That is what lets the
+ * house no-transform rule survive a component whose entire point is that
+ * something moves.
+ *
+ * `left`, not `inset-inline-start`: `offsetLeft` is a distance from the left
+ * edge and stays one under RTL, and pairing a physical measurement with a
+ * logical property is what would break the direction.
+ */
+export declare const PlSegmentedButton: React.ForwardRefExoticComponent<PlSegmentedButtonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/segmented-button/PlSegmentedButton.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{Radio as a}from"@base-ui/react/radio";import{RadioGroup as r}from"@base-ui/react/radio-group";import{controlHeightClasses as l,controlSlots as n,controlTextClasses as o,focusRingInsetClasses as i,gapClasses as d,glassClasses as u,hasContent as c,iconClasses as p,paddingXClasses as f,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */t.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1}),m={solid:`${u} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)]`,glass:`${u} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},v={solid:"[background-image:var(--p-fill)] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},y={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */t.forwardRef(function PlSegment({value:r,startIcon:n,endIcon:u,disabled:m=!1,className:v,children:b,...x},w){const{variant:k,size:P,density:j,fullWidth:R}=t.useContext(g);return s(a.Root,{ref:w,value:r,disabled:m,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",l[P],o[P],d[P],f[j][P],"rounded-full",h,p,"text-(--plass-muted-fg) hover:text-(--plass-fg)",y[k],i,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[readonly]:cursor-default",R?"flex-1":"",v??""].filter(Boolean).join(" "),...x,children:[c(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,b,c(u)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:u}):null]})});export const PlSegmentedButton=/* @__PURE__ */t.forwardRef(function PlSegmentedButton({variant:a="glass",size:l="md",color:o="primary",density:i="default",elevation:d=0,value:u,defaultValue:c=null,onValueChange:p,disabled:f=!1,readOnly:y=!1,name:b,fullWidth:x=!1,className:w,style:k,children:P,...j},R){const[$,N]=t.useState(c),z=void 0!==u,S=z?u:$,W=t.useRef(null),C=t.useRef(null),B=t.useCallback(e=>{const s=W.current,t=C.current;if(!s||!t)return;const a=s.querySelector("[data-segment][data-checked]");if(!a)return;const r=!e||!t.hasAttribute("data-ready");r&&t.removeAttribute("data-ready"),t.style.setProperty("--p-seg-x",`${a.offsetLeft}px`),t.style.setProperty("--p-seg-y",`${a.offsetTop}px`),t.style.setProperty("--p-seg-w",`${a.offsetWidth}px`),t.style.setProperty("--p-seg-h",`${a.offsetHeight}px`),r&&t.offsetWidth,t.setAttribute("data-ready","")},[]);t.useLayoutEffect(()=>{B(!0)},[B,S,a,l,i,x,P]),t.useEffect(()=>{const e=W.current;if(!e)return;const s=new ResizeObserver(()=>B(!1));return s.observe(e),()=>s.disconnect()},[B]);const A=t.useMemo(()=>({variant:a,size:l,density:i,fullWidth:x}),[a,l,i,x]);return e(g.Provider,{value:A,children:s(r,{ref:e=>{W.current=e,"function"==typeof R?R(e):R&&(R.current=e)},value:S,onValueChange:e=>{const s=e??null;z||N(s),p?.(s)},disabled:f,readOnly:y,name:b,className:["relative inline-flex items-center rounded-full",m[a],h,y?"saturate-[0.55]":"",f?"opacity-50 saturate-[0.35]":"",x?"flex w-full":"",w??""].filter(Boolean).join(" "),style:{...n(o,d,a),...k},...j,children:[null!=S?e("span",{ref:C,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",v[a],"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,P]})})});

package/dist/components/segmented-button/index.d.ts

@@ -0,0 +1,2 @@
+export { PlSegment, PlSegmentedButton } from './PlSegmentedButton.js';
+export type { PlSegmentProps, PlSegmentValue, PlSegmentedButtonProps } from './PlSegmentedButton.js';

package/dist/components/segmented-button/index.js

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