material-plus-ui 0.0.1 → 1.1.0

package/dist/components/time-picker/MPTimePicker.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { type MPPickerLabels } from '../../internal/Calendar';
+import { type MPPickerShellProps } from '../../internal/Picker';
+import { type MPTimeUnit } from '../../internal/date';
+/**
+ * Which column of the clock a row belongs to.
+ *
+ * Re-exported so a caller writing a `shouldDisableTime` rule can name the
+ * argument it is handed.
+ */
+export type { MPTimeUnit };
+export interface MPTimePickerProps extends MPPickerShellProps {
+    /**
+     * The chosen time. A `Date`, so it carries a day as well — see
+     * `referenceDate`.
+     */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The day a chosen time is written onto while there is no value yet.
+     * @default today
+     */
+    referenceDate?: Date;
+    /** The earliest time of day that may be chosen. Only the clock is read. */
+    minTime?: Date | null;
+    /** The latest time of day that may be chosen. */
+    maxTime?: Date | null;
+    /**
+     * Blocks individual rows. Called once per row per column with the instant that
+     * row would produce and the column it is in, so a rule may be as coarse as
+     * "no afternoons" or as fine as one minute.
+     */
+    shouldDisableTime?: (value: Date, unit: MPTimeUnit) => boolean;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12?: boolean;
+    /**
+     * Adds the seconds column.
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * How far apart the rows of each column are.
+     * @default 1
+     */
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    /**
+     * A BCP 47 tag deciding whether the clock is 12- or 24-hour, what AM and PM
+     * are called, and how the trigger writes the time. Falls back to the nearest
+     * `MPLocaleProvider`, then to the platform's own.
+     */
+    locale?: string;
+    /**
+     * How the trigger writes the chosen time. Passed straight to `Intl`.
+     * @default { hour: 'numeric', minute: '2-digit' }, plus seconds when shown
+     */
+    format?: Intl.DateTimeFormatOptions;
+    placeholder?: React.ReactNode;
+    clearable?: boolean;
+    /**
+     * Offers the shortcut to the current time in the footer.
+     * @default true
+     */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as any column is touched.
+     *
+     * `false` by default, and unlike `MPDatePicker`: a time is two answers, and
+     * closing after the first one would make choosing 9:30 a matter of opening the
+     * popup twice.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    labels?: Partial<MPPickerLabels>;
+    /** Identifies the field when a form is submitted, as `HH:MM` (`HH:MM:SS`). */
+    name?: string;
+}
+/**
+ * A time of day, chosen from columns.
+ *
+ * The bounds are checked at the granularity of the column being drawn, which is
+ * the detail that separates a working time picker from a frustrating one. With a
+ * `minTime` of 09:30, the hour `9` stays available — the hour *contains* allowed
+ * minutes — and it is the minute column that greys out `00` through `25`. The
+ * naive check compares the whole candidate instant, hides the 9 entirely, and
+ * makes half past nine unreachable.
+ *
+ * The value is a `Date` rather than a string or a number of minutes, because
+ * everything else in this library that carries a moment is one, and because a
+ * time on its own has nowhere to record which day it is on — which is what
+ * decides whether it crossed a daylight-saving boundary. `referenceDate` is the
+ * day a bare time is written onto.
+ *
+ * ## Columns, not MD3's dial
+ *
+ * This is the one place the library knowingly draws something the specification
+ * draws differently, and the reason is in `internal/Calendar.tsx` next to the
+ * grid itself: a dial is a pointer control, MD3 ships a second "time input" mode
+ * precisely because a dial cannot serve a keyboard, and a component with two
+ * implementations of one question has the accessible one hidden behind a toggle.
+ * Columns answer both readers at once, in the library's own shapes.
+ */
+export declare const MPTimePicker: React.ForwardRefExoticComponent<MPTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/time-picker/MPTimePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{MPButton as l}from"../button/MPButton";import{MPIcon as r}from"../icon/MPIcon";import{ClockIcon as t}from"../../constants/icons";import{MPTimeGrid as a}from"../../internal/Calendar";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as u}from"../../internal/Picker";import{useMPLocale as d,useMPMessages as m}from"../../internal/locale";import{CONTROL_ICON as p}from"../../internal/scale";import{formatDate as h,isHour12 as f,isValidDate as g,secondsOfDay as S,timeUnitSpan as b,toISOTime as v,withPlaceholder as C,withTime as x}from"../../internal/date";export const MPTimePicker=n.forwardRef(function({value:k,defaultValue:w,onValueChange:z,open:D,defaultOpen:O,onOpenChange:y,referenceDate:P,minTime:T,maxTime:M,shouldDisableTime:j,hour12:I,showSeconds:V=!1,hourStep:B=1,minuteStep:N=1,secondStep:R=1,locale:F,format:H,placeholder:q,clearable:A=!1,showNowButton:E=!0,closeOnSelect:G=!1,labels:J,name:K,size:L="md",color:Q="primary",readOnly:U=!1,disabled:W=!1,startIcon:X,...Y},Z){const $=d(F),_=m("picker",$,J),ee=I??f($),[oe,ne]=n.useState(w??null),le=void 0!==k?k:oe,[re,te]=n.useState(O??!1),ae=D??re,[ie]=n.useState(()=>P??new Date),se=e=>{e&&(U||W)||(void 0===D&&te(e),y?.(e))},ce=e=>{void 0===k&&ne(e),z?.(e)},ue=n.useCallback((e,o)=>{const[n,l]=b(o,e);return!!(g(T)&&l<S(T))||(!!(g(M)&&n>S(M))||(j?.(e,o)??!1))},[T,M,j]),de=H??{hour:"numeric",minute:"2-digit",hour12:ee,...V?{second:"2-digit"}:{}},me=new Date,pe=x(P??ie,{hours:me.getHours(),minutes:me.getMinutes(),seconds:V?me.getSeconds():0}),he=E||A||!G,fe=C(u($,de),q);return e(c,{...Y,slug:"time-picker",size:L,color:Q,readOnly:U,disabled:W,triggerRef:Z,startIcon:void 0===X?e(r,{icon:t,size:p[L]}):X,display:g(le)?h(le,$,de):q??"",samples:fe,empty:!g(le),clearable:A,onClear:()=>ce(null),open:ae,onOpenChange:se,labels:_,hiddenValues:K?[{name:K,value:g(le)?v(le,V):""}]:void 0,children:o("div",{className:"flex flex-col "+(he?"gap-1.5":""),children:[e(a,{size:L,locale:$,value:g(le)?le:null,referenceDate:P??ie,onChange:e=>{ce(e),G&&se(!1)},hour12:ee,showSeconds:V,hourStep:B,minuteStep:N,secondStep:R,shouldDisableTime:ue,labels:_,autoFocus:!0}),he?o(s,{children:[A?e(l,{variant:"text",size:i[L],color:Q,onClick:()=>{ce(null),se(!1)},children:_.clear}):null,E?e(l,{variant:"text",size:i[L],color:Q,disabled:ue(pe,"second"),onClick:()=>{ce(pe),se(!1)},children:_.now}):null,G?null:e(l,{variant:"filled",size:i[L],color:Q,onClick:()=>se(!1),children:_.done})]}):null]})})});

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

@@ -0,0 +1,2 @@
+export { MPTimePicker } from './MPTimePicker';
+export type { MPTimePickerProps, MPTimeUnit } from './MPTimePicker';

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

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

package/dist/components/timeline/MPTimeline.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor, MPOrientation, MPSize } from '../../types';
+/**
+ * How far along one item is.
+ *
+ * Three states rather than two, because "the one you are on" is not the same
+ * claim as "done", and a sequence that cannot say which step is current is a
+ * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
+ * around it, an empty one — rather than three shades of the same thing.
+ */
+export type MPTimelineStatus = 'complete' | 'current' | 'upcoming';
+/** How the line between two items is drawn. `none` leaves the gap open. */
+export type MPTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export interface MPTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
+    /**
+     * How far the sequence has got: the index of the item being worked on now.
+     * Everything before it is complete, everything after it is still to come.
+     *
+     * An index rather than a value, because a timeline has no selection — nothing
+     * here is chosen, and the only question is how far down the list reality has
+     * reached. Omit it and every item is `upcoming` unless it says otherwise; pass
+     * the item count to mark the whole sequence done.
+     */
+    active?: number;
+    /** @default 'md' */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+    /**
+     * Which way the sequence runs. `vertical` is the default and the one that
+     * takes an arbitrary number of steps with an arbitrary amount to say about
+     * each; `horizontal` is the stepper across the top of a checkout, and it is
+     * only honest while every label is short.
+     * @default 'vertical'
+     */
+    orientation?: MPOrientation;
+    /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface MPTimelineItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'title'> {
+    /** The heading of this step. */
+    title?: React.ReactNode;
+    /**
+     * When it happened — a date, a duration, a name. Set beside the title on a
+     * wide item and under it on a narrow one.
+     */
+    meta?: React.ReactNode;
+    /**
+     * What goes inside the bullet: a number, an icon, an avatar. Omit it and the
+     * bullet is a plain disc, which is what a step with nothing to say about
+     * itself should be.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Overrides what the timeline's `active` would have computed for this item — a
+     * step that failed and stopped the sequence, a step that was skipped.
+     */
+    status?: MPTimelineStatus;
+    /** Overrides the timeline's accent family for this item alone. */
+    color?: MPColor;
+    /**
+     * How the line to the next item is drawn.
+     * @default 'solid'
+     */
+    connector?: MPTimelineConnector;
+    /** The body of the step. */
+    children?: React.ReactNode;
+}
+/**
+ * One step.
+ *
+ * Its index is not a prop and cannot be: an item that had to be told where it
+ * was in the list would be an item every caller could put in the wrong place,
+ * and `active={2}` would stop meaning anything. The timeline numbers its
+ * children as it walks them and hands each one its index through a context.
+ */
+export declare const MPTimelineItem: React.ForwardRefExoticComponent<MPTimelineItemProps & React.RefAttributes<HTMLLIElement>>;
+/**
+ * A sequence of steps, in the order they happen in.
+ *
+ * There is no Base UI primitive under this and there should not be: a timeline
+ * has no selection, no roving focus and no keyboard contract — it is a list, and
+ * reaching for a composite primitive to draw one would hand every consumer's
+ * record of events the semantics of a widget.
+ *
+ * It is an `<ol>` for the reason it exists at all: the order *is* the content. A
+ * screen reader announcing "list of 5 items" over an unordered list would be
+ * describing something else.
+ *
+ * The children are numbered here rather than by a prop on each item, so `active`
+ * has something to count against and inserting a step in the middle does not
+ * mean renumbering the ones after it.
+ */
+export declare const MPTimeline: React.ForwardRefExoticComponent<MPTimelineProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components/timeline/MPTimeline.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useRender as n}from"@base-ui/react/use-render";import{accentSlots as l}from"../../internal/accent";import{hasContent as a,META_TEXT as o,PROSE_TEXT as i,SHEET_TITLE as s}from"../../internal/scale";const c=t.createContext(null),m=t.createContext({index:0,last:!1}),p={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},d={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},u={xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},x={xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},f={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},b={complete:"bg-(--_mp-accent) text-(--_mp-on-accent)",current:"bg-(--_mp-accent) text-(--_mp-on-accent) shadow-[0_0_0_0.25rem_var(--_mp-accent-container)]",upcoming:"border-mp-outline text-mp-on-surface-variant border-2 bg-transparent"},v={complete:"border-(--_mp-accent)",current:"border-mp-outline-variant",upcoming:"border-mp-outline-variant"},h={complete:"text-mp-on-surface",current:"text-(--_mp-accent)",upcoming:"text-mp-on-surface-variant"};export const MPTimelineItem=t.forwardRef(function({title:n,meta:g,bullet:_,status:N,color:y,connector:z="solid",className:j,style:w,children:$,...C},M){const P=t.useContext(c),{index:B,last:k}=t.useContext(m),A=P?.size??"md",R=P?.orientation??"vertical",T=y??P?.color??"primary",I=P?.active??null,q=N??(null===I?"upcoming":B<I?"complete":B===I?"current":"upcoming"),D="horizontal"===R,E="none"!==z&&!k,F=e("span",{"aria-hidden":"true",className:["rounded-mp-full relative z-10 flex shrink-0 items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",b[q],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:_}),G=E?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",D?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",f[z],v[q]].filter(Boolean).join(" ")}):null,H=r("div",{className:"flex min-w-0 flex-col gap-0.5 "+(D?"mt-2":""),children:[a(n)||a(g)?r("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[a(n)?e("span",{className:`${s[A]} ${h[q]}`,children:n}):null,a(g)?e("span",{className:`text-mp-on-surface-variant ${o}`,children:g}):null]}):null,a($)?e("div",{className:`text-mp-on-surface-variant ${i[A]}`,children:$}):null]});return r("li",{ref:M,"aria-current":"current"===q?"step":void 0,"data-status":q,className:["relative",D?`flex min-w-0 flex-1 flex-col ${k?"":x[A]}`:`flex ${d[A]} ${k?"":u[A]}`,j??""].filter(Boolean).join(" "),style:{"--_mp-bullet":p[A],...l(T),...w},...C,children:[G,F,H]})});export const MPTimeline=t.forwardRef(function({active:r,size:l="md",color:a="primary",orientation:o="vertical",render:i,className:s,style:p,children:d,...u},x){const f=t.Children.toArray(d),b=f.length,v=t.useMemo(()=>({size:l,orientation:o,color:a,active:r??null}),[l,o,a,r]),h=t.useMemo(()=>Array.from({length:b},(e,r)=>({index:r,last:r===b-1})),[b]),g=n({render:i??e("ol",{}),ref:x,props:{role:"list","data-mp-size":l,className:["mp-timeline flex","horizontal"===o?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:p,children:f.map((r,t)=>e(m.Provider,{value:h[t],children:r},t)),...u}});return e(c.Provider,{value:v,children:g})});

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

@@ -0,0 +1,2 @@
+export { MPTimeline, MPTimelineItem } from './MPTimeline';
+export type { MPTimelineConnector, MPTimelineItemProps, MPTimelineProps, MPTimelineStatus } from './MPTimeline';

package/dist/components/timeline/index.js

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

package/dist/components/tooltip/MPTooltip.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { Tooltip as BaseUITooltip } from '@base-ui/react/tooltip';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types';
+export interface MPTooltipProps {
+    /**
+     * What the tooltip says.
+     *
+     * A short phrase. A tooltip is not a container — it cannot be reached by a
+     * pointer on a touch screen, it disappears the moment attention moves, and
+     * anything inside it that could be clicked cannot be. Content that needs
+     * either of those wants a popover, not this.
+     */
+    content: React.ReactNode;
+    /**
+     * The element the tooltip hangs off. Exactly one element, which must accept a
+     * ref and spread props — every Material Plus component does.
+     */
+    children: React.ReactElement;
+    /**
+     * Which edge of the trigger it appears on. May flip to the opposite side when
+     * there is no room, which is Base UI's doing and is the right behaviour.
+     * @default 'top'
+     */
+    side?: MPSide;
+    /**
+     * Where it sits along that edge.
+     * @default 'center'
+     */
+    align?: MPAlign;
+    /**
+     * Distance from the trigger, in pixels.
+     * @default 6
+     */
+    sideOffset?: number;
+    /**
+     * How long the pointer has to rest before it opens, in milliseconds.
+     */
+    delay?: number;
+    /** How long it waits before closing once the pointer leaves. */
+    closeDelay?: number;
+    /**
+     * Draws the little wedge pointing at the trigger.
+     * @default true
+     */
+    arrow?: boolean;
+    /** Whether the tooltip is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Stops the tooltip from opening at all, without disabling the trigger. For
+     * the tooltip that only exists while a label is truncated.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @default 'sm'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the plate is painted in.
+     *
+     * **No default**, and this is the third component in the library with none —
+     * for the strongest reason of the three. MD3's plain tooltip is
+     * `inverse-surface` under `inverse-on-surface`: the neutral palette read at
+     * the *other* end of the scheme, so the plate is dark on a light page and
+     * light on a dark one. That is what makes a tooltip legible over content it
+     * was never designed against, which is the only content a tooltip ever
+     * appears over.
+     *
+     * Setting it swaps in an accent fill. Worth doing for a tooltip that is itself
+     * a warning; wrong for the other ninety-nine, because a red tooltip on a
+     * delete button is saying something the tooltip does not know.
+     */
+    color?: MPColor;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Shares one delay across a group of tooltips: once any of them has opened, its
+ * neighbours open instantly, and the wait comes back after a pause.
+ *
+ * Worth wrapping a toolbar in. Without it, moving along a row of icon buttons
+ * means waiting out the full delay at every stop, which is what makes tooltips
+ * feel like they are fighting the pointer.
+ */
+export declare const MPTooltipProvider: React.FC<import("@base-ui/react").TooltipProviderProps>;
+export type MPTooltipProviderProps = React.ComponentProps<typeof BaseUITooltip.Provider>;
+/**
+ * A short label that appears when the pointer rests on something.
+ *
+ * The whole component is a wrapper:
+ * `<MPTooltip content="Copy"><MPButton …/></MPTooltip>`. Base UI's trigger merges
+ * itself onto the child rather than rendering a box of its own, so the tooltip
+ * adds no element to the layout and the child stays whatever it was — a button,
+ * a chip, a truncated cell.
+ *
+ * Base UI owns the parts that are genuinely hard: the delay and the group
+ * timeout, opening on focus but not on a focus that came from a click, closing
+ * on Escape, and keeping the popup off the edges of the window.
+ *
+ * The one thing it deliberately leaves open is the part that makes a tooltip
+ * mean anything to a screen reader — `role="tooltip"` on the plate and an
+ * `aria-describedby` pointing at it from the trigger — because a popup can be
+ * many things and only the caller knows which. Here it is always a tooltip, so
+ * this component wires both, and drops the reference while it is closed rather
+ * than pointing at an element that is not in the document.
+ *
+ * ## No shadow
+ *
+ * MD3 puts a plain tooltip at elevation 0, and this follows it. What separates
+ * the plate from the page is that it is the *inverse* surface — a dark card on a
+ * light page — and a shadow under something already that far from its background
+ * reads as a second, softer edge rather than as height.
+ */
+export declare function MPTooltip({ content, children, size, color, side, align, sideOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, disabled, className, style }: MPTooltipProps): React.JSX.Element;

package/dist/components/tooltip/MPTooltip.js

@@ -0,0 +1 @@
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{accentSlots as i}from"../../internal/accent";export const MPTooltipProvider=a.Provider;const l={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},r={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},s={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},d={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:p,children:n,size:m="sm",color:c,side:x="top",align:y="center",sideOffset:u=6,delay:h,closeDelay:f,arrow:g=!0,open:b,defaultOpen:v,onOpenChange:_,disabled:P=!1,className:O,style:j}){const w=d[m],N=e.useId(),[z,T]=e.useState(v??!1),M=b??z,B={"--_mp-tooltip":c?`var(--_mp-color-${c})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":c?`var(--_mp-color-on-${c})`:"var(--_mp-color-inverse-on-surface)",...c?i(c):null};return o(a.Root,{open:b,defaultOpen:v,onOpenChange:t=>{T(t),_?.(t)},children:[t(a.Trigger,{render:n,delay:h,closeDelay:f,disabled:P,"aria-describedby":M?N:void 0}),t(a.Portal,{children:t(a.Positioner,{className:"mp-portal z-50 outline-none",side:x,align:y,sideOffset:u,children:o(a.Popup,{id:N,role:"tooltip","data-mp-size":m,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",r[m],l[m],s[m],O??""].filter(Boolean).join(" "),style:{...B,...j},children:[g?t(a.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:t("svg",{width:w,height:w/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-tooltip)"})})}):null,p]})})})]})}

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

@@ -0,0 +1,2 @@
+export { MPTooltip, MPTooltipProvider } from './MPTooltip';
+export type { MPTooltipProps, MPTooltipProviderProps } from './MPTooltip';

package/dist/components/tooltip/index.js

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

package/dist/components/typography/MPTypography.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor } from '../../types';
+/**
+ * What a piece of text *is*, which decides both its type scale and the element
+ * it renders as.
+ *
+ * This is deliberately not called `variant`. In this library `variant` means how
+ * much of a surface a component paints — `filled` / `tonal` / `elevated` /
+ * `outlined` / `text` — and a second meaning for the same word is exactly what
+ * the prop conventions forbid.
+ *
+ * The names are the document's rather than the specification's, and that is the
+ * one place this component's vocabulary is not MD3's. The reason is that these
+ * values pick an **element**: `h2` has to be spelled `h2` because what it emits
+ * is an `<h2>`, and a caller who wrote `level="headline-large"` would have no
+ * way to say which heading level they meant. The Material role each one is set
+ * in is in the table on `LEVEL_TEXT` below, and is what a reader actually sees.
+ */
+export type MPTypographyLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'lead' | 'caption' | 'overline';
+/**
+ * How the text is set against its measure.
+ *
+ * `start` and `end` rather than `left` and `right` — the same rule `MPAlign`
+ * follows — plus `justify`, which is the one value that is about the paragraph
+ * rather than about which edge it hangs off, and so has no place in the shared
+ * type.
+ */
+export type MPTypographyAlign = 'start' | 'center' | 'end' | 'justify';
+export type MPTypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+export interface MPTypographyProps extends Omit<React.ComponentPropsWithoutRef<'p'>, 'color' | 'children'> {
+    /**
+     * The type scale, and the element that carries it. `h1`–`h6` render the
+     * matching heading, `lead`/`body` a `<p>`, `caption`/`overline` a `<span>`.
+     * @default 'body'
+     */
+    level?: MPTypographyLevel;
+    /**
+     * Which accent family the text reads. Unlike every control in the library this
+     * has **no default**: prose inherits the surface's own ink unless a role is
+     * asked for, because the common case for a paragraph is to look like the
+     * paragraphs around it.
+     */
+    color?: MPColor;
+    /**
+     * Overrides the weight the level would otherwise pick.
+     *
+     * Worth knowing before reaching for it: **Material headings are not bold.**
+     * Every display, headline and `title-large` role in MD3 is weight 400, and
+     * that is what `level` hands out. A heading set in 600 is the single fastest
+     * way to make a Material page look like it belongs to some other system.
+     */
+    weight?: MPTypographyWeight;
+    align?: MPTypographyAlign;
+    /**
+     * Clamps the text to this many lines with an ellipsis. `1` is a single-line
+     * truncation. Omit it and the text wraps as far as it needs to.
+     */
+    lines?: number;
+    /**
+     * Adds the space below that a run of prose expects. Off by default: a library
+     * component that injects margins is one a layout has to fight.
+     * @default false
+     */
+    gutter?: boolean;
+    /**
+     * Renders a different element without changing the type scale — an `h2`-sized
+     * line that is semantically a `<p>`, or the other way round. Base UI's own
+     * escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Text at one of Material's type roles.
+ *
+ * The type scale is the one thing in a design system that everything else is
+ * measured against, and until now it only existed inside the components that
+ * happened to need it — a text field's label, a button's. This is that ladder on
+ * its own, so a page can set a heading in the same `headline-large` its
+ * components are built out of without wrapping it in a control.
+ *
+ * `level` sets the scale *and* the element, which is the common case. When they
+ * have to differ — a subheading that should not enter the document outline, a
+ * `<p>` that has to look like an `h3` — `render` breaks the tie.
+ *
+ * ## It is not on the size ladder
+ *
+ * There is no `size` prop, and that is the same call `MPIcon` makes. `MPSize` is
+ * a *control* ladder: `md` means 56px tall, and a paragraph has no height to
+ * pick from a scale. `level` is this component's scale, and it is the Material
+ * one rather than five steps of the library's own.
+ */
+export declare const MPTypography: React.ForwardRefExoticComponent<MPTypographyProps & React.RefAttributes<HTMLElement>>;

package/dist/components/typography/MPTypography.js

@@ -0,0 +1 @@
+import*as p from"react";import{useRender as t}from"@base-ui/react/use-render";import{accentSlots as e}from"../../internal/accent";const r={h1:"[&.mp-typography]:text-mp-display-small",h2:"[&.mp-typography]:text-mp-headline-large",h3:"[&.mp-typography]:text-mp-headline-medium",h4:"[&.mp-typography]:text-mp-headline-small",h5:"[&.mp-typography]:text-mp-title-large",h6:"[&.mp-typography]:text-mp-title-medium",lead:"[&.mp-typography]:text-mp-title-large",body:"[&.mp-typography]:text-mp-body-large",caption:"[&.mp-typography]:text-mp-body-small",overline:"[&.mp-typography]:text-mp-label-small [&.mp-typography]:tracking-[0.08em] uppercase"},a={h1:"regular",h2:"regular",h3:"regular",h4:"regular",h5:"regular",h6:"medium",lead:"regular",body:"regular",caption:"regular",overline:"medium"},m={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},o=new Set(["caption","overline"]),y={h1:"[&.mp-typography]:mb-4",h2:"[&.mp-typography]:mb-3.5",h3:"[&.mp-typography]:mb-3",h4:"[&.mp-typography]:mb-2.5",h5:"[&.mp-typography]:mb-2",h6:"[&.mp-typography]:mb-2",lead:"[&.mp-typography]:mb-4",body:"[&.mp-typography]:mb-3",caption:"[&.mp-typography]:mb-2",overline:"[&.mp-typography]:mb-2"},h="[&.mp-typography]:mt-0 [&.mp-typography]:ms-0 [&.mp-typography]:me-0",l={regular:"[&.mp-typography]:font-normal",medium:"[&.mp-typography]:font-medium",semibold:"[&.mp-typography]:font-semibold",bold:"[&.mp-typography]:font-bold"},n={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},g={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const MPTypography=p.forwardRef(function({level:i="body",color:c,weight:d,align:s,lines:u,gutter:b=!1,render:x,className:f,style:v,children:j,...w},N){const k=["mp-typography",r[i],l[d??a[i]],h,b?y[i]:"[&.mp-typography]:mb-0",s?n[s]:"",u?g[u]??"line-clamp-6":"",c?"[&.mp-typography]:text-(--_mp-accent)":o.has(i)?"[&.mp-typography]:text-mp-on-surface-variant":"[&.mp-typography]:text-mp-on-surface",f??""].filter(Boolean).join(" ");return t({render:x??p.createElement(m[i]),ref:N,props:{className:k,style:c?{...e(c),...v}:v,children:j,...w}})});

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

@@ -0,0 +1,2 @@
+export { MPTypography } from './MPTypography';
+export type { MPTypographyAlign, MPTypographyLevel, MPTypographyProps, MPTypographyWeight } from './MPTypography';

package/dist/components/typography/index.js

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

package/dist/constants/icons.d.ts

@@ -14,8 +14,24 @@ export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<Om
 export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Next, in a pager or a carousel. */
 export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** First, in a pager: the stepper that jumps to an end rather than by one. */
+export declare const ChevronsLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** And last. */
+export declare const ChevronsRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Search, for a field's leading adornment. */
 export declare const SearchIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Sorted ascending: the arrow a table's sorted column carries. */
+export declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Sorted descending. */
+export declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** And then: the mark a breadcrumb can put between two steps. */
+export declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** The trail a breadcrumb hides behind, and any other "there is more here". */
+export declare const MoreIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A link that goes somewhere on this site. */
+export declare const LinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A link that takes over the window. */
+export declare const ExternalLinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Copy to clipboard. */
 export declare const CopyIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Severity: something worth knowing. */
@@ -26,6 +42,24 @@ export declare const SuccessIcon: import("react").ForwardRefExoticComponent<Omit
 export declare const WarningIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Severity: it did not work. */
 export declare const ErrorIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** One step up: a number field's increment. */
+export declare const AddIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** One step down: a number field's decrement, and a half-ticked checkbox. */
+export declare const RemoveIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Send a file the other way. A file picker's dropzone. */
+export declare const UploadIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A day on a calendar: what a date picker's trigger wears. */
+export declare const CalendarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A time of day: what a time picker's trigger wears. */
+export declare const ClockIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * A score. Drawn as an outline, and filled by whatever is scoring with it —
+ * lucide draws it `fill="none"`, and `MPRating` overlays a copy in `fill-current`
+ * rather than shipping a second glyph.
+ */
+export declare const StarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Work in progress, spun by whatever is waiting on it. */
+export declare const SpinnerIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /**
  * The same glyphs, keyed by role.
  *
@@ -44,12 +78,27 @@ export declare const ICONS: {
     readonly 'chevron-up': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'chevron-left': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'chevron-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'chevrons-left': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'chevrons-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly search: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'arrow-up': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'arrow-down': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'arrow-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly more: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly link: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly 'external-link': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly copy: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly info: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly success: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly warning: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly error: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly add: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly remove: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly upload: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly calendar: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly clock: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly star: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly spinner: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 };
 /** Every role name `ICONS` answers to. */
 export type MPIconName = keyof typeof ICONS;

package/dist/constants/icons.js

@@ -1 +1 @@
-import{Check as o,ChevronDown as n,ChevronLeft as c,ChevronRight as r,ChevronUp as e,CircleAlert as t,CircleCheck as i,Copy as s,Eye as I,EyeOff as p,Info as h,Search as x,TriangleAlert as C,X as v}from"lucide-react";export const VisibilityIcon=I;export const VisibilityOffIcon=p;export const CloseIcon=v;export const CheckIcon=o;export const ChevronDownIcon=n;export const ChevronUpIcon=e;export const ChevronLeftIcon=c;export const ChevronRightIcon=r;export const SearchIcon=x;export const CopyIcon=s;export const InfoIcon=h;export const SuccessIcon=i;export const WarningIcon=C;export const ErrorIcon=t;export const ICONS={visibility:VisibilityIcon,"visibility-off":VisibilityOffIcon,close:CloseIcon,check:CheckIcon,"chevron-down":ChevronDownIcon,"chevron-up":ChevronUpIcon,"chevron-left":ChevronLeftIcon,"chevron-right":ChevronRightIcon,search:SearchIcon,copy:CopyIcon,info:InfoIcon,success:SuccessIcon,warning:WarningIcon,error:ErrorIcon};
+import{ArrowDown as o,ArrowRight as n,ArrowUp as c,CalendarDays as r,Check as t,ChevronDown as e,ChevronLeft as I,ChevronRight as s,ChevronsLeft as i,ChevronsRight as p,ChevronUp as h,CircleAlert as x,CircleCheck as a,Clock as l,Copy as v,Ellipsis as C,ExternalLink as f,Eye as w,EyeOff as d,Info as g,Link as k,LoaderCircle as y,Minus as S,Plus as A,Search as L,Star as R,TriangleAlert as u,Upload as b,X as m}from"lucide-react";export const VisibilityIcon=w;export const VisibilityOffIcon=d;export const CloseIcon=m;export const CheckIcon=t;export const ChevronDownIcon=e;export const ChevronUpIcon=h;export const ChevronLeftIcon=I;export const ChevronRightIcon=s;export const ChevronsLeftIcon=i;export const ChevronsRightIcon=p;export const SearchIcon=L;export const ArrowUpIcon=c;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=C;export const LinkIcon=k;export const ExternalLinkIcon=f;export const CopyIcon=v;export const InfoIcon=g;export const SuccessIcon=a;export const WarningIcon=u;export const ErrorIcon=x;export const AddIcon=A;export const RemoveIcon=S;export const UploadIcon=b;export const CalendarIcon=r;export const ClockIcon=l;export const StarIcon=R;export const SpinnerIcon=y;export const ICONS={visibility:VisibilityIcon,"visibility-off":VisibilityOffIcon,close:CloseIcon,check:CheckIcon,"chevron-down":ChevronDownIcon,"chevron-up":ChevronUpIcon,"chevron-left":ChevronLeftIcon,"chevron-right":ChevronRightIcon,"chevrons-left":ChevronsLeftIcon,"chevrons-right":ChevronsRightIcon,search:SearchIcon,"arrow-up":ArrowUpIcon,"arrow-down":ArrowDownIcon,"arrow-right":ArrowRightIcon,more:MoreIcon,link:LinkIcon,"external-link":ExternalLinkIcon,copy:CopyIcon,info:InfoIcon,success:SuccessIcon,warning:WarningIcon,error:ErrorIcon,add:AddIcon,remove:RemoveIcon,upload:UploadIcon,calendar:CalendarIcon,clock:ClockIcon,star:StarIcon,spinner:SpinnerIcon};