@viraui/react 2026.0.33 → 2026.0.35
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/dist/components/basic-input/basic-input.css +1 -1
- package/dist/components/basic-input/field-label.css +1 -1
- package/dist/components/dialog/dialog-modal-context.d.ts +4 -0
- package/dist/components/dialog/dialog-modal-context.js +7 -0
- package/dist/components/dialog/dialog-sheet.js +79 -75
- package/dist/components/dialog/dialog.guide.json +2 -1
- package/dist/components/dialog/dialog.js +8 -3
- package/dist/components/slider/slider.css +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:calc(var(--space-small) + var(--space-x-small));--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}}@layer viraui.overrides{.viraui__field-label-module__FieldLabel_R9SYf{padding-inline-start:var(--vui-field-label-padding-inline)}}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
//#region src/components/dialog/dialog-modal-context.ts
|
|
4
|
+
var DialogModalContext = createContext(true);
|
|
5
|
+
var useDialogModal = () => useContext(DialogModalContext);
|
|
6
|
+
//#endregion
|
|
7
|
+
export { DialogModalContext, useDialogModal };
|
|
@@ -2,6 +2,7 @@ import { ChromeXmark } from "../../internal/chrome-icons/chrome-icons.js";
|
|
|
2
2
|
import { Text } from "../text/text.js";
|
|
3
3
|
import { Stack } from "../stack/stack.js";
|
|
4
4
|
import dialog_module_default from "./dialog.module.js";
|
|
5
|
+
import { useDialogModal } from "./dialog-modal-context.js";
|
|
5
6
|
import { Elevator } from "../elevator/elevator.js";
|
|
6
7
|
import { Surface } from "../surface/surface.js";
|
|
7
8
|
import { IconButton } from "../icon-button/icon-button.js";
|
|
@@ -9,85 +10,88 @@ import { Title } from "../title/title.js";
|
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
11
|
import { Drawer } from "@base-ui/react";
|
|
11
12
|
//#region src/components/dialog/dialog-sheet.tsx
|
|
12
|
-
var DialogSheet = ({ children, description, title, showCloseButton = false, fitContent = false, showHandle = true, headerAlign = "start", maxContentWidth = "50ch", maxHeight = "97dvh", container }) =>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
children: /* @__PURE__ */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
render: /* @__PURE__ */ jsx(
|
|
30
|
-
|
|
31
|
-
|
|
13
|
+
var DialogSheet = ({ children, description, title, showCloseButton = false, fitContent = false, showHandle = true, headerAlign = "start", maxContentWidth = "50ch", maxHeight = "97dvh", container }) => {
|
|
14
|
+
const modal = useDialogModal();
|
|
15
|
+
return /* @__PURE__ */ jsxs(Drawer.Portal, {
|
|
16
|
+
container,
|
|
17
|
+
children: [modal === true && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: dialog_module_default.Backdrop }), /* @__PURE__ */ jsx(Drawer.Viewport, {
|
|
18
|
+
render: /* @__PURE__ */ jsx(Stack, {
|
|
19
|
+
vAlign: "end",
|
|
20
|
+
hPadding: "small",
|
|
21
|
+
vPadding: "small",
|
|
22
|
+
hAlign: fitContent ? "center" : void 0
|
|
23
|
+
}),
|
|
24
|
+
className: dialog_module_default.Viewport,
|
|
25
|
+
children: /* @__PURE__ */ jsx(Elevator, {
|
|
26
|
+
resting: 4,
|
|
27
|
+
children: /* @__PURE__ */ jsxs(Drawer.Popup, {
|
|
28
|
+
className: dialog_module_default.Popup,
|
|
29
|
+
style: { "--vui-dialog-max-block-size": maxHeight },
|
|
30
|
+
render: /* @__PURE__ */ jsx(Surface, {
|
|
31
|
+
border: "top",
|
|
32
|
+
render: /* @__PURE__ */ jsx(Stack, {
|
|
33
|
+
fillChildren: true,
|
|
34
|
+
hAlign: "center"
|
|
35
|
+
}),
|
|
36
|
+
color: 1,
|
|
37
|
+
"data-vibrant": true,
|
|
38
|
+
radius: "large",
|
|
39
|
+
vPadding: ["medium", 0]
|
|
32
40
|
}),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
41
|
+
children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
|
|
42
|
+
fillChildren: true,
|
|
43
|
+
inline: true,
|
|
44
|
+
direction: "row",
|
|
45
|
+
vPadding: [0, "medium"],
|
|
46
|
+
columnGap: "small",
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
|
|
49
|
+
/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
|
|
50
|
+
/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
|
|
51
|
+
]
|
|
52
|
+
}), /* @__PURE__ */ jsxs(Stack, {
|
|
53
|
+
fillChildren: true,
|
|
54
|
+
maxWidth: maxContentWidth,
|
|
55
|
+
rowGap: "large",
|
|
56
|
+
className: dialog_module_default.Body,
|
|
57
|
+
children: [/* @__PURE__ */ jsxs(Stack, {
|
|
58
|
+
className: dialog_module_default.Header,
|
|
59
|
+
"data-shrink": "false",
|
|
60
|
+
hAlign: headerAlign,
|
|
61
|
+
hPadding: "medium",
|
|
62
|
+
children: [/* @__PURE__ */ jsx(Drawer.Title, {
|
|
63
|
+
render: /* @__PURE__ */ jsx(Title, {
|
|
64
|
+
align: headerAlign,
|
|
65
|
+
size: "4"
|
|
66
|
+
}),
|
|
67
|
+
children: title
|
|
68
|
+
}), description && /* @__PURE__ */ jsx(Drawer.Description, {
|
|
69
|
+
render: /* @__PURE__ */ jsx(Text, {
|
|
70
|
+
align: headerAlign,
|
|
71
|
+
tone: "muted",
|
|
72
|
+
render: /* @__PURE__ */ jsx("p", {})
|
|
73
|
+
}),
|
|
74
|
+
children: description
|
|
75
|
+
})]
|
|
76
|
+
}), /* @__PURE__ */ jsxs(Drawer.Content, {
|
|
77
|
+
render: /* @__PURE__ */ jsx(Stack, {
|
|
78
|
+
vAlign: "start",
|
|
79
|
+
className: dialog_module_default.Content
|
|
70
80
|
}),
|
|
71
|
-
children:
|
|
81
|
+
children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
|
|
82
|
+
className: dialog_module_default.CloseButton,
|
|
83
|
+
render: /* @__PURE__ */ jsx(IconButton, {
|
|
84
|
+
"aria-label": "Close dialog",
|
|
85
|
+
icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
|
|
86
|
+
variant: "flat"
|
|
87
|
+
})
|
|
88
|
+
}), children]
|
|
72
89
|
})]
|
|
73
|
-
}), /* @__PURE__ */ jsxs(Drawer.Content, {
|
|
74
|
-
render: /* @__PURE__ */ jsx(Stack, {
|
|
75
|
-
vAlign: "start",
|
|
76
|
-
className: dialog_module_default.Content
|
|
77
|
-
}),
|
|
78
|
-
children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
|
|
79
|
-
className: dialog_module_default.CloseButton,
|
|
80
|
-
render: /* @__PURE__ */ jsx(IconButton, {
|
|
81
|
-
"aria-label": "Close dialog",
|
|
82
|
-
icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
|
|
83
|
-
variant: "flat"
|
|
84
|
-
})
|
|
85
|
-
}), children]
|
|
86
90
|
})]
|
|
87
|
-
})
|
|
91
|
+
})
|
|
88
92
|
})
|
|
89
|
-
})
|
|
90
|
-
})
|
|
91
|
-
}
|
|
93
|
+
})]
|
|
94
|
+
});
|
|
95
|
+
};
|
|
92
96
|
//#endregion
|
|
93
97
|
export { DialogSheet };
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
"accessibility": [
|
|
20
20
|
"Always pass `title`; add `description` when the heading alone is not enough context",
|
|
21
21
|
"Compose `Dialog.Close` with an accessible name when a visible close control is needed",
|
|
22
|
-
"Use `Dialog.Close` for footer actions that should dismiss the sheet"
|
|
22
|
+
"Use `Dialog.Close` for footer actions that should dismiss the sheet",
|
|
23
|
+
"For non-modal Dialogs (`modal={false}` with `disablePointerDismissal`), the Sheet backdrop is omitted automatically — do not expect a scrim"
|
|
23
24
|
],
|
|
24
25
|
"antiPatterns": [
|
|
25
26
|
"Opening a sheet without `title` copy for assistive technologies",
|
|
@@ -2,15 +2,20 @@ import './dialog.css';
|
|
|
2
2
|
import { DialogClose } from "./dialog-close.js";
|
|
3
3
|
import { DialogIndent } from "./dialog-indent.js";
|
|
4
4
|
import { DialogIndentBackground } from "./dialog-indent-background.js";
|
|
5
|
+
import { DialogModalContext } from "./dialog-modal-context.js";
|
|
5
6
|
import { DialogSheet } from "./dialog-sheet.js";
|
|
6
7
|
import { DialogTrigger } from "./dialog-trigger.js";
|
|
7
8
|
import { jsx } from "react/jsx-runtime";
|
|
8
9
|
import { Drawer } from "@base-ui/react";
|
|
9
10
|
//#region src/components/dialog/dialog.tsx
|
|
10
11
|
var { Portal: _DialogPortal, Backdrop: _DialogBackdrop, Viewport: _DialogViewport, Popup: _DialogPopup, Title: _DialogTitle, Description: _DialogDescription, Content: _DialogContent, SwipeArea: _DialogSwipeArea, VirtualKeyboardProvider: _DialogVirtualKeyboardProvider, createHandle: _DialogCreateHandle, Handle: _DialogHandle, Root: _DialogRoot, ...primitiveDrawer } = Drawer;
|
|
11
|
-
var DialogRootComponent = ({ children, ...otherProps }) => /* @__PURE__ */ jsx(
|
|
12
|
-
|
|
13
|
-
children
|
|
12
|
+
var DialogRootComponent = ({ children, modal = true, ...otherProps }) => /* @__PURE__ */ jsx(DialogModalContext.Provider, {
|
|
13
|
+
value: modal,
|
|
14
|
+
children: /* @__PURE__ */ jsx(Drawer.Root, {
|
|
15
|
+
modal,
|
|
16
|
+
...otherProps,
|
|
17
|
+
children
|
|
18
|
+
})
|
|
14
19
|
});
|
|
15
20
|
var Dialog = Object.assign(DialogRootComponent, {
|
|
16
21
|
...primitiveDrawer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:12px;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:calc(100% - max(8px, var(--radius-small)));appearance:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:var(--vui-slider-thumb-size);block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.0.
|
|
3
|
+
"version": "2026.0.35",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"unplugin-dts": "1.0.3",
|
|
36
36
|
"vite": "8.1.4",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.0.33",
|
|
39
38
|
"@viraui/icons": "2026.0.1",
|
|
40
39
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
|
-
"@viraui/tsconfig": "2026.0.0"
|
|
40
|
+
"@viraui/tsconfig": "2026.0.0",
|
|
41
|
+
"@viraui/foundation": "2026.0.35"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@base-ui/react": ">=1.6.0",
|