@viraui/react 0.0.23 → 0.0.25
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/catalog.json +21 -3
- package/dist/components/avatar/avatar.css +1 -1
- package/dist/components/avatar-group/avatar-group.css +7 -1
- package/dist/components/avatar-group/avatar-group.d.ts +0 -7
- package/dist/components/avatar-group/avatar-group.js +2 -9
- package/dist/components/button/button.css +1 -1
- package/dist/components/button/button.js +1 -1
- package/dist/components/checkbox/checkbox.css +1 -1
- package/dist/components/chip/chip.css +1 -1
- package/dist/components/dialog/dialog-indent-background.d.ts +12 -0
- package/dist/components/dialog/dialog-indent-background.js +11 -0
- package/dist/components/dialog/dialog-indent.d.ts +12 -0
- package/dist/components/dialog/dialog-indent.js +11 -0
- package/dist/components/dialog/dialog.css +1 -1
- package/dist/components/dialog/dialog.d.ts +9 -2
- package/dist/components/dialog/dialog.guide.json +3 -2
- package/dist/components/dialog/dialog.js +6 -1
- package/dist/components/dialog/dialog.module.js +3 -1
- package/dist/components/dialog/index.d.ts +5 -1
- package/dist/components/fieldset/fieldset.js +1 -2
- package/dist/components/index.d.ts +3 -0
- package/dist/components/linear-progress/linear-progress.css +1 -1
- package/dist/components/radio/radio.css +1 -1
- package/dist/components/select/select.css +1 -1
- package/dist/components/separator/index.d.ts +2 -0
- package/dist/components/separator/separator.css +1 -0
- package/dist/components/separator/separator.d.ts +54 -0
- package/dist/components/separator/separator.guide.json +24 -0
- package/dist/components/separator/separator.js +43 -0
- package/dist/components/separator/separator.module.js +3 -0
- package/dist/components/shimmer/index.d.ts +2 -0
- package/dist/components/shimmer/shimmer.css +1 -0
- package/dist/components/shimmer/shimmer.d.ts +43 -0
- package/dist/components/shimmer/shimmer.guide.json +25 -0
- package/dist/components/shimmer/shimmer.js +25 -0
- package/dist/components/shimmer/shimmer.module.js +6 -0
- package/dist/components/skeleton/skeleton.js +4 -4
- package/dist/components/slider/slider.css +1 -1
- package/dist/components/slider/slider.js +1 -1
- package/dist/components/stack/stack.css +1 -1
- package/dist/components/stack/stack.d.ts +1 -1
- package/dist/components/stack/stack.guide.json +7 -3
- package/dist/components/stack/stack.js +2 -2
- package/dist/components/surface/surface.css +1 -1
- package/dist/components/surface/surface.guide.json +5 -3
- package/dist/components/surface/surface.js +4 -4
- package/dist/components/tabs/tabs.css +1 -1
- package/dist/components/text/text.js +1 -1
- package/dist/components/textarea/textarea.css +1 -1
- package/dist/components/textfield/textfield.css +1 -1
- package/dist/components/title/title.js +1 -1
- package/dist/components/toast/index.d.ts +2 -0
- package/dist/components/toast/toast-action.d.ts +9 -0
- package/dist/components/toast/toast-action.js +10 -0
- package/dist/components/toast/toast-banner.d.ts +59 -0
- package/dist/components/toast/toast-banner.js +66 -0
- package/dist/components/toast/toast-viewport.d.ts +17 -0
- package/dist/components/toast/toast-viewport.js +12 -0
- package/dist/components/toast/toast.css +1 -0
- package/dist/components/toast/toast.d.ts +18 -0
- package/dist/components/toast/toast.guide.json +26 -0
- package/dist/components/toast/toast.js +22 -0
- package/dist/components/toast/toast.module.js +7 -0
- package/dist/core/props/intrinsic-vira-props.js +3 -3
- package/dist/index.js +6 -1
- package/dist/preflight.css +1 -1
- package/package.json +13 -5
package/dist/catalog.json
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
{
|
|
24
24
|
"id": "dialog",
|
|
25
25
|
"name": "Dialog",
|
|
26
|
-
"summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`,
|
|
26
|
+
"summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
|
|
27
27
|
"guidePath": "./components/dialog/dialog.guide.json"
|
|
28
28
|
},
|
|
29
29
|
{
|
|
@@ -110,6 +110,18 @@
|
|
|
110
110
|
"summary": "Field-wrapped single-select dropdown with grouped options and field copy.",
|
|
111
111
|
"guidePath": "./components/select/select.guide.json"
|
|
112
112
|
},
|
|
113
|
+
{
|
|
114
|
+
"id": "separator",
|
|
115
|
+
"name": "Separator",
|
|
116
|
+
"summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
|
|
117
|
+
"guidePath": "./components/separator/separator.guide.json"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"id": "shimmer",
|
|
121
|
+
"name": "Shimmer",
|
|
122
|
+
"summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
|
|
123
|
+
"guidePath": "./components/shimmer/shimmer.guide.json"
|
|
124
|
+
},
|
|
113
125
|
{
|
|
114
126
|
"id": "icon",
|
|
115
127
|
"name": "Icon",
|
|
@@ -125,13 +137,13 @@
|
|
|
125
137
|
{
|
|
126
138
|
"id": "stack",
|
|
127
139
|
"name": "Stack",
|
|
128
|
-
"summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding.",
|
|
140
|
+
"summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
|
|
129
141
|
"guidePath": "./components/stack/stack.guide.json"
|
|
130
142
|
},
|
|
131
143
|
{
|
|
132
144
|
"id": "surface",
|
|
133
145
|
"name": "Surface",
|
|
134
|
-
"summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
|
|
146
|
+
"summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
|
|
135
147
|
"guidePath": "./components/surface/surface.guide.json"
|
|
136
148
|
},
|
|
137
149
|
{
|
|
@@ -140,6 +152,12 @@
|
|
|
140
152
|
"summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
|
|
141
153
|
"guidePath": "./components/tabs/tabs.guide.json"
|
|
142
154
|
},
|
|
155
|
+
{
|
|
156
|
+
"id": "toast",
|
|
157
|
+
"name": "Toast",
|
|
158
|
+
"summary": "Transient notification surface with stacked or anchored placement, Banner high-level API, and optional action buttons.",
|
|
159
|
+
"guidePath": "./components/toast/toast.guide.json"
|
|
160
|
+
},
|
|
143
161
|
{
|
|
144
162
|
"id": "spinner",
|
|
145
163
|
"name": "Spinner",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__avatar-module__Avatar_BRuS3{--avatar-size:var(--space-2x-large);--avatar-background:var(--global-contrast);--avatar-foreground:var(--global-foreground);--avatar-radius:var(--radius-
|
|
1
|
+
.viraui__avatar-module__Avatar_BRuS3{--avatar-size:var(--space-2x-large);--avatar-background:var(--global-contrast);--avatar-foreground:var(--global-foreground);--avatar-radius:var(--radius-medium);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);min-inline-size:var(--avatar-size);min-block-size:var(--avatar-size);overflow:hidden;border-radius:var(--avatar-radius);background:var(--avatar-background);color:var(--avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-name:viraui-avatar;container-type:inline-size;&[data-size=x-small]{--avatar-size:var(--space-large)}&[data-size=small]{--avatar-size:var(--space-2x-large)}&[data-size=regular]{--avatar-size:var(--space-wide)}&[data-size=big]{--avatar-size:var(--space-2x-wide)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}.viraui__avatar-module__Label_QASTF{font-size:30cqw}
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
.viraui__avatar-group-module__AvatarGroup_zOrR-{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-
|
|
1
|
+
.viraui__avatar-group-module__AvatarGroup_zOrR-{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-small);--avatar-group-gap-size:var(--space-x-small);--avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--avatar-size:var(--space-large);--avatar-overlap-distance:var(--space-x-small);--avatar-group-gap-size:var(--space-2x-small)}&[data-size=regular]{--avatar-size:var(--space-wide);--avatar-overlap-distance:var(--space-medium);--avatar-group-gap-size:var(--space-x-small)}&[data-size=big]{--avatar-size:var(--space-2x-wide);--avatar-overlap-distance:var(--space-large);--avatar-group-gap-size:var(--space-small)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--avatar-size);block-size:var(--avatar-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--avatar-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--avatar-overlap-distance) * -1)}--avatar-hole-half:calc((var(--avatar-size) / 2) + var(--avatar-group-gap-size));--avatar-hole-r:calc(min(var(--avatar-group-item-radius), var(--avatar-size) / 2) + var(--avatar-group-gap-size));.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(var(--avatar-overlap-distance) - (var(--avatar-size) / 2));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--avatar-hole-cx:50%;--avatar-hole-cy:calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance))}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--avatar-hole-edge:calc((var(--avatar-hole-half) - var(--avatar-hole-r)) * 2);--avatar-hole-corner-inset:calc(var(--avatar-hole-r) * 0.85);@supports (corner-shape:squircle){@container root not style(--corner-shape-enable: initial){--avatar-hole-corner-tr:curve by var(--avatar-hole-r) var(--avatar-hole-r) with var(--avatar-hole-corner-inset) 0px /var(--avatar-hole-r) calc(var(--avatar-hole-r) * 0.15);--avatar-hole-corner-br:curve by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) with 0px var(--avatar-hole-corner-inset) /calc(var(--avatar-hole-r) * -0.15) var(--avatar-hole-r);--avatar-hole-corner-bl:curve by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) with calc(var(--avatar-hole-corner-inset) * -1) 0px /calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -0.15);--avatar-hole-corner-tl:curve by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) with 0px calc(var(--avatar-hole-corner-inset) * -1) /calc(var(--avatar-hole-r) * 0.15) calc(var(--avatar-hole-r) * -1)}}clip-path:shape(evenodd from 0 0,line to 100% 0,line to 100% 100%,line to 0 100%,close,move to calc(var(--avatar-hole-cx) - var(--avatar-hole-half) + var(--avatar-hole-r)) calc(var(--avatar-hole-cy) - var(--avatar-hole-half)),line by var(--avatar-hole-edge) 0,var(--avatar-hole-corner-tr,arc by var(--avatar-hole-r) var(--avatar-hole-r) of var(--avatar-hole-r) cw),line by 0 var(--avatar-hole-edge),var(
|
|
2
|
+
--avatar-hole-corner-br,arc by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) of var(--avatar-hole-r) cw
|
|
3
|
+
),line by calc(var(--avatar-hole-edge) * -1) 0,var(
|
|
4
|
+
--avatar-hole-corner-bl,arc by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
|
|
5
|
+
),line by 0 calc(var(--avatar-hole-edge) * -1),var(
|
|
6
|
+
--avatar-hole-corner-tl,arc by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
|
|
7
|
+
),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--avatar-radius:var(--avatar-group-item-radius)}.viraui__avatar-group-module__OverflowPill_nMmTD{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--avatar-size);block-size:var(--avatar-size)}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { AvatarProps } from '..';
|
|
2
2
|
import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
|
|
3
|
-
import { ThemeTypes } from '@viraui/foundation/vira/types';
|
|
4
3
|
import type * as React from 'react';
|
|
5
4
|
type AvatarGroupAvatarProps = Omit<AvatarProps, 'size' | 'ref'>;
|
|
6
5
|
/**
|
|
@@ -30,12 +29,6 @@ export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & IntrinsicVir
|
|
|
30
29
|
* @default 'horizontal'
|
|
31
30
|
*/
|
|
32
31
|
direction?: 'horizontal' | 'vertical';
|
|
33
|
-
/**
|
|
34
|
-
* Sets the empty visual separation preserved inside the overlap cutout.
|
|
35
|
-
*
|
|
36
|
-
* @default 'x-small'
|
|
37
|
-
*/
|
|
38
|
-
gap?: Extract<ThemeTypes['space'], '2x-small' | 'x-small' | 'small'>;
|
|
39
32
|
/**
|
|
40
33
|
* Limits how many real avatars render before the optional overflow pill is appended.
|
|
41
34
|
*
|
|
@@ -2,7 +2,6 @@ import './avatar-group.css';
|
|
|
2
2
|
import { clsx } from "../../core/clsx.js";
|
|
3
3
|
import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
|
|
4
4
|
import { Avatar } from "../avatar/avatar.js";
|
|
5
|
-
import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
|
|
6
5
|
import avatar_group_module_default from "./avatar-group.module.js";
|
|
7
6
|
import { Stack } from "../stack/stack.js";
|
|
8
7
|
import { Text } from "../text/text.js";
|
|
@@ -10,25 +9,19 @@ import { Surface } from "../surface/surface.js";
|
|
|
10
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
10
|
//#region src/components/avatar-group/avatar-group.tsx
|
|
12
11
|
var getAvatarKey = (avatar, index) => `${avatar.src ?? "fallback"}-${typeof avatar.fallback === "string" ? avatar.fallback : "node"}-${index}`;
|
|
13
|
-
var AvatarGroup = ({ avatars, className, direction = "horizontal",
|
|
12
|
+
var AvatarGroup = ({ avatars, className, direction = "horizontal", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
|
|
14
13
|
const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
|
|
15
14
|
const isOverflowing = typeof maxVisible === "number" && maxVisible > 0 && avatars.length > maxVisible;
|
|
16
15
|
const hasOverflow = isOverflowing && overflowText !== void 0 && overflowText !== null;
|
|
17
16
|
const truncatedAvatars = isOverflowing ? avatars.slice(0, maxVisible) : avatars;
|
|
18
|
-
const dynamicStyle = {
|
|
19
|
-
"--avatar-group-gap-size": resolveThemeValue(gap, "space", "var(--space-x-small)"),
|
|
20
|
-
...style
|
|
21
|
-
};
|
|
22
17
|
return /* @__PURE__ */ jsxs("div", {
|
|
23
18
|
...componentProps,
|
|
24
19
|
...intrinsicAttributes,
|
|
25
20
|
ref,
|
|
26
21
|
className: clsx(avatar_group_module_default.AvatarGroup, className),
|
|
27
22
|
"data-direction": direction,
|
|
28
|
-
"data-gap": gap,
|
|
29
|
-
"data-has-overflow": hasOverflow ? "true" : "false",
|
|
30
23
|
"data-size": size,
|
|
31
|
-
style
|
|
24
|
+
style,
|
|
32
25
|
children: [truncatedAvatars.map((avatar, index) => /* @__PURE__ */ jsx("div", {
|
|
33
26
|
className: avatar_group_module_default.AvatarWrapper,
|
|
34
27
|
children: /* @__PURE__ */ jsx(Avatar, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__button-module__Button_oPhrP{--button-background:var(--global-primary);--button-color:var(--base-1);--button-height:var(--space-x-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-small);--button-spinner-color:currentColor;--button-icon-size:1.125em;--button-radius:var(--radius-medium);-webkit-
|
|
1
|
+
.viraui__button-module__Button_oPhrP{--button-background:var(--global-primary);--button-color:var(--base-1);--button-height:var(--space-x-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-small);--button-spinner-color:currentColor;--button-icon-size:1.125em;--button-radius:var(--radius-medium);-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;max-block-size:var(--button-height);block-size:var(--button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--button-padding-block) var(--button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--button-background);color:var(--button-color);font-size:var(--font-scale-body-medium);border-radius:var(--button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite);&[data-addon-position=end]{padding-inline-end:calc(var(--button-padding-inline) / 2)}&[data-addon-position=start]{padding-inline-start:calc(var(--button-padding-inline) / 2)}}&[data-size=big]{--button-height:var(--space-2x-large);--button-padding-inline:var(--space-medium);--button-padding-block:var(--space-small);--button-icon-size:1.125em;--button-radius:var(--radius-medium)}&[data-size=small]{--button-height:var(--space-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-x-small);--button-icon-size:1em;--button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--button-background:var(--global-primary);--button-color:contrast-color(var(--global-primary));&:hover{--button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--button-background:var(--global-contrast);--button-color:var(--base-6);background-clip:unset;&:hover{--button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}}&[data-variant=flat]{--button-background:#0000;--button-color:var(--base-5);&:hover{--button-background:var(--global-contrast);--button-color:var(--base-7)}}&[data-variant=destructive]{--button-background:oklab(from var(--highlight-red) l a b/12%);--button-color:var(--highlight-red);&:hover{--button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--button-padding-block);padding-inline:var(--button-padding-block);inline-size:var(--button-height);min-inline-size:var(--button-height);max-inline-size:var(--button-height);aspect-ratio:1/1}&:disabled,&:disabled:hover,&[aria-disabled=true]{--button-background:var(--global-disabled-background);--button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--button-icon-size);inline-size:var(--button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" *";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color
|
|
1
|
+
.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" *";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:#0000;--checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:#0000;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.viraui__checkbox-module__Icon_926Sa{stroke:currentColor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__chip-module__Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color
|
|
1
|
+
.viraui__chip-module__Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color:#0000;--chip-color:contrast-color(var(--global-primary));--chip-height:var(--space-large);--chip-icon-size:0.9em;--chip-color-bg-opacity:13%;--chip-color-border-opacity:0%;min-block-size:var(--chip-height);block-size:var(--chip-height);border:1px solid var(--chip-border-color);border-radius:var(--radius-infinite);background:var(--chip-background);color:var(--chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=primary]{--chip-background:var(--global-primary);--chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--chip-background:var(--global-contrast);--chip-color:var(--base-6)}&[data-variant=outline]{--chip-background:#0000;--chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--chip-color:var(--base-6)}&[data-variant=gray]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-gray)}&[data-variant=slate]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-slate)}&[data-variant=yellow]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-yellow)}&[data-variant=green]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-green)}&[data-variant=blue]{--chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity))}&[data-variant=red]{--chip-color:var(--highlight-red)}&[data-variant=cyan]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-cyan)}&[data-variant=purple]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-purple)}&[data-variant=indigo]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-indigo)}&[data-variant=acid]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-acid)}&[data-variant=salmon]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-inline-size:0;min-block-size:100%}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;flex-shrink:0;>svg{inline-size:var(--chip-icon-size);block-size:var(--chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { DrawerIndentBackground } from '@base-ui/react';
|
|
2
|
+
import type * as React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Public Dialog.IndentBackground props.
|
|
5
|
+
*
|
|
6
|
+
* Pass-through to Base UI `Drawer.IndentBackground` with Vira-owned root class applied.
|
|
7
|
+
* Place before `Dialog.Indent` inside `Dialog.Provider` for the indent background layer.
|
|
8
|
+
*
|
|
9
|
+
* @default Base UI pass-through props keep upstream defaults.
|
|
10
|
+
*/
|
|
11
|
+
export type DialogIndentBackgroundProps = DrawerIndentBackground.Props;
|
|
12
|
+
export declare const DialogIndentBackground: React.FC<DialogIndentBackgroundProps>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { clsx } from "../../core/clsx.js";
|
|
2
|
+
import dialog_module_default from "./dialog.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Drawer } from "@base-ui/react";
|
|
5
|
+
//#region src/components/dialog/dialog-indent-background.tsx
|
|
6
|
+
var DialogIndentBackground = ({ className, ...props }) => /* @__PURE__ */ jsx(Drawer.IndentBackground, {
|
|
7
|
+
...props,
|
|
8
|
+
className: clsx(dialog_module_default.IndentBackground, className)
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
export { DialogIndentBackground };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { DrawerIndent } from '@base-ui/react';
|
|
2
|
+
import type * as React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Public Dialog.Indent props.
|
|
5
|
+
*
|
|
6
|
+
* Pass-through to Base UI `Drawer.Indent` with Vira-owned root class applied.
|
|
7
|
+
* Wrap app shell content inside `Dialog.Provider` to receive `data-active` when a sheet opens.
|
|
8
|
+
*
|
|
9
|
+
* @default Base UI pass-through props keep upstream defaults.
|
|
10
|
+
*/
|
|
11
|
+
export type DialogIndentProps = DrawerIndent.Props;
|
|
12
|
+
export declare const DialogIndent: React.FC<DialogIndentProps>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { clsx } from "../../core/clsx.js";
|
|
2
|
+
import dialog_module_default from "./dialog.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Drawer } from "@base-ui/react";
|
|
5
|
+
//#region src/components/dialog/dialog-indent.tsx
|
|
6
|
+
var DialogIndent = ({ className, ...props }) => /* @__PURE__ */ jsx(Drawer.Indent, {
|
|
7
|
+
...props,
|
|
8
|
+
className: clsx(dialog_module_default.Indent, className)
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
export { DialogIndent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__dialog-module__Backdrop_xgFhs{position:fixed;inset:0;z-index:0;transition:opacity var(--duration-fast) var(--easing-standard);backdrop-filter:brightness(90%) blur(5px);opacity:1;&[data-ending-style],&[data-starting-style]{opacity:0}&[data-swiping]{opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--bleed:var(--space-wide);--peek:var(--space-medium);--stack-step:0.05;--stack-progress:clamp(0,var(--drawer-swipe-progress,0),1);--stack-peek-offset:max(0px,calc((var(--nested-drawers, 0) - var(--stack-progress)) * var(--peek)));--stack-scale-base:max(0,calc(1 - var(--nested-drawers, 0) * var(--stack-step)));--stack-scale:clamp(0,calc(var(--stack-scale-base) + var(--stack-step) * var(--stack-progress)),1);--stack-shrink:calc(1 - var(--stack-scale));--stack-height:max(0px,calc(var(--drawer-frontmost-height, var(--drawer-height, 0px)) - var(--bleed)));--translate-y:calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--stack-peek-offset) - var(--stack-shrink) * var(--stack-height));max-block-size:var(--dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--translate-y)) scale(var(--stack-scale));&[data-nested-drawer-open]{height:calc(var(--stack-height) + var(--bleed));overflow:hidden}&[data-starting-style]{opacity:0}&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{transform:translateY(100%)}&[data-nested-drawer-swiping],&[data-swiping]{transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__Handle_nd9SN{margin:0 auto}.viraui__dialog-module__HandleShape_mEg8R{inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:var(--global-contrast);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{flex-shrink:0;touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1}}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}
|
|
1
|
+
.viraui__dialog-module__Backdrop_xgFhs{position:fixed;inset:0;z-index:0;transition:opacity var(--duration-fast) var(--easing-standard);backdrop-filter:brightness(90%) blur(5px);opacity:1;&[data-ending-style],&[data-starting-style]{opacity:0}&[data-swiping]{opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--bleed:var(--space-wide);--peek:var(--space-medium);--stack-step:0.05;--stack-progress:clamp(0,var(--drawer-swipe-progress,0),1);--stack-peek-offset:max(0px,calc((var(--nested-drawers, 0) - var(--stack-progress)) * var(--peek)));--stack-scale-base:max(0,calc(1 - var(--nested-drawers, 0) * var(--stack-step)));--stack-scale:clamp(0,calc(var(--stack-scale-base) + var(--stack-step) * var(--stack-progress)),1);--stack-shrink:calc(1 - var(--stack-scale));--stack-height:max(0px,calc(var(--drawer-frontmost-height, var(--drawer-height, 0px)) - var(--bleed)));--translate-y:calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--stack-peek-offset) - var(--stack-shrink) * var(--stack-height));max-block-size:var(--dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--translate-y)) scale(var(--stack-scale));&[data-nested-drawer-open]{height:calc(var(--stack-height) + var(--bleed));overflow:hidden}&[data-starting-style]{opacity:0}&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{transform:translateY(100%)}&[data-nested-drawer-swiping],&[data-swiping]{transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__Handle_nd9SN{margin:0 auto}.viraui__dialog-module__HandleShape_mEg8R{inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{flex-shrink:0;touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1}}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform .4s cubic-bezier(.32,.72,0,1),border-radius .25s cubic-bezier(.32,.72,0,1);transition-duration:calc(.4s * var(--indent-transition)),calc(.25s * var(--indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--indent-radius);border-top-right-radius:var(--indent-radius)}}
|
|
@@ -1,21 +1,28 @@
|
|
|
1
|
-
import { DrawerRoot } from '@base-ui/react';
|
|
1
|
+
import { Drawer as PrimitiveDrawer, DrawerProvider, DrawerRoot } from '@base-ui/react';
|
|
2
2
|
import { DialogCloseProps } from './dialog-close';
|
|
3
|
+
import { DialogIndentProps } from './dialog-indent';
|
|
4
|
+
import { DialogIndentBackgroundProps } from './dialog-indent-background';
|
|
3
5
|
import { DialogSheetProps } from './dialog-sheet';
|
|
4
6
|
import { DialogTriggerProps } from './dialog-trigger';
|
|
5
7
|
import type * as React from 'react';
|
|
6
8
|
/**
|
|
7
9
|
* Public Dialog root props.
|
|
8
10
|
*
|
|
9
|
-
* Groups `Dialog.Trigger`, `Dialog.Sheet`,
|
|
11
|
+
* Groups `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, `Dialog.Provider`,
|
|
12
|
+
* `Dialog.Indent`, and `Dialog.IndentBackground` under Base UI Drawer parts.
|
|
10
13
|
*
|
|
11
14
|
* @default Base UI pass-through props keep upstream defaults.
|
|
12
15
|
*/
|
|
13
16
|
export type DialogProps = DrawerRoot.Props;
|
|
14
17
|
export type DialogSnapPoint = DrawerRoot.SnapPoint;
|
|
18
|
+
export type DialogProviderProps = DrawerProvider.Props;
|
|
15
19
|
type DialogComponent = React.FC<DialogProps> & {
|
|
16
20
|
Trigger: React.FC<DialogTriggerProps>;
|
|
17
21
|
Sheet: React.FC<DialogSheetProps>;
|
|
18
22
|
Close: React.FC<DialogCloseProps>;
|
|
23
|
+
Provider: typeof PrimitiveDrawer.Provider;
|
|
24
|
+
Indent: React.FC<DialogIndentProps>;
|
|
25
|
+
IndentBackground: React.FC<DialogIndentBackgroundProps>;
|
|
19
26
|
};
|
|
20
27
|
export declare const Dialog: DialogComponent;
|
|
21
28
|
export {};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "Dialog",
|
|
3
|
-
"summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`,
|
|
3
|
+
"summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
|
|
4
4
|
"whenToUse": [
|
|
5
5
|
"Focused tasks or confirmations that interrupt the current page without navigation",
|
|
6
6
|
"Short forms or read-only content that needs a modal layer above the app",
|
|
7
7
|
"Bottom sheets where swipe dismissal or snap points are useful (pass `snapPoints`, `snapPoint`/`onSnapPointChange`, or `defaultSnapPoint` directly on `Dialog`)",
|
|
8
|
-
"Drill-down sheet flows (for example settings sub-pages) by nesting a `Dialog` inside `Dialog.Sheet` children"
|
|
8
|
+
"Drill-down sheet flows (for example settings sub-pages) by nesting a `Dialog` inside `Dialog.Sheet` children",
|
|
9
|
+
"App-shell indent effects by wrapping page content in `Dialog.Provider`, `Dialog.IndentBackground`, and `Dialog.Indent`"
|
|
9
10
|
],
|
|
10
11
|
"whenNotToUse": [
|
|
11
12
|
"Small anchored hints or quick actions that should use Popover or Menu",
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import './dialog.css';
|
|
2
2
|
import { DialogClose } from "./dialog-close.js";
|
|
3
|
+
import { DialogIndent } from "./dialog-indent.js";
|
|
4
|
+
import { DialogIndentBackground } from "./dialog-indent-background.js";
|
|
3
5
|
import { DialogSheet } from "./dialog-sheet.js";
|
|
4
6
|
import { DialogTrigger } from "./dialog-trigger.js";
|
|
5
7
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -12,7 +14,10 @@ var DialogRootComponent = ({ children, ...props }) => /* @__PURE__ */ jsx(Drawer
|
|
|
12
14
|
var Dialog = Object.assign(DialogRootComponent, {
|
|
13
15
|
Trigger: DialogTrigger,
|
|
14
16
|
Sheet: DialogSheet,
|
|
15
|
-
Close: DialogClose
|
|
17
|
+
Close: DialogClose,
|
|
18
|
+
Provider: Drawer.Provider,
|
|
19
|
+
Indent: DialogIndent,
|
|
20
|
+
IndentBackground: DialogIndentBackground
|
|
16
21
|
});
|
|
17
22
|
//#endregion
|
|
18
23
|
export { Dialog };
|
|
@@ -7,7 +7,9 @@ var dialog_module_default = {
|
|
|
7
7
|
Header: "viraui__dialog-module__Header_WnBly",
|
|
8
8
|
Body: "viraui__dialog-module__Body_9-UgN",
|
|
9
9
|
Content: "viraui__dialog-module__Content_r8lJc",
|
|
10
|
-
CloseButton: "viraui__dialog-module__CloseButton_U-B1r"
|
|
10
|
+
CloseButton: "viraui__dialog-module__CloseButton_U-B1r",
|
|
11
|
+
IndentBackground: "viraui__dialog-module__IndentBackground_OEfbh",
|
|
12
|
+
Indent: "viraui__dialog-module__Indent_qfiNW"
|
|
11
13
|
};
|
|
12
14
|
//#endregion
|
|
13
15
|
export { dialog_module_default as default };
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
export { Dialog } from './dialog';
|
|
2
|
-
export type { DialogProps, DialogSnapPoint } from './dialog';
|
|
2
|
+
export type { DialogProps, DialogProviderProps, DialogSnapPoint } from './dialog';
|
|
3
3
|
export { DialogClose } from './dialog-close';
|
|
4
4
|
export type { DialogCloseProps } from './dialog-close';
|
|
5
|
+
export { DialogIndent } from './dialog-indent';
|
|
6
|
+
export type { DialogIndentProps } from './dialog-indent';
|
|
7
|
+
export { DialogIndentBackground } from './dialog-indent-background';
|
|
8
|
+
export type { DialogIndentBackgroundProps } from './dialog-indent-background';
|
|
5
9
|
export { DialogSheet } from './dialog-sheet';
|
|
6
10
|
export type { DialogSheetProps } from './dialog-sheet';
|
|
7
11
|
export { DialogTrigger } from './dialog-trigger';
|
|
@@ -5,14 +5,13 @@ import { FieldLabel } from "../basic-input/field-label.js";
|
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { Fieldset } from "@base-ui/react";
|
|
7
7
|
//#region src/components/fieldset/fieldset.tsx
|
|
8
|
-
var Fieldset$1 = ({ children, className, description, disabled, error, label,
|
|
8
|
+
var Fieldset$1 = ({ children, className, description, disabled, error, label, ...fieldsetRootProps }) => {
|
|
9
9
|
const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(fieldsetRootProps);
|
|
10
10
|
return /* @__PURE__ */ jsxs(Fieldset.Root, {
|
|
11
11
|
...intrinsicAttributes,
|
|
12
12
|
...componentProps,
|
|
13
13
|
className,
|
|
14
14
|
disabled,
|
|
15
|
-
render,
|
|
16
15
|
children: [/* @__PURE__ */ jsxs(Stack, {
|
|
17
16
|
vPadding: [0, "small"],
|
|
18
17
|
rowGap: "small",
|
|
@@ -16,11 +16,14 @@ export * from './checkbox';
|
|
|
16
16
|
export * from './fieldset';
|
|
17
17
|
export * from './radio';
|
|
18
18
|
export * from './select';
|
|
19
|
+
export * from './separator';
|
|
20
|
+
export * from './shimmer';
|
|
19
21
|
export * from './icon';
|
|
20
22
|
export * from './skeleton';
|
|
21
23
|
export * from './stack';
|
|
22
24
|
export * from './surface';
|
|
23
25
|
export * from './tabs';
|
|
26
|
+
export * from './toast';
|
|
24
27
|
export * from './spinner';
|
|
25
28
|
export * from './static-noise';
|
|
26
29
|
export * from './progressive-blur';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__linear-progress-module__LinearProgress_-KN0j{--linear-progress-track-size:var(--space-x-small);--linear-progress-track-background:var(--global-contrast);--linear-progress-indicator-color:var(--global-primary);& .viraui__linear-progress-module__Track_qUz8P{position:relative;overflow:hidden;block-size:var(--linear-progress-track-size);background:var(--linear-progress-track-background);border-radius:var(--radius-infinite)}& .viraui__linear-progress-module__Indicator_maaZF{block-size:100%;background:var(--linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background
|
|
1
|
+
.viraui__linear-progress-module__LinearProgress_-KN0j{--linear-progress-track-size:var(--space-x-small);--linear-progress-track-background:var(--global-contrast);--linear-progress-indicator-color:var(--global-primary);& .viraui__linear-progress-module__Track_qUz8P{position:relative;overflow:hidden;block-size:var(--linear-progress-track-size);background:var(--linear-progress-track-background);border-radius:var(--radius-infinite)}& .viraui__linear-progress-module__Indicator_maaZF{block-size:100%;background:var(--linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:#0000;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--linear-progress-indicator-color);border-radius:inherit;animation:viraui__linear-progress-module__linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes viraui__linear-progress-module__linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__radio-module__RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color
|
|
1
|
+
.viraui__radio-module__RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:#0000;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:#0000;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.viraui__select-module__Select_eXv4Y{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-medium);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);--select-list-appear-offest:8px;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{content:" *";color:var(--highlight-red)}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:var(--select-trigger-padding-inline-start) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color
|
|
1
|
+
.viraui__select-module__Select_eXv4Y{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-medium);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);--select-list-appear-offest:8px;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{content:" *";color:var(--highlight-red)}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:var(--select-trigger-padding-inline-start) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:#0000;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{scale:.96;translate:0 calc(var(--select-list-appear-offest) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{scale:.96;translate:0 var(--select-list-appear-offest)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{scale:.96;translate:var(--select-list-appear-offest) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{scale:.96;translate:calc(var(--select-list-appear-offest) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__OptionText_UynBD{flex:1 1 auto;min-inline-size:0}.viraui__select-module__Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__select-module__Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.viraui__select-module__Group_xzkuA+.viraui__select-module__Group_xzkuA{margin-block-start:var(--space-medium)}.viraui__select-module__Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.viraui__separator-module__Line_xXOe9{--separator-size:1px;border:0;margin:0;background:oklab(from var(--global-contrast) l a b/20%);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--separator-size);block-size:100%}}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
2
|
+
import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
|
|
3
|
+
import { ThemeTypes } from '@viraui/foundation/vira/types';
|
|
4
|
+
import type * as React from 'react';
|
|
5
|
+
type SeparatorAxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
|
|
6
|
+
type SeparatorSize = 'small' | 'medium' | 'large';
|
|
7
|
+
/**
|
|
8
|
+
* Public Separator props.
|
|
9
|
+
*
|
|
10
|
+
* Includes standard `hr` attributes such as `id`, `title`, and event handlers,
|
|
11
|
+
* plus Vira-owned orientation, line thickness, Stack padding, and Base UI `render` support for replacing the line root.
|
|
12
|
+
*
|
|
13
|
+
* @default Native hr pass-through props keep React defaults.
|
|
14
|
+
*/
|
|
15
|
+
export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'hr'>, 'size'> & IntrinsicViraProps & {
|
|
16
|
+
/**
|
|
17
|
+
* Replaces the default `hr` line root using Base UI render semantics.
|
|
18
|
+
*
|
|
19
|
+
* @default The separator renders an `hr` line root.
|
|
20
|
+
*/
|
|
21
|
+
render?: useRender.RenderProp;
|
|
22
|
+
/**
|
|
23
|
+
* Ref forwarded to the rendered line root element.
|
|
24
|
+
*
|
|
25
|
+
* @default No ref is attached.
|
|
26
|
+
*/
|
|
27
|
+
ref?: React.Ref<HTMLElement>;
|
|
28
|
+
/**
|
|
29
|
+
* Sets the separator line direction.
|
|
30
|
+
*
|
|
31
|
+
* @default 'horizontal'
|
|
32
|
+
*/
|
|
33
|
+
orientation?: 'horizontal' | 'vertical';
|
|
34
|
+
/**
|
|
35
|
+
* Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.
|
|
36
|
+
*
|
|
37
|
+
* @default No inline padding.
|
|
38
|
+
*/
|
|
39
|
+
hPadding?: SeparatorAxisPadding;
|
|
40
|
+
/**
|
|
41
|
+
* Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.
|
|
42
|
+
*
|
|
43
|
+
* @default No block padding.
|
|
44
|
+
*/
|
|
45
|
+
vPadding?: SeparatorAxisPadding;
|
|
46
|
+
/**
|
|
47
|
+
* Sets the line thickness preset.
|
|
48
|
+
*
|
|
49
|
+
* @default 'small'
|
|
50
|
+
*/
|
|
51
|
+
size?: SeparatorSize;
|
|
52
|
+
};
|
|
53
|
+
export declare const Separator: React.FC<SeparatorProps>;
|
|
54
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Separator",
|
|
3
|
+
"summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
|
|
4
|
+
"whenToUse": [
|
|
5
|
+
"Dividing sections within a page or panel",
|
|
6
|
+
"Vertical dividers in toolbars, menus, or button groups",
|
|
7
|
+
"Separating list items or stacked content blocks"
|
|
8
|
+
],
|
|
9
|
+
"whenNotToUse": [
|
|
10
|
+
"Select dropdown option dividers — use Select.Separator",
|
|
11
|
+
"Surface borders or card outlines — use Surface border props"
|
|
12
|
+
],
|
|
13
|
+
"accessibility": [
|
|
14
|
+
"Default hr provides a native thematic break for horizontal dividers",
|
|
15
|
+
"Vertical separators expose aria-orientation=\"vertical\" on the line root",
|
|
16
|
+
"Use render to swap the line root when a thematic break is not appropriate",
|
|
17
|
+
"Do not force aria-hidden — consumer decides decorative vs structural role"
|
|
18
|
+
],
|
|
19
|
+
"antiPatterns": [
|
|
20
|
+
"Using Select.Separator for general layout dividers",
|
|
21
|
+
"Replacing Surface borders with Separator for container chrome"
|
|
22
|
+
],
|
|
23
|
+
"related": ["Stack", "Surface", "Select"]
|
|
24
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import './separator.css';
|
|
2
|
+
import { clsx } from "../../core/clsx.js";
|
|
3
|
+
import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
|
|
4
|
+
import { Stack } from "../stack/stack.js";
|
|
5
|
+
import separator_module_default from "./separator.module.js";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
8
|
+
//#region src/components/separator/separator.tsx
|
|
9
|
+
var separatorSizeValues = {
|
|
10
|
+
small: 1,
|
|
11
|
+
medium: 2,
|
|
12
|
+
large: 3
|
|
13
|
+
};
|
|
14
|
+
var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
|
|
15
|
+
const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
|
|
16
|
+
const dynamicStyle = {
|
|
17
|
+
"--separator-size": `${separatorSizeValues[size]}px`,
|
|
18
|
+
...style
|
|
19
|
+
};
|
|
20
|
+
const line = useRender({
|
|
21
|
+
defaultTagName: "hr",
|
|
22
|
+
render,
|
|
23
|
+
ref,
|
|
24
|
+
props: {
|
|
25
|
+
...componentProps,
|
|
26
|
+
"data-separator-orientation": orientation,
|
|
27
|
+
"aria-orientation": orientation,
|
|
28
|
+
className: clsx(separator_module_default.Line, className),
|
|
29
|
+
style: dynamicStyle
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
return /* @__PURE__ */ jsx(Stack, {
|
|
33
|
+
direction: orientation === "vertical" ? "row" : "column",
|
|
34
|
+
fillChildren: false,
|
|
35
|
+
hPadding,
|
|
36
|
+
vAlign: orientation === "vertical" ? "stretch" : "initial",
|
|
37
|
+
vPadding,
|
|
38
|
+
...intrinsicAttributes,
|
|
39
|
+
children: line
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
//#endregion
|
|
43
|
+
export { Separator };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.viraui__shimmer-module__Shimmer_1k-ZM{--shimmer-duration:var(--duration-slowest);--shimmer-spread:calc(3ch + var(--space-2x-large));--shimmer-angle:0deg;--shimmer-base:currentcolor;--shimmer-highlight:oklch(from var(--shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--shimmer-angle)),var(--shimmer-base) calc(50% - var(--shimmer-spread)),color-mix(in oklch,var(--shimmer-highlight),var(--shimmer-base) 50%) calc(50% - var(--shimmer-spread) * .5),var(--shimmer-highlight) 50%,color-mix(in oklch,var(--shimmer-highlight),var(--shimmer-base) 50%) calc(50% + var(--shimmer-spread) * .5),var(--shimmer-base) calc(50% + var(--shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}
|