plass-ui 0.0.1 → 1.0.1

package/dist/components/animate-rotate/PlAnimateRotate.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
+export interface PlAnimateRotateProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content turns into place or out of it.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * The angle it starts at, in degrees. Negative is anticlockwise.
+     * @default -180
+     */
+    from?: number;
+    /**
+     * The angle it ends at, in degrees. Together with `from` this is what makes
+     * one component cover both a quarter turn into place and an endless spin:
+     * `from={0} to={360} repeat="infinite"`.
+     * @default 0
+     */
+    to?: number;
+    /**
+     * Which point it turns about — any CSS `transform-origin`.
+     * @default 'center'
+     */
+    origin?: string;
+    /**
+     * Fades in as it turns. Turn it off for a continuous spin, where a repeating
+     * fade would read as flickering.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content turning about a point.
+ *
+ * Two angles rather than one, which is what lets this be both effects a
+ * rotation is ever used for. `from` alone is an arrival — something swinging
+ * into place and stopping. `from` and `to` together with `repeat="infinite"`
+ * and `easing="linear"` is a spin that never lands, which is what a badge, a
+ * loading mark or a decorative glyph wants.
+ *
+ * Rotation is the one movement the design language allows on a glyph without
+ * argument — a chevron is turned rather than redrawn all over the library. What
+ * it is not for is text: a rotated word is resampled along its whole length,
+ * which is precisely what the rule against transforming a control exists to
+ * prevent.
+ */
+export declare const PlAnimateRotate: React.ForwardRefExoticComponent<PlAnimateRotateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-rotate/PlAnimateRotate.js

@@ -0,0 +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 PlAnimateRotate=/* @__PURE__ */e.forwardRef(function PlAnimateRotate({duration:e=440,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,mode:g="in",from:u=-180,to:y=0,origin:h="center",fade:N=!0,render:R,className:j,style:A,children:P,...$},b){const w=a({effect:"rotate",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:g,angle:`${u}deg`,angleTo:`${y}deg`,opacity:N?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s)});return r({render:R,ref:[b,w.ref],props:{...$,className:n(w.className,j),style:{transformOrigin:h,...w.style,...A},...w.props,children:P}})});

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

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

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

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

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

@@ -0,0 +1,47 @@
+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'> {
+    /**
+     * Whether the content slides in or slides away. `out` leaves by the same edge
+     * it would have come from.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * Which edge it travels from. Physical, as `PlassSide` is everywhere — a
+     * panel coming down from the top comes from the top in every writing
+     * direction.
+     * @default 'bottom'
+     */
+    from?: PlassSide;
+    /**
+     * How far it travels — a CSS length, or a number in pixels. `'100%'` is the
+     * element's own width or height, which is what makes it appear from behind
+     * its own edge.
+     * @default '100%'
+     */
+    distance?: number | string;
+    /**
+     * Fades in as it slides.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content travelling in from one edge.
+ *
+ * The default distance is the element's own size, so it starts exactly out of
+ * frame and arrives without ever having been half drawn somewhere it does not
+ * belong. Put it in a box with `overflow: hidden` and the effect is a panel
+ * appearing from behind that box's edge.
+ *
+ * A slide moves the element, so what is *around* it does not move: this is a
+ * `translate` rather than a change of layout, and nothing on the page reflows
+ * while it runs. For a much shorter travel over a list of things, one after
+ * another, use PlAnimateAppear.
+ */
+export declare const PlAnimateSlide: React.ForwardRefExoticComponent<PlAnimateSlideProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +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}})});

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

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

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

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

package/dist/components/animate-typing/PlAnimateTyping.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { PlassAnimateProps } from '../../types.js';
+export interface PlAnimateTypingProps extends Omit<PlassAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The text, when it is easier to pass than to nest. Overrides `children`. */
+    text?: string;
+    /**
+     * How fast it is typed, in characters per second.
+     * @default 24
+     */
+    speed?: number;
+    /**
+     * How long the finished text is held before it repeats, in milliseconds.
+     * @default 1400
+     */
+    hold?: number;
+    /**
+     * Deletes the text again before repeating, rather than clearing it in one
+     * frame. Only means anything when `repeat` is more than once.
+     * @default false
+     */
+    erase?: boolean;
+    /**
+     * How fast it is deleted, in characters per second. Deleting is usually about
+     * twice as fast as typing, which is what a person actually does.
+     * @default twice `speed`
+     */
+    eraseSpeed?: number;
+    /**
+     * The block after the text.
+     * @default true
+     */
+    caret?: boolean;
+    /** What the caret is drawn as. @default '|' */
+    caretChar?: React.ReactNode;
+    /** The text to type. Only text is typed — see below. */
+    children?: React.ReactNode;
+}
+/**
+ * Text appearing one character at a time.
+ *
+ * The whole string is in the document from the first frame — in a clipped box
+ * for a screen reader, which reads it once and is not made to sit through the
+ * performance — and what animates is a visible copy that is `aria-hidden`. So
+ * the effect costs a reader who cannot see it nothing, and costs a reader who
+ * can nothing either: the box is not laid out from the characters that have
+ * arrived, so the text around it does not reflow on every frame.
+ *
+ * `repeat`, `hold` and `erase` are what make it a loop: type, hold, delete,
+ * type again. Without `erase` a repeat clears in one frame, which is right for
+ * a line that is being replaced rather than rewritten.
+ *
+ * Only text is typed. Pass a string, or strings; an element among the children
+ * contributes its text and nothing about its markup, because there is no honest
+ * way to reveal half of a link.
+ */
+export declare const PlAnimateTyping: React.ForwardRefExoticComponent<PlAnimateTypingProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +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]})]})});

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

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

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

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

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

@@ -0,0 +1,37 @@
+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'> {
+    /**
+     * Whether the content comes forward or falls away.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * The scale it starts from, as a multiple of its final size. Above `1` it
+     * arrives oversized and settles back, which reads as coming *towards* the
+     * reader rather than up out of the page.
+     * @default 0.4
+     */
+    from?: number;
+    /**
+     * Fades in as it zooms.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content arriving from the middle of where it will end up.
+ *
+ * The same arithmetic as Grow at more than twice the distance, and always about
+ * the centre — which is the whole difference. A Grow unfolds from somewhere; a
+ * Zoom comes at you. Use it for the one thing on a screen that is meant to
+ * interrupt: a confirmation, a result, a number that has just landed.
+ *
+ * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
+ * the library does not offer two spellings of one idea.
+ */
+export declare const PlAnimateZoom: React.ForwardRefExoticComponent<PlAnimateZoomProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +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}})});

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

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

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

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

package/dist/components/aspect-ratio/PlAspectRatio.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassSize } from '../../types.js';
+/**
+ * How the media inside is fitted to the box, spelled the way CSS spells it.
+ *
+ * These are `object-fit`'s own values rather than a nicer set of words, for the
+ * reason the library keeps `aspect-ratio`'s own syntax below: inventing
+ * `fill-the-box` would only make a reader look up which CSS it maps to.
+ */
+export type PlAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export interface PlAspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The proportion the box holds, written the way CSS writes it — a number
+     * (`1.5`) or a ratio (`'16 / 9'`). Both reach `aspect-ratio` untouched.
+     * @default 1
+     */
+    ratio?: number | string;
+    /**
+     * How a single piece of media inside is fitted. Applies to an `img`, a
+     * `video`, a `canvas`, an `svg` or an `iframe` that is a direct child; those
+     * are stretched to the full box and then fitted. Anything else is laid out
+     * normally and this prop does not reach it.
+     * @default 'cover'
+     */
+    fit?: PlAspectFit;
+    /**
+     * Rounds the corners to the `size` step of the house radius ladder.
+     *
+     * Off by default. A layout component draws nothing, and a photograph with its
+     * corners cut is a decision about the photograph — but it is such a common one
+     * that making the caller reach for a `className` would be perverse.
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Which step of the radius ladder `rounded` uses.
+     *
+     * `size` here is the size of the *sheet* — there is no height and no type
+     * scale on a box whose whole job is a proportion.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * Renders something other than a `<div>`: `render={<figure />}`,
+     * `render={<a href="…" />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A box that keeps a proportion whatever width it is given.
+ *
+ * It draws nothing — no sheet, no hairline, no shadow — which is what puts it
+ * in `layout` beside `PlContainer` and `PlGrid` rather than in `surfaces`. What
+ * it does is reserve the space: a card whose image arrives late does not reflow
+ * the page around it, and a row of thumbnails is a row of one shape.
+ *
+ * The proportion is CSS's own `aspect-ratio`, so a caller who already knows
+ * `16 / 9` has nothing to translate. `fit` is the one convenience on top: the
+ * media inside is stretched to the box and then fitted, which is the pair of
+ * declarations every use of this component would otherwise start with.
+ */
+export declare const PlAspectRatio: React.ForwardRefExoticComponent<PlAspectRatioProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +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}})});

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAspectRatio } from './PlAspectRatio.js';
+export type { PlAspectFit, PlAspectRatioProps } from './PlAspectRatio.js';

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

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

package/dist/components/avatar/PlAvatar.d.ts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import type { PlassColor, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+/** What Base UI reports about the picture as it loads. */
+export type PlAvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * The crop, not the material.
+ *
+ * `circle` is the default. A round crop is what a portrait has been for as long
+ * as there have been portraits, and an avatar is not a surface — it is a picture
+ * laid on one, so it does not owe the radius ladder anything.
+ *
+ * `square` takes the library's own fillet instead, which is what a logo or a
+ * repository icon wants: those are drawn to the edges of a rectangle and a round
+ * crop eats them.
+ */
+export type PlAvatarShape = 'circle' | 'square';
+export interface PlAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The picture. Until it loads — and forever, if it fails — the fallback is
+     * what is drawn, so an avatar is never an empty box.
+     */
+    src?: string;
+    /** Candidate images at other resolutions, as on any `<img>`. */
+    srcSet?: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Defaults to `name`,
+     * and to nothing at all when there is no name — an avatar next to the person's
+     * own name in a row is decoration, and reading it out says the name twice.
+     */
+    alt?: string;
+    /**
+     * Who or what this is. One prop doing three jobs: it names the picture, the
+     * initials are derived from it, and it is the sentence a screen reader hears
+     * instead of those initials.
+     *
+     * The initials are the first character of the first word plus the first
+     * character of the last — "Jane Doe" is `JD`, "홍길동" is `홍`. That rule is
+     * wrong for some names, which is what `initials` is for.
+     */
+    name?: string;
+    /** The initials, written out, for when the rule derived the wrong ones. */
+    initials?: string;
+    /**
+     * The crop.
+     * @default 'circle'
+     */
+    shape?: PlAvatarShape;
+    /**
+     * What the sheet behind the fallback is made of. Invisible once a picture has
+     * loaded, apart from the edge it keeps.
+     *
+     * `ghost` is the default: a directory is a page of avatars, and a page of
+     * saturated circles is a page nobody can read a name off.
+     * @default 'ghost'
+     */
+    variant?: PlassVariant;
+    /**
+     * The box the picture is drawn in — the control heights, so an avatar and the
+     * button beside it in a toolbar are the same height.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Drop shadow depth. `0` is the default: an avatar is a picture set into the
+     * page rather than a key resting on it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * How long to wait before drawing the fallback, in milliseconds. Set it to
+     * roughly the time a cached image takes and the initials stop flashing up in
+     * front of a picture that was about to arrive anyway.
+     */
+    delay?: number;
+    /** Anything else the `<img>` needs — `loading`, `crossOrigin`, `referrerPolicy`. */
+    imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>;
+    /** Called as the picture moves between `idle`, `loading`, `loaded` and `error`. */
+    onLoadingStatusChange?: (status: PlAvatarLoadingStatus) => void;
+    /**
+     * The fallback, drawn instead of the initials. An icon, a logo, a single
+     * emoji — whatever stands in for this particular thing when there is no
+     * picture of it.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A picture of a person or a thing, at a known size, that is never an empty box.
+ *
+ * Three things can be drawn in it and exactly one of them is at a time: the
+ * picture, if `src` is given and it loads; otherwise whatever stands in for it —
+ * `children`, or `initials`, or the initials derived from `name`; and failing
+ * all of those, a silhouette. Which one is showing is Base UI's `Avatar` to
+ * decide, because "has the image loaded" is a question with four answers and a
+ * race in the middle of it.
+ *
+ * It carries no status dot of its own. An avatar with a green mark on it is a
+ * `PlBadge` with an avatar in it, and inventing a second spelling for that would
+ * give the library two of them.
+ */
+export declare const PlAvatar: React.ForwardRefExoticComponent<PlAvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/avatar/PlAvatar.js

@@ -0,0 +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{controlHeightClasses as s,controlSlots as n,controlSquareClasses as l,glassClasses as o,hasContent as i,radiusClasses as c,srOnlyClasses as d,transitionClasses as m}from"../../internal/styles.js";const p={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},f={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[o,"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%]",m].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:r,srcSet:o,alt:m,name:v,initials:h,shape:u="circle",variant:x="ghost",size:b="md",color:j="primary",elevation:y=0,delay:w,imageProps:N,onLoadingStatusChange:z,className:A,style:C,children:P,...k},B){const S=v?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()}(v):"",I=m??v,L=i(P)?P:(h??S)||e(PersonIcon,{}),F=i(P)||Boolean(h??S),M=[g,s[b],l[b],p[b],"circle"===u?"rounded-full":c[b],f[x],A??""].filter(Boolean).join(" ");return a(t.Root,{ref:B,className:M,style:{...n(j,y,x),...C},...k,children:[r?e(t.Image,{src:r,srcSet:o,alt:I??"",className:"size-full object-cover",onLoadingStatusChange:z,...N}):null,a(t.Fallback,{delay:r?w:void 0,className:"flex size-full items-center justify-center",children:[I&&F?e("span",{className:d,children:I}):null,e("span",{"aria-hidden":!(!I||!F)||void 0,className:"contents",children:L})]})]})});

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

@@ -0,0 +1,2 @@
+export { PlAvatar } from './PlAvatar.js';
+export type { PlAvatarLoadingStatus, PlAvatarProps, PlAvatarShape } from './PlAvatar.js';

package/dist/components/avatar/index.js

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

package/dist/components/badge/PlBadge.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import type { PlassCorner, PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * The shape of the thing underneath, which is what decides how far the marker
+ * tucks in.
+ */
+export type PlBadgeOverlap = 'square' | 'circle';
+export interface PlBadgeProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
+    /**
+     * What the badge says — usually a count, sometimes a word.
+     *
+     * Omit it and the badge draws a dot instead, which is the honest thing when
+     * there is something to report but nothing to count.
+     */
+    content?: React.ReactNode;
+    /**
+     * Caps a numeric `content` and adds a `+`. Only applies when the content is
+     * actually a number: a badge cannot know how to truncate a word.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Draws the marker as a dot even when there is content, keeping the content
+     * for screen readers only. For the corner that has to stay quiet.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Whether a `content` of `0` is shown. Off by default — zero unread messages
+     * is not news, and a badge that never goes away stops meaning anything.
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Hides the marker without unmounting the anchor. The badge keeps its place in
+     * the DOM, so showing it again does not relayout what it sits on.
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Which corner of the anchor it sits on.
+     * @default 'top-end'
+     */
+    placement?: PlassCorner;
+    /**
+     * The shape of the thing underneath, which is what decides how far the marker
+     * tucks in: a circle's corner is further from its centre than a square's, so a
+     * badge that looks right on an avatar hangs off an icon button.
+     * @default 'square'
+     */
+    overlap?: PlBadgeOverlap;
+    /**
+     * Drop shadow depth. `0` is the default — a marker lies on the thing it is
+     * marking rather than floating above it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * What a screen reader hears instead of the raw content. `content={3}` on a
+     * bell is "3" to a reader and means nothing; `label="3 unread notifications"`
+     * is the sentence.
+     */
+    label?: string;
+    /**
+     * What the badge is pinned to. Without it the badge is a standalone marker
+     * that lays out inline, which is what a status pill in a table cell is.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A small mark in the corner of something else: unread mail on an inbox icon, a
+ * status dot on an avatar, a count on a tab.
+ *
+ * The shell is a `<span>` that wraps the anchor and does nothing but establish a
+ * positioning context — no width, no padding, `align-middle` — so a badged icon
+ * button still measures and lines up exactly like a bare one. With no children
+ * the marker lays out inline instead, which is what a standalone status pill is.
+ *
+ * There is no Base UI primitive under this, and there should not be: a badge has
+ * no interaction, no state and no keyboard contract. It is a mark. Wiring it to a
+ * widget primitive would hand every decorative dot a role it cannot honour.
+ *
+ * What it does owe a screen reader is a sentence rather than a number, which is
+ * what `label` is for — `content={3}` beside a bell reads out as "3".
+ */
+export declare const PlBadge: React.ForwardRefExoticComponent<PlBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/badge/PlBadge.js

@@ -0,0 +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});

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

@@ -0,0 +1,2 @@
+export { PlBadge } from './PlBadge.js';
+export type { PlBadgeOverlap, PlBadgeProps } from './PlBadge.js';

package/dist/components/badge/index.js

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

package/dist/components/blockquote/PlBlockquote.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * The props are a `<figure>`'s rather than a `<blockquote>`'s, which is a
+ * consequence of where the drawing happens: everything a caller passes lands on
+ * the wrapper, and the wrapper is a figure or a div. Both are `HTMLElement`, so
+ * an event handler written against one works on the other.
+ */
+export interface PlBlockquoteProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'figure'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default — a quote is set *into* a page rather
+     * than floating over it, so it is raised even less often than a `PlCard`.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Who said it. Its presence is what turns the quote into a `<figure>` with a
+     * `<figcaption>`, which is the markup the HTML spec asks for: an attribution
+     * is *about* the quote and is not part of what was said.
+     */
+    author?: React.ReactNode;
+    /**
+     * Where it is from — a book, a talk, a page. Rendered inside a `<cite>`, which
+     * is the element for the title of a work and, per the spec, never for the name
+     * of a person. That is what `author` is.
+     */
+    source?: React.ReactNode;
+    /**
+     * URL of the document the quote was taken from. Lands on the `<blockquote>`'s
+     * own `cite` attribute, which is machine-readable and shown to nobody — use
+     * `source` for the part a reader should see.
+     */
+    cite?: string;
+    /**
+     * The mark drawn before the quote. Omit it for the house glyph, pass a node to
+     * replace it, pass `false` to take it away — the same three-way spelling
+     * `PlAlert` uses for the same idea.
+     */
+    icon?: React.ReactNode | false;
+    /** What was said. */
+    children?: React.ReactNode;
+}
+/**
+ * Somebody else's words, set apart from your own.
+ *
+ * There is no Base UI primitive under this and there should not be: a quote has
+ * no state, no keyboard contract and nothing to interact with. What it has is
+ * markup that is easy to get wrong, and getting it right is most of the point.
+ *
+ * **Nothing is drawn on the `<blockquote>` itself.** The surface, the rule and
+ * the padding all belong to the element around it, and that is not tidiness —
+ * `blockquote` is one of the handful of tags a host stylesheet still styles by
+ * name. VitePress's `.vp-doc blockquote` sets a grey `border-left`, a
+ * `padding-left` and a `color`, all at a specificity a one-class utility cannot
+ * outrank, so a rule drawn on the quote itself would silently come out grey and
+ * a pixel too thin. Moving the drawing onto a wrapper is what lets the docs undo
+ * VitePress's version without also undoing this one.
+ *
+ * The wrapper is a `<figure>` when there is an attribution and a `<div>` when
+ * there is not, because the HTML spec is explicit that the attribution goes
+ * *outside* the blockquote — a name inside it claims the speaker said their own
+ * name — and a `<figure>` with no `<figcaption>` in it is a figure of nothing.
+ */
+export declare const PlBlockquote: React.ForwardRefExoticComponent<PlBlockquoteProps & React.RefAttributes<HTMLElement>>;

package/dist/components/blockquote/PlBlockquote.js

@@ -0,0 +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})});

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

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

package/dist/components/blockquote/index.js

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