@viraui/react 2026.0.39 → 2026.1.1
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 +1 -1
- package/dist/components/autocomplete/autocomplete-group.js +0 -1
- package/dist/components/autocomplete/autocomplete.js +0 -1
- package/dist/components/avatar/avatar.css +1 -1
- package/dist/components/avatar/avatar.d.ts +1 -1
- package/dist/components/avatar/avatar.guide.json +1 -1
- package/dist/components/avatar/avatar.js +2 -2
- package/dist/components/avatar-group/avatar-group.css +1 -1
- package/dist/components/button/button-chrome.d.ts +2 -2
- package/dist/components/button/button-chrome.js +1 -1
- package/dist/components/button/button.css +1 -1
- package/dist/components/checkbox/checkbox.css +1 -1
- package/dist/components/checkbox/checkbox.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js +0 -1
- package/dist/components/linear-progress/linear-progress.js +0 -1
- package/dist/components/masonry/masonry.js +0 -1
- package/dist/components/menu/menu-group.js +0 -1
- package/dist/components/menu/menu-radio-group.js +1 -2
- package/dist/components/meter/meter.js +0 -1
- package/dist/components/radio/radio.css +1 -1
- package/dist/components/radio/radio.d.ts +1 -1
- package/dist/components/radio/radio.js +0 -1
- package/dist/components/select/select-group.js +0 -1
- package/dist/components/select/select.js +0 -1
- package/dist/components/slider/slider.js +1 -4
- package/dist/components/spinner/spinner.css +1 -1
- package/dist/components/spinner/spinner.d.ts +2 -2
- package/dist/components/spinner/spinner.js +1 -1
- package/dist/components/switch/switch.d.ts +1 -1
- package/dist/components/switch/switch.guide.json +3 -3
- package/dist/components/switch/switch.js +0 -1
- package/dist/components/textarea/textarea.js +0 -1
- package/dist/components/textfield/textfield.js +0 -1
- package/package.json +2 -2
package/dist/catalog.json
CHANGED
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
{
|
|
210
210
|
"id": "switch",
|
|
211
211
|
"name": "Switch",
|
|
212
|
-
"summary": "Field-wrapped toggle control with
|
|
212
|
+
"summary": "Field-wrapped toggle control with medium or small track and optional field copy.",
|
|
213
213
|
"guidePath": "./components/switch/switch.guide.json"
|
|
214
214
|
},
|
|
215
215
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-small);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-small);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-size:var(--space-wide)}&[data-size=large]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}}@layer viraui.overrides{.viraui__avatar-module__AvatarSkeleton_AnE8Q{border-radius:inherit}.viraui__avatar-module__Label_QASTF{font-size:30cqw}}
|
|
@@ -31,7 +31,7 @@ export type AvatarProps = React.ComponentPropsWithRef<'span'> & {
|
|
|
31
31
|
*
|
|
32
32
|
* @default 'small'
|
|
33
33
|
*/
|
|
34
|
-
size?: 'x-small' | 'small' | '
|
|
34
|
+
size?: 'x-small' | 'small' | 'medium' | 'large';
|
|
35
35
|
/**
|
|
36
36
|
* Replaces the avatar content with a same-size skeleton while image data is still loading upstream.
|
|
37
37
|
*
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"summary": "Circular identity image or fallback for users, entities, or profile chips.",
|
|
6
6
|
"whenToUse": [
|
|
7
7
|
"Show a user or entity photo with text or image fallback",
|
|
8
|
-
"Display profile chips from x-small through
|
|
8
|
+
"Display profile chips from x-small through large sizes",
|
|
9
9
|
"Defer image paint with a loading skeleton placeholder"
|
|
10
10
|
],
|
|
11
11
|
"whenNotToUse": ["Interactive controls or navigation", "Non-identity imagery without a fallback plan"],
|
|
@@ -9,8 +9,8 @@ import { Avatar } from "@base-ui/react/avatar";
|
|
|
9
9
|
var fallbackTextSizeByAvatarSize = {
|
|
10
10
|
"x-small": "x-small",
|
|
11
11
|
small: "x-small",
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
medium: "small",
|
|
13
|
+
large: "large"
|
|
14
14
|
};
|
|
15
15
|
var Avatar$1 = ({ alt = "", className, fallback, loading = false, ref, size = "small", src, ...otherProps }) => {
|
|
16
16
|
const hasImage = Boolean(src);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__avatar-group-hole-half{syntax:"<length>";inherits:false;initial-value:0}@property --__avatar-group-hole-r{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cx{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cy{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-corner-tl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-tr{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-br{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-bl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-inset{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-edge{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-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]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__avatar-group-hole-half{syntax:"<length>";inherits:false;initial-value:0}@property --__avatar-group-hole-r{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cx{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cy{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-corner-tl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-tr{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-br{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-bl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-inset{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-edge{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-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]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=large]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-x-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--__avatar-group-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--__avatar-group-hole-r:calc(min(var(--vui-avatar-group-item-radius), var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--__avatar-group-hole-cx:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance));--__avatar-group-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--__avatar-group-hole-cx:calc(var(--vui-avatar-group-overlap-distance) - (var(--vui-avatar-group-size) / 2));--__avatar-group-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--__avatar-group-hole-cx:50%;--__avatar-group-hole-cy:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance))}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--__avatar-group-hole-edge:calc((var(--__avatar-group-hole-half) - var(--__avatar-group-hole-r)) * 2);--__avatar-group-hole-corner-inset:calc(var(--__avatar-group-hole-r) * 0.85);--__avatar-group-hole-corner-tr:arc by var(--__avatar-group-hole-r) var(--__avatar-group-hole-r) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-br:arc by calc(var(--__avatar-group-hole-r) * -1) var(--__avatar-group-hole-r) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-bl:arc by calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -1) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-tl:arc by var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * -1) of var(--__avatar-group-hole-r) cw;@supports (corner-shape:squircle){@container root not style(--effect-corner-shape: initial){--__avatar-group-hole-corner-tr:curve by var(--__avatar-group-hole-r) var(--__avatar-group-hole-r) with var(--__avatar-group-hole-corner-inset) 0px /var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * 0.15);--__avatar-group-hole-corner-br:curve by calc(var(--__avatar-group-hole-r) * -1) var(--__avatar-group-hole-r) with 0px var(--__avatar-group-hole-corner-inset) /calc(var(--__avatar-group-hole-r) * -0.15) var(--__avatar-group-hole-r);--__avatar-group-hole-corner-bl:curve by calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -1) with calc(var(--__avatar-group-hole-corner-inset) * -1) 0px /calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -0.15);--__avatar-group-hole-corner-tl:curve by var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * -1) with 0px calc(var(--__avatar-group-hole-corner-inset) * -1) /calc(var(--__avatar-group-hole-r) * 0.15) calc(var(--__avatar-group-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-group-hole-cx) - var(--__avatar-group-hole-half) + var(--__avatar-group-hole-r)) calc(var(--__avatar-group-hole-cy) - var(--__avatar-group-hole-half)),line by var(--__avatar-group-hole-edge) 0,var(--__avatar-group-hole-corner-tr),line by 0 var(--__avatar-group-hole-edge),var(--__avatar-group-hole-corner-br),line by calc(var(--__avatar-group-hole-edge) * -1) 0,var(--__avatar-group-hole-corner-bl),line by 0 calc(var(--__avatar-group-hole-edge) * -1),var(--__avatar-group-hole-corner-tl),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__OverflowPill_nMmTD{min-inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size)}}@layer viraui.overrides{.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--vui-avatar-radius:var(--vui-avatar-group-item-radius)}.viraui__avatar-group-module__OverflowPill_nMmTD{--vui-surface-border-radius-top-left:var(--vui-avatar-group-item-radius);--vui-surface-border-radius-top-right:var(--vui-avatar-group-item-radius);--vui-surface-border-radius-bottom-right:var(--vui-avatar-group-item-radius);--vui-surface-border-radius-bottom-left:var(--vui-avatar-group-item-radius)}}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
export type ButtonSize = '
|
|
3
|
+
export type ButtonSize = 'large' | 'medium' | 'small';
|
|
4
4
|
export type ButtonVariant = 'primary' | 'secondary' | 'flat' | 'destructive';
|
|
5
5
|
export type ButtonAddonPosition = 'start' | 'end';
|
|
6
|
-
export declare const spinnerDimensionsBySize: Record<ButtonSize, 'small' | '
|
|
6
|
+
export declare const spinnerDimensionsBySize: Record<ButtonSize, 'small' | 'medium'>;
|
|
7
7
|
type ButtonChromeRootAttrsParams = {
|
|
8
8
|
addon?: ReactNode;
|
|
9
9
|
addonPosition: ButtonAddonPosition;
|
|
@@ -7,7 +7,7 @@ import "react";
|
|
|
7
7
|
var spinnerDimensionsBySize = {
|
|
8
8
|
small: "small",
|
|
9
9
|
medium: "small",
|
|
10
|
-
|
|
10
|
+
large: "medium"
|
|
11
11
|
};
|
|
12
12
|
function getButtonChromeRootAttrs({ addon, addonPosition, className, isDisabled, isIconOnly, loading, pill, size, variant }) {
|
|
13
13
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-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;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-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;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-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(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{max-block-size:min-content;&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-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(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{max-block-size:min-content;&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-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(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=medium]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-foreground)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-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(--vui-checkbox-indicator-color);inline-size:100%;block-size:100%}.viraui__checkbox-module__CheckIcon_XqUcs,.viraui__checkbox-module__MinusIcon_Q57pY{inline-size:75%;block-size:75%;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}}
|
|
@@ -40,7 +40,6 @@ var Checkbox$1 = ({ className, description, disabled, error, label, ref, size =
|
|
|
40
40
|
})]
|
|
41
41
|
})
|
|
42
42
|
}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
|
|
43
|
-
direction: "column",
|
|
44
43
|
rowGap: "small",
|
|
45
44
|
children: [label ? /* @__PURE__ */ jsx(FieldLabel, {
|
|
46
45
|
size: size === "small" ? "small" : "medium",
|
|
@@ -15,7 +15,6 @@ var LinearProgress = ({ className, description, label, renderValue, value, ref,
|
|
|
15
15
|
className: clsx(linear_progress_module_default.LinearProgress, className),
|
|
16
16
|
value,
|
|
17
17
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
18
|
-
direction: "column",
|
|
19
18
|
rowGap: "medium",
|
|
20
19
|
columnGap: "x-small"
|
|
21
20
|
}),
|
|
@@ -69,7 +69,6 @@ var MasonryRoot = ({ children, className, breakpointCols = DEFAULT_BREAKPOINT_CO
|
|
|
69
69
|
className: clsx(masonry_module_default.Masonry, className),
|
|
70
70
|
style: dynamicStyle,
|
|
71
71
|
children: columns.map((column) => /* @__PURE__ */ jsx(Stack, {
|
|
72
|
-
direction: "column",
|
|
73
72
|
rowGap: gap,
|
|
74
73
|
children: column.children
|
|
75
74
|
}, column.key))
|
|
@@ -7,7 +7,6 @@ var MenuRadioGroup = ({ children, className, label, ...otherProps }) => /* @__PU
|
|
|
7
7
|
...otherProps,
|
|
8
8
|
className,
|
|
9
9
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
10
|
-
direction: "column",
|
|
11
10
|
rowGap: "2x-small",
|
|
12
11
|
vPadding: "2x-small"
|
|
13
12
|
}),
|
|
@@ -17,7 +16,7 @@ var MenuRadioGroup = ({ children, className, label, ...otherProps }) => /* @__PU
|
|
|
17
16
|
direction: "row",
|
|
18
17
|
hPadding: "small",
|
|
19
18
|
vAlign: "center",
|
|
20
|
-
vPadding: ["small", "small"]
|
|
19
|
+
vPadding: ["small", "x-small"]
|
|
21
20
|
}),
|
|
22
21
|
children: /* @__PURE__ */ jsx(Text, {
|
|
23
22
|
size: "x-small",
|
|
@@ -14,7 +14,6 @@ var Meter$1 = ({ className, description, label, renderValue, value, ...otherProp
|
|
|
14
14
|
className: clsx(meter_module_default.Meter, className),
|
|
15
15
|
value,
|
|
16
16
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
17
|
-
direction: "column",
|
|
18
17
|
rowGap: "medium",
|
|
19
18
|
columnGap: "x-small"
|
|
20
19
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest,var(--vui-radio-size),2px);--__radio-disk-size:round(down,calc(var(--__radio-size) / 2),2px);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(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest,var(--vui-radio-size),2px);--__radio-disk-size:round(down,calc(var(--__radio-size) / 2),2px);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(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=medium]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-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] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-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(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}
|
|
@@ -31,7 +31,6 @@ var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small
|
|
|
31
31
|
children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
|
|
32
32
|
})
|
|
33
33
|
}), label || description ? /* @__PURE__ */ jsxs(Stack, {
|
|
34
|
-
direction: "column",
|
|
35
34
|
rowGap: "small",
|
|
36
35
|
children: [label && /* @__PURE__ */ jsx(FieldLabel, {
|
|
37
36
|
size: size === "small" ? "small" : "medium",
|
|
@@ -24,10 +24,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
|
|
|
24
24
|
validate,
|
|
25
25
|
validationDebounceTime,
|
|
26
26
|
validationMode,
|
|
27
|
-
render: /* @__PURE__ */ jsx(Stack, {
|
|
28
|
-
direction: "column",
|
|
29
|
-
rowGap: "small"
|
|
30
|
-
}),
|
|
27
|
+
render: /* @__PURE__ */ jsx(Stack, { rowGap: "small" }),
|
|
31
28
|
children: [/* @__PURE__ */ jsxs(Slider.Root, {
|
|
32
29
|
...sliderRootProps,
|
|
33
30
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-spinner-size{syntax:"<length>";inherits:false;initial-value:0}.viraui__spinner-module__Spinner_qCQzj{--vui-spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--vui-spinner-size);block-size:var(--vui-spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--vui-spinner-size:var(--space-medium)}&[data-dimension=
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-spinner-size{syntax:"<length>";inherits:false;initial-value:0}.viraui__spinner-module__Spinner_qCQzj{--vui-spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--vui-spinner-size);block-size:var(--vui-spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--vui-spinner-size:var(--space-medium)}&[data-dimension=medium]{--vui-spinner-size:var(--space-large)}}}
|
|
@@ -4,9 +4,9 @@ export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
|
|
|
4
4
|
/**
|
|
5
5
|
* Sets the rendered spinner size.
|
|
6
6
|
*
|
|
7
|
-
* @default '
|
|
7
|
+
* @default 'large'
|
|
8
8
|
*/
|
|
9
|
-
size?: 'small' | '
|
|
9
|
+
size?: 'small' | 'medium' | 'large';
|
|
10
10
|
/**
|
|
11
11
|
* Overrides the spinner fill color.
|
|
12
12
|
*
|
|
@@ -12,7 +12,7 @@ import { Suspense } from "react";
|
|
|
12
12
|
* set `aria-hidden` on decorative instances and expose loading status through
|
|
13
13
|
* the surrounding control or region.
|
|
14
14
|
*/
|
|
15
|
-
var Spinner = ({ className, color, size = "
|
|
15
|
+
var Spinner = ({ className, color, size = "large", variant = "bars", ref, style, ...otherProps }) => {
|
|
16
16
|
const Glyph = SPINNER_GLYPHS[variant];
|
|
17
17
|
const glyph = /* @__PURE__ */ jsx(Glyph, {});
|
|
18
18
|
return /* @__PURE__ */ jsx("svg", {
|
|
@@ -36,7 +36,7 @@ export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
|
|
|
36
36
|
*
|
|
37
37
|
* @default 'small'
|
|
38
38
|
*/
|
|
39
|
-
size?: '
|
|
39
|
+
size?: 'medium' | 'small';
|
|
40
40
|
/**
|
|
41
41
|
* Sets block padding using one token for both sides or a `[start, end]` tuple.
|
|
42
42
|
*
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
"name": "Switch",
|
|
3
3
|
"baseUIApi": "https://base-ui.com/react/components/switch#api-reference",
|
|
4
4
|
"structure": "<Switch label=\"…\" />",
|
|
5
|
-
"summary": "Field-wrapped toggle control with
|
|
5
|
+
"summary": "Field-wrapped toggle control with medium or small track and optional field copy.",
|
|
6
6
|
"whenToUse": [
|
|
7
7
|
"Boolean on/off settings with optional label and helper text",
|
|
8
|
-
"Compact small or
|
|
8
|
+
"Compact small or medium track sizes",
|
|
9
9
|
"Invalid and disabled states with Textfield-parity focus treatment"
|
|
10
10
|
],
|
|
11
11
|
"whenNotToUse": [
|
|
12
12
|
"Unlabeled switch without aria-label on the root",
|
|
13
|
-
"Expecting size or variant beyond
|
|
13
|
+
"Expecting size or variant beyond medium and small"
|
|
14
14
|
],
|
|
15
15
|
"accessibility": [
|
|
16
16
|
"Provide visible label or aria-label so the switch has an accessible name",
|
|
@@ -43,7 +43,6 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
|
|
|
43
43
|
ref,
|
|
44
44
|
children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.Thumb })
|
|
45
45
|
}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
|
|
46
|
-
direction: "column",
|
|
47
46
|
rowGap: "small",
|
|
48
47
|
children: [label && /* @__PURE__ */ jsx(FieldLabel, {
|
|
49
48
|
size: size === "small" ? "small" : "medium",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.
|
|
3
|
+
"version": "2026.1.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,7 +35,7 @@
|
|
|
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.
|
|
38
|
+
"@viraui/foundation": "2026.1.1",
|
|
39
39
|
"@viraui/icons": "2026.0.1",
|
|
40
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
41
|
"@viraui/tsconfig": "2026.0.0"
|