plass-ui 1.3.0 → 1.4.0

package/dist/types.d.ts

@@ -60,6 +60,15 @@ export type PlassWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
  * utility change at the same moment.
  */
 export type PlassBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Every rung but `xs`, which is the one with nothing below it.
+ *
+ * The type of a question about a *floor* — "from here up", "below here". `xs`
+ * has no floor to ask about: everything is at or above it, so `from="xs"` would
+ * mean "always" and `until="xs"` would mean "never", and a prop with two values
+ * that do nothing is a prop that invites them.
+ */
+export type PlassBreakpointFloor = Exclude<PlassBreakpoint, 'xs'>;
 /**
  * A value that may change with the width of the window.
  *
@@ -134,6 +143,24 @@ export type PlassVariant = 'solid' | 'glass' | 'ghost';
  * rather than presses — a field, a well, a panel behind other content.
  */
 export type PlassElevation = 0 | 1 | 2 | 3;
+/**
+ * Where a band starts, and what a reading is made of from there up.
+ *
+ * Here rather than on a component because two of them read it the same way — a
+ * `PlMeter`'s bar and a `PlGaugeChart`'s arc are one idea in two shapes, and a
+ * page that moves a reading from the bar to the dial must not have to rewrite
+ * its bands to do it.
+ */
+export interface PlassThreshold {
+    /**
+     * The value the band begins at, in the reading's own units — not a
+     * percentage, unless the range happens to be one. A band whose `from` is
+     * outside `min`…`max` is simply never reached.
+     */
+    from: number;
+    /** The family the reading takes while it is in this band. */
+    color: PlassColor;
+}
 /** Style props shared by most components; spread into their own prop types. */
 export interface PlassStyleProps {
     /** @default 'solid' */
@@ -212,7 +239,7 @@ export type PlassColorSlot = 'accent' | 'fill' | 'line' | 'line-hover' | 'on-sol
  * sets one is setting the answer rather than the question. `color`, `variant`
  * and `elevation` are the props that decide them.
  */
-export type PlassToken = `--plass-${PlassColor}-${PlassColorSlot}` | `--plass-radius-${PlassSize}` | `--plass-shadow-${0 | 1 | 2 | 3 | 4}` | '--plass-shadow-ambient' | '--plass-bg-from' | '--plass-bg-to' | '--plass-blur' | '--plass-border' | '--plass-divider' | '--plass-duration' | '--plass-duration-slow' | '--plass-ease' | '--plass-fg' | '--plass-flash-on-fill' | '--plass-glass' | '--plass-glass-hover' | '--plass-glass-line' | '--plass-glass-press' | '--plass-gloss-glass' | '--plass-glow-angle' | '--plass-glow-on-fill' | '--plass-muted-fg' | '--plass-scrim' | '--plass-stripe' | '--plass-surface' | '--plass-tint-strength' | '--plass-track' | '--plass-well' | '--plass-z-portal';
+export type PlassToken = `--plass-${PlassColor}-${PlassColorSlot}` | `--plass-radius-${PlassSize}` | `--plass-shadow-${0 | 1 | 2 | 3 | 4}` | `--plass-chart-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}` | `--plass-chart-seq-${1 | 2 | 3 | 4 | 5}` | `--plass-chart-div-${1 | 2 | 3 | 4 | 5}` | `--plass-chart-seq-on-${1 | 2 | 3 | 4 | 5}` | `--plass-chart-div-on-${1 | 2 | 3 | 4 | 5}` | '--plass-chart-grid' | '--plass-chart-axis' | '--plass-chart-baseline' | '--plass-chart-gap' | '--plass-shadow-ambient' | '--plass-bg-from' | '--plass-bg-to' | '--plass-blur' | '--plass-border' | '--plass-breakpoint-sm' | '--plass-breakpoint-md' | '--plass-breakpoint-lg' | '--plass-breakpoint-xl' | '--plass-divider' | '--plass-duration' | '--plass-duration-slow' | '--plass-ease' | '--plass-fg' | '--plass-flash-on-fill' | '--plass-glass' | '--plass-glass-hover' | '--plass-glass-line' | '--plass-glass-press' | '--plass-gloss-glass' | '--plass-glow-angle' | '--plass-glow-on-fill' | '--plass-muted-fg' | '--plass-scrim' | '--plass-stripe' | '--plass-surface' | '--plass-tint-strength' | '--plass-track' | '--plass-well' | '--plass-z-portal';
 /**
  * A set of token overrides, on its own.
  *
@@ -246,7 +273,7 @@ declare module 'react' {
  * marquee and a headline reel have to know what their children *are*, and a
  * name that only picks a keyframe cannot.
  */
-export type PlassAnimation = 'fade' | 'grow' | 'slide' | 'zoom' | 'rotate' | 'blink';
+export type PlassAnimation = 'fade' | 'grow' | 'slide' | 'zoom' | 'rotate' | 'blink' | 'reveal';
 /**
  * What makes an animation run.
  *
@@ -258,6 +285,24 @@ export type PlassAnimation = 'fade' | 'grow' | 'slide' | 'zoom' | 'rotate' | 'bl
  * - `manual` — never on its own. `play` is what runs it.
  */
 export type PlassAnimateTrigger = 'mount' | 'visible' | 'hover' | 'manual';
+/**
+ * What advances an animation.
+ *
+ * - `auto` — the clock. The default, and what every effect did before this
+ *   existed.
+ * - `view` — the reader's scroll position. The effect no longer *happens*; it
+ *   tracks where the element sits in the scrollport, and scrolling back plays
+ *   it backwards.
+ *
+ * `view` makes three of the other settings meaningless, and they are ignored
+ * rather than quietly half-working: `duration`, `delay` and `repeat` all belong
+ * to a clock, and so does the whole idea of a `trigger` — the scroll position
+ * *is* the trigger. `range` is what replaces `duration`.
+ *
+ * A browser without `animation-timeline` falls back to one clock-driven run, so
+ * the content still arrives. Degraded is allowed; blank is not.
+ */
+export type PlassAnimateTimeline = 'auto' | 'view';
 /** Whether an effect brings its content in or takes it away. */
 export type PlassAnimateMode = 'in' | 'out';
 /**
@@ -266,6 +311,63 @@ export type PlassAnimateMode = 'in' | 'out';
  * would be surprised by which one worked.
  */
 export type PlassAnimateRepeat = number | 'infinite';
+/**
+ * The three props that turn an effect on a box into the same effect on each of
+ * the things inside it.
+ *
+ * There is deliberately no `PlAnimateStagger`. A stagger is not an effect — it
+ * is a *differential*, and every one of the six single-keyframe effects can
+ * take one. A wrapper would have been a second way to spell something they can
+ * already say, and the rule against two spellings of one idea is the same rule
+ * that keeps a `Pulse` (`blink` + `alternate`) and a `Bounce` (`grow` +
+ * `alternate`) out of the library.
+ *
+ * The four effects that do **not** take these are the four that already know
+ * what their children are: a `PlAnimateMarquee` lays them down twice, a
+ * `PlAnimateHeadline` swaps between them, a `PlAnimateTyping` counts their
+ * graphemes, and a `PlAnimateLighting` keeps its motion on a pseudo-element,
+ * which there is no way to put on somebody else's child. A
+ * `PlAnimateAppear` is a *set* rather than an effect and has had its own
+ * `stagger` from the start; these are the same three props under the same
+ * names.
+ */
+export interface PlassAnimateStaggerProps {
+    /**
+     * Milliseconds added to each child's delay, so the children run one after
+     * another rather than together.
+     *
+     * `0` — the default — plays the **box**, which is what an effect does without
+     * this and what it should go on doing when it wraps one thing. Anything else
+     * moves the effect onto the children and takes it off the box entirely: eight
+     * children fading in under a box that is also fading in is the same content
+     * faded twice.
+     *
+     * The step is per *child*, so what is passed matters — eight children are
+     * eight steps and one child holding eight things is one step, which is also
+     * how to opt part of a set out.
+     *
+     * The animation is written onto the children themselves rather than onto
+     * wrappers, so a row of `<li>`s stays a row of `<li>`s. The cost is that a
+     * child has to accept a `className` and a `style`; one that does not is a
+     * child that will not animate.
+     * @default 0
+     */
+    stagger?: number;
+    /**
+     * Milliseconds added to each child's duration, so later children take longer
+     * — or, negative, less long. Floored at `0`.
+     * @default 0
+     */
+    durationStep?: number;
+    /**
+     * Runs the set from the last child to the first.
+     *
+     * The *order* turns round and nothing else: each child still plays forwards.
+     * An effect that runs backwards is `mode="out"`.
+     * @default false
+     */
+    reverse?: boolean;
+}
 /**
  * The settings every `PlAnimate*` component takes.
  *
@@ -303,3 +405,280 @@ export interface PlassAnimateProps {
      */
     threshold?: number;
 }
+/**
+ * The two props that hand an effect to the reader's scroll position.
+ *
+ * On the same six as `PlassAnimateStaggerProps` and absent from the same four,
+ * for a different reason: `animation-timeline` is a property of the element the
+ * keyframe is running on, and a marquee's motion is on a duplicated track, a
+ * typewriter's is not a keyframe at all, and a lighting's is on a
+ * pseudo-element. An endless decoration also has nothing a scroll position
+ * could advance it *to*.
+ *
+ * There is no `PlAnimateOnScroll`, for the reason there is no
+ * `PlAnimateStagger`: this changes what advances an effect, not what the effect
+ * is, so every effect can take it and none of them needs a twin.
+ */
+export interface PlassAnimateTimelineProps {
+    /**
+     * What advances the animation: the clock, or the reader's scroll position.
+     *
+     * `view` ignores `duration`, `delay`, `repeat` and `trigger` — all four
+     * belong to a clock, and with a scroll timeline the scroll position *is* the
+     * trigger — and runs the effect against `range` instead.
+     * @default 'auto'
+     */
+    timeline?: PlassAnimateTimeline;
+    /**
+     * How much of the element's pass through the scrollport the effect is spread
+     * over, as CSS writes an `animation-range`. Only read when `timeline` is
+     * `view`.
+     *
+     * The default finishes while the element is still arriving rather than when
+     * it reaches the middle of the screen, which is what keeps a reader from
+     * scrolling past a half-drawn entrance.
+     * @default 'entry 0% cover 45%'
+     */
+    range?: string;
+}
+/**
+ * Where a point sits along the category axis.
+ *
+ * A `Date` is accepted because a time series is the common case and converting
+ * one to a string at the call site is what makes two charts of the same data
+ * label their axes differently.
+ */
+export type PlassChartCategory = string | number | Date;
+/**
+ * One value, with everything the chart might want to know about it.
+ *
+ * `y` of `null` is a **gap** and not a zero — a sensor that was offline, a month
+ * that has not closed yet. A line breaks across it, an area breaks with it, and
+ * a bar is not drawn. This distinction is the whole reason a datum may be
+ * `null` at all: a chart that renders missing data as zero is a chart that
+ * reports an outage as a collapse.
+ */
+export interface PlassChartPoint {
+    /**
+     * Its place on the category axis. Optional — without it the point is placed
+     * by its index, against `categories` if the chart was given any.
+     */
+    x?: PlassChartCategory;
+    /** The value. `null` is a gap. */
+    y: number | null;
+    /**
+     * A second magnitude, for the marks that have one: the radius of a bubble,
+     * the weight of a tile. Ignored by the charts that do not.
+     */
+    z?: number;
+    /**
+     * Overrides the series' colour for this one point — the slice worth pointing
+     * at, the bar that is over budget. Any CSS colour, or a `PlassColor` family.
+     */
+    color?: string;
+    /** What the tooltip, the legend and any value label say instead of `y`. */
+    label?: React.ReactNode;
+}
+/** A number, a gap, or a point that says more about itself. */
+export type PlassChartDatum = number | null | PlassChartPoint;
+/**
+ * One line, one band of bars, one ring of slices — and the unit identity is
+ * attached to.
+ *
+ * Colour follows the series, never its position in the drawing: a chart whose
+ * legend is filtered keeps every survivor on the colour it had. That is why the
+ * slot a series takes is decided by where it sits in this array and not by how
+ * many of its neighbours are currently visible.
+ */
+export interface PlassChartSeries {
+    /**
+     * Its name in the legend, the tooltip and the data table. A chart with two or
+     * more series always shows a legend, so a series without a name is a series
+     * the reader cannot identify.
+     */
+    name?: string;
+    /** The values, in category order. */
+    data: readonly PlassChartDatum[];
+    /**
+     * Overrides the palette slot this series would otherwise take. A `PlassColor`
+     * family name, or any CSS colour.
+     *
+     * This is the one place in the library where a colour is not a semantic role,
+     * and it is deliberate: a series is an *entity* — a region, a plan, a
+     * competitor — and nothing about it means success or danger. Reach for it to
+     * match a brand or to hold a colour steady across two charts, not to say how
+     * a number should be felt.
+     */
+    color?: PlassColor | (string & {});
+    /**
+     * Starts the series hidden. Only meaningful with an interactive legend, which
+     * is what turns it back on.
+     * @default false
+     */
+    hidden?: boolean;
+}
+/**
+ * One span on a [PlTimelineChart] — a stretch of time with two ends.
+ *
+ * Its own type rather than a `z2` or an `x2` bolted onto `PlassChartPoint`,
+ * because a second position on the axis is a field the other six charts would
+ * carry and never read. The trade the whole `types.ts` makes is that a name
+ * means one thing everywhere; a `PlassChartPoint` that sometimes has an end and
+ * usually does not is the opposite of that.
+ *
+ * `start` and `end` rather than `x` and `end`: a span has two places on the
+ * axis, and naming one of them `x` only reads correctly to someone who already
+ * knows which one it is.
+ */
+export interface PlassTimelinePoint {
+    /** When it begins. A `Date`, or a number of milliseconds. */
+    start: PlassChartCategory;
+    /** And when it is done. A span that ends before it starts is drawn either way round. */
+    end: PlassChartCategory;
+    /** What the span is called, in the tooltip and the table. */
+    label?: React.ReactNode;
+    /** Overrides its row's colour for this one span. */
+    color?: PlassColor | (string & {});
+}
+/**
+ * One row of a PlTimelineChart, and everything on it.
+ *
+ * A row is a series — one entity, one name, one colour — but its data are
+ * spans rather than values, so it cannot be a `PlassChartSeries`. There is no
+ * `hidden` here and no legend to pair it with: a Gantt's rows *are* its
+ * category axis, already named down the side, and a twenty-entry legend
+ * restating them is not a filter anyone wants.
+ */
+export interface PlassTimelineSeries {
+    /** Its name on the axis, in the tooltip and in the table. */
+    name?: string;
+    /** The spans on this row. Overlapping ones are drawn over each other. */
+    data: readonly PlassTimelinePoint[];
+    /** Overrides the palette slot this row would otherwise take. */
+    color?: PlassColor | (string & {});
+}
+/** One stretch of time on a row of a `PlTimelineChart`. */
+export interface PlassTimelinePoint {
+    /** When it begins. A `Date`, or a number of milliseconds. */
+    start: PlassChartCategory;
+    /** And when it is done. A span that ends before it starts is drawn either way round. */
+    end: PlassChartCategory;
+    /** What the span is called, in the tooltip and the table. */
+    label?: React.ReactNode;
+    /** Overrides its row's colour for this one span. */
+    color?: PlassColor | (string & {});
+}
+/**
+ * One row of a `PlTimelineChart`, and everything on it.
+ *
+ * A row is a series — one entity, one name, one colour — but its data are spans
+ * rather than values, so it cannot be a `PlassChartSeries`. There is no
+ * `hidden` here and no legend to pair it with: the rows *are* the category
+ * axis, already named down the side, and a twenty-entry legend restating them
+ * is not a filter anyone wants.
+ */
+export interface PlassTimelineSeries {
+    /** Its name on the axis, in the tooltip and in the table. */
+    name?: string;
+    /** The spans on this row. Overlapping ones are moved onto lanes of their own. */
+    data: readonly PlassTimelinePoint[];
+    /** Overrides the palette slot this row would otherwise take. */
+    color?: PlassColor | (string & {});
+}
+/** How a line gets from one point to the next. */
+export type PlassChartCurve = 'linear' | 'smooth' | 'step';
+/**
+ * Which values are written onto the marks themselves.
+ *
+ * The default is `none` everywhere, and that is not timidity — a number beside
+ * every point is the most reliable way to make a chart unreadable. Label the
+ * end, or the extremes, and let the axis and the tooltip carry the rest;
+ * `'all'` is there for the eight-bar chart where it genuinely is the answer.
+ */
+export type PlassChartValueLabels = 'none' | 'last' | 'extremes' | 'all';
+/**
+ * What the pointer uncovers.
+ *
+ * - `index` — every series at the category under the pointer, with a crosshair.
+ *   The default on anything with a shared x axis, because the question a line
+ *   chart is asked is "what happened in March", not "what is this pixel".
+ * - `item` — the one mark being pointed at.
+ * - `none` — no tooltip. The values still have to be readable some other way.
+ */
+export type PlassChartTooltipMode = 'index' | 'item' | 'none';
+/** One series' answer at the category the pointer is on. */
+export interface PlassChartTooltipItem {
+    /** Its place in the `series` array — the same index its colour came from. */
+    seriesIndex: number;
+    name?: string;
+    color: string;
+    value: number | null;
+    /** `value` run through the chart's `format`. */
+    formatted: string;
+    /** What the point called itself, if it said. */
+    label?: React.ReactNode;
+}
+/** What a custom tooltip is handed. */
+export interface PlassChartTooltipContext {
+    index: number;
+    category: PlassChartCategory;
+    /** Only the series that are visible and have a value here. */
+    items: readonly PlassChartTooltipItem[];
+}
+/** The tooltip, when a bare `true` or `false` is not enough. */
+export interface PlassChartTooltip {
+    /** @default 'index' */
+    mode?: PlassChartTooltipMode;
+    /**
+     * The line dropped through the plot at the active category. On in `index`
+     * mode, where it is what says which column the numbers belong to.
+     */
+    crosshair?: boolean;
+    /** Draws the panel. Without it the chart draws its own. */
+    render?: (context: PlassChartTooltipContext) => React.ReactNode;
+}
+/** One axis of a cartesian chart. */
+export interface PlassChartAxis {
+    /** Leaves the axis undrawn — its rule, its ticks and its labels. */
+    hidden?: boolean;
+    /** A name for what the axis measures, set beside it. */
+    label?: React.ReactNode;
+    /**
+     * The gridlines this axis casts across the plot. On by default for the value
+     * axis and off for the category axis, which is the only arrangement where the
+     * grid helps read a value without turning the plot into graph paper.
+     */
+    grid?: boolean;
+    /**
+     * Where the scale starts and ends. Left out, both are taken from the data —
+     * the value axis from zero, so a bar's length stays proportional to its
+     * value. Set `min` only when zero is genuinely not the baseline.
+     */
+    min?: number;
+    max?: number;
+    /** Roughly how many ticks. The scale still rounds to clean numbers. */
+    tickCount?: number;
+    /** How a tick is written, overriding the chart's own `format`. */
+    tickFormat?: (value: PlassChartCategory, index: number) => React.ReactNode;
+    /**
+     * How much room the axis keeps for its ticks and its label, in pixels.
+     * Measured from the ticks themselves otherwise; set it when a long category
+     * name needs more, or when two charts stacked on a dashboard have to line
+     * their plots up.
+     */
+    thickness?: number;
+}
+/** Where the legend sits, and whether it does anything when clicked. */
+export interface PlassChartLegend {
+    /** Which edge of the plot. @default 'bottom' */
+    side?: PlassSide;
+    /** Where along that edge. @default 'center' */
+    align?: PlassAlign;
+    /**
+     * Clicking an entry hides and shows its series; hovering one dims the rest.
+     * @default true
+     */
+    interactive?: boolean;
+    /** Draws each series' current value beside its name. @default false */
+    showValue?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plass-ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A React UI component library made of glass and gradients — smooth tinted surfaces, shadows in their own colour, and light that follows the pointer. Accessible and themeable, ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -19,14 +19,15 @@
     "url": "https://github.com/jooy2/plass-ui/issues"
   },
   "scripts": {
-    "build": "npm run format:fix && tsc --project tsconfig.prod.json && node scripts/minify.mjs && node scripts/build-styles.mjs",
+    "build": "npm run format:fix && npm run clean && tsc --project tsconfig.prod.json && node scripts/minify.mjs && node scripts/build-styles.mjs",
+    "clean": "node scripts/clean.mjs",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --report-unused-disable-directives --fix",
     "prepare": "npm run build",
     "size": "node scripts/size.mjs",
     "format": "prettier .",
     "format:fix": "prettier . --write",
-    "test": "vitest run",
+    "test": "node scripts/test.mjs",
     "test:watch": "vitest",
     "typecheck": "tsc --project tsconfig.prod.json --noEmit && tsc --project test/tsconfig.json"
   },
@@ -50,6 +51,11 @@
       "module": "./dist/hooks/index.js",
       "default": "./dist/hooks/index.js"
     },
+    "./locales": {
+      "types": "./dist/locales/index.d.ts",
+      "module": "./dist/locales/index.js",
+      "default": "./dist/locales/index.js"
+    },
     "./provider": {
       "types": "./dist/provider/index.d.ts",
       "module": "./dist/provider/index.js",
@@ -74,6 +80,9 @@
       "hooks": [
         "dist/hooks/index.d.ts"
       ],
+      "locales": [
+        "dist/locales/index.d.ts"
+      ],
       "provider": [
         "dist/provider/index.d.ts"
       ],
@@ -148,7 +157,8 @@
     "vitest-browser-react": "^2.2.0"
   },
   "dependencies": {
-    "@base-ui/react": "^1.7.0"
+    "@base-ui/react": "^1.7.0",
+    "highlight.js": "^11.11.1"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",

package/dist/components/avatar-group/PlAvatarGroup.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { type PlAvatarShape } from '../avatar/PlAvatar.js';
-import type { PlassColor, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
-export interface PlAvatarGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
-    /**
-     * How many avatars are drawn before the rest become a count. Left out, every
-     * one of them is drawn.
-     */
-    max?: number;
-    /**
-     * How many there are altogether, when the group was handed only the first
-     * few. Without it the count is worked out from the children, which is right
-     * only when all of them were passed.
-     */
-    total?: number;
-    /**
-     * How far each avatar sits under the one before it — a number of pixels or
-     * any CSS length. Left out it is a fraction of `size`, which keeps the
-     * overlap looking the same at every step.
-     */
-    overlap?: number | string;
-    /** Passed to every avatar in the group. @default 'md' */
-    size?: PlassSize;
-    /** Passed to every avatar in the group. @default 'circle' */
-    shape?: PlAvatarShape;
-    /** Passed to every avatar in the group. @default 'ghost' */
-    variant?: PlassVariant;
-    /** Passed to every avatar in the group. @default 'primary' */
-    color?: PlassColor;
-    /** Passed to every avatar in the group. @default 0 */
-    elevation?: PlassElevation;
-    /** The avatars. */
-    children?: React.ReactNode;
-}
-/**
- * A stack of avatars, overlapping, with the ones that did not fit as a count.
- *
- * `size`, `shape`, `variant`, `color` and `elevation` are set once here rather
- * than on every avatar — a stack whose fourth face is a size out is not a stack
- * — and an avatar's own prop still wins, which is what lets one of them be
- * marked out from the rest.
- *
- * The order is the DOM order, and each face overlaps the one before it — so the
- * last avatar in the list is the one in front, and the `+n` sits over all of
- * them.
- */
-export declare const PlAvatarGroup: React.ForwardRefExoticComponent<PlAvatarGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/avatar-group/PlAvatarGroup.js

@@ -1 +0,0 @@
-"use client";import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{PlAvatar as i}from"../avatar/PlAvatar.js";import{AvatarGroupContext as l}from"../../internal/avatar-group.js";import{cx as s,toLength as o}from"../../internal/styles.js";const n={xs:"0.5rem",sm:"0.625rem",md:"0.875rem",lg:"1rem",xl:"1.25rem"};export const PlAvatarGroup=/* @__PURE__ */a.forwardRef(function PlAvatarGroup({max:m,total:c,overlap:p,size:v,shape:f="circle",variant:d="ghost",color:h,elevation:u=0,className:x,style:g,children:j,...y},A){const P=t(),z=v??P.size??"md",M=h??P.color??"primary",G=a.useMemo(()=>({size:z,shape:f,variant:d,color:M,elevation:u}),[z,f,d,M,u]),N=a.Children.toArray(j),w=void 0===m?N:N.slice(0,Math.max(0,m)),C=c??N.length,R=Math.max(0,C-w.length);return r(l.Provider,{value:G,children:e("div",{ref:A,className:s("isolate inline-flex items-center","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--p-overlap)*-1)]","[&>*]:ring-2 [&>*]:ring-(--plass-surface)",x??""),style:{"--p-overlap":void 0===p?n[z]:o(p),...g},...y,children:[w,R>0?r(i,{initials:`+${R}`}):null]})})});

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

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

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

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

package/dist/css/avatar-group.css

@@ -1,2 +0,0 @@
-/* Scan manifest for <avatar-group>. Needs `plass-ui/css/base.css` first. */
-@source '../components/avatar-group';

package/dist/internal/avatar-group.d.ts

@@ -1,25 +0,0 @@
-/**
- * What a `PlAvatar` inherits from the `PlAvatarGroup` around it.
- *
- * `button-group.ts`'s arrangement, one component over and for the same two
- * reasons. Cloning the children with `React.cloneElement` stops working the
- * moment a caller wraps one of them in a `PlTooltip`, a `<Fragment>` or a
- * `.map()` — which is most of the time — and a context reaches the avatar
- * wherever it ended up. And it lives here rather than beside the group so that
- * `PlAvatar` can read it without the two components importing each other.
- *
- * Every field is optional, and every one of them means *not specified* rather
- * than a value: an avatar falls back to its own default, so a group with no
- * props of its own changes nothing except the overlap.
- */
-import * as React from 'react';
-import type { PlAvatarShape } from '../components/avatar/PlAvatar.js';
-import type { PlassColor, PlassElevation, PlassSize, PlassVariant } from '../types.js';
-export interface PlassAvatarGroupContextValue {
-    size?: PlassSize;
-    shape?: PlAvatarShape;
-    variant?: PlassVariant;
-    color?: PlassColor;
-    elevation?: PlassElevation;
-}
-export declare const AvatarGroupContext: React.Context<PlassAvatarGroupContextValue | null>;

package/dist/internal/avatar-group.js

@@ -1,2 +0,0 @@
-import*as t from"react";export const AvatarGroupContext=
-/* @__PURE__ */t.createContext(null);