material-plus-ui 1.6.0 → 1.7.0

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

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { type MPAvatarShape } from '../avatar/MPAvatar.js';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
-export interface MPAvatarGroupProps 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 — and a list of forty faces that ships four
-     * `<img>`s and a number is exactly why this prop exists.
-     */
-    total?: number;
-    /**
-     * How far each avatar sits under the one before it — a number in pixels, or
-     * any CSS length. Left out it is a fraction of `size`, which keeps the overlap
-     * looking the same at every rung.
-     */
-    overlap?: number | string;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'md'
-     */
-    size?: MPSize;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'circle'
-     */
-    shape?: MPAvatarShape;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'tonal'
-     */
-    variant?: MPVariant;
-    /**
-     * Passed to every avatar in the group.
-     * @default 'primary'
-     */
-    color?: MPColor;
-    /** The avatars. */
-    children?: React.ReactNode;
-}
-/**
- * A stack of avatars, overlapping, with the ones that did not fit as a count.
- *
- * `size`, `shape`, `variant` and `color` are set once here rather than on every
- * avatar — a stack whose fourth face is a rung 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 ring is not decoration
- *
- * Two circles of similar tone laid over each other have no edge between them at
- * all, and the stack reads as one smeared shape. The ring is drawn in the page's
- * own `surface`, so it is the background showing through rather than a colour of
- * its own — which is what puts the near avatar in front instead of putting a
- * white line on it.
- *
- * `isolate` on the group is the other half: it makes the first avatar's ring
- * paint against the page rather than against whatever the group happens to be
- * stacked over.
- *
- * ## The first avatar is on top
- *
- * The order is the DOM order, and each avatar is drawn under the one before it.
- * A stack read from the start is therefore read front to back, so the person the
- * group is *about* comes first rather than last — and under RTL the whole thing
- * flips on its own, because the overlap is a logical margin.
- */
-export declare const MPAvatarGroup: React.ForwardRefExoticComponent<MPAvatarGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,2 +0,0 @@
-"use client";
-import{jsx as r,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{MPAvatar as t}from"../avatar/MPAvatar.js";import{MPAvatarGroupContext as i}from"../../internal/avatar-group.js";import{useMPColor as o,useMPSize as l}from"../../internal/config.js";const n={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPAvatarGroup=/*@__PURE__*/e.forwardRef(function({max:s,total:m,overlap:c,size:p,shape:v="circle",variant:f="tonal",color:d,className:h,style:u,children:x,...g},j){const M=l(p),y=o(d),z=e.useMemo(()=>({size:M,shape:v,variant:f,color:y}),[M,v,f,y]),A=e.Children.toArray(x),P=void 0===s?A:A.slice(0,Math.max(0,s)),N=m??A.length,$=Math.max(0,N-P.length);return r(i.Provider,{value:z,children:a("div",{ref:j,"data-mp-size":M,className:["mp-avatar-group isolate inline-flex items-center align-middle","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--_mp-avatar-overlap)*-1)]","ring-mp-surface [&>*]:ring-2",h??""].filter(Boolean).join(" "),style:{"--_mp-avatar-overlap":void 0===c?n[M]:"number"==typeof c?`${c}px`:c,...u},...g,children:[P,$>0?r(t,{initials:`+${$}`}):null]})})});

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

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

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

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

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

@@ -1,22 +0,0 @@
-/**
- * What an avatar inherits from the stack around it.
- *
- * Its own module rather than a file `MPAvatarGroup` exports, for the reason
- * `button-group.ts` gives: both sides import it — the group provides the
- * context and the avatar reads it — so putting it in either component would
- * make one of them pull in the other, and an `MPAvatar` that dragged a group
- * nobody used into the bundle is dead weight on every page with a face on it.
- *
- * Every field is optional and every one of them may legitimately be `undefined`.
- * An avatar reads the group as a *fallback*, so "not set on the group" has to
- * keep meaning "use the avatar's own default" rather than turning into one.
- */
-import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../types.js';
-export interface MPAvatarGroupContextValue {
-    size?: MPSize;
-    shape?: 'circle' | 'square';
-    variant?: MPVariant;
-    color?: MPColor;
-}
-export declare const MPAvatarGroupContext: React.Context<MPAvatarGroupContextValue | null>;

package/dist/internal/avatar-group.js

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

package/dist/styles/avatar-group.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--spacing:.25rem;--container-lg:32rem;--font-weight-medium:500}}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.isolate{isolation:isolate}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-18{width:calc(var(--spacing) * 18);height:calc(var(--spacing) * 18)}.size-\[60\%\]{width:60%;height:60%}.size-full{width:100%;height:100%}.size-px{width:1px;height:1px}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-18{height:calc(var(--spacing) * 18)}.max-w-\[30rem\]{max-width:30rem}.max-w-\[37\.5rem\]{max-width:37.5rem}.max-w-\[52\.5rem\]{max-width:52.5rem}.max-w-\[75rem\]{max-width:75rem}.max-w-\[100rem\]{max-width:100rem}.max-w-lg{max-width:var(--container-lg)}.shrink-0{flex-shrink:0}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-hidden{overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.bg-\(--_mp-accent\){background-color:var(--_mp-accent)}.bg-\(--_mp-accent-container\){background-color:var(--_mp-accent-container)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.align-middle{vertical-align:middle}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-\(--_mp-accent\){color:var(--_mp-accent)}.text-\(--_mp-on-accent\){color:var(--_mp-on-accent)}.text-\(--_mp-on-accent-container\){color:var(--_mp-on-accent-container)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.select-none{-webkit-user-select:none;user-select:none}.\[clip-path\:inset\(50\%\)\]{clip-path:inset(50%)}.\[\&\>\*\]\:ring-2>*{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.\[\&\>\*\:not\(\:first-child\)\]\:\[margin-inline-start\:calc\(var\(--_mp-avatar-overlap\)\*-1\)\]>:not(:first-child){margin-inline-start:calc(var(--_mp-avatar-overlap) * -1)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}