material-plus-ui 0.0.1 → 1.0.0

package/dist/components/carousel/MPCarousel.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+export interface MPCarouselProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** Which slide is showing, counted from 0. Use with `onValueChange`. */
+    value?: number;
+    /**
+     * Which starts showing, for an uncontrolled carousel.
+     * @default 0
+     */
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    /**
+     * Whether the arrows wrap from the last slide back to the first.
+     *
+     * With it off they go `disabled` at the ends instead, which is the honest
+     * thing for a set that has a beginning and an end — a gallery of three
+     * photographs does, a rotating banner does not.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Advances on its own.
+     *
+     * Off by default and deliberately so: a carousel that moves while it is being
+     * read is the most complained-about pattern on the web. It pauses on hover, on
+     * focus anywhere inside it, while the tab is in the background, and it does not
+     * start at all for a reader who has asked for reduced motion.
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * How long each slide is held, in milliseconds.
+     * @default 5000
+     */
+    interval?: number;
+    /**
+     * The previous/next buttons.
+     * @default true
+     */
+    arrows?: boolean;
+    /**
+     * The row of position marks under the frame.
+     * @default true
+     */
+    indicators?: boolean;
+    /**
+     * How much surface the frame paints behind the slides.
+     *
+     * `text` is the one to reach for when the pictures already have edges of their
+     * own — it draws no frame at all, and the slides are the whole component.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The size of the arrows and the marks, and how far the arrows sit in from the
+     * frame's edge. Not the size of a slide, which is whatever the frame is.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the current mark and the arrows read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The carousel's accessible name.
+     * @default 'Carousel'
+     */
+    label?: string;
+    /** @default 'Previous slide' */
+    previousLabel?: string;
+    /** @default 'Next slide' */
+    nextLabel?: string;
+    /**
+     * How one slide is named to a screen reader, and how its mark is labelled.
+     * @default (index, count) => `Slide ${index} of ${count}`
+     */
+    slideLabel?: (index: number, count: number) => string;
+    /** The slides. Every top-level child becomes one. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of slides, one of which is in view.
+ *
+ * The mechanism is a scroll container with CSS scroll snapping, and nearly
+ * everything good about this component follows from that one choice. Swiping on
+ * a phone and two-finger dragging on a trackpad both work, because they are the
+ * browser's own scrolling rather than a gesture handler pretending to be it. The
+ * strip runs the other way under RTL without being told, because scrolling is
+ * directional and `translate` is not. And nothing is transformed, so the house
+ * rule against moving a surface holds here for free — a translated track would
+ * have had to argue for an exception.
+ *
+ * The motion is `scroll-behavior: smooth`, which means a reader who has asked for
+ * reduced motion gets an instant cut out of the same code path rather than out of
+ * a second one written to remember them.
+ *
+ * ## Why every child is a slide
+ *
+ * There is no `MPCarouselSlide`. `<MPCarousel><img /><img /></MPCarousel>` is the
+ * whole API, and the wrapper this component puts around each child is what
+ * carries the snap point, the width and the `role="group"` /
+ * `aria-roledescription="slide"` pair a screen reader needs — none of which a
+ * caller should have to remember to put on a photograph.
+ *
+ * ## What this is, in MD3's terms
+ *
+ * The specification describes four carousel layouts, three of which — hero,
+ * multi-browse and uncontained — resize their items as they travel past the
+ * frame's edge. This is the fourth: one item to a view, snapping. The other three
+ * are a per-item transform driven by scroll position, which is a different
+ * component and not one this library ships yet; what is here is drawn out of the
+ * specification's own parts — a filled icon button either side, a selected
+ * indicator that is a bar rather than a bigger dot.
+ */
+export declare const MPCarousel: React.ForwardRefExoticComponent<MPCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/MPCarousel.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton";import{MPIcon as o}from"../icon/MPIcon";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{CONTROL_ICON as s}from"../../internal/scale";import{CONTAINER_SURFACE as c}from"../../internal/surface";import{VISUALLY_HIDDEN as u}from"../../internal/visually-hidden";const d={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},m={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}},f=(e,r)=>`Slide ${e} of ${r}`;export const MPCarousel=t.forwardRef(function({value:p,defaultValue:h=0,onValueChange:b,loop:v=!0,autoPlay:w=!1,interval:x=5e3,arrows:g=!0,indicators:N=!0,variant:y="outlined",size:M="md",color:k="primary",label:j="Carousel",previousLabel:C="Previous slide",nextLabel:P="Next slide",slideLabel:z=f,className:I,style:R,children:$,...L},S){const B=t.Children.toArray($),E=B.length,[V,T]=t.useState(h),W=Math.min(Math.max(p??V,0),Math.max(E-1,0)),A=t.useRef(null),F=t.useRef([]),_=t.useRef(!1),q=t.useRef(!1),D=t.useRef(!1),[G,H]=t.useState(!1),J=t.useCallback((e,r=!1)=>{if(0===E)return;const t=v?(e%E+E)%E:Math.min(Math.max(e,0),E-1);_.current=r,void 0===p&&T(t),t!==W&&b?.(t)},[E,v,p,W,b]);t.useEffect(()=>{if(_.current)return void(_.current=!1);if(!q.current)return void(q.current=!0);F.current[W]?.scrollIntoView({block:"nearest",inline:"start"}),D.current=!0;const e=window.setTimeout(()=>{D.current=!1},700);return()=>window.clearTimeout(e)},[W]),t.useEffect(()=>{if(!w||G||E<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||J(W+1)},x);return()=>window.clearInterval(e)},[w,G,E,x,W,J]);const K=W<=0,O=W>=E-1;return r("div",{ref:S,role:"region","aria-roledescription":"carousel","aria-label":j,"data-mp-size":M,"data-mp-variant":y,className:["mp-carousel flex w-full flex-col",I??""].filter(Boolean).join(" "),style:{...l(k),...R},onPointerEnter:()=>H(!0),onPointerLeave:()=>H(!1),onFocus:()=>H(!0),onBlur:()=>H(!1),...L,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",c[y],"text-mp-on-surface"].join(" "),children:[e("div",{ref:A,tabIndex:0,role:"group","aria-label":j,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{const e=A.current;if(!e||0===e.clientWidth||D.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==W&&r>=0&&r<E&&J(r,!0)},children:B.map((r,t)=>e("div",{ref:e=>{F.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":z(t+1,E),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),g&&E>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${d[M]}`,children:[e(n,{variant:"filled",size:M,color:k,label:C,disabled:!v&&K,className:"pointer-events-auto",icon:e(o,{icon:a,size:s[M],className:"rtl:rotate-180"}),onClick:()=>J(W-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:M,color:k,label:P,disabled:!v&&O,className:"pointer-events-auto",icon:e(o,{icon:i,size:s[M],className:"rtl:rotate-180"}),onClick:()=>J(W+1)})]}):null]}),N&&E>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${m[M].gap}`,children:B.map((r,t)=>e("button",{type:"button","aria-label":z(t+1,E),"aria-current":t===W?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===W?`${m[M].current} bg-(--_mp-accent)`:`${m[M].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>J(t)},t))}):null,e("span",{className:u,"aria-live":w?"off":"polite",children:E>0?z(W+1,E):""})]})});

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

@@ -0,0 +1,2 @@
+export { MPCarousel } from './MPCarousel';
+export type { MPCarouselProps } from './MPCarousel';

package/dist/components/carousel/index.js

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

package/dist/components/chat-bubble/MPChatBubble.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+/**
+ * Whose message this is.
+ *
+ * `start` and `end` rather than `them`/`me` or `left`/`right`: a thread runs the
+ * way the language does, and the same two words already mean this everywhere
+ * else in the library. `start` is the default because a message from somebody
+ * else is the one you have no other way of knowing about.
+ */
+export type MPChatBubbleSide = 'start' | 'end';
+/**
+ * How far a message has got.
+ *
+ * The first four are a ladder and the fifth is not on it: `failed` is the
+ * message that did not go, which is why it is the only one drawn in another
+ * colour family.
+ */
+export type MPChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+/** What a link inside a message unfurls to. */
+export interface MPChatBubblePreview {
+    /** Where the card goes. */
+    url: string;
+    /** The page's title. */
+    title?: React.ReactNode;
+    /** Its summary, clamped to two lines. */
+    description?: React.ReactNode;
+    /** The share image, drawn across the top of the card. */
+    image?: string;
+    /** Who published it — a domain, a site name. */
+    site?: React.ReactNode;
+    /**
+     * Opens the card in a new tab.
+     * @default false
+     */
+    newTab?: boolean;
+}
+export interface MPChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Whose message this is.
+     * @default 'start'
+     */
+    side?: MPChatBubbleSide;
+    /** Who sent it, above the bubble. */
+    name?: React.ReactNode;
+    /** When it was sent, beside the name. */
+    time?: React.ReactNode;
+    /**
+     * The sender's picture — an [MPAvatar](../display/avatar), at the size the
+     * thread uses. Left out, the bubble takes the whole row.
+     */
+    avatar?: React.ReactNode;
+    /**
+     * How far the message has got, drawn as a mark under the bubble. Left out,
+     * nothing is drawn — a received message has no delivery state worth showing.
+     */
+    status?: MPChatBubbleStatus;
+    /** Overrides the word the mark is read out as. */
+    statusLabel?: string;
+    /**
+     * Draws the three dots instead of the message. Whatever is in `children` is
+     * left alone, so the same bubble can go back to it when the message arrives.
+     * @default false
+     */
+    typing?: boolean;
+    /**
+     * A picture, a video, a map — drawn edge to edge above the text, so the
+     * bubble's own corners crop it.
+     */
+    media?: React.ReactNode;
+    /** A link in the message, unfurled into a card under the text. */
+    preview?: MPChatBubblePreview;
+    /**
+     * The message's own actions — an [MPMenu](../inputs/menu) trigger, most of the
+     * time. Sits beside the bubble and stays out of the way until the row is
+     * hovered or something in it takes focus.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Which language the marks are read out in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /**
+     * How much surface the bubble paints.
+     *
+     * A bubble *is* the thing being coloured, unlike a card — so this is the
+     * control ladder rather than the container one, and `filled` floods it with
+     * the accent. That is what tells your own messages from everyone else's at a
+     * glance rather than one line at a time.
+     *
+     * `side` deliberately does not decide it: which end of the thread is filled is
+     * a decision about the product, not about the component, and a thread that
+     * fills neither is a perfectly good thread.
+     * @default 'tonal'
+     */
+    variant?: MPVariant;
+    /**
+     * The type scale of the message, and the room inside the bubble.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * One message in a conversation.
+ *
+ * MD3 does not describe a chat bubble — this is the library's own shape, in the
+ * sense [MPProgressBox](../feedback/progress-box) is — but every part of it is
+ * drawn out of the specification's own roles, so a thread of these sits in a
+ * Material page without announcing that it is extra.
+ *
+ * Everything around the bubble is optional and nothing about it is fixed by
+ * `side`: the avatar, the sender's name, the time, the delivery mark, the media
+ * above the text and the link card below it are each drawn only when they are
+ * given something. What `side` decides is which way the row runs and which
+ * corner of the bubble is cut short.
+ *
+ * ## Why `variant` is not tied to `side`
+ *
+ * Filling the reading-end column is a convention, not a law. It is also a
+ * decision about the product — some threads fill neither end, and a support
+ * inbox may want the *agent's* messages filled rather than the reader's. So
+ * `side` decides the geometry and `variant` decides the emphasis, and a caller
+ * who wants the usual arrangement writes it once.
+ */
+export declare const MPChatBubble: React.ForwardRefExoticComponent<MPChatBubbleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/chat-bubble/MPChatBubble.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{MPIcon as r}from"../icon/MPIcon";import{CheckIcon as l,ClockIcon as t,ErrorIcon as i,LinkIcon as o}from"../../constants/icons";import{accentSlots as s}from"../../internal/accent";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale";import{hasContent as d,META_TEXT as p,PROSE_TEXT as u}from"../../internal/scale";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden";const h={xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},b={start:"[border-start-start-radius:var(--mp-sys-shape-corner-extra-small)]",end:"[border-start-end-radius:var(--mp-sys-shape-corner-extra-small)]"},x={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border bg-transparent text-mp-on-surface",text:"bg-mp-surface-container-low text-mp-on-surface"};function v(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const g={sending:e(r,{icon:t,size:"1.15em"}),sent:e(r,{icon:l,size:"1.15em"}),delivered:e("span",{className:"block size-[1.15em]",children:e(v,{})}),read:e("span",{className:"block size-[1.15em]",children:e(v,{})}),failed:e(r,{icon:i,size:"1.15em"})},N={sending:"text-mp-on-surface-variant",sent:"text-mp-on-surface-variant",delivered:"text-mp-on-surface-variant",read:"text-(--_mp-accent)",failed:"text-mp-error"},w=["rounded-mp-sm block overflow-hidden border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","transition-[background-color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),y=["shrink-0 opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const MPChatBubble=a.forwardRef(function({side:a="start",name:r,time:l,avatar:t,status:i,statusLabel:o,typing:v=!1,media:w,preview:j,actions:z,locale:C,variant:L="tonal",size:B="md",color:$="primary",className:M,style:P,children:W,...I},R){const T=c(C),q=m("chat",T),A="end"===a,D=d(r)||d(l),E=v||d(W)||Boolean(j);return n("div",{ref:R,"data-mp-size":B,"data-mp-variant":L,"data-mp-side":a,className:["mp-chat-bubble group/bubble flex w-full items-start gap-2",A?"flex-row-reverse":"",M??""].filter(Boolean).join(" "),style:{...s($),...P},...I,children:[d(t)?e("div",{className:"shrink-0",children:t}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col gap-1",A?"items-end":"items-start"].join(" "),children:[D?n("div",{className:`flex items-baseline gap-2 ${p}`,children:[d(r)?e("span",{className:"font-medium",children:r}):null,d(l)?e("span",{className:"text-mp-on-surface-variant",children:l}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(A?"flex-row-reverse":""),children:[n("div",{className:["mp-chat-bubble__sheet rounded-mp-xl flex min-w-0 flex-col overflow-hidden","box-border",b[a],x[L],u[B]].join(" "),children:[d(w)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:w}):null,E?n("div",{className:`flex min-w-0 flex-col gap-2 ${h[B]}`,children:[v?e(k,{label:q.typing}):d(W)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:W}):null,j?e(_,{preview:j}):null]}):null]}),d(z)?e("div",{className:y,children:z}):null]}),i?n("div",{className:`flex items-center gap-1 ${p} ${N[i]}`,children:[g[i],e("span",{className:f,children:o??q[i]})]}):null]})]})});function k({label:a}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"mp-chat-typing size-[0.45em] rounded-full bg-current",style:{"--_mp-index":n}},n)),e("span",{className:f,children:a})]})}function _({preview:a}){const{url:l,title:t,description:i,image:s,site:c,newTab:m=!1}=a;return n("a",{href:l,target:m?"_blank":void 0,rel:m?"noopener noreferrer":void 0,className:w,children:[s?e("img",{src:s,alt:"",className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[d(c)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70",children:[e(r,{icon:o,size:"1em"}),e("span",{className:"truncate",children:c})]}):null,d(t)?e("span",{className:"font-medium",children:t}):null,d(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}

package/dist/components/chat-bubble/index.d.ts

@@ -0,0 +1,2 @@
+export { MPChatBubble } from './MPChatBubble';
+export type { MPChatBubblePreview, MPChatBubbleProps, MPChatBubbleSide, MPChatBubbleStatus } from './MPChatBubble';

package/dist/components/chat-bubble/index.js

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

package/dist/components/checkbox/MPCheckbox.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import type { MPColor, MPSize } from '../../types';
+export interface MPCheckboxProps {
+    /** Whether the box is ticked. Use with `onCheckedChange` for a controlled box. */
+    checked?: boolean;
+    /** Whether the box starts ticked, for an uncontrolled one. */
+    defaultChecked?: boolean;
+    /**
+     * Called with the new state. A boolean rather than an event, the same bargain
+     * `MPTextField.onChange` makes: what a caller wants is the value.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Neither ticked nor empty — what a parent box shows when some of its children
+     * are ticked. Drawn as a dash, and it is a *display* state: clicking a
+     * half-ticked box ticks it.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /** The text beside the tick, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** The line under the label. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the label. Its presence is also what turns the checkbox
+     * over into its error state, so there is no way to show one with no
+     * explanation.
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * The tick's size and the label's type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the ticked box is filled with.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Marks the checkbox required, both to assistive technology and to the label. */
+    required?: boolean;
+    /** Greys the checkbox out and stops it taking input. */
+    disabled?: boolean;
+    /**
+     * Shows the state without allowing changes. Unlike `disabled` the box stays in
+     * the tab order, which is what a value the reader still has to be able to find
+     * needs.
+     */
+    readOnly?: boolean;
+    /** Name of the form control, as on a native checkbox. */
+    name?: string;
+    /** The value submitted when the box is ticked. */
+    value?: string;
+    /**
+     * The id put on the control and pointed at by the label. Derived from `name`
+     * when omitted, and generated when there is no name either.
+     */
+    id?: string;
+}
+/**
+ * A Material Design checkbox.
+ *
+ * The box is `on-surface-variant` at rest and fills with the accent family when
+ * it is ticked — which is the one place this library expresses a state by
+ * swapping the whole surface rather than washing it, because "on" and "off" are
+ * not two strengths of the same thing.
+ *
+ * `label`, `description` and `errorMessage` are props rather than children for
+ * the reason they are on `MPTextField`: the arrangement is fixed, and what a
+ * caller decides is what goes in each slot. There is no `children`.
+ *
+ * Base UI's `Checkbox` is underneath, so the hidden input that submits with a
+ * form, the `aria-checked="mixed"` an indeterminate box needs, and the label
+ * association all come for free.
+ */
+export declare const MPCheckbox: React.ForwardRefExoticComponent<MPCheckboxProps & React.RefAttributes<HTMLElement>>;

package/dist/components/checkbox/MPCheckbox.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon";import{CheckIcon as i,RemoveIcon as c}from"../../constants/icons";import{accentSlots as s}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as l}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";const h={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=a.forwardRef(function({checked:u,defaultChecked:b,onCheckedChange:f,indeterminate:x=!1,label:g,description:k,errorMessage:y,size:z="md",color:j="primary",required:_=!1,disabled:v=!1,readOnly:C=!1,name:N,value:M,id:I},R){const q=p(y),w=q?"error":j,L=h[z],O=a.useId(),P=I??`mp-checkbox-${N??O}`;return e(n.Root,{className:"mp-checkbox inline-block align-top",disabled:v,invalid:q,"data-mp-size":z,style:s(w),children:r("div",{className:["flex items-start gap-3",m[z]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(t.Root,{ref:R,id:P,name:N,value:M,checked:u,defaultChecked:b,indeterminate:x,required:_,disabled:v,readOnly:C,onCheckedChange:e=>f?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",L.box,v?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[C?"cursor-default":"cursor-pointer",q?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[v?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",L.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:"flex items-center justify-center",children:e(o,{icon:x?c:i,size:L.glyph,strokeWidth:3})})]})}),p(g)||p(k)||q?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?r(n.Label,{htmlFor:P,className:["leading-[1.4]",v?"text-mp-on-surface/38 cursor-default":C?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:k,errorMessage:y})]}):null]})})});

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

@@ -0,0 +1,2 @@
+export { MPCheckbox } from './MPCheckbox';
+export type { MPCheckboxProps } from './MPCheckbox';

package/dist/components/checkbox/index.js

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

package/dist/components/chip/MPChip.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * How much surface the chip paints.
+     *
+     * `outlined` is the default because it is MD3's: an assist, filter and input
+     * chip are all outlined at rest, and the outlined chip is the one that stays
+     * legible in a row of twenty.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+    /** Content placed before the label — an icon, a status dot, an avatar. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label, before any `count`. */
+    endIcon?: React.ReactNode;
+    /**
+     * A number set into the end of the chip. Rendered on its own small plate, so
+     * "Errors 12" reads as one token with a count rather than as two words.
+     */
+    count?: React.ReactNode;
+    /**
+     * Called when the chip's delete affordance is pressed. Passing it is what
+     * makes the affordance appear.
+     */
+    onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible name of the delete button.
+     * @default 'Remove'
+     */
+    deleteLabel?: string;
+    /**
+     * Marks the chip as chosen — a filter that is on.
+     *
+     * MD3's selected filter chip fills with the container tone of its own family
+     * rather than changing family, which is what this does: a filter that is on is
+     * still the same filter.
+     * @default false
+     */
+    selected?: boolean;
+    /** Unavailable. Drops the accent family, as everywhere else in the library. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A compact token: a tag, a filter, a status, an entity plucked out of a list.
+ *
+ * The shell is always a `<span>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` is given — a real `<button>` wrapping that
+ * content, plus a second button for `onDelete`. Both are reachable by keyboard,
+ * and neither is nested inside the other.
+ *
+ * An inert `<span>` carrying a click handler is the single most common way a
+ * component library loses its keyboard users, and a `<button>` inside a
+ * `<button>` is the most common way one invents a chip that Chrome silently
+ * rewrites. This shape avoids both.
+ */
+export declare const MPChip: React.ForwardRefExoticComponent<MPChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/chip/MPChip.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{MPIcon as a}from"../icon/MPIcon";import{CloseIcon as r}from"../../constants/icons";import{accentSlots as i}from"../../internal/accent";import{hasContent as l}from"../../internal/scale";import{MPStateLayer as c}from"../../internal/StateLayer";const s={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},m={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},p={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},d={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},u={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},x={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-transparent"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},b={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 text-mp-on-surface/38 border bg-transparent",text:"bg-transparent text-mp-on-surface/38"},g=["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","rounded-mp-full size-[1.35em] opacity-70","transition-opacity duration-(--mp-sys-motion-duration-short4)","hover:opacity-100 focus-visible:opacity-100","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:cursor-default disabled:opacity-38"].join(" "),h=["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch rounded-[inherit] font-[inherit] text-[inherit]","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");export const MPChip=o.forwardRef(function({variant:o="outlined",size:v="md",color:y="primary",startIcon:_,endIcon:w,count:j,onDelete:k,deleteLabel:N="Remove",selected:z=!1,disabled:C=!1,className:I,style:$,children:B,onClick:L,...M},P){const R=Boolean(L)&&!C,D=["mp-chip relative inline-flex max-w-full shrink-0 items-center","box-border overflow-hidden align-middle leading-none whitespace-nowrap select-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",s[v],m[v],d[v],u[v],C?b[o]:z?f[o]:x[o],R?"ps-0":p[v],k?"pe-2":R?"pe-0":"",I??""].filter(Boolean).join(" "),F=n(t,{children:[_,l(B)?e("span",{className:"min-w-0 truncate",children:B}):null,w,l(j)?e("span",{className:["rounded-mp-full ms-0.5 inline-flex shrink-0 items-center justify-center px-1.5 py-px","text-[0.85em] leading-none font-medium tabular-nums","filled"===o?"bg-(--_mp-on-accent)/20 text-(--_mp-on-accent)":"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"].join(" "),children:j}):null]});return n("span",{ref:P,"data-mp-size":v,"data-mp-variant":o,"data-selected":z||void 0,className:D,style:{...i(y),...$},"aria-disabled":!(!C||R)||void 0,...M,children:[R?n("button",{type:"button","aria-pressed":z,className:`${h} ${d[v]} ${p[v]}`,onClick:L,children:[e(c,{}),F]}):F,k?e("button",{type:"button","aria-label":N,disabled:C,className:g,onClick:k,children:e(a,{icon:r,size:"1em"})}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPChip } from './MPChip';
+export type { MPChipProps } from './MPChip';

package/dist/components/chip/index.js

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

package/dist/components/collapsible/MPCollapsible.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import type { MPSize, MPVariant } from '../../types';
+export interface MPCollapsibleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'onChange'> {
+    /** Whether the panel is showing. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /**
+     * Whether it starts open, for an uncontrolled one.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The heading on the trigger. */
+    title?: React.ReactNode;
+    /** A second line under it, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /** Content before the title — a glyph, a status dot, a count. */
+    startIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the header, **outside** the trigger.
+     *
+     * Deliberately outside it: a header that both folds and holds a switch has two
+     * things to press, and a `<button>` inside a `<button>` is markup the browser
+     * rewrites on parse. The same shape `MPListItem` and `MPAccordionItem` use.
+     */
+    action?: React.ReactNode;
+    /**
+     * Replaces the header entirely with a control of your own — an `MPButton`, an
+     * `MPChip`, a line of text you made pressable.
+     *
+     * The element you pass *becomes* the trigger: Base UI hands it the click
+     * handler, `aria-expanded` and the `aria-controls` pointing at the panel, so
+     * there is nothing to wire up. `title` and the slots around it are for the far
+     * commoner case of wanting the header that is already there.
+     */
+    trigger?: React.ReactElement;
+    /**
+     * The chevron at the end of the header, turned to report the state.
+     * @default true
+     */
+    indicator?: boolean;
+    /** Unavailable. The trigger stops answering and the panel stays as it is. */
+    disabled?: boolean;
+    /**
+     * Inner padding around the panel's content. Turn it off for something that
+     * should reach the edges — a table, a picture, a list of its own.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * How much surface the sheet paints.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The room inside, and the type scale of the header and the body.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Keeps a closed panel in the DOM so the browser's own page search can find
+     * and open it. Overrides `keepMounted`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Keeps a closed panel in the DOM. For content that is expensive to build, or
+     * that holds form state which should survive being folded away.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+/**
+ * One section that folds, standing on its own.
+ *
+ * An [MPAccordion](./accordion) is a *set* of these and owns which one of them
+ * is open; this is the same fold with nothing else beside it, so what it needs
+ * is an `open` of its own rather than a place in somebody's list. Reach for it
+ * for a "Show more" on a form, an optional block of settings, the detail under
+ * a row.
+ *
+ * Base UI owns the parts that are genuinely hard: the `<button>`/panel pairing
+ * and the `aria-controls` / `aria-expanded` wiring between them,
+ * `hidden="until-found"`, and measuring the panel so it has a height to animate
+ * from. What is here is the surface, the ladders and the state layer.
+ *
+ * ## Why there is no `color`
+ *
+ * Because nothing would read it. The sheet stays neutral — a collapsible is a
+ * box holding somebody else's content, and dyeing the box dyes their content's
+ * background — and the focus ring is `secondary` on every control in the
+ * library. A prop that reaches nothing is a prop that has to be supported
+ * forever. For a fold that *is* the message rather than a container for one,
+ * that is [MPAlert](../feedback/alert).
+ */
+export declare const MPCollapsible: React.ForwardRefExoticComponent<MPCollapsibleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/MPCollapsible.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Collapsible as a}from"@base-ui/react/collapsible";import{MPIcon as i}from"../icon/MPIcon";import{ChevronDownIcon as r}from"../../constants/icons";import{MPStateLayer as o}from"../../internal/StateLayer";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as c,META_TEXT as d,PROSE_TEXT as m,SHEET_PAD_X as p,SHEET_PAD_Y as u,SHEET_TITLE as f}from"../../internal/scale";import{CONTAINER_SURFACE as h}from"../../internal/surface";const x=["h-(--collapsible-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),b={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPCollapsible=t.forwardRef(function({open:t,defaultOpen:g=!1,onOpenChange:v,title:N,subtitle:j,startIcon:w,action:y,trigger:k,indicator:M=!0,disabled:O=!1,padded:z=!0,variant:C="outlined",size:P="md",hiddenUntilFound:$=!1,keepMounted:B=!1,className:F,children:I,...R},T){const U=p[P],L=u[P];return n(a.Root,{ref:T,open:t,defaultOpen:g,onOpenChange:e=>v?.(e),disabled:O,"data-mp-size":P,"data-mp-variant":C,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",h[C],"text-mp-on-surface",F??""].filter(Boolean).join(" "),...R,children:[k?e(a.Trigger,{render:k}):n("div",{className:"flex w-full items-center",children:[n(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",U,L,s[P],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:[e(o,{}),c(w)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:w}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e("span",{className:`truncate ${f[P]}`,children:N}):null,c(j)?e("span",{className:`text-mp-on-surface-variant truncate ${d}`,children:j}):null]}),M?e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[P]})}):null]}),c(y)?e("span",{className:`flex shrink-0 items-center ${U}`,children:y}):null]}),e(a.Panel,{hiddenUntilFound:$,keepMounted:B,className:x,children:e("div",{className:["min-w-0",m[P],"text-mp-on-surface-variant",z?U:"",z?k?L:b[P]:""].filter(Boolean).join(" "),children:I})})]})});

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

@@ -0,0 +1,2 @@
+export { MPCollapsible } from './MPCollapsible';
+export type { MPCollapsibleProps } from './MPCollapsible';

package/dist/components/collapsible/index.js

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