material-plus-ui 0.0.1 → 1.0.0

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

@@ -16,6 +16,18 @@ export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<
 export declare const ChevronRightIcon: 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 +38,18 @@ 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>>;
+/** 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.
  *
@@ -45,11 +69,23 @@ export declare const ICONS: {
     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 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 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 e,ChevronDown as t,ChevronLeft as I,ChevronRight as i,ChevronUp as s,CircleAlert as p,CircleCheck as x,Clock as l,Copy as h,Ellipsis as a,ExternalLink as C,Eye as v,EyeOff as w,Info as d,Link as f,LoaderCircle as k,Minus as g,Plus as y,Search as A,TriangleAlert as u,Upload as S,X as b}from"lucide-react";export const VisibilityIcon=v;export const VisibilityOffIcon=w;export const CloseIcon=b;export const CheckIcon=e;export const ChevronDownIcon=t;export const ChevronUpIcon=s;export const ChevronLeftIcon=I;export const ChevronRightIcon=i;export const SearchIcon=A;export const ArrowUpIcon=c;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=a;export const LinkIcon=f;export const ExternalLinkIcon=C;export const CopyIcon=h;export const InfoIcon=d;export const SuccessIcon=x;export const WarningIcon=u;export const ErrorIcon=p;export const AddIcon=y;export const RemoveIcon=g;export const UploadIcon=S;export const CalendarIcon=r;export const ClockIcon=l;export const SpinnerIcon=k;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,"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,spinner:SpinnerIcon};

package/dist/index.d.ts

@@ -1,4 +1,59 @@
 export * from './types';
 export * from './constants/icons';
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/aspect-ratio';
+export * from './components/avatar';
+export * from './components/badge';
+export * from './components/blockquote';
+export * from './components/box';
+export * from './components/breadcrumb';
+export * from './components/button';
+export * from './components/button-group';
+export * from './components/card';
+export * from './components/carousel';
+export * from './components/chat-bubble';
+export * from './components/checkbox';
+export * from './components/chip';
+export * from './components/collapsible';
+export * from './components/color-picker';
+export * from './components/combobox';
+export * from './components/date-picker';
+export * from './components/date-range-picker';
+export * from './components/date-time-picker';
+export * from './components/dialog';
+export * from './components/divider';
+export * from './components/drawer';
+export * from './components/empty';
+export * from './components/file-picker';
+export * from './components/highlight';
 export * from './components/icon';
+export * from './components/icon-button';
+export * from './components/list';
+export * from './components/locale';
+export * from './components/menu';
+export * from './components/number-field';
+export * from './components/otp-field';
+export * from './components/overlay';
+export * from './components/panes';
+export * from './components/pill';
+export * from './components/popover';
+export * from './components/progress-box';
+export * from './components/progress-circular';
+export * from './components/progress-linear';
+export * from './components/radio-group';
+export * from './components/segmented-button';
+export * from './components/select';
+export * from './components/shortcut';
+export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/snackbar';
+export * from './components/spoiler';
+export * from './components/switch';
+export * from './components/table';
 export * from './components/text-field';
+export * from './components/text-link';
+export * from './components/time-picker';
+export * from './components/timeline';
+export * from './components/tooltip';
+export * from './components/typography';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export*from"./constants/icons";export*from"./components/icon";export*from"./components/text-field";
+export*from"./types";export*from"./constants/icons";export*from"./components/accordion";export*from"./components/alert";export*from"./components/aspect-ratio";export*from"./components/avatar";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/collapsible";export*from"./components/color-picker";export*from"./components/combobox";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/drawer";export*from"./components/empty";export*from"./components/file-picker";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/list";export*from"./components/locale";export*from"./components/menu";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/panes";export*from"./components/pill";export*from"./components/popover";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/snackbar";export*from"./components/spoiler";export*from"./components/switch";export*from"./components/table";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/tooltip";export*from"./components/typography";

package/dist/internal/Calendar.d.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { type MPTimeUnit } from './date';
+import type { MPMessages } from './i18n';
+import type { MPColor, MPSize, MPWeekday } from '../types';
+/**
+ * The calendar grid and the clock columns, written once for the four pickers.
+ *
+ * They live in `internal/` for the reason `menu.ts` does: a date-time picker is a
+ * date picker and a time picker in one popup, and a range picker is two
+ * calendars, so three components need this and none of them should have to
+ * import another. The two things it reaches *up* for are `MPButton` and
+ * `MPIconButton` — the header's steppers are buttons, they are not a new kind of
+ * control. Nothing here is exported from `src/index.ts`.
+ *
+ * The day cells are deliberately *not* buttons in that sense. A cell has states
+ * a button has no vocabulary for — inside a range, at the end of a range, today,
+ * belonging to the month next door — and four of them have to be told apart at a
+ * glance in a grid of forty-two.
+ */
+/** The strings a picker says that `Intl` has no opinion about. */
+export type MPPickerLabels = MPMessages['picker'];
+export interface MPCalendarProps {
+    size: MPSize;
+    color: MPColor;
+    locale?: string;
+    weekStartsOn: MPWeekday;
+    /** The month on screen. Controlled, so two panels can be kept a month apart. */
+    month: Date;
+    onMonthChange: (month: Date) => void;
+    /** The days drawn filled — one for a single picker, up to two for a range. */
+    selected: readonly (Date | null | undefined)[];
+    /** The two ends the band is drawn between. Both `null` outside range mode. */
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    onSelect: (date: Date) => void;
+    /** The day under the pointer, for a range that is only half chosen. */
+    onPreviewChange?: (date: Date | null) => void;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * Draws the leading and trailing days that belong to the neighbouring months.
+     *
+     * On by default, because clicking the 1st of next month from this month's
+     * panel is a real shortcut. A two-month range picker turns it *off*, and not
+     * as a matter of taste: with both panels showing six full weeks, the 1st of
+     * August appears twice — once as a trailing day of July and once as itself —
+     * and two cells with the same name in one popup is ambiguous to a pointer and
+     * outright broken to a screen reader.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    labels: MPPickerLabels;
+}
+/**
+ * One month, with a way to reach every other one.
+ *
+ * Three views on the same footprint: the days of a month, the twelve months of a
+ * year, twelve years at a time. They are deliberately the same width *and* the
+ * same height — the day view is seven rows counting its header, and the other
+ * two stretch four rows and three rows across that same height — so switching
+ * view never resizes the popup under the pointer that opened it.
+ *
+ * Arrow keys move by one cell, `PageUp`/`PageDown` by a month (a year with
+ * Shift), `Home`/`End` to the ends of the week, and running off an edge steps
+ * the calendar rather than stopping. One roving tab stop, so `Tab` leaves the
+ * grid instead of walking forty-two cells — the pattern the ARIA date-picker
+ * practice describes, and the reason none of the cells is a `disabled` button.
+ */
+export declare function MPCalendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels }: MPCalendarProps): React.JSX.Element;
+export interface MPTimeGridProps {
+    size: MPSize;
+    locale?: string;
+    /** The time on screen, or `null` while nothing has been chosen. */
+    value: Date | null;
+    /** The day the columns write into while `value` is still `null`. */
+    referenceDate: Date;
+    onChange: (value: Date) => void;
+    /** A 12-hour dial with an AM/PM column. */
+    hour12: boolean;
+    showSeconds: boolean;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    shouldDisableTime?: (value: Date, unit: MPTimeUnit) => boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    labels: MPPickerLabels;
+}
+/**
+ * Hours, minutes and — when asked for — seconds, as columns you scroll.
+ *
+ * ## Why this is not MD3's dial
+ *
+ * The specification's time picker is a clock face, and this is not one. That is
+ * a deliberate departure, and the only one of its size in this library, so it is
+ * worth stating the reason plainly: a dial is a *pointer* control. Reading it
+ * takes a glance at an analogue clock, setting it takes a drag, and the
+ * keyboard and screen-reader path is a separate "time input" mode that MD3
+ * ships precisely because the dial cannot serve one. That leaves a component
+ * with two implementations of the same question, of which the accessible one is
+ * the one nobody sees.
+ *
+ * Columns answer both readers with one control. "Half past nine" is two glances,
+ * "any time at all, on the hour" is a column you never touch, and every row is a
+ * real option in a real listbox that arrow keys already reach. The library's own
+ * ladder, corners and state layers do the rest of the work of looking like
+ * Material.
+ *
+ * The chosen row in each column is scrolled into view once, on open. That is the
+ * only imperative work here and it is not optional: a column of sixty minutes
+ * that opens at `00` while the value is `45` has hidden its own answer.
+ */
+export declare function MPTimeGrid({ size, locale, value, referenceDate, onChange, hour12, showSeconds, hourStep, minuteStep, secondStep, shouldDisableTime, autoFocus, labels }: MPTimeGridProps): React.JSX.Element;

package/dist/internal/Calendar.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as n from"react";import{MPButton as r}from"../components/button/MPButton";import{MPIcon as l}from"../components/icon/MPIcon";import{MPIconButton as a}from"../components/icon-button/MPIconButton";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons";import{MPStateLayer as u}from"./StateLayer";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale";import{VISUALLY_HIDDEN as p}from"./visually-hidden";import{addDays as f,addMonths as g,addYears as v,calendarWeeks as w,compareDay as x,dateFormatter as y,daysInMonth as b,isDayOutside as D,isMonthBeforeYear as S,isSameDay as N,isSameMonth as M,isValidDate as P,makeDate as C,meridiemLabels as _,monthLabels as k,startOfDay as z,startOfMonth as F,today as Y,weekdayLabels as A,withTime as j,YEAR_PAGE_SIZE as E,yearPageStart as B}from"./date";const R={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},T={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},$=["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none bg-transparent font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" ");function H({children:t,label:n,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return o("button",{type:"button",role:"gridcell","aria-label":n,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[$,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"border border-(--_mp-accent) text-(--_mp-accent)":c?"text-mp-on-surface-variant":"text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),t]})}function K({size:n,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:v,showNextButton:w,onStep:x,onViewChange:y}){const b=k(f,"long")[p.getMonth()],D=String(p.getFullYear()),N=S(f),M=T[n],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],C=(o,t)=>t?e(a,{size:M,color:u,label:P[-1===o?0:1],icon:e(l,{icon:-1===o?c:i,size:m[M],className:"rtl:rotate-180"}),onClick:()=>x(o)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),_=o=>e(l,{icon:s,size:m[M],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",o?"rotate-180":""].filter(Boolean).join(" ")}),z=e(r,{variant:"text",size:M,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:_("month"===d),onClick:()=>y("month"===d?"day":"month"),children:b},"month"),F=e(r,{variant:"text",size:M,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:_("year"===d),onClick:()=>y("year"===d?"day":"year"),children:D},"year"),Y=B(p.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[C(-1,v),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[n]}`,children:`${Y}–${Y+E-1}`}):"month"===d?F:o(t,N?{children:[z,F]}:{children:[F,z]})}),C(1,w)]})}export function MPCalendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:w,showOutsideDays:x=!0,autoFocus:y=!1,showPreviousButton:b=!0,showNextButton:S=!0,labels:N}){const[_,k]=n.useState("day"),A=n.useMemo(()=>i.filter(P),[i]),[j,B]=n.useState(()=>{const e=A.find(e=>M(e,s));return e?z(e):M(Y(),s)?Y():F(s)}),T=n.useRef(y),$=n.useRef(null);n.useEffect(()=>{B(e=>M(e,s)?e:F(s))},[s]),n.useLayoutEffect(()=>{T.current&&(T.current=!1,$.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const H=n.useCallback(e=>D(e,p,f)||(w?.(e)??!1),[p,f,w]),q=e=>{T.current=!0,k(e)},I=e=>{T.current=!0,c(e)};return o("div",{ref:$,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":R[t]},onPointerLeave:()=>h?.(null),children:[e(K,{size:t,color:r,view:_,month:s,locale:l,labels:N,showPreviousButton:b,showNextButton:S,onStep:e=>{c("day"===_?g(s,e):v(s,"month"===_?e:e*E))},onViewChange:q}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===_?e(L,{size:t,locale:l,weekStartsOn:a,month:s,chosen:A,rangeStart:u,rangeEnd:m,focusedDate:j,showOutsideDays:x,isDisabled:H,onSelect:e=>{B(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{T.current=!0,B(e),M(e,s)||c(F(e))}}):"month"===_?e(O,{size:t,locale:l,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(C(s.getFullYear(),e,1)),q("day")}}):e(U,{size:t,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(C(e,s.getMonth(),1)),q("month")}})})]})}function L({size:t,locale:n,weekStartsOn:r,month:l,chosen:a,rangeStart:s,rangeEnd:c,focusedDate:i,showOutsideDays:u,isDisabled:m,onSelect:p,onPreviewChange:v,onMoveFocus:b}){const D=w(l,r),S=A(n,r,"narrow"),C=A(n,r,"long"),_=y(n,{dateStyle:"full"}),k=(F=c,P(z=s)&&P(F)?x(z,F)<=0?[z,F]:[F,z]:null);var z,F;const j=Y();return o("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,t)=>e("span",{role:"columnheader","aria-label":C[t],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:o},t))}),D.map((o,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const n=!M(o,l);if(n&&!u)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},o.getTime());const s=a.some(e=>N(e,o)),c=null!==k&&x(o,k[0])>=0&&x(o,k[1])<=0,d=null!==k&&c&&N(o,k[0]),w=null!==k&&c&&N(o,k[1]);return e(H,{label:_.format(o),selected:s,inRange:c&&!s,rangeEdge:c?d&&w?"both":d?"start":w?"end":"middle":null,current:N(o,j)&&!s,muted:n,disabled:m(o),focused:N(o,i),className:`size-(--_mp-cell) ${h[t]}`,onClick:()=>p(o),onPointerEnter:()=>v?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-r+7)%7,n={ArrowLeft:()=>f(o,-1),ArrowRight:()=>f(o,1),ArrowUp:()=>f(o,-7),ArrowDown:()=>f(o,7),Home:()=>f(o,-t),End:()=>f(o,6-t),PageUp:()=>g(o,e.shiftKey?-12:-1),PageDown:()=>g(o,e.shiftKey?12:1)}[e.key];n&&(e.preventDefault(),b(n()))})(e,o),children:o.getDate()},o.getTime())})},n))]})}function O({size:o,locale:t,month:n,chosen:r,minDate:l,maxDate:a,onMoveCursor:s,onPick:c}){const i=k(t,"short"),u=k(t,"long"),m=n.getFullYear(),d=new Date,p=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),s(g(F(n),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(s=>{const f=3*t+s,g=C(m,f,1),v=C(m,f,b(m,f));return e(H,{label:`${u[f]} ${m}`,selected:r.some(e=>e.getFullYear()===m&&e.getMonth()===f),current:d.getFullYear()===m&&d.getMonth()===f,disabled:P(l)&&x(v,l)<0||P(a)&&x(g,a)>0,focused:f===n.getMonth(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>c(f),onKeyDown:p,children:i[f]},f)})},t))})}function U({size:o,month:t,chosen:n,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=B(t.getFullYear()),i=(new Date).getFullYear(),u=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==o&&(e.preventDefault(),a(v(F(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(H,{label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===i,disabled:P(r)&&d<r.getFullYear()||P(l)&&d>l.getFullYear(),focused:d===t.getFullYear(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function q(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),n=o.getBoundingClientRect(),r=t.top-n.top-o.clientTop+o.scrollTop,l=r+t.height;r<o.scrollTop?o.scrollTop=r:l>o.scrollTop+o.clientHeight&&(o.scrollTop=l-o.clientHeight)}export function MPTimeGrid({size:t,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:v=!1,labels:w}){const x=l??a,b=n.useRef(null),[D,S]=n.useMemo(()=>_(r),[r]);n.useEffect(()=>{const e=b.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(q),v){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const N=n.useMemo(()=>{const e=Math.ceil((c?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return c?o.map(e=>0===e?12:e):o},[c,m]),M=n.useMemo(()=>Array.from({length:Math.ceil(60/d)},(e,o)=>o*d),[d]),P=n.useMemo(()=>Array.from({length:Math.ceil(60/f)},(e,o)=>o*f),[f]),C=e=>String(e).padStart(2,"0"),k=c?x.getHours()%12||12:x.getHours(),z=(n,r,a,i,m)=>e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),children:a.map(r=>{const a=((e,o)=>j(x,"hour"===e?{hours:c?o%12+(x.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:x.getHours()%12+12*o}))(n,r),d=null!==l&&i(r),p=g?.(a,n)??!1;return o("button",{type:"button",role:"option","aria-selected":d,"aria-disabled":p||void 0,"data-chosen":d?"true":void 0,className:[$,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[t],p?"cursor-default text-mp-on-surface/38":d?"bg-(--_mp-accent) text-(--_mp-on-accent)":"text-mp-on-surface"].join(" "),onClick:()=>{p||s(a)},children:[p?null:e(u,{}),m(r)]},r)})},n);return o("div",{ref:b,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":R[t]},children:[z("hour",w.hour,N,e=>e===k,e=>c?String(e):C(e)),z("minute",w.minute,M,e=>e===x.getMinutes(),C),i?z("second",w.second,P,e=>e===x.getSeconds(),C):null,c?z("meridiem",w.meridiem,[0,1],e=>(x.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":y(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}

package/dist/internal/FieldOutline.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { MPSize } from '../types';
+export interface MPFieldOutlineProps {
+    /** The label, which is what cuts the notch. Without one the outline is closed. */
+    label?: React.ReactNode;
+    required?: boolean;
+}
+/**
+ * The outline itself.
+ *
+ * A `<legend>` inside a `<fieldset>` natively interrupts the top border, which
+ * is exactly the notch an outlined text field has — sized to the text, with no
+ * measuring in JavaScript. The legend is hidden with `invisible` rather than
+ * removed, because a legend with no content reserves no gap.
+ *
+ * Decorative, and hidden from the accessibility tree: the accessible name comes
+ * from the real `<label>`, and announcing a `<fieldset>` as a group around a
+ * single control is noise a screen reader does not need.
+ */
+export declare function MPFieldOutline({ label, required }: MPFieldOutlineProps): React.JSX.Element;
+export interface MPFieldLabelProps extends MPFieldOutlineProps {
+    /**
+     * Which rung the control is drawn at. Only the inline offset reads it: the
+     * label has to land over the gap the container's own padding put the notch in.
+     */
+    size: MPSize;
+    /** The control the label names. */
+    htmlFor?: string;
+}
+/**
+ * The label a reader actually gets.
+ *
+ * A real `<label>`, associated with the control by Base UI, sitting on the
+ * border line where the legend cut it away. It cannot *be* the legend: the
+ * outline is `pointer-events-none` so that clicks land on the control
+ * underneath, and a label inside it would stop being clickable.
+ */
+export declare function MPFieldLabel({ size, label, required, htmlFor }: MPFieldLabelProps): React.JSX.Element;

package/dist/internal/FieldOutline.js

@@ -0,0 +1 @@
+import{jsx as r,Fragment as e,jsxs as o}from"react/jsx-runtime";import{Field as t}from"@base-ui/react/field";function a(t,a){return o(e,{children:[t,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:e,required:o=!1}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:e?r("legend",{className:"text-mp-body-small invisible float-none block h-[11px] w-auto p-0 px-1 leading-none",children:a(e,o)}):null})}export function MPFieldLabel({size:e,label:o,required:n=!1,htmlFor:i}){return r(t.Label,{htmlFor:i,className:["text-mp-body-small text-mp-on-surface-variant","transition-[color] duration-(--mp-sys-motion-duration-short4)","pointer-events-auto absolute top-0 -translate-y-1/2 px-1 leading-none","xs"===e?"left-1":"sm"===e?"left-2":"xl"===e?"left-4":"left-3","group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:a(o,n)})}