plass-ui 1.2.0 → 1.4.0

package/dist/components/animate-shake/PlAnimateShake.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateProps } from '../../types.js';
+export interface PlAnimateShakeProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Plays the shake again whenever this value changes, and never on the first
+     * render.
+     *
+     * The prop the component exists around. `play` is a boolean, so replaying
+     * with it means toggling off and on — two renders for one event, and a piece
+     * of state whose only job is to be flipped back. A refusal is an **event**,
+     * and a value that has changed is the closest React has to one: a count of
+     * failed attempts already is this.
+     *
+     * ```tsx
+     * <PlAnimateShake replay={attempts}>…</PlAnimateShake>
+     * ```
+     */
+    replay?: unknown;
+    /**
+     * How far it travels either side of where it started. A number is pixels.
+     * @default 6
+     */
+    distance?: number | string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A refusal.
+ *
+ * The one effect in the set that is a **response** rather than an entrance: it
+ * is what a form does when the password was wrong again, what a locked control
+ * does when it is pressed. So it starts held still and plays only when it is
+ * told to, where every other effect here starts on mount.
+ *
+ * `replay` is the prop it exists around. A refusal can happen twice, and
+ * `play`, being a boolean, cannot say "again" — replaying with it means
+ * toggling off and on, which is two renders for one event and a piece of state
+ * whose only job is to be flipped back. A value that has changed is the closest
+ * React has to an event, and the count of failed attempts a form already keeps
+ * is exactly that value.
+ *
+ * It is not in `PlassAnimation`, for `PlAnimateFloat`'s reason: that union is
+ * the set of ways content can arrive, and this is not an arrival.
+ *
+ * Three shudders either side of home and back to nothing, so a shaken element
+ * is exactly where it was. This is the one effect a caller will run over
+ * content that is still being typed into, and a field left a few pixels off its
+ * label would be worse than the error it was reporting.
+ *
+ * **A reader who asked for less motion sees none of it**, which is the whole
+ * reason the words matter more than the shake: whatever a refusal is saying has
+ * to be said in text as well, in something a screen reader is told about. The
+ * shake is emphasis, never the message.
+ */
+export declare const PlAnimateShake: React.ForwardRefExoticComponent<PlAnimateShakeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-shake/PlAnimateShake.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as r,lengthValue as n,useAnimateElement as t}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateShake=/* @__PURE__ */e.forwardRef(function PlAnimateShake({duration:e=400,delay:l=0,easing:i,repeat:o=1,alternate:c,paused:d,trigger:p="manual",play:m=!1,once:f=!0,threshold:h=.2,replay:u,distance:y=6,render:g,className:k,style:N,children:j,...x},A){const P=t({effect:null,duration:e,delay:l,easing:i,repeat:o,alternate:c,x:n(y),trigger:p,play:m,once:f,threshold:h,paused:d,infinite:!1,nonce:u,children:j});return a({render:g,ref:[A,P.ref],props:{...x,className:s(r,"plass-anim-shake",P.className,k),style:{...P.style,...N},...P.props,"data-plass-animation":"shake",children:P.children}})});

package/dist/components/animate-shake/index.d.ts

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

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

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

package/dist/components/animate-slide/PlAnimateSlide.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps, PlassSide } from '../../types.js';
-export interface PlAnimateSlideProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, PlassSide } from '../../types.js';
+export interface PlAnimateSlideProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content slides in or slides away. `out` leaves by the same edge
      * it would have come from.

package/dist/components/animate-slide/PlAnimateSlide.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateSlide=/* @__PURE__ */e.forwardRef(function PlAnimateSlide({duration:e=360,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:y=.2,mode:u="in",from:g="bottom",distance:h="100%",fade:x=!0,render:N,className:b,style:j,children:A,...P},S){const{x:w,y:R}=a(g,h),k=n({effect:"slide",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:u,x:w,y:R,opacity:x?0:1,trigger:c,play:p,once:f,threshold:y,paused:m,infinite:t(l)});return r({render:N,ref:[S,k.ref],props:{...P,className:i(k.className,b),style:{...k.style,...j},...k.props,children:A}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateSlide=/* @__PURE__ */e.forwardRef(function PlAnimateSlide({duration:e=360,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:g=.2,timeline:u,range:y,stagger:h=0,durationStep:S=0,reverse:x=!1,mode:N="in",from:b="bottom",distance:j="100%",fade:v=!0,render:A,className:P,style:w,children:R,...k},q){const{x:z,y:B}=a(b,j),C=n({effect:"slide",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:N,x:z,y:B,opacity:v?0:1,trigger:c,play:p,once:f,threshold:g,paused:m,infinite:t(l),timeline:u,range:y,stagger:h,durationStep:S,reverse:x,children:R});return r({render:A,ref:[q,C.ref],props:{...k,className:i(C.className,P),style:{...C.style,...w},...C.props,children:C.children}})});

package/dist/components/animate-split/PlAnimateSplit.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, PlassAnimation } from '../../types.js';
+/** What the line is cut into before the effect is told off across it. */
+export type PlAnimateSplitBy = 'word' | 'character';
+export interface PlAnimateSplitProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /**
+     * The line. A string, and it has to be: the component cuts it up, and there
+     * is nothing to cut inside a `<strong>`.
+     */
+    children: string;
+    /**
+     * What it is cut into.
+     *
+     * `word` by default, and it is the safe one. See the note on the page about
+     * `character` and the scripts it must not be used on.
+     * @default 'word'
+     */
+    by?: PlAnimateSplitBy;
+    /**
+     * Which of the entrances each part plays.
+     * @default 'fade'
+     */
+    effect?: PlassAnimation;
+    /**
+     * `in` plays the entrance; `out` is the same run backwards, held at the end.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /** Renders something other than a `<span>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A line of text arriving one part at a time.
+ *
+ * The other five effects tell themselves off across their **children**, which a
+ * line of text does not have. This one makes them: it cuts the string into
+ * words or characters, wraps each in a span, and hands the set to exactly the
+ * same `stagger` machinery a `PlAnimateFade` around a list of `<li>`s uses. So
+ * `effect`, `stagger`, `durationStep` and `reverse` all mean what they mean
+ * everywhere else — this component is the splitting and nothing more.
+ *
+ * **`by="character"` is not safe in every script**, and that is the one thing
+ * to know before reaching for it. A character span breaks the shaping between
+ * letters, so Arabic stops joining, Devanagari conjuncts come apart, and an
+ * emoji built out of several code points is cut into its pieces. `word` has
+ * none of those problems, is the default, and is what a headline wants anyway.
+ *
+ * **A screen reader is told the line, once.** The parts are hidden from the
+ * accessibility tree and the whole line sits beside them in a clipped span,
+ * which is what stops a split headline being read out one letter at a time —
+ * the defect this pattern is known for.
+ */
+export declare const PlAnimateSplit: React.ForwardRefExoticComponent<PlAnimateSplitProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/animate-split/PlAnimateSplit.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{animBaseClass as i,animationClasses as s,animationSlots as l,isInfinite as o,staggerSlots as m,useAnimationRun as d}from"../../internal/animate.js";import{cx as p,srOnlyClasses as c}from"../../internal/styles.js";export const PlAnimateSplit=/* @__PURE__ */a.forwardRef(function PlAnimateSplit({children:f,by:u="word",effect:h="fade",mode:g="in",duration:y=400,delay:j=0,easing:x,repeat:w=1,alternate:N,paused:S,trigger:b="mount",play:v,once:A=!0,threshold:$=.2,timeline:F,range:P,stagger:k=40,durationStep:M=0,reverse:O=!1,render:R,className:q,style:z,...B},C){const D=a.useMemo(()=>function partsOf(e,r){return"character"===r?Array.from(e):e.split(/(\s+)/).filter(e=>""!==e)}(f,u),[f,u]),E=d({trigger:"view"===F?"mount":b,play:v,once:A,threshold:$,paused:S,infinite:o(w)}),G={duration:y,delay:j,easing:x,repeat:w,alternate:N,mode:g,timeline:F,range:P},H=D.filter(e=>""!==e.trim()).length,I=`${i} ${s[h]}`;let J=-1;return n({render:R??e("span",{}),ref:[C,E.ref],props:{...B,className:p(q),style:z,...E.handlers,"data-plass-animation":h,"data-state":E.state,children:t(r,{children:[e("span",{className:c,children:f}),e("span",{"aria-hidden":"true",children:D.map((r,t)=>""===r.trim()?e(a.Fragment,{children:r},t):(J+=1,e("span",{className:`${I} inline-block whitespace-pre`,style:{...l(m(G,{index:J,count:H,stagger:k,durationStep:M,reverse:O})),"--p-anim-state":E.state},children:r},t)))})]})}})});

package/dist/components/animate-split/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateSplit } from './PlAnimateSplit.js';
+export type { PlAnimateSplitBy, PlAnimateSplitProps } from './PlAnimateSplit.js';

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

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

package/dist/components/animate-typing/PlAnimateTyping.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as n,useAnimationRun as a,usePrefersReducedMotion as i}from"../../internal/animate.js";import{srOnlyClasses as s}from"../../internal/styles.js";function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):""}export const PlAnimateTyping=/* @__PURE__ */r.forwardRef(function PlAnimateTyping({text:o,speed:u=24,hold:m=1400,erase:c=!1,eraseSpeed:l,caret:f=!0,caretChar:p="|",duration:d,delay:h=0,repeat:g=1,paused:y,trigger:x="mount",play:T,once:j=!0,threshold:v=.2,className:N,style:S,children:w,...A},M){const O=a({trigger:x,play:T,once:j,threshold:v,paused:y,infinite:n(g)}),I=i(),E=o??textOf(w),P=r.useMemo(()=>function graphemesOf(e,t){return"undefined"!=typeof Intl&&"Segmenter"in Intl?[...new Intl.Segmenter(t,{granularity:"grapheme"}).segment(e)].map(e=>e.segment):[...e]}(E),[E]),R=P.length,[b,C]=r.useState(0),k=r.useRef(0),q=d&&R>0?d/R:1e3/Math.max(u,1),z=1e3/Math.max(l??2*u,1);return r.useEffect(()=>{k.current=0},[R]),r.useEffect(()=>{if(I||0===R)return void C(R);if(!O.started)return k.current=0,void C(0);if(y)return;let e,t=!1,r=k.current,n=1,a=!1;const i="infinite"===g?1/0:Math.max(1,g);if(r>=R&&1===i)return;const step=()=>{if(!t){if(a)return r-=1,k.current=r,C(r),r<=0&&(a=!1,n+=1),void(e=setTimeout(step,a?z:q));if(r+=1,k.current=r,C(r),r<R)e=setTimeout(step,q);else if(!(n>=i)){if(c)return a=!0,void(e=setTimeout(step,m));n+=1,e=setTimeout(()=>{t||(r=0,k.current=0,C(0),e=setTimeout(step,q))},m)}}};return C(r),e=setTimeout(step,0===r?h:q),()=>{t=!0,clearTimeout(e)}},[O.started,y,I,R,q,z,h,m,c,g]),t("div",{ref:e=>{O.ref(e),"function"==typeof M?M(e):M&&(M.current=e)},className:N,style:S,"data-plass-animation":"typing","data-state":O.state,...O.handlers,...A,children:[e("span",{className:s,children:E}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[P.slice(0,b).join(""),f?e("span",{className:"plass-caret",children:p}):null]})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as n,useAnimationRun as a}from"../../internal/animate.js";import{usePrefersReducedMotion as i}from"../../internal/media.js";import{srOnlyClasses as s}from"../../internal/styles.js";function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):""}export const PlAnimateTyping=/* @__PURE__ */r.forwardRef(function PlAnimateTyping({text:o,speed:u=24,hold:m=1400,erase:l=!1,eraseSpeed:c,caret:f=!0,caretChar:p="|",duration:d,delay:h=0,repeat:g=1,paused:y,trigger:x="mount",play:T,once:j=!0,threshold:v=.2,className:N,style:S,children:w,...A},M){const O=a({trigger:x,play:T,once:j,threshold:v,paused:y,infinite:n(g)}),I=i(),E=o??textOf(w),P=r.useMemo(()=>function graphemesOf(e,t){return"undefined"!=typeof Intl&&"Segmenter"in Intl?[...new Intl.Segmenter(t,{granularity:"grapheme"}).segment(e)].map(e=>e.segment):[...e]}(E),[E]),R=P.length,[b,C]=r.useState(0),k=r.useRef(0),q=d&&R>0?d/R:1e3/Math.max(u,1),z=1e3/Math.max(c??2*u,1);return r.useEffect(()=>{k.current=0},[R]),r.useEffect(()=>{if(I||0===R)return void C(R);if(!O.started)return k.current=0,void C(0);if(y)return;let e,t=!1,r=k.current,n=1,a=!1;const i="infinite"===g?1/0:Math.max(1,g);if(r>=R&&1===i)return;const step=()=>{if(!t){if(a)return r-=1,k.current=r,C(r),r<=0&&(a=!1,n+=1),void(e=setTimeout(step,a?z:q));if(r+=1,k.current=r,C(r),r<R)e=setTimeout(step,q);else if(!(n>=i)){if(l)return a=!0,void(e=setTimeout(step,m));n+=1,e=setTimeout(()=>{t||(r=0,k.current=0,C(0),e=setTimeout(step,q))},m)}}};return C(r),e=setTimeout(step,0===r?h:q),()=>{t=!0,clearTimeout(e)}},[O.started,y,I,R,q,z,h,m,l,g]),t("div",{ref:e=>{O.ref(e),"function"==typeof M?M(e):M&&(M.current=e)},className:N,style:S,"data-plass-animation":"typing","data-state":O.state,...O.handlers,...A,children:[e("span",{className:s,children:E}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[P.slice(0,b).join(""),f?e("span",{className:"plass-caret",children:p}):null]})]})});

package/dist/components/animate-zoom/PlAnimateZoom.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
-export interface PlAnimateZoomProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateZoomProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content comes forward or falls away.
      * @default 'in'

package/dist/components/animate-zoom/PlAnimateZoom.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateZoom=/* @__PURE__ */e.forwardRef(function PlAnimateZoom({duration:e=320,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:y=.4,fade:g=!0,render:h,className:N,style:j,children:A,...P},Z){const b=a({effect:"zoom",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:y,opacity:g?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:h,ref:[Z,b.ref],props:{...P,className:n(b.className,N),style:{transformOrigin:"center",...b.style,...j},...b.props,children:A}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateZoom=/* @__PURE__ */e.forwardRef(function PlAnimateZoom({duration:e=320,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:m,trigger:d="mount",play:c,once:p=!0,threshold:f=.2,timeline:g,range:u,stagger:y=0,durationStep:h=0,reverse:N=!1,mode:j="in",from:v=.4,fade:A=!0,render:P,className:S,style:Z,children:b,...w},x){const z=a({effect:"zoom",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:j,scale:v,opacity:A?0:1,trigger:d,play:c,once:p,threshold:f,paused:m,infinite:t(s),timeline:g,range:u,origin:"center",stagger:y,durationStep:h,reverse:N,children:b});return r({render:P,ref:[x,z.ref],props:{...w,className:n(z.className,S),style:{...z.style,...Z},...z.props,children:z.children}})});

package/dist/components/app-logo/PlAppLogo.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassColor, PlassSize, PlassVariant } from '../../types.js';
+/**
+ * How the artwork is framed, which is the one question this component exists to
+ * answer.
+ *
+ * - `bare` — drawn as it was given, at the height `size` asks for and whatever
+ *   width that comes to. No plate, no crop, no padding. The default, and the
+ *   only one that is correct for a mark drawn with its own background, its own
+ *   margin, or the product's name set into it.
+ * - `plate` — an app icon: a tile with the artwork inset in it and the corners
+ *   cut to the house radius. What a mark drawn as a bare glyph needs before it
+ *   can sit next to anything else.
+ * - `circle` — the same tile, round. For the products whose icon is a disc.
+ */
+export type PlAppLogoShape = 'bare' | 'plate' | 'circle';
+export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The mark. An `<img>`, an inline `<svg>`, a `PlIcon` — whatever the product's
+     * artwork actually is.
+     */
+    children?: React.ReactNode;
+    /** A picture to draw as the mark, instead of `children`. */
+    src?: string;
+    /**
+     * What the picture says, for a reader who cannot see it.
+     *
+     * Leave it empty when `name` is set: the wordmark beside the mark already
+     * says the product's name, and a picture that repeats it is a screen reader
+     * saying it twice.
+     */
+    alt?: string;
+    /** The product's name, set beside the mark. */
+    name?: React.ReactNode;
+    /** A line under the name — an environment, a tenant, a plan. */
+    description?: React.ReactNode;
+    /** How the artwork is framed. @default 'bare' */
+    shape?: PlAppLogoShape;
+    /**
+     * What the plate is made of. Only read when `shape` is not `bare`.
+     * @default 'solid'
+     */
+    variant?: PlassVariant;
+    /** The height of the mark, and the type scale of the name beside it. @default 'md' */
+    size?: PlassSize;
+    /** The family the plate takes. @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Renders something other than a `<span>`. A logo is nearly always the way
+     * back to the front page, so `render={<a href="/" />}` is the ordinary case.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * A product's mark, and its name beside it.
+ *
+ * The whole component is the **framing**, which is the one thing a logo needs
+ * and the one thing every project gets wrong twice: `bare` is the default
+ * because a mark drawn with its own background, its own margin, or the
+ * product's name set into it must not be put on a plate or cropped to a circle.
+ * `plate` and `circle` are for a mark drawn as a bare glyph, which cannot sit
+ * next to anything else until it has been given an edge.
+ *
+ * It is not a [PlAvatar](./avatar). An avatar is a picture of a person or a
+ * thing and is always a circle or a fillet, with initials behind it when the
+ * picture fails; a logo is artwork the product owns, it has no fallback worth
+ * inventing, and its shape is a decision somebody already made.
+ *
+ * **With a `name`, the mark is decorative.** The wordmark beside it already
+ * says what the product is called, and a picture that says it again is a screen
+ * reader reading the name twice. That is why `alt` is a prop rather than
+ * something derived from `name`.
+ *
+ * A logo is nearly always the way back to the front page. `render={<a href="/"
+ * />}` makes it one without changing anything about how it is drawn.
+ */
+export declare const PlAppLogo: React.ForwardRefExoticComponent<PlAppLogoProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/app-logo/PlAppLogo.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{useDefaults as r}from"../../internal/defaults.js";import{controlSlots as n,cx as i,glassClasses as o,hasContent as c,metaTextClasses as m,radiusClasses as d}from"../../internal/styles.js";const p={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},x={xs:"size-5",sm:"size-6",md:"size-8",lg:"size-10",xl:"size-12"},g={xs:"text-sm",sm:"text-base",md:"text-lg",lg:"text-xl",xl:"text-2xl"},f={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},u={solid:"[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:var(--p-lift)]",glass:`${o} bg-(--plass-glass) text-(--p-accent) border [border-color:var(--plass-glass-line)]`,ghost:"bg-(--p-soft) text-(--p-accent)"};export const PlAppLogo=/* @__PURE__ */a.forwardRef(function PlAppLogo({children:a,src:o,alt:h="",name:b,description:v,shape:z="bare",variant:j="solid",size:N,color:w,render:y,className:k,style:A,...L},P){const _=r(),F=N??_.size??"md",R=w??_.color??"primary",$="bare"!==z,q=c(b)||c(v),B=o?e("img",{src:o,alt:h,className:$?"size-[70%] object-contain":"h-full w-auto"}):a;return t({render:y,ref:P,props:{className:i("inline-flex items-center text-(--plass-fg) [&_svg]:h-full [&_svg]:w-auto",f[F],k),style:{...n(R,1,j),...A},children:s(l,{children:[e("span",{"aria-hidden":!!c(b)||void 0,className:i("flex shrink-0 items-center justify-center overflow-hidden",$?x[F]:p[F],$?u[j]:"","circle"===z?"rounded-full":$?d[F]:""),children:B}),q?s("span",{className:"flex min-w-0 flex-col",children:[c(b)?e("span",{className:i("truncate font-semibold",g[F]),children:b}):null,c(v)?e("span",{className:i("truncate text-(--plass-muted-fg)",m[F]),children:v}):null]}):null]}),...L}})});

package/dist/components/app-logo/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAppLogo } from './PlAppLogo.js';
+export type { PlAppLogoProps, PlAppLogoShape } from './PlAppLogo.js';

package/dist/components/app-logo/index.js

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

package/dist/components/area-chart/PlAreaChart.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type ChartMarkers } from '../../internal/chart-line.js';
+import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+export interface PlAreaChartProps extends CartesianChartProps {
+    /**
+     * How the edge of the band gets from one point to the next. The same three
+     * shapes a [PlLineChart](./line-chart) offers, and they mean the same things.
+     * @default 'linear'
+     */
+    curve?: PlassChartCurve;
+    /**
+     * Stacks the bands, each one riding on the total of those below it.
+     *
+     * - `true` — absolute totals. The top edge is the sum, which is the thing a
+     *   stacked area is usually drawn to show.
+     * - `'full'` — every category normalised to 100%, so the chart is about
+     *   *share* and stops being about size. The value axis becomes a percentage
+     *   and says so.
+     * @default false
+     */
+    stacked?: boolean | 'full';
+    /**
+     * Dots on the points. `none` by default rather than `auto`: a filled band
+     * already has a visible edge, and a row of dots on it is ink that says
+     * nothing the fill did not.
+     * @default 'none'
+     */
+    markers?: ChartMarkers;
+    /** @default 'none' */
+    valueLabels?: PlassChartValueLabels;
+    /**
+     * Draws the band straight through a `null` instead of breaking at it. Off,
+     * and on an area it matters more than on a line: a fill that closes across a
+     * missing month paints a made-up number over a larger part of the chart.
+     * @default false
+     */
+    connectNulls?: boolean;
+}
+/**
+ * A line with the space under it filled — which changes what the chart is
+ * about.
+ *
+ * A line says where a value went. An area says how much of something there was,
+ * and stacked it says how that amount was made up. That is the whole test for
+ * reaching for this instead of a [PlLineChart](./line-chart): if the quantity
+ * does not add up to anything — a temperature, a rate, a score — the fill under
+ * it is decoration, and a chart with two of them is two washes fighting.
+ *
+ * Unstacked bands are a wash at about a quarter opacity, fading out downward,
+ * so two of them overlapping stay readable. Stacked bands are opaquer, because
+ * there the fill *is* the mark rather than a hint at the line above it.
+ */
+export declare function PlAreaChart({ curve, stacked, markers, valueLabels, connectNulls, series, yAxis, format, ...props }: PlAreaChartProps): React.JSX.Element;

package/dist/components/area-chart/PlAreaChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame.js";import{LineSeries as t}from"../../internal/chart-line.js";import{toValues as n}from"../../internal/chart.js";export function PlAreaChart({curve:l="linear",stacked:o=!1,markers:s="none",valueLabels:i="none",connectNulls:c=!1,series:u,yAxis:m,format:f,...d}){const x=r.useId().replace(/:/g,""),p="full"===o,h=r.useMemo(()=>{if(!p)return u;const e=n(u),r=[];for(const a of e)a.forEach((e,a)=>{r[a]=(r[a]??0)+Math.abs(e.value??0)});return u.map((a,t)=>({...a,data:e[t].map((e,a)=>{if(null===e.value)return null;const t=r[a];return{x:e.x,y:0===t?0:e.value/t*100,color:e.color,label:e.label??String(e.value)}})}))},[u,p]);return e(a,{...d,series:h,format:f,yAxis:p?{min:0,max:100,tickFormat:e=>`${e}%`,...m}:m,stacked:!1!==o,inset:!0,includeZero:!0,headroom:"none"===i?0:10,children:r=>e(t,{context:r,curve:l,filled:!0,stacked:!1!==o,markers:s,valueLabels:i,connectNulls:c,gradient:!1,idPrefix:x})})}

package/dist/components/area-chart/index.d.ts

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

package/dist/components/area-chart/index.js

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

package/dist/components/aspect-ratio/PlAspectRatio.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{cx as o,radiusClasses as t}from"../../internal/styles.js";const c=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:l="cover",rounded:n=!1,size:s="md",render:a,className:f,style:m,children:u,...d},p){const b=o("relative block w-full overflow-hidden",c,r[l],n?t[s]:"",f);return i({render:a,ref:p,props:{className:b,style:{aspectRatio:e,...m},children:u,...d}})});
+"use client";import*as e from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as t,radiusClasses as c}from"../../internal/styles.js";const r=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),l={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:n="cover",rounded:s=!1,size:a,render:f,className:m,style:u,children:d,...p},j){const b=i(),v=a??b.size??"md",g=t("relative block w-full overflow-hidden",r,l[n],s?c[v]:"",m);return o({render:f,ref:j,props:{className:g,style:{aspectRatio:e,...u},children:d,...p}})});

package/dist/components/avatar/PlAvatar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Avatar as t}from"@base-ui/react/avatar";import{AvatarGroupContext as s}from"../../internal/avatar-group.js";import{controlHeightClasses as o,controlSlots as n,controlSquareClasses as l,glassClasses as i,hasContent as c,radiusClasses as d,srOnlyClasses as m,transitionClasses as p}from"../../internal/styles.js";const f={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},v={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[i,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]"},g=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",p].join(" ");function PersonIcon(){return a("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */r.forwardRef(function PlAvatar({src:i,srcSet:p,alt:h,name:u,initials:x,shape:b,variant:j,size:y,color:w,elevation:N,delay:z,imageProps:C,onLoadingStatusChange:A,className:P,style:k,children:B,...S},I){const L=r.useContext(s),F=b??L?.shape??"circle",M=j??L?.variant??"ghost",R=y??L?.size??"md",Z=w??L?.color??"primary",_=N??L?.elevation??0,O=u?function initialsOf(e){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase()}(u):"",U=h??u,q=c(B)?B:(x??O)||e(PersonIcon,{}),D=c(B)||Boolean(x??O),E=[g,o[R],l[R],f[R],"circle"===F?"rounded-full":d[R],v[M],P??""].filter(Boolean).join(" ");return a(t.Root,{ref:I,className:E,style:{...n(Z,_,M),...k},...S,children:[i?e(t.Image,{src:i,srcSet:p,alt:U??"",className:"size-full object-cover",onLoadingStatusChange:A,...C}):null,a(t.Fallback,{delay:i?z:void 0,className:"flex size-full items-center justify-center",children:[U&&D?e("span",{className:m,children:U}):null,e("span",{"aria-hidden":!(!U||!D)||void 0,className:"contents",children:q})]})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Avatar as s}from"@base-ui/react/avatar";import{controlHeightClasses as o,controlSlots as l,controlSquareClasses as n,glassClasses as i,hasContent as c,radiusClasses as d,srOnlyClasses as m,transitionClasses as p}from"../../internal/styles.js";const f={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},g={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[i,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]"},v=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",p].join(" ");function PersonIcon(){return r("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */a.forwardRef(function PlAvatar({src:a,srcSet:i,alt:p,name:h,initials:u,shape:x,variant:b,size:j,color:y,elevation:w,delay:N,imageProps:z,onLoadingStatusChange:A,className:C,style:P,children:k,...B},S){const I=t(),L=x??"circle",F=b??"ghost",M=j??I.size??"md",R=y??I.color??"primary",Z=w??0,_=h?function initialsOf(e){const r=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===r.length?"":((Array.from(r[0])[0]??"")+(r.length>1?Array.from(r[r.length-1])[0]??"":"")).toLocaleUpperCase()}(h):"",O=p??h,U=c(k)?k:(u??_)||e(PersonIcon,{}),q=c(k)||Boolean(u??_),D=[v,o[M],n[M],f[M],"circle"===L?"rounded-full":d[M],g[F],C??""].filter(Boolean).join(" ");return r(s.Root,{ref:S,className:D,style:{...l(R,Z,F),...P},...B,children:[a?e(s.Image,{src:a,srcSet:i,alt:O??"",className:"size-full object-cover",onLoadingStatusChange:A,...z}):null,r(s.Fallback,{delay:a?N:void 0,className:"flex size-full items-center justify-center",children:[O&&q?e("span",{className:m,children:O}):null,e("span",{"aria-hidden":!(!O||!q)||void 0,className:"contents",children:U})]})]})});

package/dist/components/back-top/PlBackTop.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { PlassColor, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+/** What is scrolled, and what is watched. */
+export type PlBackTopTarget = Window | HTMLElement | React.RefObject<HTMLElement | null> | (() => Window | HTMLElement | null);
+export interface PlBackTopProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /**
+     * What is scrolled. The window by default; a ref or an element for a panel
+     * that scrolls inside the page.
+     */
+    target?: PlBackTopTarget;
+    /**
+     * How far down the reader has to be before it appears, in pixels.
+     *
+     * 400 is roughly one screen on a laptop, which is the point at which "go
+     * back to the top" stops being a thing they could just do by scrolling.
+     * @default 400
+     */
+    visibilityHeight?: number;
+    /** What it does, in words, and its accessible name. @default 'Back to top' */
+    label?: string;
+    /** The glyph. An upward chevron by default. */
+    icon?: React.ReactNode;
+    /**
+     * Whether it pins itself to the bottom corner of the window.
+     *
+     * On by default, because that is what this component is. Turn it off to put
+     * the button somewhere of your own — the end of an article, a toolbar — and
+     * keep the appearing and the scrolling.
+     * @default true
+     */
+    floating?: boolean;
+    /** @default 'glass' */
+    variant?: PlassVariant;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 2 */
+    elevation?: PlassElevation;
+}
+/**
+ * The way back up, once there is a way back up to want.
+ *
+ * It is **hidden until it is useful** and that is the whole design: a button
+ * pinned to the corner of every page from the first paint is one more thing
+ * covering the content, and on a page short enough not to scroll it is a
+ * control that does nothing. It appears when the reader is a screen or so down,
+ * which is the point at which scrolling back stops being something they would
+ * just do.
+ *
+ * The scroll is smooth, and **not** under `prefers-reduced-motion` — a page
+ * that flies past a reader who asked for less movement is the exact case that
+ * setting exists for. It jumps instead, which arrives at the same place.
+ */
+export declare const PlBackTop: React.ForwardRefExoticComponent<PlBackTopProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/back-top/PlBackTop.js

@@ -0,0 +1 @@
+"use client";import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{PlIconButton as r}from"../icon-button/PlIconButton.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{usePrefersReducedMotion as i}from"../../internal/media.js";import{cx as l,transitionClasses as s}from"../../internal/styles.js";function ChevronUp(){return o("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o("path",{d:"M4.5 9.5 8 6l3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function resolve(o){return void 0===o?"undefined"==typeof window?null:window:"function"==typeof o?o():"current"in o?o.current:o}export const PlBackTop=/* @__PURE__ */e.forwardRef(function PlBackTop({target:a,visibilityHeight:c=400,label:d,icon:f,floating:u=!0,variant:p="glass",size:m,color:v,elevation:h=2,className:b,onClick:k,...j},w){const y=n(),T=t(),x=d??T.backToTop,g=m??y.size??"md",C=v??y.color??"primary",z=i(),[B,L]=e.useState(!1);return e.useEffect(()=>{const o=resolve(a);if(!o)return;const read=()=>L(function scrollTopOf(o){return o instanceof Window?o.scrollY:o.scrollTop}(o)>c);return read(),o.addEventListener("scroll",read,{passive:!0}),()=>o.removeEventListener("scroll",read)},[a,c]),o(r,{ref:w,label:x,icon:f??o(ChevronUp,{}),variant:p,size:g,color:C,elevation:h,onClick:o=>{k?.(o),o.defaultPrevented||resolve(a)?.scrollTo({top:0,behavior:z?"auto":"smooth"})},"aria-hidden":!B||void 0,tabIndex:B?void 0:-1,className:l(u?"fixed end-6 bottom-6 z-30":"",s,B?"opacity-100":"pointer-events-none opacity-0",b),...j})});

package/dist/components/back-top/index.d.ts

@@ -0,0 +1,2 @@
+export { PlBackTop } from './PlBackTop.js';
+export type { PlBackTopProps, PlBackTopTarget } from './PlBackTop.js';

package/dist/components/back-top/index.js

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

package/dist/components/badge/PlBadge.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import*as m from"react";import{controlSlots as o,glassClasses as a,hasContent as l,srOnlyClasses as n,transitionClasses as r}from"../../internal/styles.js";const i={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},d={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},p={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},b={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},x="rounded-full",c={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},g={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},f={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},h={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[a,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press)"};export const PlBadge=/* @__PURE__ */m.forwardRef(function PlBadge({variant:m="solid",size:a="md",color:u="primary",density:v="default",elevation:w=0,content:j,max:y=99,dot:z=!1,showZero:N=!1,invisible:k=!1,placement:B="top-end",overlap:P="square",label:$,className:q,style:C,children:F,...R},Z){const A=l(F),D=!l(j)||0===j&&!N,E=z||D,G=k||D&&!z,H=["pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap",x,r,h[m],E?d[a]:[i[a],p[a],b[v][a]].join(" "),A?`absolute ${g[B]}`:"relative align-middle",A?E?c[a].dot:c[a].badge:"",A&&"circle"===P?f[B]:"",G?"invisible":"",q??""].filter(Boolean).join(" "),I=function capContent(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(j,y),J=e("span",{ref:Z,className:H,style:{...o(u,w,m),...C},"aria-hidden":!!G||void 0,...R,children:G?null:s(t,{children:[E||$?e("span",{className:n,children:$??I}):null,E?null:e("span",{"aria-hidden":!!$||void 0,children:I})]})});return A?s("span",{className:"relative inline-flex shrink-0 align-middle",children:[F,J]}):J});
+"use client";import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import*as m from"react";import{useDefaults as o}from"../../internal/defaults.js";import{controlSlots as a,glassClasses as l,hasContent as n,srOnlyClasses as r,transitionClasses as i}from"../../internal/styles.js";const d={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},p={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},b={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},x={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},c="rounded-full",g={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},f={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},u={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},h={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[l,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press)"};export const PlBadge=/* @__PURE__ */m.forwardRef(function PlBadge({variant:m="solid",size:l,color:v,density:w,elevation:j=0,content:y,max:z=99,dot:N=!1,showZero:k=!1,invisible:B=!1,placement:P="top-end",overlap:$="square",label:q,className:C,style:F,children:R,...Z},A){const D=o(),E=l??D.size??"md",G=v??D.color??"primary",H=w??D.density??"default",I=n(R),J=!n(y)||0===y&&!k,K=N||J,L=B||J&&!N,M=["pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap",c,i,h[m],K?p[E]:[d[E],b[E],x[H][E]].join(" "),I?`absolute ${f[P]}`:"relative align-middle",I?K?g[E].dot:g[E].badge:"",I&&"circle"===$?u[P]:"",L?"invisible":"",C??""].filter(Boolean).join(" "),O=function capContent(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(y,z),Q=e("span",{ref:A,className:M,style:{...a(G,j,m),...F},"aria-hidden":!!L||void 0,...Z,children:L?null:s(t,{children:[K||q?e("span",{className:r,children:q??O}):null,K?null:e("span",{"aria-hidden":!!q||void 0,children:O})]})});return I?s("span",{className:"relative inline-flex shrink-0 align-middle",children:[R,Q]}):Q});

package/dist/components/bar-chart/PlBarChart.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import type { PlassChartValueLabels, PlassOrientation } from '../../types.js';
+export interface PlBarChartProps extends CartesianChartProps {
+    /**
+     * Which way the bars run.
+     *
+     * `vertical` — the default — grows them up from the bottom, which is what
+     * most people mean by a bar chart. `horizontal` grows them out from the left,
+     * and it is the right answer whenever the category names are words: a
+     * horizontal chart has a whole column for them, and a vertical one has the
+     * width of one bar.
+     * @default 'vertical'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Puts the series on top of each other instead of beside each other.
+     *
+     * - `false` — grouped. Comparing series within a category.
+     * - `true` — stacked. The bar's whole length is the total, and the segments
+     *   are what it is made of.
+     * - `'full'` — every bar the same length, so the chart is about share rather
+     *   than size. The value axis becomes a percentage.
+     * @default false
+     */
+    stacked?: boolean | 'full';
+    /**
+     * Cuts the corners off the data end of each bar. The baseline end stays
+     * square — that is where the value starts from, and a rounded foot makes the
+     * axis look scalloped.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * How thick a bar may get, in pixels. Below the cap the bars fill their share
+     * of the band; above it the leftover stays as air.
+     * @default the `size` ladder — 24 at `md`
+     */
+    barSize?: number;
+    /**
+     * Which values are written on the bars.
+     *
+     * `all` is defensible here in a way it is not on a line chart: eight bars
+     * with their numbers on them is a chart and a table at once. Past about a
+     * dozen it stops being either.
+     * @default 'none'
+     */
+    valueLabels?: PlassChartValueLabels;
+}
+/**
+ * Lengths, compared.
+ *
+ * A bar says *how much*, and it says it by being longer — which is the whole
+ * reason its axis starts at zero and cannot be talked out of it. Crop the scale
+ * and a bar twice as long stops meaning twice as much, and the reader has no
+ * way to know it happened. Reach for a [PlLineChart](./line-chart) when what
+ * matters is the shape of a change rather than the size of each value.
+ *
+ * Grouped bars answer "which series is bigger here"; stacked bars answer "what
+ * is this total made of". They are different questions and the chart should be
+ * asked only one of them at a time.
+ */
+export declare function PlBarChart({ orientation, stacked, rounded, barSize, valueLabels, series, yAxis, size: sizeProp, density: densityProp, ...props }: PlBarChartProps): React.JSX.Element;

package/dist/components/bar-chart/PlBarChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as l,markTransitionClasses as n}from"../../internal/chart-frame.js";import{barBandRatio as r,barMaxThickness as o,barPath as i,barRadius as s,chartFontSizes as u,markGap as c,toValues as d}from"../../internal/chart.js";import{useDefaults as m}from"../../internal/defaults.js";export function PlBarChart({orientation:t="vertical",stacked:n=!1,rounded:i=!0,barSize:s,valueLabels:u="none",series:c,yAxis:h,size:f,density:v,...x}){const p=m(),b=f??p.size??"md",y=v??p.density??"default",z="horizontal"===t,g="full"===n,M=a.useMemo(()=>{if(!g)return c;const e=d(c),t=[];for(const a of e)a.forEach((e,a)=>{t[a]=(t[a]??0)+Math.abs(e.value??0)});return c.map((a,l)=>({...a,data:e[l].map((e,a)=>{if(null===e.value)return null;const l=t[a];return{x:e.x,y:0===l?0:e.value/l*100,color:e.color,label:e.label??String(e.value)}})}))},[c,g]);return e(l,{...x,series:M,size:b,density:y,horizontal:z,stacked:!1!==n,yAxis:g?{min:0,max:100,tickFormat:e=>`${e}%`,...h}:h,includeZero:!0,bandRatio:r[y],headroom:"none"===u?0:12,children:t=>e(Bars,{context:t,stacked:!1!==n,rounded:i,barSize:s??o[b],valueLabels:u,size:b})})}function Bars({context:a,stacked:l,rounded:r,barSize:o,valueLabels:d,size:m}){const{values:h,visible:f,colors:v,hovered:x,activeIndex:p,plot:b,band:y,horizontal:z,valuePx:g,categoryPx:M,zeroPx:k,format:j}=a,S=h.map((e,t)=>({one:e,index:t})).filter(e=>f[e.index]),B=l?1:Math.max(1,S.length),P=Math.min(o,Math.max(1,(y.band-c*(B-1))/B)),A=P*B+c*(B-1),E=[],L=[],N=u[m];return t("g",{children:[S.map(({one:a,index:o},u)=>{const m=v[o];return e("g",{opacity:null!==x&&x!==o?.28:1,className:n,children:a.map((o,h)=>{if(null===o.value)return null;const f=M(h),v=l?0:u*(P+c)-A/2+P/2,x=l?o.value>=0?E[h]??0:L[h]??0:0,y=g(x),k=g(x+o.value);l&&(o.value>=0?E[h]=x+o.value:L[h]=x+o.value);const S=l&&0!==x?c:0,B=Math.abs(k-y)-S;if(B<=0)return null;const W=k<y,w=h===p,C=z?i(Math.min(y,k)+(W?0:S),b.top+f+v-P/2,B,P,r&&!l?s:r?s/2:0,o.value>=0?"right":"left"):i(b.left+f+v-P/2,Math.min(y,k)+(W?0:S),P,B,r&&!l?s:r?s/2:0,o.value>=0?"up":"down");return t("g",{children:[e("path",{d:C,fill:o.color??m,opacity:w?1:.92,className:n}),"none"===d||"extremes"===d&&!isExtreme(a,h)||"last"===d&&h!==a.length-1?null:e("text",{x:z?k+(o.value>=0?5:-5):b.left+f+v,y:z?b.top+f+v:o.value>=0?k-5:k+N+2,textAnchor:z?o.value>=0?"start":"end":"middle",dominantBaseline:z?"central":void 0,fontSize:N,fontWeight:500,fill:"var(--plass-fg)",className:"tabular-nums",children:o.label??j(o.value)})]},h)})},o)}),e("line",z?{x1:k,x2:k,y1:b.top,y2:b.top+b.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:b.left,x2:b.left+b.width,y1:k,y2:k,stroke:"var(--plass-chart-baseline)",strokeWidth:1})]})}function isExtreme(e,t){const a=e[t].value;if(null===a)return!1;let l=1/0,n=-1/0;for(const t of e)null!==t.value&&(l=Math.min(l,t.value),n=Math.max(n,t.value));return a===l||a===n}

package/dist/components/bar-chart/index.d.ts

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

package/dist/components/bar-chart/index.js

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

package/dist/components/blockquote/PlBlockquote.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{glassClasses as l,hasContent as a,metaTextClasses as t,radiusClasses as o,sheetPaddingXClasses as n,sheetPaddingYClasses as i,surfaceSlots as c,transitionClasses as d}from"../../internal/styles.js";const m={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},p="border-s-2 [border-inline-start-color:var(--p-accent)]",u={solid:/* @__PURE__ */[l,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[l,"border border-s-2 bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const PlBlockquote=/* @__PURE__ */r.forwardRef(function PlBlockquote({variant:r="ghost",size:l="md",color:f="primary",density:g="default",elevation:x=0,author:h,source:v,cite:b,icon:j,className:N,style:k,children:y,...w},B){const M=a(h)||a(v),q=void 0===j?e(QuoteMarkIcon,{}):j,z=["flex flex-col text-(--plass-fg)",p,"ghost"===r?"":`${o[l]} rounded-s-none`,u[r],n[g][l],i[g][l],d,N??""].filter(Boolean).join(" "),I=s("blockquote",{cite:b,className:m[l],children:[a(q)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:size-full",children:q}):null,y]}),P={...c(f,x),...k};return M?s("figure",{ref:B,className:z,style:P,...w,children:[I,s("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)",t[l]].join(" "),children:[a(h)?s("span",{className:"font-medium text-(--plass-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),h]}):null,a(v)?e("cite",{className:"not-italic",children:v}):null]})]}):e("div",{ref:B,className:z,style:P,...w,children:I})});
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{glassClasses as t,hasContent as a,metaTextClasses as o,radiusClasses as n,sheetPaddingXClasses as i,sheetPaddingYClasses as c,surfaceSlots as d,transitionClasses as m}from"../../internal/styles.js";const p={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},f="border-s-2 [border-inline-start-color:var(--p-accent)]",u={solid:/* @__PURE__ */[t,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[t,"border border-s-2 bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const PlBlockquote=/* @__PURE__ */r.forwardRef(function PlBlockquote({variant:r="ghost",size:t,color:g,density:x,elevation:h=0,author:v,source:b,cite:j,icon:N,className:y,style:k,children:w,...z},B){const M=l(),q=t??M.size??"md",I=g??M.color??"primary",P=x??M.density??"default",Q=a(v)||a(b),Z=void 0===N?e(QuoteMarkIcon,{}):N,C=["flex flex-col text-(--plass-fg)",f,"ghost"===r?"":`${n[q]} rounded-s-none`,u[r],i[P][q],c[P][q],m,y??""].filter(Boolean).join(" "),R=s("blockquote",{cite:j,className:p[q],children:[a(Z)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:size-full",children:Z}):null,w]}),$={...d(I,h),...k};return Q?s("figure",{ref:B,className:C,style:$,...z,children:[R,s("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)",o[q]].join(" "),children:[a(v)?s("span",{className:"font-medium text-(--plass-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),v]}):null,a(b)?e("cite",{className:"not-italic",children:b}):null]})]}):e("div",{ref:B,className:C,style:$,...z,children:R})});

package/dist/components/bottom-navigation/PlBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as s}from"@base-ui/react/use-render";import{cx as i,focusRingInsetClasses as n,hasContent as r,iconSizeClasses as o,metaTextClasses as c,radiusClasses as d,sheetLineClasses as m,sheetRestClasses as u,srOnlyClasses as p,surfaceSlots as f,transitionClasses as g}from"../../internal/styles.js";const h=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),x={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},v={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},b={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"}},y={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t="md",color:n="primary",density:r="default",elevation:o=0,value:c,defaultValue:p=null,onValueChange:y,position:N="fixed",labels:w="all",divider:z=!0,safeArea:k=!0,disabled:C=!1,label:j,render:P,className:B,style:I,children:R,...V},A){const[D,F]=l.useState(p),M=void 0!==c,S=M?c:D,q=l.useCallback(e=>{M||F(e),y?.(e)},[M,y]),E=l.useMemo(()=>({value:S??null,change:q,size:t,density:r,labels:w,disabled:C}),[S,q,t,r,w,C]),G=i("w-full min-w-0","static"===N?d[t]:"",u[a],"glass"===a&&"static"!==N?"border-0":"",z?m:"",x[N],k?"pb-[env(safe-area-inset-bottom)]":"",g,B);return s({render:P??e("nav",{}),ref:A,props:{"aria-label":j,className:G,style:{...f(n,o),...I},children:e(h.Provider,{value:E,children:e("div",{className:i("flex w-full items-stretch",v[t],b[r][t]),children:R})}),...V}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:m,href:u,disabled:f=!1,className:x,children:v,onClick:b,...N},w){const z=l.useContext(h),k=f||z.disabled,C=null!==z.value&&z.value===s,j="all"===z.labels||"selected"===z.labels&&C,P=i("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",y[z.size],d[z.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,n,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":C?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",x),B=t(a,{children:[r(m)?e("span",{className:i("flex shrink-0 items-center justify-center",o[z.size]),children:m}):null,r(v)?e("span",{className:j?i("max-w-full truncate leading-tight",c[z.size]):p,children:v}):null]}),press=e=>{k?e.preventDefault():(z.change(s),b?.(e))};return u?e("a",{ref:w,href:k?void 0:u,"aria-current":C?"page":void 0,"aria-disabled":k||void 0,className:P,onClick:press,...N,children:B}):e("button",{ref:w,type:"button",disabled:k,"aria-current":C?"page":void 0,className:P,onClick:press,...N,children:B})});
+"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{cx as r,focusRingInsetClasses as n,hasContent as o,iconSizeClasses as c,metaTextClasses as d,radiusClasses as m,sheetLineClasses as u,sheetRestClasses as p,srOnlyClasses as f,surfaceSlots as g,transitionClasses as h}from"../../internal/styles.js";const x=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),v={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},b={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},y={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"}},N={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t,color:n,density:o,elevation:c=0,value:d,defaultValue:f=null,onValueChange:N,position:z="fixed",labels:w="all",divider:k=!0,safeArea:j=!0,disabled:C=!1,label:P,render:B,className:I,style:R,children:V,...A},D){const F=s(),M=t??F.size??"md",S=n??F.color??"primary",q=o??F.density??"default",[E,G]=l.useState(f),H=void 0!==d,J=H?d:E,K=l.useCallback(e=>{H||G(e),N?.(e)},[H,N]),L=l.useMemo(()=>({value:J??null,change:K,size:M,density:q,labels:w,disabled:C}),[J,K,M,q,w,C]),O=r("w-full min-w-0","static"===z?m[M]:"",p[a],"glass"===a&&"static"!==z?"border-0":"",k?u:"",v[z],j?"pb-[env(safe-area-inset-bottom)]":"",h,I);return i({render:B??e("nav",{}),ref:D,props:{"aria-label":P,className:O,style:{...g(S,c),...R},children:e(x.Provider,{value:L,children:e("div",{className:r("flex w-full items-stretch",b[M],y[q][M]),children:V})}),...A}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:i,href:u,disabled:p=!1,className:g,children:v,onClick:b,...y},z){const w=l.useContext(x),k=p||w.disabled,j=null!==w.value&&w.value===s,C="all"===w.labels||"selected"===w.labels&&j,P=r("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",N[w.size],m[w.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,n,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",g),B=t(a,{children:[o(i)?e("span",{className:r("flex shrink-0 items-center justify-center",c[w.size]),children:i}):null,o(v)?e("span",{className:C?r("max-w-full truncate leading-tight",d[w.size]):f,children:v}):null]}),press=e=>{k?e.preventDefault():(w.change(s),b?.(e))};return u?e("a",{ref:z,href:k?void 0:u,"aria-current":j?"page":void 0,"aria-disabled":k||void 0,className:P,onClick:press,...y,children:B}):e("button",{ref:z,type:"button",disabled:k,"aria-current":j?"page":void 0,className:P,onClick:press,...y,children:B})});