material-plus-ui 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.fix.py +92 -0
- package/README.md +1 -1
- package/dist/components/checkbox/MPCheckbox.d.ts +6 -0
- package/dist/components/checkbox/MPCheckbox.js +1 -1
- package/dist/components/file-picker/MPFilePicker.d.ts +6 -0
- package/dist/components/file-picker/MPFilePicker.js +1 -1
- package/dist/components/menu/MPMenu.d.ts +4 -2
- package/dist/components/menu/MPMenu.js +1 -1
- package/dist/components/menubar/MPMenubar.d.ts +8 -1
- package/dist/components/menubar/MPMenubar.js +1 -1
- package/dist/components/navigation-menu/MPNavigationMenu.d.ts +8 -1
- package/dist/components/navigation-menu/MPNavigationMenu.js +1 -1
- package/dist/components/number-field/MPNumberField.d.ts +7 -1
- package/dist/components/number-field/MPNumberField.js +1 -1
- package/dist/components/radio-group/MPRadioGroup.d.ts +12 -0
- package/dist/components/radio-group/MPRadioGroup.js +1 -1
- package/dist/components/segmented-button/MPSegmentedButton.d.ts +7 -0
- package/dist/components/segmented-button/MPSegmentedButton.js +1 -1
- package/dist/components/select/MPSelect.d.ts +7 -0
- package/dist/components/select/MPSelect.js +1 -1
- package/dist/components/slider/MPSlider.d.ts +6 -0
- package/dist/components/slider/MPSlider.js +1 -1
- package/dist/components/switch/MPSwitch.d.ts +6 -0
- package/dist/components/switch/MPSwitch.js +1 -1
- package/dist/components/text-field/MPTextField.d.ts +8 -0
- package/dist/components/text-field/MPTextField.js +1 -1
- package/package.json +1 -1
package/.fix.py
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import pathlib, sys
|
|
2
|
+
def rep(path, old, new):
|
|
3
|
+
p = pathlib.Path(path); s = p.read_text(encoding='utf-8')
|
|
4
|
+
if s.count(old) != 1: print(f'FAIL {path}: {s.count(old)}'); sys.exit(1)
|
|
5
|
+
p.write_text(s.replace(old, new, 1), encoding='utf-8'); print('ok ', path)
|
|
6
|
+
|
|
7
|
+
EN_OLD = """Yours is appended to the component's own, and nothing is removed to make room for it. So **two utilities setting the same property are resolved by the stylesheet rather than by which of them you wrote.**
|
|
8
|
+
|
|
9
|
+
Which one that is depends on how the styles were wired up. On the precompiled path it is whichever sheet the application imported second. On the Tailwind path both are generated in one pass, and Tailwind's own ordering decides — which is per property, and not something to work out at the call site:
|
|
10
|
+
|
|
11
|
+
| You pass | The component sets | Which one wins |
|
|
12
|
+
| ------------ | --------------------- | -------------- |
|
|
13
|
+
| `p-8` | `px-6` | the component |
|
|
14
|
+
| `rounded-lg` | `rounded-mp-full` | the component |
|
|
15
|
+
| `shadow-lg` | `shadow-mp-1` | the component |
|
|
16
|
+
| `text-lg` | `text-mp-label-large` | yours |
|
|
17
|
+
| `bg-red-500` | `bg-mp-primary` | yours |
|
|
18
|
+
| `h-20` | `h-14` | yours |
|
|
19
|
+
|
|
20
|
+
Read the column, not the rows: the answers are what one version of Tailwind happens to emit, and the point is that there is no rule connecting them. `className` is the right tool for what a component does **not** already set — margin, width, grid placement, position, an animation — and the wrong one for taking something over."""
|
|
21
|
+
|
|
22
|
+
EN_NEW = """Yours is appended to the component's own, and nothing is removed to make room for it. Two classes setting the same property both end up on the element, at equal specificity, and **the one that wins is the one the stylesheet happens to put last** — not the one you wrote.
|
|
23
|
+
|
|
24
|
+
A class for something the component does not already set always works. That is most of what a class is for, and there is nothing more to know about it:
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
<MPButton className="mt-4 w-full">Save</MPButton>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Past that it depends on the pair. On the precompiled path it depends on which sheet the application imported second; on the Tailwind path both are generated in one pass and Tailwind's own ordering decides. Measured against this repository's own stylesheet, on an `MPButton` at the default size:
|
|
31
|
+
|
|
32
|
+
| You pass | It sets | Result |
|
|
33
|
+
| ---------------------------- | ------------------------ | ------- |
|
|
34
|
+
| `px-8` | `px-6` | applies |
|
|
35
|
+
| `px-2` | `px-6` | ignored |
|
|
36
|
+
| `h-20` | `h-14` | applies |
|
|
37
|
+
| `h-8` | `h-14` | ignored |
|
|
38
|
+
| `text-lg`, `text-xs` | `text-mp-title-medium` | applies |
|
|
39
|
+
| `bg-red-500` | `bg-(--_mp-accent)` | applies |
|
|
40
|
+
| `rounded-lg` | `rounded-mp-full` | ignored |
|
|
41
|
+
| `shadow-lg` | `shadow-mp-1` | ignored |
|
|
42
|
+
| `p-8` | `px-6` | ignored |
|
|
43
|
+
| any of the above with a `!` | — | applies |
|
|
44
|
+
|
|
45
|
+
The first four rows are the ones worth staring at. `px-8` works and `px-2` does not, on the same component and the same property, because Tailwind emits a scale in scale order and the larger step is therefore later — so *making a control bigger tends to work and making it smaller tends not to*. The rest is which of two theme keys Tailwind happened to sort first: the library's `--text-mp-*` land before Tailwind's own, so any `text-*` you pass wins, while `--radius-mp-*` and `--shadow-mp-*` land after, so `rounded-*` and `shadow-*` do not.
|
|
46
|
+
|
|
47
|
+
None of that is a promise. It is what one version of Tailwind emits, it is per pair rather than per property, and it can move under you when either side adds a token. Treat `className` as the tool for what the component leaves alone."""
|
|
48
|
+
|
|
49
|
+
KO_OLD = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 그래서 **같은 속성을 지정하는 두 유틸리티는 어느 쪽을 썼는지가 아니라 스타일시트가 결정합니다.**
|
|
50
|
+
|
|
51
|
+
어느 쪽이 되는지는 스타일을 어떻게 연결했는지에 달려 있습니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이깁니다. Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되고 Tailwind 자신의 정렬이 결정하는데, 그 정렬은 속성마다 다르고 호출부에서 따져볼 만한 것이 아닙니다.
|
|
52
|
+
|
|
53
|
+
| 넘긴 것 | 컴포넌트가 지정한 것 | 이기는 쪽 |
|
|
54
|
+
| --- | --- | --- |
|
|
55
|
+
| `p-8` | `px-6` | 컴포넌트 |
|
|
56
|
+
| `rounded-lg` | `rounded-mp-full` | 컴포넌트 |
|
|
57
|
+
| `shadow-lg` | `shadow-mp-1` | 컴포넌트 |
|
|
58
|
+
| `text-lg` | `text-mp-label-large` | 넘긴 쪽 |
|
|
59
|
+
| `bg-red-500` | `bg-mp-primary` | 넘긴 쪽 |
|
|
60
|
+
| `h-20` | `h-14` | 넘긴 쪽 |
|
|
61
|
+
|
|
62
|
+
행이 아니라 열을 보세요. 이 답들은 어떤 한 버전의 Tailwind가 그렇게 내놓은 것일 뿐이고, 요점은 이들을 이어 주는 규칙이 없다는 것입니다. `className`은 컴포넌트가 **지정하지 않은** 것 — 마진, 너비, 그리드 배치, 위치, 애니메이션 — 에 쓰는 도구이고, 이미 지정된 것을 가져오는 데 쓰는 도구가 아닙니다."""
|
|
63
|
+
|
|
64
|
+
KO_NEW = """넘긴 클래스는 컴포넌트 자신의 클래스 뒤에 붙고, 자리를 내주기 위해 지워지는 것은 없습니다. 같은 속성을 지정하는 두 클래스가 같은 명시도로 엘리먼트에 함께 올라가고, **이기는 쪽은 스타일시트가 뒤에 놓은 쪽입니다.** 어느 쪽을 썼는지가 아닙니다.
|
|
65
|
+
|
|
66
|
+
컴포넌트가 지정하지 않은 것에 대한 클래스는 언제나 적용됩니다. 클래스로 하려는 일의 대부분이 이것이고, 여기에 더 알아야 할 것은 없습니다.
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<MPButton className="mt-4 w-full">저장</MPButton>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
그 너머는 짝에 따라 다릅니다. 컴파일된 시트를 쓰는 경우에는 애플리케이션이 나중에 import한 시트가 이기고, Tailwind를 쓰는 경우에는 둘이 한 번의 패스에서 생성되어 Tailwind 자신의 정렬이 결정합니다. 이 저장소의 시트로, 기본 크기의 `MPButton`에 대고 실제로 측정한 결과입니다.
|
|
73
|
+
|
|
74
|
+
| 넘긴 것 | 컴포넌트가 지정한 것 | 결과 |
|
|
75
|
+
| --- | --- | --- |
|
|
76
|
+
| `px-8` | `px-6` | 적용됨 |
|
|
77
|
+
| `px-2` | `px-6` | 무시됨 |
|
|
78
|
+
| `h-20` | `h-14` | 적용됨 |
|
|
79
|
+
| `h-8` | `h-14` | 무시됨 |
|
|
80
|
+
| `text-lg`, `text-xs` | `text-mp-title-medium` | 적용됨 |
|
|
81
|
+
| `bg-red-500` | `bg-(--_mp-accent)` | 적용됨 |
|
|
82
|
+
| `rounded-lg` | `rounded-mp-full` | 무시됨 |
|
|
83
|
+
| `shadow-lg` | `shadow-mp-1` | 무시됨 |
|
|
84
|
+
| `p-8` | `px-6` | 무시됨 |
|
|
85
|
+
| 위의 어느 것이든 `!`를 붙이면 | — | 적용됨 |
|
|
86
|
+
|
|
87
|
+
들여다볼 만한 것은 처음 네 줄입니다. 같은 컴포넌트, 같은 속성인데 `px-8`은 되고 `px-2`는 안 됩니다. Tailwind가 스케일을 스케일 순서로 내놓기 때문에 더 큰 단계가 더 뒤에 오고, 그래서 *컨트롤을 키우는 쪽은 대체로 되고 줄이는 쪽은 대체로 안 됩니다*. 나머지는 두 테마 키 중 어느 쪽을 Tailwind가 먼저 정렬했는가의 문제입니다. 이 라이브러리의 `--text-mp-*`는 Tailwind 자신의 것보다 앞에 놓이므로 넘긴 `text-*`가 이기고, `--radius-mp-*`와 `--shadow-mp-*`는 뒤에 놓이므로 `rounded-*`와 `shadow-*`는 지지 않고 집니다.
|
|
88
|
+
|
|
89
|
+
이 중 무엇도 약속이 아닙니다. 어떤 한 버전의 Tailwind가 내놓은 결과이고, 속성 단위가 아니라 짝 단위이며, 양쪽 중 어느 한쪽이 토큰을 추가하면 발밑에서 움직일 수 있습니다. `className`은 컴포넌트가 건드리지 않는 것에 쓰는 도구로 두세요."""
|
|
90
|
+
|
|
91
|
+
rep('docs/en/guide/getting-started.md', EN_OLD, EN_NEW)
|
|
92
|
+
rep('docs/ko/guide/getting-started.md', KO_OLD, KO_NEW)
|
package/README.md
CHANGED
|
@@ -23,7 +23,7 @@ It follows the specification directly rather than wrapping somebody's implementa
|
|
|
23
23
|
- **IME-safe by construction.** Korean, Japanese and Chinese composition survives whatever your `onChange` does with the value.
|
|
24
24
|
- **Bring your own icons.** `MPIcon` takes a component or an element from any set. `lucide-react` ships with the package, gathered in one readable constants file.
|
|
25
25
|
- **Works in a Next.js server component**, and in any bundler: the components carry `"use client"`, the barrel and the data do not, and every specifier in `dist/` names a file — so webpack, Vite, esbuild, Rollup and plain Node all resolve it.
|
|
26
|
-
- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 2.9 kB gzipped and five are 7.
|
|
26
|
+
- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 2.9 kB gzipped and five are 7.4 kB, against 74 kB for all hundred and eleven. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
|
|
27
27
|
- **One runtime dependency.** React 18 or 19, Node.js 22 or later.
|
|
28
28
|
|
|
29
29
|
## Documentation
|
|
@@ -56,6 +56,12 @@ export interface MPCheckboxProps {
|
|
|
56
56
|
* left out.
|
|
57
57
|
*/
|
|
58
58
|
id?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Added to the outermost element — the box around the tick, its label and its
|
|
61
|
+
* supporting line, rather than to the tick itself.
|
|
62
|
+
*/
|
|
63
|
+
className?: string;
|
|
64
|
+
style?: React.CSSProperties;
|
|
59
65
|
}
|
|
60
66
|
/**
|
|
61
67
|
* A Material Design checkbox.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as l}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const h={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/r.forwardRef(function({checked:u,defaultChecked:f,onCheckedChange:b,indeterminate:x=!1,label:g,description:y,errorMessage:k,size:j="md",color:z="primary",required:
|
|
2
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as l}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const h={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/r.forwardRef(function({checked:u,defaultChecked:f,onCheckedChange:b,indeterminate:x=!1,label:g,description:y,errorMessage:k,size:j="md",color:z="primary",required:N=!1,disabled:_=!1,readOnly:v=!1,name:C,value:M,id:I,className:R,style:q},w){const L=p(k),O=L?"error":z,P=h[j],S=r.useId(),B=I??S;return e(n.Root,{className:["mp-checkbox inline-block align-top",R??""].filter(Boolean).join(" "),disabled:_,invalid:L,"data-mp-size":j,style:{...c(O),...q},children:a("div",{className:["flex items-start gap-3",m[j]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(t.Root,{ref:w,id:B,name:C,value:M,checked:u,defaultChecked:f,indeterminate:x,required:N,disabled:_,readOnly:v,onCheckedChange:e=>b?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",P.box,_?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[v?"cursor-default":"cursor-pointer",L?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[_?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",P.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:["flex items-center justify-center","transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-60 data-starting-style:opacity-0","data-ending-style:scale-60 data-ending-style:opacity-0"].join(" "),children:e(o,{icon:x?s:i,size:P.glyph,strokeWidth:3})})]})}),p(g)||p(y)||L?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?a(n.Label,{htmlFor:B,className:["leading-[1.4]",_?"text-mp-on-surface/38 cursor-default":v?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,N?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:y,errorMessage:k})]}):null]})})});
|
|
@@ -83,6 +83,12 @@ export interface MPFilePickerProps extends MPStyleProps {
|
|
|
83
83
|
name?: string;
|
|
84
84
|
/** The id put on the browse button. */
|
|
85
85
|
id?: string;
|
|
86
|
+
/**
|
|
87
|
+
* Added to the picker's outermost element — the box around the label, the drop
|
|
88
|
+
* zone and the list of files that have been chosen.
|
|
89
|
+
*/
|
|
90
|
+
className?: string;
|
|
91
|
+
style?: React.CSSProperties;
|
|
86
92
|
}
|
|
87
93
|
/**
|
|
88
94
|
* A box you drop files on, or click to open the file dialog.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons.js";import{fillMessage as
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as o,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FILE_PICKER as m}from"../../internal/messages/file-picker.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as d,PROSE_TEXT as f,STACK_GAP as h,hasContent as x}from"../../internal/scale.js";const b={xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"};export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let n=e/1e3,t=0;for(;n>=1e3&&t<r.length-1;)n/=1e3,t+=1;return`${n<10?n.toFixed(1):Math.round(n)} ${r[t]}`}function v(e,r){const n=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?n.endsWith(e):e.endsWith("/*")?t.startsWith(e.slice(0,-1)):t===e)}export const MPFilePicker=/*@__PURE__*/n.forwardRef(function({accept:g,multiple:j=!1,maxSize:y,maxFiles:N,value:k,defaultValue:z,onFilesChange:w,onReject:C,label:I,description:B,errorMessage:D,title:F,hint:L,icon:M,showList:S=!0,removeLabel:$,locale:T,size:W="md",fullWidth:_=!0,required:P=!1,disabled:R=!1,readOnly:E=!1,name:O,id:q,className:A,style:V},G){const H=o(T),Y=s(c,H),J=s(m,H),K=n.useRef(null);n.useImperativeHandle(G,()=>K.current,[]);const[Q,U]=n.useState(()=>[...z??[]]),X=k?[...k]:Q,Z=n.useRef(0),[ee,re]=n.useState(!1),ne=x(D),te=R||E,ae=n.useId(),ie=n.useId(),le=n.useCallback(e=>{k||U(e),w?.(e)},[w,k]),oe=n.useCallback(e=>{const r=[],n=[],t=j?N??Number.POSITIVE_INFINITY:1,a=j?X.length:0;for(const i of e)g&&!v(i,g)?n.push({file:i,reason:"type"}):void 0!==y&&i.size>y?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[g,X.length,N,y,j]),se=n.useCallback(e=>{const{kept:r,rejections:n}=oe(e);n.length>0&&C?.(n),r.length>0&&le(j?[...X,...r]:r)},[oe,le,X,j,C]);return r("div",{className:["mp-file-picker flex-col align-top",h[W],_?"flex w-full":"inline-flex",A??""].filter(Boolean).join(" "),style:V,"data-mp-size":W,"data-disabled":R||void 0,"data-invalid":ne||void 0,children:[x(I)?r("span",{id:ie,className:[d,R?"text-mp-on-surface/38":ne?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[I,P?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"relative flex w-full flex-col",onDragEnter:e=>{te||(e.preventDefault(),Z.current+=1,re(!0))},onDragOver:e=>{te||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{te||(Z.current=Math.max(0,Z.current-1),0===Z.current&&re(!1))},onDrop:e=>{te||(e.preventDefault(),Z.current=0,re(!1),se(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:q,disabled:R,"aria-describedby":x(B)||ne?ae:void 0,"aria-invalid":ne||void 0,className:["mp-file-picker__zone group relative flex w-full flex-col items-center","justify-center gap-2 text-center","rounded-mp-md box-border border-2 border-dashed","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color,background-color] duration-(--mp-sys-motion-duration-short4)",b[W],f[W],R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[E?"cursor-default":"cursor-pointer",ne?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",ee?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!te&&K.current&&(K.current.value="",K.current.click())},children:[te?null:e(p,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===M?e(t,{icon:i,size:1.6*u[W],className:R?"":"text-mp-primary"}):x(M)?e("span",{className:R?"":"text-mp-primary",children:M}):null,e("span",{className:"font-medium",children:F??J.prompt}),x(L)?e("span",{className:[d,R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:L}):null]}),e("input",{ref:K,type:"file",name:O,accept:g,multiple:j,required:P&&0===X.length,disabled:te,tabIndex:-1,"aria-labelledby":x(I)?ie:void 0,"aria-describedby":x(B)||ne?ae:void 0,className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>se(Array.from(e.target.files??[]))})]}),S&&X.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",h[W]].join(" "),children:X.map((n,i)=>r("li",{className:["rounded-mp-xs bg-mp-surface-container-low flex w-full items-center gap-3","px-3 py-2",f[W],R?"text-mp-on-surface/38":"text-mp-on-surface"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:n.name}),e("span",{className:[d,"shrink-0 tabular-nums",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),te?null:r("button",{type:"button","aria-label":$?$(n.name):l(Y.removeNamed,{label:n.name}),className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","cursor-pointer appearance-none items-center justify-center rounded-full","bg-transparent p-0 font-[inherit] outline-none"].join(" "),onClick:()=>le(X.filter((e,r)=>r!==i)),children:[e(p,{}),e(t,{icon:a,size:18})]})]},`${n.name}-${n.size}-${n.lastModified}-${i}`))}):null,ne?e("span",{id:ae,className:[d,"text-mp-error"].join(" "),children:D}):x(B)?e("span",{id:ae,className:[d,R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:B}):null]})});
|
|
@@ -133,6 +133,7 @@ export interface MPMenuGroupProps {
|
|
|
133
133
|
label?: React.ReactNode;
|
|
134
134
|
children?: React.ReactNode;
|
|
135
135
|
className?: string;
|
|
136
|
+
style?: React.CSSProperties;
|
|
136
137
|
}
|
|
137
138
|
export interface MPMenuCheckboxItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
|
|
138
139
|
checked?: boolean;
|
|
@@ -153,6 +154,7 @@ export interface MPMenuRadioGroupProps {
|
|
|
153
154
|
disabled?: boolean;
|
|
154
155
|
children?: React.ReactNode;
|
|
155
156
|
className?: string;
|
|
157
|
+
style?: React.CSSProperties;
|
|
156
158
|
}
|
|
157
159
|
export interface MPMenuRadioItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
|
|
158
160
|
/** What this row sets the group to. */
|
|
@@ -173,7 +175,7 @@ export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endI
|
|
|
173
175
|
/** A row that ticks. The tick lands in the column a `startIcon` would. */
|
|
174
176
|
export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
|
|
175
177
|
/** One choice out of a set. Wraps the rows that make up the set. */
|
|
176
|
-
export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: MPMenuRadioGroupProps): React.JSX.Element;
|
|
178
|
+
export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className, style }: MPMenuRadioGroupProps): React.JSX.Element;
|
|
177
179
|
/**
|
|
178
180
|
* A row inside an `MPMenuRadioGroup`.
|
|
179
181
|
*
|
|
@@ -183,7 +185,7 @@ export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, d
|
|
|
183
185
|
*/
|
|
184
186
|
export declare function MPMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuRadioItemProps): React.JSX.Element;
|
|
185
187
|
/** A named run of rows. The label is a heading, not a row — it cannot be picked. */
|
|
186
|
-
export declare function MPMenuGroup({ label, children, className }: MPMenuGroupProps): React.JSX.Element;
|
|
188
|
+
export declare function MPMenuGroup({ label, children, className, style }: MPMenuGroupProps): React.JSX.Element;
|
|
187
189
|
/** The hairline between two runs of rows. `outline-variant`, as MD3 draws it. */
|
|
188
190
|
export declare function MPMenuSeparator({ className, ...props }: MPMenuSeparatorProps): React.JSX.Element;
|
|
189
191
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as s,ChevronRightIcon as o}from"../../constants/icons.js";import{linkRel as i}from"../../internal/link.js";import{MPMenuContext as c}from"../../internal/menu.js";import{accentSlots as d}from"../../internal/accent.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as p,hasContent as h}from"../../internal/scale.js";import{FADE as f,PORTAL_LAYER as x}from"../../internal/surface.js";const b=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",f].join(" "),g={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},N={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},v={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},
|
|
2
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as s,ChevronRightIcon as o}from"../../constants/icons.js";import{linkRel as i}from"../../internal/link.js";import{MPMenuContext as c}from"../../internal/menu.js";import{accentSlots as d}from"../../internal/accent.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as p,hasContent as h}from"../../internal/scale.js";import{FADE as f,PORTAL_LAYER as x}from"../../internal/surface.js";const b=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",f].join(" "),g={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},N={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},v={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},y={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function C(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",g[e],N[e],v[e],y[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function k(){return e(m,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const M="relative flex shrink-0 items-center justify-center";function O({children:t,description:a}){return h(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function P({shortcut:n}){return h(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${p}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:s,rel:o,startIcon:d,endIcon:m,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:b=!1,label:g,children:N,className:v,style:y}){const{size:j}=t.useContext(c),I=n(t.Fragment,{children:[e(k,{}),h(d)?e("span",{className:`${M} text-mp-on-surface-variant`,children:d}):null,e(O,{description:p,children:N}),h(m)?e("span",{className:`${M} text-mp-on-surface-variant`,children:m}):null,e(P,{shortcut:u})]}),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0,z=$||y?{...$,...y}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:C(j,Boolean(f),v),style:z,children:I}):e(a.LinkItem,{href:r,target:s,rel:i(s,o),label:g,closeOnClick:x,onClick:l,className:C(j,Boolean(f),v),style:z,children:I})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:N,className:v,style:y}){const{size:j}=t.useContext(c),I=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:b,label:g,closeOnClick:x,className:C(j,Boolean(f),v),style:I||y?{...I,...y}:void 0,children:[e(k,{}),e("span",{className:`${M} text-(--_mp-accent)`,style:{width:u[j]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:s,size:u[j]})})}),e(O,{description:p,children:N}),h(d)?e("span",{className:`${M} text-mp-on-surface-variant`,children:d}):null,e(P,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:d=!1,disabled:m=!1,label:p,children:f,className:x,style:b}){const{size:g}=t.useContext(c),N=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:d,className:C(g,Boolean(i),x),style:N||b?{...N,...b}:void 0,children:[e(k,{}),e("span",{className:`${M} text-(--_mp-accent)`,style:{width:u[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(O,{description:o,children:f}),h(r)?e("span",{className:`${M} text-mp-on-surface-variant`,children:r}):null,e(P,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(c);return n(a.Group,{className:s,style:o,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${N[i]} ${p}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:m="right",sideOffset:p=0,children:f,className:g,style:N}){const{size:v,color:y}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:C(v,!1),children:[e(k,{}),h(s)?e("span",{className:`${M} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${M} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:x,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[b,g??""].filter(Boolean).join(" "),style:{...d(y),...N},children:f})})})]})}export function MPMenu({size:l="md",color:r="primary",trigger:s,open:o,defaultOpen:i,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:g=!1,loopFocus:N=!0,disabled:v=!1,className:y,style:C,children:k}){const M=t.useMemo(()=>({size:l,color:r}),[l,r]);return e(c.Provider,{value:M,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>m?.(e),modal:f,loopFocus:N,disabled:v,children:[s?e(a.Trigger,{render:s,openOnHover:g,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:x,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":l,className:[b,y??""].filter(Boolean).join(" "),style:{...d(r),...C},children:k})})})]})})}export function MPContextMenu({size:a="md",color:r="primary",content:s,children:o,open:i,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:g}){const N=t.useMemo(()=>({size:a,color:r}),[a,r]);return e(c.Provider,{value:N,children:n(l.Root,{open:i,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:x,children:e(l.Popup,{"data-mp-size":a,className:[b,f??""].filter(Boolean).join(" "),style:{...d(r),...g},children:s})})})]})})}
|
|
@@ -42,6 +42,13 @@ export interface MPMenubarMenuProps {
|
|
|
42
42
|
disabled?: boolean;
|
|
43
43
|
/** The rows, written exactly as they are inside an [MPMenu](./menu). */
|
|
44
44
|
children?: React.ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* Added to the word on the bar — the button that opens the menu — rather than
|
|
47
|
+
* to the menu it opens. That one takes its own `className` on
|
|
48
|
+
* [MPMenu](./menu).
|
|
49
|
+
*/
|
|
50
|
+
className?: string;
|
|
51
|
+
style?: React.CSSProperties;
|
|
45
52
|
}
|
|
46
53
|
/**
|
|
47
54
|
* One menu on the bar: the word, and the rows behind it.
|
|
@@ -51,7 +58,7 @@ export interface MPMenubarMenuProps {
|
|
|
51
58
|
* inside are the same [MPMenuItem](./menu), `MPMenuSeparator`, `MPMenuGroup` and
|
|
52
59
|
* `MPMenuSubmenu` an [MPMenu](./menu) takes, because it *is* the same menu.
|
|
53
60
|
*/
|
|
54
|
-
export declare function MPMenubarMenu({ label, startIcon, disabled, children }: MPMenubarMenuProps): React.JSX.Element;
|
|
61
|
+
export declare function MPMenubarMenu({ label, startIcon, disabled, children, className, style }: MPMenubarMenuProps): React.JSX.Element;
|
|
55
62
|
/**
|
|
56
63
|
* The strip of words at the top of an application — File, Edit, View — each of
|
|
57
64
|
* which opens a menu.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as s}from"../../internal/accent.js";import{MPMenuContext as l}from"../../internal/menu.js";import{MPStateLayer as a}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,hasContent as m}from"../../internal/scale.js";const c={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},p={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"},u={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export function MPMenubarMenu({label:r,startIcon:s,disabled:d=!1,children:f,className:x,style:b}){const{size:h,color:j}=o.useContext(l);return e(n,{size:h,color:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:t("button",{type:"button",disabled:d,className:["mp-menubar__menu group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-xs cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",c[h],p[h],u[h],i[h],x??""].filter(Boolean).join(" "),style:b,children:[d?null:e(a,{className:"group-data-popup-open:opacity-8"}),m(s)?e("span",{className:"relative flex",children:s}):null,e("span",{className:"relative",children:r})]}),children:f})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:a=!0,disabled:m=!1,size:c="md",color:p="primary",className:u,style:d,children:f,...x},b){const h=o.useMemo(()=>({size:c,color:p}),[c,p]);return e(l.Provider,{value:h,children:e(r,{ref:b,orientation:t,modal:n,loopFocus:a,disabled:m,"data-mp-size":c,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",i[c],u??""].filter(Boolean).join(" "),style:{...s(p),...d},...x,children:f})})});
|
|
@@ -89,6 +89,13 @@ export interface MPNavigationMenuItemProps {
|
|
|
89
89
|
columns?: number;
|
|
90
90
|
/** The panel's contents — usually `MPNavigationMenuLink`s. */
|
|
91
91
|
children?: React.ReactNode;
|
|
92
|
+
/**
|
|
93
|
+
* Added to the word in the row — the link, or the trigger that opens the panel
|
|
94
|
+
* — rather than to the panel. The panel is portalled out of this element and
|
|
95
|
+
* carries `mp-navigation-menu__panel`.
|
|
96
|
+
*/
|
|
97
|
+
className?: string;
|
|
98
|
+
style?: React.CSSProperties;
|
|
92
99
|
}
|
|
93
100
|
export interface MPNavigationMenuLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title'> {
|
|
94
101
|
/** Where it goes. */
|
|
@@ -117,7 +124,7 @@ export declare const MPNavigationMenuLink: React.ForwardRefExoticComponent<MPNav
|
|
|
117
124
|
* is a link — and the difference is not cosmetic. The second is announced as a
|
|
118
125
|
* destination and the first as something that expands.
|
|
119
126
|
*/
|
|
120
|
-
export declare function MPNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children }: MPNavigationMenuItemProps): React.JSX.Element;
|
|
127
|
+
export declare function MPNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children, className, style }: MPNavigationMenuItemProps): React.JSX.Element;
|
|
121
128
|
/**
|
|
122
129
|
* A site's navigation: a row of destinations, some of which open a panel of more
|
|
123
130
|
* of them.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";const v=/*@__PURE__*/t.createContext({size:"md"}),
|
|
2
|
+
import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";const v=/*@__PURE__*/t.createContext({size:"md"}),y=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),N={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/t.forwardRef(function({href:a,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:y,...N},j){const{size:b}=t.useContext(v);return n(i.Link,{ref:j,href:a,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,y]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:y,startIcon:j,value:b,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=t.useContext(v),C=void 0!==g&&!h(P),I=Number.isFinite(M)?Math.max(1,Math.round(M)):1,L=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[k],f[k],m[k],u[k],_??""].filter(Boolean).join(" ");return e(i.Item,{value:b,children:C?n(i.Link,{href:g,target:x,rel:l(x,y),className:L,style:z,children:[e(c,{}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s})]}):n(a,{children:[n(i.Trigger,{disabled:w,className:L,style:z,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${N[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/t.forwardRef(function({orientation:a="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u="md",color:f="primary",className:h,style:g,children:N,...j},b){const w=t.useMemo(()=>({size:u}),[u]);return e(v.Provider,{value:w,children:n(i.Root,{ref:b,orientation:a,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":u,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(f),...g},...j,children:[e(i.List,{className:["flex items-center","vertical"===a?"flex-col items-stretch":"flex-row",m[u]].join(" "),children:N}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(f),children:e(i.Popup,{className:y,children:e(i.Viewport,{})})})})]})})});
|
|
@@ -107,6 +107,12 @@ export interface MPNumberFieldProps extends MPStyleProps {
|
|
|
107
107
|
name?: string;
|
|
108
108
|
/** The id put on the control and pointed at by the label. */
|
|
109
109
|
id?: string;
|
|
110
|
+
/**
|
|
111
|
+
* Added to the field's outermost element — the box around the control, its
|
|
112
|
+
* steppers and its supporting line, rather than to the `<input>` itself.
|
|
113
|
+
*/
|
|
114
|
+
className?: string;
|
|
115
|
+
style?: React.CSSProperties;
|
|
110
116
|
}
|
|
111
117
|
/**
|
|
112
118
|
* A Material Design field that only holds a number.
|
|
@@ -123,4 +129,4 @@ export interface MPNumberFieldProps extends MPStyleProps {
|
|
|
123
129
|
* owns the parsing against the locale, the clamping, the press-and-hold repeat on
|
|
124
130
|
* the steppers, and the hidden input that submits with a form.
|
|
125
131
|
*/
|
|
126
|
-
export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;
|
|
132
|
+
export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as
|
|
2
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{NumberField as r}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{MPFieldLabel as o,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{NUMBER_FIELD as u}from"../../internal/messages/number-field.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{CONTROL_ICON as g,PROSE_TEXT as x,hasContent as b}from"../../internal/scale.js";const j={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:v,defaultValue:y,onValueChange:N,onValueCommitted:z,min:S,max:w,step:V,largeStep:k,smallStep:I,allowWheelScrub:q=!1,format:C,locale:L,steppers:M="end",incrementLabel:F,decrementLabel:O,label:P,floatingLabel:W=!0,description:B,errorMessage:R,placeholder:_,startIcon:D,size:G="md",fullWidth:T=!1,required:$=!1,disabled:A=!1,readOnly:E=!1,name:H,id:J,className:K,style:Q}){const U=c(u,d("string"==typeof L?L:void 0)),X=b(R),Y=j[G],Z=a.useId(),ee=J??Z,le="none"!==M&&!E&&!A,[ae,re]=a.useState(y??null),ne=void 0===v?ae:v,{shrunk:te,focusProps:ie}=m({floating:W&&b(P),filled:null!==ne,pinned:!!D||le&&"split"===M}),se=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",Y.stepper].join(" "),oe=l(r.Decrement,{"aria-label":O??U.decrease,className:se,children:[e(f,{}),e(t,{icon:s,size:g[G]})]}),pe=l(r.Increment,{"aria-label":F??U.increase,className:se,children:[e(f,{}),e(t,{icon:i,size:g[G]})]});return l(n.Root,{className:["mp-number-field group flex-col align-top",T?"flex w-full":"inline-flex w-fit",K??""].filter(Boolean).join(" "),style:Q,disabled:A,invalid:X,"data-mp-size":G,...ie,children:[e(r.Root,{id:ee,name:H,className:"contents",value:v,defaultValue:y,onValueChange:e=>{re(e),N?.(e)},onValueCommitted:e=>z?.(e),min:S,max:w,step:V,largeStep:k,smallStep:I,allowWheelScrub:q,format:C,locale:L,disabled:A,readOnly:E,required:$,children:l("div",{className:"relative w-full",children:[l(r.Group,{className:["flex w-full items-center gap-2",Y.height,le&&"end"===M?`${Y.padding} pe-1`:le&&"split"===M?"px-1":Y.padding].join(" "),children:[le&&"split"===M?oe:null,D?e("span",{className:["flex shrink-0 items-center",A?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,e(r.Input,{placeholder:te?_:void 0,className:["w-full min-w-0 flex-1 tabular-nums",x[G],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",le&&"split"===M?"text-center":""].filter(Boolean).join(" ")}),le&&"end"===M?l("span",{className:"flex shrink-0 items-center",children:[oe,pe]}):null,le&&"split"===M?pe:null]}),e(p,{label:P,required:$,notched:te}),b(P)?e(o,{size:G,label:P,required:$,htmlFor:ee,shrunk:te}):null]})}),e(h,{description:B,errorMessage:R,className:Y.padding})]})}
|
|
@@ -11,6 +11,12 @@ export interface MPRadioProps {
|
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
/** The id put on the control and pointed at by the label. */
|
|
13
13
|
id?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Added to the option's outermost element — the box around the dot, its label
|
|
16
|
+
* and its description, rather than to the dot itself.
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
style?: React.CSSProperties;
|
|
14
20
|
}
|
|
15
21
|
/**
|
|
16
22
|
* One option in an `MPRadioGroup`.
|
|
@@ -64,6 +70,12 @@ export interface MPRadioGroupProps {
|
|
|
64
70
|
name?: string;
|
|
65
71
|
/** The `MPRadio`s. */
|
|
66
72
|
children?: React.ReactNode;
|
|
73
|
+
/**
|
|
74
|
+
* Added to the group's outermost element — the box around the set's label, the
|
|
75
|
+
* options and the supporting line, rather than to the run of options.
|
|
76
|
+
*/
|
|
77
|
+
className?: string;
|
|
78
|
+
style?: React.CSSProperties;
|
|
67
79
|
}
|
|
68
80
|
/**
|
|
69
81
|
* A Material Design radio group: a set of options where exactly one is chosen.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as
|
|
2
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";const m={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},u=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:l,label:o,description:s,disabled:f=!1,id:x,className:g,style:h},b){const y=r.useContext(u),z=m[y.size],j=r.useId(),v=x??j;return e(n.Root,{className:["mp-radio inline-block align-top",g??""].filter(Boolean).join(" "),style:h,disabled:f,"data-mp-value":l,children:a("div",{className:["flex items-start gap-3",c[y.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:b,id:v,value:l,disabled:f,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",z.ring,f?"border-mp-on-surface/38 cursor-default":[y.readOnly?"cursor-default":"cursor-pointer",y.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",z.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",z.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{htmlFor:v,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":y.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(n.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:m,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:j=!1,name:v,children:N,className:R,style:O},k){const w=p(x),M=w?"error":b,_=r.useId(),C=r.useMemo(()=>({size:h,readOnly:j,invalid:w}),[h,j,w]);return e(u.Provider,{value:C,children:a(n.Root,{className:["mp-radio-group flex flex-col gap-2",R??""].filter(Boolean).join(" "),disabled:z,invalid:w,"data-mp-size":h,"data-mp-orientation":g,style:{...o(M),...O},children:[p(m)?a("span",{id:_,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:k,"aria-labelledby":p(m)?_:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:j,required:y,name:v,className:["flex","horizontal"===g?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});
|
|
@@ -50,6 +50,13 @@ export interface MPSegmentedButtonProps extends MPStyleProps {
|
|
|
50
50
|
disabled?: boolean;
|
|
51
51
|
/** The accessible name of the set. */
|
|
52
52
|
'aria-label'?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Added to the set rather than to a segment. A segment carries
|
|
55
|
+
* `mp-segmented-button__segment`, which is what a descendant selector reaches
|
|
56
|
+
* one by.
|
|
57
|
+
*/
|
|
58
|
+
className?: string;
|
|
59
|
+
style?: React.CSSProperties;
|
|
53
60
|
}
|
|
54
61
|
/**
|
|
55
62
|
* A Material Design segmented button: two to five choices in one pill.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as n}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as n}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as s}from"../../constants/icons.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale.js";export const MPSegmentedButton=/*@__PURE__*/r.forwardRef(function({items:r,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:y="md",fullWidth:j=!1,disabled:x=!1,"aria-label":v,className:w,style:N},B){return e(o,{ref:B,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:x,"data-mp-size":y,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",x?"border-mp-on-surface/12":"border-mp-outline",j?"flex w-full":"inline-flex w-fit",d[y],w??""].filter(Boolean).join(" "),style:N,children:r.map((r,o)=>{const d=x||r.disabled;return t(n,{value:r.value,disabled:r.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[y],l[y],m[y],0===o?"":"border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),j?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(i,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[y],height:c[y]},children:[g?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:s,size:c[y]})}):null,r.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",g?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},`${o}:${r.value}`)})})});
|
|
@@ -90,6 +90,13 @@ export interface MPSelectProps extends MPStyleProps {
|
|
|
90
90
|
* left out.
|
|
91
91
|
*/
|
|
92
92
|
id?: string;
|
|
93
|
+
/**
|
|
94
|
+
* Added to the select's outermost element — the box around the trigger and its
|
|
95
|
+
* supporting line. It is not the trigger, and it is not the popup: the popup is
|
|
96
|
+
* portalled out of this element entirely.
|
|
97
|
+
*/
|
|
98
|
+
className?: string;
|
|
99
|
+
style?: React.CSSProperties;
|
|
93
100
|
}
|
|
94
101
|
/**
|
|
95
102
|
* A Material Design select.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as n}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as i}from"../icon/MPIcon.js";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as d,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as x}from"../../internal/surface.js";const v={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/t.forwardRef(function({items:b,value:j,defaultValue:N,onValueChange:y,placeholder:w,label:I,floatingLabel:S=!0,description:k,errorMessage:z,startIcon:P,size:M="md",fullWidth:O=!1,required:V=!1,disabled:q=!1,readOnly:T=!1,name:_,id:C},
|
|
2
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as n}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as i}from"../icon/MPIcon.js";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as d,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as x}from"../../internal/surface.js";const v={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/t.forwardRef(function({items:b,value:j,defaultValue:N,onValueChange:y,placeholder:w,label:I,floatingLabel:S=!0,description:k,errorMessage:z,startIcon:P,size:M="md",fullWidth:O=!1,required:V=!1,disabled:q=!1,readOnly:T=!1,name:_,id:C,className:L,style:R},B){const F=h(z),W=v[M],$=t.useId(),A=C??$,[D,E]=t.useState(N??null),[G,H]=t.useState(!1),J=void 0===j?D:j,{shrunk:K,focusProps:Q}=c({floating:S&&h(I),filled:null!==J&&""!==J,pinned:G||!!P}),U=t.useMemo(()=>b.map(e=>({label:e.label??String(e.value),value:e.value})),[b]);return a(r.Root,{className:["mp-select group flex-col align-top",O?"flex w-full":"inline-flex w-fit",L??""].filter(Boolean).join(" "),style:R,disabled:q,invalid:F,"data-mp-size":M,...Q,children:[a(n.Root,{id:A,name:_,items:U,value:j,defaultValue:N,onValueChange:e=>{E(e??null),y?.(e??null)},onOpenChange:H,disabled:q,readOnly:T,required:V,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:B,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",W.padding,W.height,f[M],q?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(T?"cursor-default":"cursor-pointer")].join(" "),children:[P?e("span",{className:["flex shrink-0 items-center",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:P}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",q?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:K?w:void 0}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:u[M]})})]}),e(d,{label:I,required:V,notched:K}),h(I)?e(s,{size:M,label:I,required:V,htmlFor:A,shrunk:K}):null]}),e(n.Portal,{children:e(n.Positioner,{className:x,sideOffset:4,alignItemWithTrigger:!1,children:e(n.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[M],g].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:b.map((t,r)=>a(n.Item,{value:t.value,disabled:t.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(n.ItemIndicator,{children:e(i,{icon:l,size:18})})}),e(n.ItemText,{className:"min-w-0 flex-1 truncate",children:t.label??String(t.value)})]},`${r}:${String(t.value)}`))})})})})]}),e(p,{description:k,errorMessage:z,className:W.padding})]})});
|
|
@@ -54,6 +54,12 @@ export interface MPSliderProps {
|
|
|
54
54
|
name?: string;
|
|
55
55
|
/** The accessible name, for a slider with no visible `label`. */
|
|
56
56
|
'aria-label'?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Added to the slider's outermost element, which holds the label row as well
|
|
59
|
+
* as the track.
|
|
60
|
+
*/
|
|
61
|
+
className?: string;
|
|
62
|
+
style?: React.CSSProperties;
|
|
57
63
|
}
|
|
58
64
|
/**
|
|
59
65
|
* A Material Design slider.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as
|
|
2
|
+
import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as t}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as i,hasContent as o}from"../../internal/scale.js";const l={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),m={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/r.forwardRef(function({value:d,defaultValue:u,onValueChange:p,onValueCommitted:f,min:h=0,max:g=100,step:x=1,label:b,description:w,showValue:j=!1,format:y,orientation:z="horizontal",size:v="md",color:C="primary",disabled:N=!1,name:_,"aria-label":k,className:V,style:$},A){const B="vertical"===z,I=l[v],L=r.useId(),R=d??u,S=Array.isArray(R)?R.length:1;return s(a.Root,{ref:A,value:d,defaultValue:u,onValueChange:e=>p?.(e),onValueCommitted:e=>f?.(e),min:h,max:g,step:x,disabled:N,orientation:z,format:y,name:_,"data-mp-size":v,className:["mp-slider flex",B?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",N?"cursor-default":"",V??""].filter(Boolean).join(" "),style:{...t(C),...$},children:[o(b)||j?s("div",{className:["flex w-full items-baseline gap-2",i].join(" "),children:[o(b)?e(a.Label,{className:N?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:b}):null,j?e(a.Value,{className:["ms-auto tabular-nums",N?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",B?`${I.stripCross} h-40 flex-col`:`w-full ${I.strip}`,N?"":"cursor-pointer"].filter(Boolean).join(" "),children:s(a.Track,{className:["mp-slider__track rounded-mp-full relative",B?`${I.cross} h-full`:`${I.thickness} w-full`,N?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",N?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:S},(s,r)=>e(a.Thumb,{index:r,"aria-label":o(b)?void 0:k,"aria-describedby":o(w)?L:void 0,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",I.handle,N?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:N?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",m[v],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},r))]})}),o(w)?e("div",{id:L,className:[i,N?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:w}):null]})});
|
|
@@ -59,6 +59,12 @@ export interface MPSwitchProps {
|
|
|
59
59
|
* against the far edge. This is what makes a column of settings line up.
|
|
60
60
|
*/
|
|
61
61
|
fullWidth?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Added to the outermost element — the box around the track, its label and its
|
|
64
|
+
* supporting line, rather than to the track itself.
|
|
65
|
+
*/
|
|
66
|
+
className?: string;
|
|
67
|
+
style?: React.CSSProperties;
|
|
62
68
|
}
|
|
63
69
|
/**
|
|
64
70
|
* A Material Design switch.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const u={xs:{track:"h-5 w-8",thumb:"start-[5px] size-2.5 data-checked:start-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"start-1.5 size-3 data-checked:start-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"start-2 size-4 data-checked:start-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"start-[9px] size-[18px] data-checked:start-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"start-2.5 size-5 data-checked:start-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:b,description:x,errorMessage:y,icons:j=!1,labelPlacement:z="end",size:w="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1},
|
|
2
|
+
import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const u={xs:{track:"h-5 w-8",thumb:"start-[5px] size-2.5 data-checked:start-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"start-1.5 size-3 data-checked:start-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"start-2 size-4 data-checked:start-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"start-[9px] size-[18px] data-checked:start-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"start-2.5 size-5 data-checked:start-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:b,description:x,errorMessage:y,icons:j=!1,labelPlacement:z="end",size:w="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1,className:S,style:W},q){const B=p(y),F=B?"error":N,I=u[w],L=r.useId(),O=P??L,T=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:q,id:O,name:v,checked:f,defaultChecked:g,required:_,disabled:C,readOnly:M,onCheckedChange:e=>k?.(e),className:["mp-switch__track group relative box-border inline-flex shrink-0 p-0","rounded-mp-full appearance-none font-[inherit] outline-none","transition-[background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",I.track,C?["bg-mp-surface-container-highest inset-ring-2 inset-ring-mp-on-surface/12","cursor-default","data-checked:bg-mp-on-surface/12 data-checked:inset-ring-0"].join(" "):[M?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",B?"inset-ring-mp-error":"inset-ring-mp-outline","data-checked:inset-ring-0 data-checked:bg-(--_mp-accent)"].join(" ")].join(" "),children:a(n.Thumb,{className:["mp-switch__thumb absolute top-1/2 flex -translate-y-1/2 items-center justify-center","rounded-full","transition-[inset-inline-start,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",I.thumb,C?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[B?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",I.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),j?a(t,{children:[e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard opacity-0 group-data-checked:opacity-100",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(s,{icon:o,size:I.glyph,strokeWidth:3})}),e("span",{className:["absolute inset-0 flex items-center justify-center","text-mp-surface-container-highest","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-checked:opacity-0"].join(" "),children:e(s,{icon:c,size:I.glyph,strokeWidth:3})})]}):null]})})}),A=p(b)||p(x)||B?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===z?"flex-1":""].filter(Boolean).join(" "),children:[p(b)?a(i.Label,{htmlFor:O,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[b,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:x,errorMessage:y})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex",S??""].filter(Boolean).join(" "),disabled:C,invalid:B,"data-mp-size":w,style:{...l(F),...W},children:e("div",{className:["flex w-full items-start gap-3",m[w]].join(" "),children:a(t,"start"===z?{children:[A,T]}:{children:[T,A]})})})});
|
|
@@ -130,6 +130,14 @@ export interface MPTextFieldProps extends MPStyleProps {
|
|
|
130
130
|
* form-level error that a further edit has made stale.
|
|
131
131
|
*/
|
|
132
132
|
onFormReset?: () => void;
|
|
133
|
+
/**
|
|
134
|
+
* Added to the field's outermost element — the box around the control and its
|
|
135
|
+
* supporting line, rather than to the `<input>` itself. The control carries a
|
|
136
|
+
* type scale of its own, so a `text-*` written here does not reach it; that is
|
|
137
|
+
* what `size` is for.
|
|
138
|
+
*/
|
|
139
|
+
className?: string;
|
|
140
|
+
style?: React.CSSProperties;
|
|
133
141
|
}
|
|
134
142
|
/**
|
|
135
143
|
* A Material Design text field that survives an IME.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon.js";import{MPFieldLabel as r,MPFieldOutline as i,useFloatingLabel as l}from"../../internal/FieldOutline.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{VisibilityIcon as d,VisibilityOffIcon as p}from"../../constants/icons.js";import{useMPLocale as u,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";const f={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:x,name:b,type:g="text",placeholder:y,autoComplete:h,label:v,floatingLabel:w=!0,onChange:j,onFormReset:C,onSubmit:k,errorMessage:z="",required:M=!1,fullWidth:N=!1,readOnly:E=!1,autoFocus:S=!1,size:F="md",disabled:P=!1,disableEnterKey:q=!1,rows:D,maxLength:L,startIcon:R,resizable:B=!1,id:I,locale:O,passwordLabels:K,className:T,style:U},$){const _=u(O),W=c(m,_,K),A=o.useRef(null),[G,H]=o.useState(!1),[J,Q]=o.useState(!1),[V,X]=o.useState(x),Y=o.useId(),Z=I??Y,ee=!!D,te=z.length>0,oe=f[F],ne=J?V:x,{shrunk:ae,focusProps:re}=l({floating:w&&!!v,filled:ne.length>0,pinned:!!R}),ie=o.useCallback(e=>{A.current=e,"function"==typeof $?$(e):$&&($.current=e)},[$]),le=e=>{e.preventDefault()};return o.useEffect(()=>{J||X(x)},[x,J]),o.useEffect(()=>{S&&!window.matchMedia("(max-width: 599.95px)").matches&&A.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",N?"w-full":"inline-block","align-top",T??""].filter(Boolean).join(" "),style:U,disabled:P,invalid:te,"data-mp-size":F,...re,children:[t("div",{className:["relative flex w-full items-center gap-2",oe.padding,ee?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:v,required:M,notched:ae}),R?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:R}):null,e(n.Control,{render:ee?e("textarea",{rows:D}):e("input",{}),id:Z,name:b,type:ee?void 0:G?"text":g,required:M,readOnly:E,disabled:P,autoComplete:h,placeholder:ae?y:void 0,maxLength:L,value:ne,ref:ie,className:[`${oe.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",oe.control,ee?"py-0":"",ee&&B?"resize-y":"resize-none","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{C?.();const t=e.target.value;J&&X(t),j?.(t)},onCompositionStart:()=>{Q(!0),X(x)},onCompositionUpdate:e=>{X(e.target.value)},onCompositionEnd:e=>{Q(!1);const t=e.target.value;C?.(),j?.(t),X(t)},onKeyDown:e=>{if("Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;k?.(),ee&&!q||e.preventDefault()}}}),"password"!==g||ee?null:e("button",{type:"button","aria-label":G?W.hidePassword:W.showPassword,onClick:()=>H(e=>!e),onMouseDown:le,onMouseUp:le,disabled:P,className:["text-mp-on-surface-variant -me-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(a,{icon:G?d:p,size:oe.icon})}),v?e(r,{size:F,label:v,required:M,htmlFor:Z,shrunk:ae,multiline:ee}):null]}),e(s,{errorMessage:z,className:`mp-text-field__support mt-1 ${oe.padding}`})]})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "material-plus-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "A React component library implementing Material Design 3 — the components other Material libraries do not ship, and wider versions of the ones they do. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it can coexist with an existing Material setup. ESM only, types included.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|