material-plus-ui 0.0.1 → 1.0.0

package/dist/internal/i18n.d.ts

@@ -0,0 +1,131 @@
+/**
+ * The words the library says on its own behalf.
+ *
+ * Almost nothing in Material Plus writes text a reader sees — a button says
+ * whatever it was handed, a dialog's title is the caller's. The exceptions are
+ * the strings a component has to invent because there is nowhere else for them
+ * to come from: the name on a calendar's back arrow, the word on the button that
+ * empties a picker, the label a screen reader hears for a column of minutes.
+ *
+ * Those are collected here rather than defaulted inside each component, because
+ * they are a *set*. A product in Korean does not want four pickers each
+ * defaulting to English and each needing eighteen override props; and the next
+ * component that needs a word should get it from the same place rather than
+ * starting a second table beside this one.
+ *
+ * What is *not* in here is anything `Intl` already knows. Month names, weekday
+ * names, AM/PM and number formats come from the platform, which speaks more
+ * languages than this file ever will — see `internal/date.ts`. This is only for
+ * the words the platform has no opinion about.
+ *
+ * Every component that reads this takes a `locale` and an override prop for the
+ * strings themselves, so an unsupported language is never a dead end: `locale`
+ * gets you a translation for free, `MPLocaleProvider` gets you one for the whole
+ * application at once, and the prop gets you one for anything else.
+ *
+ * Nothing here is exported from `src/index.ts` — the public surface is
+ * `MPLocaleProvider` and the per-component `labels` props.
+ */
+/**
+ * One namespace per component, rather than one flat list of keys.
+ *
+ * A namespace is what makes a partial translation possible: a locale supplies
+ * whatever it has and the rest falls back to English one namespace at a time, so
+ * adding a namespace here does not silently blank the strings in every language
+ * that has not caught up with it yet.
+ */
+export interface MPMessages {
+    /**
+     * The four pickers.
+     *
+     * One namespace for all of them rather than one each, because they are one
+     * vocabulary: a caller who has translated "Previous month" for the date picker
+     * has translated it for the range picker in the same breath, and the clock's
+     * column names are shared by two components outright.
+     */
+    picker: {
+        /** The calendar's steppers, in day view. */
+        previousMonth: string;
+        nextMonth: string;
+        /** The same steppers in month view, where they move by a year. */
+        previousYear: string;
+        nextYear: string;
+        /** And in year view, where they move by a page of twelve. */
+        previousYears: string;
+        nextYears: string;
+        /** The two header buttons that open the month grid and the year grid. */
+        chooseMonth: string;
+        chooseYear: string;
+        /** The footer's actions. */
+        today: string;
+        now: string;
+        clear: string;
+        done: string;
+        /** The clock's columns, which are otherwise unlabelled lists of numbers. */
+        hour: string;
+        minute: string;
+        second: string;
+        meridiem: string;
+        /** Which end of a range the calendar is currently asking for. */
+        start: string;
+        end: string;
+    };
+    /** MPAlert. */
+    alert: {
+        /** The × in the corner, which has no text of its own. */
+        dismiss: string;
+    };
+    /**
+     * MPChatBubble.
+     *
+     * Every string here is read out and never drawn: a delivery state is a mark
+     * on the bubble, and the word behind it is for the readers the mark says
+     * nothing to. That is exactly why they belong in this table rather than in a
+     * prop — a thread is a column of forty of these, and a caller who had to hand
+     * over five words per message would hand over the English ones.
+     */
+    chat: {
+        /** On its way. */
+        sending: string;
+        /** It left. */
+        sent: string;
+        /** It arrived on their device. */
+        delivered: string;
+        /** They opened it. */
+        read: string;
+        /** It did not go — the one step that is not on the ladder. */
+        failed: string;
+        /** The three dots, which are a picture of somebody writing. */
+        typing: string;
+    };
+    /**
+     * MPSpoiler.
+     *
+     * The one namespace whose strings are *drawn* rather than only announced —
+     * they are the words on the cover, and a cover written in a language the page
+     * is not in is a cover nobody reads.
+     */
+    spoiler: {
+        /** The button that uncovers the content. */
+        reveal: string;
+        /** The button that covers it again, when the spoiler is reversible. */
+        hide: string;
+        /** The line above the button, saying why the content is covered. */
+        notice: string;
+    };
+}
+/**
+ * The strings for a locale, merged over English.
+ *
+ * `undefined` is English rather than the runtime's own locale, and that is
+ * deliberate: `navigator.language` differs between the server that renders the
+ * markup and the browser that hydrates it, and text that changes between those
+ * two is a hydration mismatch in the one part of the page a reader is looking
+ * at. A component that should follow the reader is *told* which language to
+ * follow — by its own `locale` prop, or by an `MPLocaleProvider` above it.
+ *
+ * Note that this is only about the words in the table. The dates themselves are
+ * formatted by `Intl` against the same tag, and `Intl` speaks every language the
+ * platform does whether or not there is an entry here.
+ */
+export declare function resolveMessages(locale?: string): MPMessages;

package/dist/internal/i18n.js

@@ -0,0 +1 @@
+const e={picker:{previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"},alert:{dismiss:"Dismiss"},chat:{sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",typing:"Typing"},spoiler:{reveal:"Reveal",hide:"Hide",notice:"Hidden so it is not read by accident"}},n={ko:{picker:{previousMonth:"이전 달",nextMonth:"다음 달",previousYear:"이전 해",nextYear:"다음 해",previousYears:"이전 연도 목록",nextYears:"다음 연도 목록",chooseMonth:"월 선택",chooseYear:"연도 선택",today:"오늘",now:"지금",clear:"지우기",done:"완료",hour:"시",minute:"분",second:"초",meridiem:"오전/오후",start:"시작",end:"종료"},alert:{dismiss:"닫기"},chat:{sending:"보내는 중",sent:"보냄",delivered:"전달됨",read:"읽음",failed:"전송 실패",typing:"입력 중"},spoiler:{reveal:"보기",hide:"가리기",notice:"실수로 읽지 않도록 가려 두었습니다"}},ja:{picker:{previousMonth:"前の月",nextMonth:"次の月",previousYear:"前の年",nextYear:"次の年",previousYears:"前の年の一覧",nextYears:"次の年の一覧",chooseMonth:"月を選択",chooseYear:"年を選択",today:"今日",now:"現在",clear:"クリア",done:"完了",hour:"時",minute:"分",second:"秒",meridiem:"午前/午後",start:"開始",end:"終了"},alert:{dismiss:"閉じる"},chat:{sending:"送信中",sent:"送信済み",delivered:"配信済み",read:"既読",failed:"送信できませんでした",typing:"入力中"},spoiler:{reveal:"表示する",hide:"隠す",notice:"うっかり読まないように隠してあります"}},"zh-hans":{picker:{previousMonth:"上个月",nextMonth:"下个月",previousYear:"上一年",nextYear:"下一年",previousYears:"上一页年份",nextYears:"下一页年份",chooseMonth:"选择月份",chooseYear:"选择年份",today:"今天",now:"此刻",clear:"清除",done:"完成",hour:"小时",minute:"分钟",second:"秒",meridiem:"上午/下午",start:"开始",end:"结束"},alert:{dismiss:"关闭"},chat:{sending:"发送中",sent:"已发送",delivered:"已送达",read:"已读",failed:"未发送",typing:"正在输入"},spoiler:{reveal:"显示",hide:"隐藏",notice:"已隐藏，以免不小心读到"}},"zh-hant":{picker:{previousMonth:"上個月",nextMonth:"下個月",previousYear:"上一年",nextYear:"下一年",previousYears:"上一頁年份",nextYears:"下一頁年份",chooseMonth:"選擇月份",chooseYear:"選擇年份",today:"今天",now:"此刻",clear:"清除",done:"完成",hour:"小時",minute:"分鐘",second:"秒",meridiem:"上午/下午",start:"開始",end:"結束"},alert:{dismiss:"關閉"},chat:{sending:"傳送中",sent:"已傳送",delivered:"已送達",read:"已讀",failed:"未傳送",typing:"正在輸入"},spoiler:{reveal:"顯示",hide:"隱藏",notice:"已隱藏，以免不小心讀到"}},es:{picker:{previousMonth:"Mes anterior",nextMonth:"Mes siguiente",previousYear:"Año anterior",nextYear:"Año siguiente",previousYears:"Años anteriores",nextYears:"Años siguientes",chooseMonth:"Elegir un mes",chooseYear:"Elegir un año",today:"Hoy",now:"Ahora",clear:"Borrar",done:"Listo",hour:"Hora",minute:"Minuto",second:"Segundo",meridiem:"a. m./p. m.",start:"Inicio",end:"Fin"},alert:{dismiss:"Cerrar"},chat:{sending:"Enviando",sent:"Enviado",delivered:"Entregado",read:"Leído",failed:"No enviado",typing:"Escribiendo"},spoiler:{reveal:"Mostrar",hide:"Ocultar",notice:"Oculto para que no se lea por accidente"}},pt:{picker:{previousMonth:"Mês anterior",nextMonth:"Próximo mês",previousYear:"Ano anterior",nextYear:"Próximo ano",previousYears:"Anos anteriores",nextYears:"Próximos anos",chooseMonth:"Escolher um mês",chooseYear:"Escolher um ano",today:"Hoje",now:"Agora",clear:"Limpar",done:"Concluído",hour:"Hora",minute:"Minuto",second:"Segundo",meridiem:"AM/PM",start:"Início",end:"Fim"},alert:{dismiss:"Fechar"},chat:{sending:"Enviando",sent:"Enviado",delivered:"Entregue",read:"Lido",failed:"Não enviado",typing:"Digitando"},spoiler:{reveal:"Mostrar",hide:"Ocultar",notice:"Oculto para não ser lido por acidente"}},fr:{picker:{previousMonth:"Mois précédent",nextMonth:"Mois suivant",previousYear:"Année précédente",nextYear:"Année suivante",previousYears:"Années précédentes",nextYears:"Années suivantes",chooseMonth:"Choisir un mois",chooseYear:"Choisir une année",today:"Aujourd'hui",now:"Maintenant",clear:"Effacer",done:"Terminé",hour:"Heure",minute:"Minute",second:"Seconde",meridiem:"AM/PM",start:"Début",end:"Fin"},alert:{dismiss:"Fermer"},chat:{sending:"Envoi en cours",sent:"Envoyé",delivered:"Distribué",read:"Lu",failed:"Non envoyé",typing:"En train d'écrire"},spoiler:{reveal:"Afficher",hide:"Masquer",notice:"Masqué pour ne pas être lu par accident"}},de:{picker:{previousMonth:"Voriger Monat",nextMonth:"Nächster Monat",previousYear:"Voriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat auswählen",chooseYear:"Jahr auswählen",today:"Heute",now:"Jetzt",clear:"Löschen",done:"Fertig",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende"},alert:{dismiss:"Schließen"},chat:{sending:"Wird gesendet",sent:"Gesendet",delivered:"Zugestellt",read:"Gelesen",failed:"Nicht gesendet",typing:"Schreibt"},spoiler:{reveal:"Anzeigen",hide:"Verbergen",notice:"Verborgen, damit es nicht versehentlich gelesen wird"}},it:{picker:{previousMonth:"Mese precedente",nextMonth:"Mese successivo",previousYear:"Anno precedente",nextYear:"Anno successivo",previousYears:"Anni precedenti",nextYears:"Anni successivi",chooseMonth:"Scegli un mese",chooseYear:"Scegli un anno",today:"Oggi",now:"Adesso",clear:"Cancella",done:"Fatto",hour:"Ora",minute:"Minuto",second:"Secondo",meridiem:"AM/PM",start:"Inizio",end:"Fine"},alert:{dismiss:"Chiudi"},chat:{sending:"Invio in corso",sent:"Inviato",delivered:"Consegnato",read:"Letto",failed:"Non inviato",typing:"Sta scrivendo"},spoiler:{reveal:"Mostra",hide:"Nascondi",notice:"Nascosto per non essere letto per sbaglio"}},nl:{picker:{previousMonth:"Vorige maand",nextMonth:"Volgende maand",previousYear:"Vorig jaar",nextYear:"Volgend jaar",previousYears:"Vorige jaren",nextYears:"Volgende jaren",chooseMonth:"Kies een maand",chooseYear:"Kies een jaar",today:"Vandaag",now:"Nu",clear:"Wissen",done:"Klaar",hour:"Uur",minute:"Minuut",second:"Seconde",meridiem:"AM/PM",start:"Begin",end:"Einde"},alert:{dismiss:"Sluiten"},chat:{sending:"Verzenden",sent:"Verzonden",delivered:"Bezorgd",read:"Gelezen",failed:"Niet verzonden",typing:"Aan het typen"},spoiler:{reveal:"Tonen",hide:"Verbergen",notice:"Verborgen zodat het niet per ongeluk wordt gelezen"}},pl:{picker:{previousMonth:"Poprzedni miesiąc",nextMonth:"Następny miesiąc",previousYear:"Poprzedni rok",nextYear:"Następny rok",previousYears:"Poprzednie lata",nextYears:"Następne lata",chooseMonth:"Wybierz miesiąc",chooseYear:"Wybierz rok",today:"Dzisiaj",now:"Teraz",clear:"Wyczyść",done:"Gotowe",hour:"Godzina",minute:"Minuta",second:"Sekunda",meridiem:"AM/PM",start:"Początek",end:"Koniec"},alert:{dismiss:"Zamknij"},chat:{sending:"Wysyłanie",sent:"Wysłano",delivered:"Dostarczono",read:"Przeczytano",failed:"Nie wysłano",typing:"Pisze"},spoiler:{reveal:"Pokaż",hide:"Ukryj",notice:"Ukryte, aby nie przeczytać przez przypadek"}},ru:{picker:{previousMonth:"Предыдущий месяц",nextMonth:"Следующий месяц",previousYear:"Предыдущий год",nextYear:"Следующий год",previousYears:"Предыдущие годы",nextYears:"Следующие годы",chooseMonth:"Выбрать месяц",chooseYear:"Выбрать год",today:"Сегодня",now:"Сейчас",clear:"Очистить",done:"Готово",hour:"Часы",minute:"Минуты",second:"Секунды",meridiem:"ДП/ПП",start:"Начало",end:"Конец"},alert:{dismiss:"Закрыть"},chat:{sending:"Отправка",sent:"Отправлено",delivered:"Доставлено",read:"Прочитано",failed:"Не отправлено",typing:"Печатает"},spoiler:{reveal:"Показать",hide:"Скрыть",notice:"Скрыто, чтобы не прочитать случайно"}},tr:{picker:{previousMonth:"Önceki ay",nextMonth:"Sonraki ay",previousYear:"Önceki yıl",nextYear:"Sonraki yıl",previousYears:"Önceki yıllar",nextYears:"Sonraki yıllar",chooseMonth:"Ay seçin",chooseYear:"Yıl seçin",today:"Bugün",now:"Şimdi",clear:"Temizle",done:"Tamam",hour:"Saat",minute:"Dakika",second:"Saniye",meridiem:"ÖÖ/ÖS",start:"Başlangıç",end:"Bitiş"},alert:{dismiss:"Kapat"},chat:{sending:"Gönderiliyor",sent:"Gönderildi",delivered:"İletildi",read:"Okundu",failed:"Gönderilemedi",typing:"Yazıyor"},spoiler:{reveal:"Göster",hide:"Gizle",notice:"Yanlışlıkla okunmasın diye gizlendi"}},ar:{picker:{previousMonth:"الشهر السابق",nextMonth:"الشهر التالي",previousYear:"السنة السابقة",nextYear:"السنة التالية",previousYears:"السنوات السابقة",nextYears:"السنوات التالية",chooseMonth:"اختيار شهر",chooseYear:"اختيار سنة",today:"اليوم",now:"الآن",clear:"مسح",done:"تم",hour:"الساعة",minute:"الدقيقة",second:"الثانية",meridiem:"ص/م",start:"البداية",end:"النهاية"},alert:{dismiss:"إغلاق"},chat:{sending:"جارٍ الإرسال",sent:"تم الإرسال",delivered:"تم التسليم",read:"تمت القراءة",failed:"لم يتم الإرسال",typing:"يكتب الآن"},spoiler:{reveal:"إظهار",hide:"إخفاء",notice:"مخفي حتى لا يُقرأ بالخطأ"}},hi:{picker:{previousMonth:"पिछला महीना",nextMonth:"अगला महीना",previousYear:"पिछला वर्ष",nextYear:"अगला वर्ष",previousYears:"पिछले वर्ष",nextYears:"अगले वर्ष",chooseMonth:"महीना चुनें",chooseYear:"वर्ष चुनें",today:"आज",now:"अभी",clear:"हटाएँ",done:"हो गया",hour:"घंटा",minute:"मिनट",second:"सेकंड",meridiem:"AM/PM",start:"प्रारंभ",end:"समाप्ति"},alert:{dismiss:"बंद करें"},chat:{sending:"भेजा जा रहा है",sent:"भेजा गया",delivered:"पहुँच गया",read:"पढ़ लिया गया",failed:"नहीं भेजा गया",typing:"टाइप कर रहे हैं"},spoiler:{reveal:"दिखाएँ",hide:"छिपाएँ",notice:"गलती से न पढ़ लिया जाए इसलिए छिपाया गया है"}},id:{picker:{previousMonth:"Bulan sebelumnya",nextMonth:"Bulan berikutnya",previousYear:"Tahun sebelumnya",nextYear:"Tahun berikutnya",previousYears:"Tahun-tahun sebelumnya",nextYears:"Tahun-tahun berikutnya",chooseMonth:"Pilih bulan",chooseYear:"Pilih tahun",today:"Hari ini",now:"Sekarang",clear:"Hapus",done:"Selesai",hour:"Jam",minute:"Menit",second:"Detik",meridiem:"AM/PM",start:"Mulai",end:"Akhir"},alert:{dismiss:"Tutup"},chat:{sending:"Mengirim",sent:"Terkirim",delivered:"Diterima",read:"Dibaca",failed:"Gagal terkirim",typing:"Sedang mengetik"},spoiler:{reveal:"Tampilkan",hide:"Sembunyikan",notice:"Disembunyikan agar tidak terbaca tanpa sengaja"}},vi:{picker:{previousMonth:"Tháng trước",nextMonth:"Tháng sau",previousYear:"Năm trước",nextYear:"Năm sau",previousYears:"Các năm trước",nextYears:"Các năm sau",chooseMonth:"Chọn tháng",chooseYear:"Chọn năm",today:"Hôm nay",now:"Bây giờ",clear:"Xóa",done:"Xong",hour:"Giờ",minute:"Phút",second:"Giây",meridiem:"SA/CH",start:"Bắt đầu",end:"Kết thúc"},alert:{dismiss:"Đóng"},chat:{sending:"Đang gửi",sent:"Đã gửi",delivered:"Đã nhận",read:"Đã đọc",failed:"Chưa gửi được",typing:"Đang nhập"},spoiler:{reveal:"Hiện",hide:"Ẩn",notice:"Đã ẩn để không vô tình đọc phải"}},th:{picker:{previousMonth:"เดือนก่อนหน้า",nextMonth:"เดือนถัดไป",previousYear:"ปีก่อนหน้า",nextYear:"ปีถัดไป",previousYears:"ชุดปีก่อนหน้า",nextYears:"ชุดปีถัดไป",chooseMonth:"เลือกเดือน",chooseYear:"เลือกปี",today:"วันนี้",now:"ตอนนี้",clear:"ล้าง",done:"เสร็จสิ้น",hour:"ชั่วโมง",minute:"นาที",second:"วินาที",meridiem:"AM/PM",start:"เริ่ม",end:"สิ้นสุด"},alert:{dismiss:"ปิด"},chat:{sending:"กำลังส่ง",sent:"ส่งแล้ว",delivered:"ส่งถึงแล้ว",read:"อ่านแล้ว",failed:"ส่งไม่สำเร็จ",typing:"กำลังพิมพ์"},spoiler:{reveal:"แสดง",hide:"ซ่อน",notice:"ซ่อนไว้เพื่อไม่ให้อ่านโดยบังเอิญ"}}},r={zh:"zh-hans","zh-cn":"zh-hans","zh-my":"zh-hans","zh-sg":"zh-hans","zh-hk":"zh-hant","zh-mo":"zh-hant","zh-tw":"zh-hant"};const i=new Map([["",e]]);export function resolveMessages(o){const a=o?.trim()??"",t=i.get(a);if(t)return t;const s=function(e){const n=e.toLowerCase().split(/[-_]/).filter(Boolean),r=n[0];if(!r)return[];const i=n.slice(1),o=i.find(e=>/^[a-z]{4}$/.test(e)),a=i.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[o?`${r}-${o}`:"",a?`${r}-${a}`:"",r].filter(Boolean)}(a).map(e=>n[e]??n[r[e]??""]).find(Boolean),d=s?{picker:{...e.picker,...s.picker},alert:{...e.alert,...s.alert},chat:{...e.chat,...s.chat},spoiler:{...e.spoiler,...s.spoiler}}:e;return i.set(a,d),d}

package/dist/internal/locale.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Which language the components speak, and where that answer comes from.
+ *
+ * Two sources, in this order, and the order is the whole design:
+ *
+ * 1. **The component's own `locale` prop.** One control in a different language
+ *    from the page around it is a real thing — an admin editing a Japanese
+ *    listing from a Korean dashboard — and a component library that cannot draw
+ *    it has decided the page's language on the caller's behalf.
+ * 2. **`MPLocaleProvider`, above it in the tree.** Which is what an application
+ *    actually has: one language, set once, at the root.
+ *
+ * There is deliberately no third source. `navigator.language` is *not* consulted
+ * as a fallback, and that is not an oversight — see the note on
+ * `resolveMessages` in `internal/i18n.ts`. The runtime's own locale differs
+ * between the server that renders the markup and the browser that hydrates it,
+ * so reading it would put a hydration mismatch in the one part of the page a
+ * reader is looking at. `undefined` therefore means "the platform's default",
+ * which `Intl` resolves consistently in both places.
+ */
+import * as React from 'react';
+import { type MPMessages } from './i18n';
+/**
+ * `undefined` rather than `'en'`, and the distinction matters.
+ *
+ * With no provider the pickers hand `undefined` to `Intl`, which formats dates
+ * in whatever the platform is set to — so a page that never mentions a locale
+ * still writes dates the way its reader expects. It is only the words in the
+ * table that fall back to English, because those are the ones the platform has
+ * no opinion about.
+ */
+export declare const MPLocaleContext: React.Context<string | undefined>;
+/** The locale in force here: the prop if there is one, otherwise the provider's. */
+export declare function useMPLocale(locale?: string): string | undefined;
+/**
+ * A namespace's strings with a caller's overrides on top.
+ *
+ * The overrides win over the translation, which wins over English. That order is
+ * what makes an unsupported language a partial answer rather than a dead end: a
+ * caller supplies the handful of words they care about and everything else is
+ * still translated, or still English, rather than blank.
+ */
+export declare function useMPMessages<Namespace extends keyof MPMessages>(namespace: Namespace, locale: string | undefined, overrides?: Partial<MPMessages[Namespace]>): MPMessages[Namespace];

package/dist/internal/locale.js

@@ -0,0 +1 @@
+import*as e from"react";import{resolveMessages as t}from"./i18n";export const MPLocaleContext=e.createContext(void 0);export function useMPLocale(t){const o=e.useContext(MPLocaleContext);return t??o}export function useMPMessages(o,n,r){return e.useMemo(()=>{const e=t(n)[o];return r?{...e,...r}:e},[o,n,r])}

package/dist/internal/menu.d.ts

@@ -0,0 +1,23 @@
+/**
+ * What a menu row inherits from the menu around it.
+ *
+ * The same arrangement `MPButtonGroup` uses, and for the same reason: `size` and
+ * `color` are properties of the *menu*, not of any one row in it, and passing
+ * them per row would be two chances per row to get one wrong — with a silent
+ * failure, a menu whose fourth item is a size bigger than the three above it.
+ *
+ * It lives in `internal/` rather than in `MPMenu.tsx` because a submenu is a menu
+ * inside a menu and a context menu is the same rows hung off a right-click, so
+ * three components read this and none of them should have to import the others.
+ *
+ * Unlike the button group's context this one is never `null`: a row rendered
+ * outside a menu is a bug Base UI will report first, and defaulting here keeps
+ * every row from having to answer "what if there is no menu".
+ */
+import * as React from 'react';
+import type { MPColor, MPSize } from '../types';
+export interface MPMenuContextValue {
+    size: MPSize;
+    color: MPColor;
+}
+export declare const MPMenuContext: React.Context<MPMenuContextValue>;

package/dist/internal/menu.js

@@ -0,0 +1 @@
+import*as t from"react";export const MPMenuContext=t.createContext({size:"md",color:"primary"});

package/dist/internal/progress.d.ts

@@ -0,0 +1,126 @@
+/**
+ * What the three progress indicators share.
+ *
+ * `MPProgressLinear`, `MPProgressCircular` and `MPProgressBox` are three shapes
+ * answering one question — how far along is this, and is it moving at all — so
+ * everything that is *not* the shape lives here: the props, the ladders and the
+ * arithmetic that turns `value`/`min`/`max` into a fraction.
+ *
+ * The shapes themselves are all that is left in each component, which is the
+ * point: they are the only thing that genuinely differs. A `value` of `null` has
+ * to mean the same thing on a bar, a ring and a row of segments, or the trio is
+ * three components that happen to share a prefix.
+ *
+ * Every class string here is a literal, for the reason `scale.ts` gives:
+ * Tailwind finds classes by scanning source text, so an interpolated `h-${n}`
+ * generates no rule at all.
+ */
+import type * as React from 'react';
+import type { MPSize } from '../types';
+/**
+ * The props all three indicators take.
+ *
+ * Declared once and extended rather than copied three times. `color` and `size`
+ * are deliberately *not* here — they are on `MPStyleProps` for every other
+ * component and each indicator documents what its own `size` means, which is a
+ * different quantity on a bar (thickness), a ring (diameter) and a row of
+ * segments (one segment).
+ */
+export interface MPProgressProps {
+    /**
+     * How far along, between `min` and `max`.
+     *
+     * `null` — the default — is the indeterminate case: something is happening and
+     * nobody knows how much of it is left. That is the default on purpose. An
+     * indicator that has not been told a value should say so rather than draw an
+     * empty track, which is a claim that no progress has been made.
+     * @default null
+     */
+    value?: number | null;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is loading. Read out with the value by a screen reader. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the shape. A percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How the value is written when it is shown — `Intl.NumberFormat` options, so
+     * bytes and currencies work as well as plain numbers. Without it the value is
+     * a percentage of `min`…`max`, which is the only formatting that holds for a
+     * range nobody described.
+     */
+    format?: Intl.NumberFormatOptions;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * How thick the linear track is.
+ *
+ * Its own ladder rather than a step off `CONTROL_HEIGHT`: a bar is not a control
+ * with a label inside it. `md` is MD3's own 4dp, and the ladder is centred on it
+ * the same way every other one is centred on its spec value.
+ */
+export declare const BAR_THICKNESS: Record<MPSize, string>;
+/**
+ * The diameter of the ring, in CSS pixels.
+ *
+ * Numbers rather than classes because the same value has to reach the SVG's
+ * `viewBox` arithmetic, and a ring is one of the few things in this library that
+ * a Tailwind class cannot describe on its own.
+ *
+ * `md` is MD3's own 48dp, and every rung sits inside the control height at the
+ * same step — a 48px ring inside a 56px field — so a spinner dropped into a
+ * button, a field or a table row never makes the row taller than it was.
+ */
+export declare const RING_DIAMETER: Record<MPSize, number>;
+/** The ring's stroke, MD3's 4dp at `md`, thickening so the hole stays in proportion. */
+export declare const RING_STROKE: Record<MPSize, number>;
+/** One segment of an `MPProgressBox`. An indicator, so its own ladder again. */
+export declare const SEGMENT_SIZE: Record<MPSize, string>;
+/**
+ * The corner cut off a segment.
+ *
+ * `corner-extra-small` from `md` up, which is the spec's smallest corner and the
+ * right one for a tile this size. The two rungs below it cap it, because 4px on
+ * an 8px box is not a cut corner — it is a circle.
+ *
+ * A cap rather than the literal 3px it used to be, so the tiles still follow the
+ * token in the one direction the cap does not block: under a squarer theme these
+ * go square with everything else, and under a rounder one they hold at 3px,
+ * which is the whole point of capping them.
+ */
+export declare const SEGMENT_RADIUS: Record<MPSize, string>;
+/** Between the segments. Tight — they are one object, not a row of squares. */
+export declare const SEGMENT_GAP: Record<MPSize, string>;
+/**
+ * `value` as a fraction of the range, or `null` when there is nothing to say.
+ *
+ * The clamp is not defensive programming for its own sake — `value` usually
+ * arrives from a division somewhere, and a bar that renders 140% wide because
+ * one request finished twice is a worse bug than a bar that sits full.
+ */
+export declare function progressFraction(value: number | null | undefined, min: number, max: number): number | null;
+/**
+ * What the value reads as, both on screen and to a screen reader.
+ *
+ * Base UI's own default is `${value}%`, which is right only when the range
+ * happens to be 0–100 — "3%" for step 3 of 4 is worse than saying nothing. So
+ * the percentage is computed from the fraction, and a caller who passed `format`
+ * gets Base UI's formatted string instead, because at that point they have said
+ * what the number means.
+ */
+export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean): string | null;
+/**
+ * The same string, shaped for Base UI's `getAriaValueText`.
+ *
+ * `undefined` when there is no value, which hands the indeterminate case back to
+ * Base UI — it already announces indeterminate progress, and re-inventing that
+ * here would be one more English string the library has to own.
+ */
+export declare function progressAriaText(fraction: number | null, hasFormat: boolean): ((formatted: string | null) => string) | undefined;

package/dist/internal/progress.js

@@ -0,0 +1 @@
+export const BAR_THICKNESS={xs:"h-0.5",sm:"h-[3px]",md:"h-1",lg:"h-1.5",xl:"h-2"};export const RING_DIAMETER={xs:24,sm:32,md:48,lg:56,xl:64};export const RING_STROKE={xs:2.5,sm:3,md:4,lg:4.5,xl:5};export const SEGMENT_SIZE={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const SEGMENT_RADIUS={xs:"rounded-[min(var(--mp-sys-shape-corner-extra-small),3px)]",sm:"rounded-[min(var(--mp-sys-shape-corner-extra-small),3px)]",md:"rounded-mp-xs",lg:"rounded-mp-xs",xl:"rounded-mp-sm"};export const SEGMENT_GAP={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}export function progressText(s,r,e){return null===s?null:e?r:`${Math.round(100*s)}%`}export function progressAriaText(s,r){if(null!==s)return e=>progressText(s,e,r)??""}

package/dist/internal/scale.d.ts

@@ -0,0 +1,127 @@
+/**
+ * The size ladder, once.
+ *
+ * `MPSize` promises that a rung means the same thing on every control — see
+ * `docs/{locale}/design/prop-conventions.md` — and a promise kept by twelve
+ * separate tables is a promise that gets broken the first time one of them is
+ * edited alone. So the heights, the type roles and the spacing that follow from
+ * them live here, and a component picks the rows it needs.
+ *
+ * ## Why they are written out rather than computed
+ *
+ * Every value below is a literal class string, and it has to be: Tailwind finds
+ * classes by scanning source text, so an interpolated `h-${n}` generates no rule
+ * at all. That is also why this file is scanned — `@source '.'` in `styles.css`
+ * covers the whole compiled library, this module included.
+ *
+ * ## What is *not* here
+ *
+ * Anything one component decides on its own. A switch's track is not on the
+ * ladder because it is not a control height — it is a track a thumb runs along,
+ * sized by the thumb. A checkbox's tick is not either. Those tables stay in the
+ * component that owns them, next to the reasoning for their numbers.
+ */
+import type { MPSize } from '../types';
+/**
+ * The control heights, and the ladder every other table here is derived from.
+ *
+ * 32 / 40 / 56 / 64 / 72, with `md` at Material's own 56 — the same rungs
+ * `MPTextField` is drawn at, so a button, a select and a field in one form row
+ * line up. The first three are also MD3's own extra-small, small and medium
+ * button heights; `lg` and `xl` are this library's, because the spec's are 96
+ * and 136 and a 96px button beside a 64px field is not a row.
+ */
+export declare const CONTROL_HEIGHT: Record<MPSize, string>;
+/** The same numbers as a square, for a control with no label to pad against. */
+export declare const CONTROL_SQUARE: Record<MPSize, string>;
+/**
+ * What a control's own text is set in.
+ *
+ * `label-large` at the bottom two rungs and `title-medium` from `md` up, which
+ * is the pair MD3 puts on its small and medium buttons. A smaller control moves
+ * *down the Material type scale* rather than to an interpolated size of the
+ * library's own — the same rule the text field follows into `body-medium`.
+ */
+export declare const CONTROL_TEXT: Record<MPSize, string>;
+/**
+ * Inline padding on a control with a label in it.
+ *
+ * MD3's own 12 / 16 / 24 for the first three rungs, continued at the same pace.
+ * A button's padding grows faster than its height on purpose: the label is what
+ * a pill is drawn around, so a taller button that kept 24px of padding would
+ * come out looking squeezed.
+ */
+export declare const CONTROL_PAD_X: Record<MPSize, string>;
+/** The gap between a control's icon and its label. */
+export declare const CONTROL_GAP: Record<MPSize, string>;
+/**
+ * The glyph a control draws beside its label, in CSS pixels.
+ *
+ * A number rather than a class because `MPIcon` takes a length — it is the one
+ * component that is not on the ladder, for the reason given in the prop
+ * conventions: an icon has no height of its own to pick from a scale.
+ */
+export declare const CONTROL_ICON: Record<MPSize, number>;
+/**
+ * What text *beside* a control is set in — a checkbox's label, a radio's.
+ *
+ * The body scale rather than the label scale, and the same two roles a text
+ * field's own input takes. A checkbox's label is prose that happens to sit next
+ * to a control; a button's label is part of one. Setting the first in
+ * `title-medium` at 500 would make a list of options read as a list of headings.
+ */
+export declare const PROSE_TEXT: Record<MPSize, string>;
+/**
+ * Supporting text: a label above a control, a description or an error under it.
+ *
+ * `body-small` at every rung, deliberately. Supporting text is prose about the
+ * control rather than part of it, and prose that shrank with the control would
+ * be unreadable at `xs` — where it is needed most, because that is the density a
+ * form gets cramped at.
+ */
+export declare const META_TEXT = "text-mp-body-small";
+/**
+ * The room inside a sheet.
+ *
+ * `md` is 16px, which is MD3's own card padding, and the ladder is centred on it
+ * the same way the control heights are centred on 56. The steps are 4px apart at
+ * the bottom and widen at the top, because the difference between 20 and 24 is
+ * the difference between "roomy" and "spacious" while 8 and 10 are both "tight".
+ */
+export declare const SHEET_PAD: Record<MPSize, string>;
+/** The same track sideways only, for a sheet that sets its own vertical room. */
+export declare const SHEET_PAD_X: Record<MPSize, string>;
+/**
+ * And the other axis, for the sheet that is built out of stacked sections.
+ *
+ * A card, a drawer and a collapsible all make the same trade: without dividers
+ * the *sheet* carries the vertical room and each section carries only the
+ * horizontal, so the gaps between sections belong to the sheet; with them each
+ * section carries both, so a hairline can reach the sheet's edges. That needs
+ * the two axes separately, and it needs them written out — Tailwind finds
+ * classes by scanning source text, so a `p-4` turned into a `py-4` at runtime
+ * generates no rule at all and the padding simply would not exist.
+ */
+export declare const SHEET_PAD_Y: Record<MPSize, string>;
+/**
+ * A sheet's heading.
+ *
+ * The `title` roles rather than the `headline` ones: a headline is what a page
+ * is about, and a list row's first line is not. `md` lands on `title-medium`,
+ * which is `body-large` at weight 500 — exactly the relationship MD3 draws
+ * between a list item's headline and its supporting text.
+ */
+export declare const SHEET_TITLE: Record<MPSize, string>;
+/** Between a sheet's stacked parts — a heading and the paragraph under it. */
+export declare const SHEET_GAP: Record<MPSize, string>;
+/** The gap between a control and the text stacked above or below it. */
+export declare const STACK_GAP: Record<MPSize, string>;
+/**
+ * Whether a slot was given something worth drawing a wrapper around.
+ *
+ * `false` and `null` both mean "nothing here" in JSX — they are what a
+ * `condition && <Icon />` leaves behind — and an empty string is a caller
+ * clearing a default. Testing for `undefined` alone would draw a padded, gapped
+ * box around each of them.
+ */
+export declare function hasContent(node: unknown): boolean;

package/dist/internal/scale.js

@@ -0,0 +1 @@
+export const CONTROL_HEIGHT={xs:"h-8",sm:"h-10",md:"h-14",lg:"h-16",xl:"h-18"};export const CONTROL_SQUARE={xs:"size-8",sm:"size-10",md:"size-14",lg:"size-16",xl:"size-18"};export const CONTROL_TEXT={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-title-medium",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export const CONTROL_PAD_X={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-8",xl:"px-10"};export const CONTROL_GAP={xs:"gap-1.5",sm:"gap-2",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const CONTROL_ICON={xs:16,sm:18,md:20,lg:22,xl:24};export const PROSE_TEXT={xs:"text-mp-body-medium",sm:"text-mp-body-medium",md:"text-mp-body-large",lg:"text-mp-body-large",xl:"text-mp-body-large"};export const META_TEXT="text-mp-body-small";export const SHEET_PAD={xs:"p-2.5",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"};export const SHEET_PAD_X={xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"};export const SHEET_PAD_Y={xs:"py-2.5",sm:"py-3",md:"py-4",lg:"py-5",xl:"py-6"};export const SHEET_TITLE={xs:"text-mp-title-small",sm:"text-mp-title-small",md:"text-mp-title-medium",lg:"text-mp-title-large",xl:"text-mp-headline-small"};export const SHEET_GAP={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const STACK_GAP={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export function hasContent(t){return null!=t&&!1!==t&&""!==t}

package/dist/internal/surface.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The surfaces, and the two questions they answer.
+ *
+ * The first is what everything that floats above the page has in common. Eight
+ * components portal something to the end of `<body>` — the dialog, the drawer,
+ * the overlay, the menu, the popover, the snackbar, the combobox's list and the
+ * colour picker's panel — and the three strings below are the parts of that
+ * which must not differ between them. A dialog opened over an overlay would
+ * otherwise show a seam where two scrims of slightly different alpha overlap,
+ * and a menu that faded on a different curve from the dialog it was opened
+ * inside would read as two libraries.
+ *
+ * The second is what a *container* paints itself at, which is the last section
+ * of the file.
+ */
+import type { MPVariant } from '../types';
+/**
+ * The positioner every portalled popup wears.
+ *
+ * `mp-portal` is a hook, not a style. A portalled element leaves the subtree a
+ * host may have scoped its CSS reset to, so the class is there for that host to
+ * hang the same reset off — this library never styles it.
+ *
+ * `z-50` is Tailwind's top stacking step and is shared by every popup here, so
+ * the order two open popups stack in is the order they were opened in rather
+ * than a number somebody picked.
+ */
+export declare const PORTAL_LAYER = "mp-portal z-50 outline-none";
+/**
+ * The scrim: MD3's own `scrim` role at 32%.
+ *
+ * The alpha lives here rather than in the token because 32% is what the
+ * *component* draws it at — the role itself is a colour, and a page that themes
+ * `--mp-sys-color-scrim` should not have to restate an opacity to do it.
+ *
+ * The 2px blur is not a frost. It is enough to take the edge off text directly
+ * under the sheet without turning the page into a smear, which is the difference
+ * between "you cannot use this right now" and "this is gone".
+ */
+export declare const SCRIM = "bg-mp-scrim/32 [backdrop-filter:blur(2px)]";
+/**
+ * Opacity, and only opacity.
+ *
+ * Everything that uses this is a box full of text. A surface that scales or
+ * slides on the way in drags its own sentence across the screen while the reader
+ * is already looking at it, and a menu that slides has moved the row the pointer
+ * was already reaching for.
+ */
+export declare const FADE: string;
+/**
+ * The five weights, said the way a **container** says them.
+ *
+ * This is the other half of the library's `variant` vocabulary, and the half
+ * that is easy to get wrong. On a component that *is* the thing being coloured —
+ * a button, a chip, an alert — `filled` is the accent under its own ink. On a
+ * component that is a box holding **somebody else's** content it cannot be:
+ * dyeing the box dyes their content's background, and every link, field and
+ * button they put inside it would then need an on-accent treatment of its own.
+ *
+ * So a container's ladder runs up the neutral surface roles instead, and
+ * `filled` is the loudest one it is allowed — MD3's `surface-container-highest`,
+ * which is also the specification's own *filled card*. `elevated` and `outlined`
+ * are MD3's other two card variants to the letter: `surface-container-low` under
+ * a level-1 shadow, and a hairline in `outline-variant`. `text` paints nothing
+ * at all, which is what a container nested inside another container wants.
+ *
+ * The ink is deliberately **not** here. Most callers want `text-mp-on-surface`
+ * and say so once beside this, but a table sets the ink per cell and a carousel
+ * has none of its own, and a ladder that decided for them would be a ladder they
+ * had to undo.
+ *
+ * It lives in `internal/` for the reason `scale.ts` gives about the size ladder:
+ * nine components read it, and a promise kept by nine separate tables is a
+ * promise that gets broken the first time one of them is edited alone.
+ */
+export declare const CONTAINER_SURFACE: Record<MPVariant, string>;

package/dist/internal/surface.js

@@ -0,0 +1 @@
+export const PORTAL_LAYER="mp-portal z-50 outline-none";export const SCRIM="bg-mp-scrim/32 [backdrop-filter:blur(2px)]";export const FADE=["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" ");export const CONTAINER_SURFACE={filled:"bg-mp-surface-container-highest",tonal:"bg-mp-surface-container",elevated:"shadow-mp-1 bg-mp-surface-container-low",outlined:"border-mp-outline-variant border bg-transparent",text:"bg-transparent"};

package/dist/internal/visually-hidden.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Text for a screen reader and nobody else.
+ *
+ * The sentence behind a bare number on a badge, the "opens in a new tab" after a
+ * link's label, the name an avatar's initials are standing in for, the direction
+ * a sorted column is sorted in. In every one of those the visible mark is
+ * shorthand a reader who can see it expands instantly and a reader who cannot
+ * gets nothing from at all.
+ *
+ * Not `hidden`, not `display: none` and not `opacity: 0` — the first two take the
+ * text off the accessibility tree along with the screen, which is the opposite of
+ * what is wanted, and the third leaves a clickable ghost the size of the words. A
+ * 1px clipped box is the one form that is invisible to a sighted reader and
+ * present to every other kind.
+ *
+ * This is Tailwind's own `sr-only` written out. It is written out because
+ * Preflight is not the only thing this library leaves off: `sr-only` is a
+ * *utility*, so it is generated — but a consumer running their own Tailwind build
+ * with a `prefix` configured would generate it under a different name, and a
+ * component that hardcoded `sr-only` would come out visible on their page. The
+ * arbitrary properties below survive any prefix.
+ */
+export declare const VISUALLY_HIDDEN = "absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";

package/dist/internal/visually-hidden.js

@@ -0,0 +1 @@
+export const VISUALLY_HIDDEN="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";