material-plus-ui 0.0.1 → 1.1.0

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. Generated when it is
+     * left out.
+     */
+    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:f,onCheckedChange:b,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??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:f,indeterminate:x,required:_,disabled:v,readOnly:C,onCheckedChange:e=>b?.(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,74 @@
+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. Defaults to the word for "remove" in
+     * `locale`.
+     */
+    deleteLabel?: string;
+    /**
+     * Which language the delete button's default name is written in. Falls back
+     * to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: 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.
+     *
+     * Deliberately **without a default**, which is the one thing about it worth
+     * knowing. Passing it — either way round — is what says this chip is a toggle,
+     * and only then is it announced as one. A chip that merely has an `onClick`
+     * is an action, and an action announced as "not pressed" is a screen reader
+     * describing a state the chip does not have.
+     */
+    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{useMPLocale as l,useMPMessages as c}from"../../internal/locale";import{hasContent as s}from"../../internal/scale";import{MPStateLayer as m}from"../../internal/StateLayer";const p={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},d={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"},u={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},f={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},x={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},b={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"},g={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)"},h={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"},v=["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(" "),y=["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:_="md",color:w="primary",startIcon:j,endIcon:k,count:N,onDelete:z,deleteLabel:C,locale:I,selected:$,disabled:B=!1,className:L,style:M,children:P,onClick:D,...F},R){const S=l(I),q=c("common",S),A=Boolean(D)&&!B,E=["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)",p[_],d[_],f[_],x[_],B?h[o]:$?g[o]:b[o],A?"ps-0":u[_],z?"pe-2":A?"pe-0":"",L??""].filter(Boolean).join(" "),G=n(t,{children:[j,s(P)?e("span",{className:"min-w-0 truncate",children:P}):null,k,s(N)?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:N}):null]});return n("span",{ref:R,"data-mp-size":_,"data-mp-variant":o,"data-selected":$||void 0,className:E,style:{...i(w),...M},"aria-disabled":!(!B||A)||void 0,...F,children:[A?n("button",{type:"button","aria-pressed":$,className:`${y} ${f[_]} ${u[_]}`,onClick:D,children:[e(m,{}),G]}):G,z?e("button",{type:"button","aria-label":C??q.remove,disabled:B,className:v,onClick:z,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";

package/dist/components/color-picker/MPColorPicker.d.ts

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import type { MPColorFormat } from '../../internal/color';
+import type { MPStyleProps } from '../../types';
+/** The names for the parts of the picker that have no text on them. */
+export interface MPColorPickerLabels {
+    /** The saturation/brightness square. */
+    area: string;
+    /** The hue rail beside it. */
+    hue: string;
+    /** The opacity rail, when `alpha` is on. */
+    alpha: string;
+    /** The field the value can be typed into. */
+    value: string;
+    /** The grid of ready-made colours. */
+    swatches: string;
+    /** The × that empties the control. */
+    clear: string;
+    /** What the trigger reads before anything has been chosen. */
+    empty: string;
+}
+export interface MPColorPickerProps extends MPStyleProps {
+    /** The colour, as a CSS string. Pass it to drive the picker yourself. */
+    value?: string;
+    /** Where an uncontrolled picker starts. @default '#00639b' */
+    defaultValue?: string;
+    /** Called with the new colour, written in `format`. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Which notation the value is written in on the way out.
+     * @default 'hex'
+     */
+    format?: MPColorFormat;
+    /**
+     * Offers an opacity rail, and lets the value carry a fourth channel.
+     * @default false
+     */
+    alpha?: boolean;
+    /**
+     * The ready-made colours under the panel. `false` draws none; an array of CSS
+     * colour strings replaces the built-in set.
+     */
+    swatches?: readonly string[] | false;
+    /**
+     * Draws the panel in the page instead of in a popup, with no trigger.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * The field under the panel the value can be typed into.
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Label for the picker, drawn in the outline's notch — or above the panel when
+     * `inline`, which has no notch to draw it in. While nothing is chosen and the
+     * trigger is unfocused it rests on the trigger's own line instead. See
+     * `floatingLabel`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether the label rests on the trigger's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first colour.
+     *
+     * The swatch comes down with it. The swatch is the value drawn rather than an
+     * affordance — with no colour in the picker it is an empty ring — so it is the
+     * one leading mark in the library that gives its place up to a resting label
+     * rather than holding the label out of it.
+     *
+     * Ignored when `inline`, which has no trigger for a label to rest on.
+     * @default true
+     */
+    floatingLabel?: boolean;
+    /** The line under the control. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the control. Its presence is also what puts the picker into
+     * its error state.
+     */
+    errorMessage?: React.ReactNode;
+    /** Marks the control required, both to assistive technology and to the label. */
+    required?: boolean;
+    /** Greys the control out and stops it opening. */
+    disabled?: boolean;
+    /** Shows the colour without allowing it to change, and stays focusable. */
+    readOnly?: boolean;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Name of the form control. Submits the value as written in `format`. */
+    name?: string;
+    /** Whether the popup is open. Use with `onOpenChange` for a controlled popup. */
+    open?: boolean;
+    /** Whether it starts open. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Overrides for the accessible names, one at a time. */
+    labels?: Partial<MPColorPickerLabels>;
+    /**
+     * The id put on the trigger and pointed at by the label. Generated when it is
+     * left out.
+     */
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A colour, chosen by eye.
+ *
+ * A saturation square with a hue rail beside it — the arrangement every design
+ * tool has settled on, because it is the one that puts every colour of a hue
+ * within a single movement of the pointer. `alpha` adds a third rail, `format`
+ * decides which notation comes back out, and `swatches` puts the handful of
+ * colours a product actually uses one click away.
+ *
+ * The trigger is `MPTextField`'s shell wearing a swatch, so a picker in a form is
+ * the same object as the fields around it — the same notched outline, the same
+ * label in the notch, the same supporting text underneath.
+ *
+ * ## Why the panel's state is HSV
+ *
+ * It never leaves that model, which is what keeps the hue rail still while the
+ * pointer is in the black corner: through RGB, every shade of black is the same
+ * colour and the rail would snap to red the moment the square bottomed out.
+ *
+ * ## This is not the theme
+ *
+ * A colour chosen here is *data* — a tag's colour, a calendar's, a project's. It
+ * is not `--mp-source-color`, and the picker deliberately does not offer the
+ * scheme's four families as swatches: those are roles that mean something, and
+ * they move when somebody re-themes the application.
+ */
+export declare const MPColorPicker: React.ForwardRefExoticComponent<MPColorPickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/MPColorPicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Field as n}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{CONTROL_ICON as p,META_TEXT as f,PROSE_TEXT as m,STACK_GAP as g,hasContent as v}from"../../internal/scale";import{FADE as b,PORTAL_LAYER as x}from"../../internal/surface";import{CHECKER_BACKGROUND as y,DEFAULT_SWATCHES as w,clamp as N,cssColor as k,formatColor as C,parseColor as j,readableInk as _}from"../../internal/color";const z={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"No colour"},P={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},$={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},M={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},T={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},I={xs:12,sm:14,md:16,lg:18,xl:20},O={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},S="border-mp-outline-variant relative overflow-hidden border",A=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function B(e,a,r){return{x:0===e.width?0:N((a-e.left)/e.width,0,1),y:0===e.height?0:N((r-e.top)/e.height,0,1)}}function D(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function L({hsv:n,alphaValue:l,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:h,size:p,inert:m,labels:g}){const v=I[p],b=-v/2,x=k({h:n.h,s:100,v:100}),w=k(n),z=r.useRef(null),O=e=>({onPointerDown:a=>{if(m)return;const r=a.currentTarget.getBoundingClientRect();z.current=r,a.currentTarget.setPointerCapture(a.pointerId),e(B(r,a.clientX,a.clientY))},onPointerMove:a=>{const r=z.current;!m&&r&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(B(r,a.clientX,a.clientY))},onPointerUp:()=>{z.current=null},onPointerCancel:()=>{z.current=null}}),L=(e,a,r,n)=>({role:"slider",tabIndex:m?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":m||void 0,onKeyDown:e=>{const a=D(e);!m&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),R=["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),q=r.useMemo(()=>d?d.map(e=>{const a=j(e);return{swatch:e,parsed:a,hex:null===a?null:C(a.hsv,a.alpha,"hex")}}):[],[d]),V=C(n,l,"hex");return a("div",{className:`mp-color-picker__panel flex flex-col ${P[p]} ${T[p]}`,children:[e("div",{...O(({x:e,y:a})=>i({hsv:{h:n.h,s:100*e,v:100*(1-a)},alpha:l})),role:"slider",tabIndex:m?-1:0,"aria-label":g.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":m||void 0,onKeyDown:e=>{const a=D(e);!m&&a&&(e.preventDefault(),i({hsv:{h:n.h,s:N(n.s+a.x,0,100),v:N(n.v+a.y,0,100)},alpha:l}))},className:[S,"rounded-mp-sm",$[p],R,m?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:x,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:A,style:{width:v,height:v,left:`${n.s}%`,top:100-n.v+"%",marginLeft:b,marginTop:b,backgroundColor:w}})}),e("div",{...O(({x:e})=>i({hsv:{...n,h:360*e},alpha:l})),...L(g.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:l})),className:[S,"rounded-mp-full",M[p],R,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:A,style:{width:v,height:v,left:n.h/360*100+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:x}})}),c?a("div",{...O(({x:e})=>i({hsv:n,alpha:e})),...L(g.alpha,100*l,100,e=>i({hsv:n,alpha:N(l+e/100,0,1)})),className:[S,"rounded-mp-full",M[p],R,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:y,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${k(n,0)}, ${w})`}}),e("span",{className:A,style:{width:v,height:v,left:100*l+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:k(n,l)}})]}):null,h?a("div",{className:`flex items-center ${T[p]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:v+8,height:v+8,...y},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:k(n,l)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":g.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",f,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,q.length>0?e("div",{role:"group","aria-label":g.swatches,className:"grid grid-cols-8 gap-1",children:q.map(({swatch:a,parsed:r,hex:n},l)=>{const s=null!==r&&n===V;return e("button",{type:"button",disabled:m,"aria-label":a,"aria-pressed":s,onClick:()=>{r&&i({hsv:r.hsv,alpha:r.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border",R,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:s&&r?e("span",{style:{color:_(r.hsv)},children:e(t,{icon:o,size:12})}):null},`${l}:${a}`)})}):null]})}const R={h:202,s:100,v:61};export const MPColorPicker=r.forwardRef(function({value:o,defaultValue:N="#00639b",onValueChange:_,format:P="hex",alpha:$=!1,swatches:M=w,inline:T=!1,editable:I=!0,label:S,floatingLabel:A=!0,description:B,errorMessage:D,required:q=!1,disabled:V=!1,readOnly:K=!1,clearable:F=!1,name:U,open:X,defaultOpen:Y=!1,onOpenChange:E,labels:H,size:W="md",fullWidth:G=!1,id:J,className:Q,style:Z},ee){const ae=r.useMemo(()=>({...z,...H}),[H]),re=v(D),ne=O[W],le=r.useId(),te=J??le,[oe,ie]=r.useState(N),se=o??oe,[ue,ce]=r.useState(Y),de=X??ue,[he,pe]=r.useState(()=>j(se)??{hsv:R,alpha:1}),[fe,me]=r.useState(()=>se),ge=C(he.hsv,$?he.alpha:1,P),ve=""===se;r.useEffect(()=>{const e=j(se);e?C(e.hsv,$?e.alpha:1,P)!==ge&&(me(se),pe(e)):me(se)},[se,ge,$,P]);const be=V||K,xe=F&&!be&&!ve,{shrunk:ye,focusProps:we}=c({floating:A&&v(S),filled:!ve,pinned:de}),Ne=(e,a)=>{pe(e);const r=C(e.hsv,$?e.alpha:1,P);me(a??r),void 0===o&&ie(r),_?.(r)},ke=e(L,{hsv:he.hsv,alphaValue:he.alpha,onChange:Ne,text:fe,onTextChange:e=>{me(e);const a=j(e);a&&Ne(a,e)},withAlpha:$,swatches:M,editable:I,size:W,inert:be,labels:ae}),Ce=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:y,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ve?"transparent":k(he.hsv,$?he.alpha:1)}})}),je=U?e("input",{type:"hidden",name:U,value:ve?"":ge}):null;return T?a("div",{ref:ee,"data-mp-size":W,className:["mp-color-picker flex flex-col",g[W],Q??""].filter(Boolean).join(" "),style:Z,children:[v(S)?a("span",{className:[f,V?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[S,q?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,ke,v(D)?e("span",{className:`${f} text-mp-error`,children:D}):v(B)?e("span",{className:`${f} text-mp-on-surface-variant`,children:B}):null,je]}):a(n.Root,{ref:ee,disabled:V,invalid:re,"data-mp-size":W,className:["mp-color-picker group flex-col align-top",G?"flex w-full":"inline-flex w-fit",Q??""].filter(Boolean).join(" "),style:Z,...we,children:[a(l.Root,{open:de,onOpenChange:e=>{void 0===X&&ce(e),E?.(e)},children:[a("div",{className:"relative w-full",children:[a(l.Trigger,{id:te,disabled:V,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ne.padding,xe?"pe-10":"",ne.height,m[W],V?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(K?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ve&&!ye?null:Ce,e("span",{className:["min-w-0 flex-1 truncate text-start",ve?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:ve?ye?ae.empty:null:ge})]}),xe?a("button",{type:"button","aria-label":ae.clear,onClick:()=>{void 0===o&&ie(""),me(""),_?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(d,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:i,size:p[W]})]}):null,e(u,{label:S,required:q,notched:ye}),v(S)?e(s,{size:W,label:S,required:q,htmlFor:te,shrunk:ye}):null]}),e(l.Portal,{children:e(l.Positioner,{className:x,sideOffset:4,align:"start",children:e(l.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",m[W],b].join(" "),children:ke})})})]}),e(h,{description:B,errorMessage:D,className:ne.padding}),je]})});

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { MPColorPicker } from './MPColorPicker';
+export type { MPColorPickerLabels, MPColorPickerProps } from './MPColorPicker';

package/dist/components/color-picker/index.js

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