material-plus-ui 1.5.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-plus-ui",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "A React component library implementing Material Design 3 — the components other Material libraries do not ship, and wider versions of the ones they do. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it can coexist with an existing Material setup. ESM only, types included.",
   "type": "module",
   "sideEffects": [
@@ -18,7 +18,7 @@
     "url": "https://github.com/jooy2/material-plus/issues"
   },
   "scripts": {
-    "build": "npm run format:fix && tsc --project tsconfig.prod.json && node scripts/specify-imports.mjs && node scripts/annotate-pure.mjs && npm run minify && node scripts/mark-client.mjs && node scripts/build-styles.mjs && node scripts/build-split-styles.mjs && node scripts/measure-bundle.mjs",
+    "build": "npm run format:fix && node scripts/clean-dist.mjs && tsc --project tsconfig.prod.json && node scripts/specify-imports.mjs && node scripts/annotate-pure.mjs && npm run minify && node scripts/mark-client.mjs && node scripts/build-styles.mjs && node scripts/build-split-styles.mjs && node scripts/measure-bundle.mjs",
     "lint": "eslint . --ext .js,.ts .",
     "lint:fix": "eslint . --ext .js,.ts --fix .",
     "minify": "terser-glob 'dist/**/*.js' --config-file terser.config.json",
@@ -54,6 +54,11 @@
       "module": "./dist/constants/icons.js",
       "default": "./dist/constants/icons.js"
     },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "module": "./dist/hooks/index.js",
+      "default": "./dist/hooks/index.js"
+    },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "module": "./dist/components/*/index.js",
@@ -154,6 +159,7 @@
     "vitest-browser-react": "^2.2.0"
   },
   "dependencies": {
+    "highlight.js": "^11.12.0",
     "lucide-react": "^1.37.0"
   },
   "peerDependencies": {

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";const o={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPAvatarGroup=/*@__PURE__*/e.forwardRef(function({max:l,total:m,overlap:n,size:s="md",shape:c="circle",variant:p="tonal",color:v="primary",className:d,style:f,children:h,...u},x){const g=e.useMemo(()=>({size:s,shape:c,variant:p,color:v}),[s,c,p,v]),j=e.Children.toArray(h),y=void 0===l?j:j.slice(0,Math.max(0,l)),M=m??j.length,z=Math.max(0,M-y.length);return r(i.Provider,{value:g,children:a("div",{ref:x,"data-mp-size":s,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",d??""].filter(Boolean).join(" "),style:{"--_mp-avatar-overlap":void 0===n?o[s]:"number"==typeof n?`${n}px`:n,...f},...u,children:[y,z>0?r(t,{initials:`+${z}`}):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}