@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.
Files changed (67) hide show
  1. package/dist/catalog.json +21 -3
  2. package/dist/components/avatar/avatar.css +1 -1
  3. package/dist/components/avatar-group/avatar-group.css +7 -1
  4. package/dist/components/avatar-group/avatar-group.d.ts +0 -7
  5. package/dist/components/avatar-group/avatar-group.js +2 -9
  6. package/dist/components/button/button.css +1 -1
  7. package/dist/components/button/button.js +1 -1
  8. package/dist/components/checkbox/checkbox.css +1 -1
  9. package/dist/components/chip/chip.css +1 -1
  10. package/dist/components/dialog/dialog-indent-background.d.ts +12 -0
  11. package/dist/components/dialog/dialog-indent-background.js +11 -0
  12. package/dist/components/dialog/dialog-indent.d.ts +12 -0
  13. package/dist/components/dialog/dialog-indent.js +11 -0
  14. package/dist/components/dialog/dialog.css +1 -1
  15. package/dist/components/dialog/dialog.d.ts +9 -2
  16. package/dist/components/dialog/dialog.guide.json +3 -2
  17. package/dist/components/dialog/dialog.js +6 -1
  18. package/dist/components/dialog/dialog.module.js +3 -1
  19. package/dist/components/dialog/index.d.ts +5 -1
  20. package/dist/components/fieldset/fieldset.js +1 -2
  21. package/dist/components/index.d.ts +3 -0
  22. package/dist/components/linear-progress/linear-progress.css +1 -1
  23. package/dist/components/radio/radio.css +1 -1
  24. package/dist/components/select/select.css +1 -1
  25. package/dist/components/separator/index.d.ts +2 -0
  26. package/dist/components/separator/separator.css +1 -0
  27. package/dist/components/separator/separator.d.ts +54 -0
  28. package/dist/components/separator/separator.guide.json +24 -0
  29. package/dist/components/separator/separator.js +43 -0
  30. package/dist/components/separator/separator.module.js +3 -0
  31. package/dist/components/shimmer/index.d.ts +2 -0
  32. package/dist/components/shimmer/shimmer.css +1 -0
  33. package/dist/components/shimmer/shimmer.d.ts +43 -0
  34. package/dist/components/shimmer/shimmer.guide.json +25 -0
  35. package/dist/components/shimmer/shimmer.js +25 -0
  36. package/dist/components/shimmer/shimmer.module.js +6 -0
  37. package/dist/components/skeleton/skeleton.js +4 -4
  38. package/dist/components/slider/slider.css +1 -1
  39. package/dist/components/slider/slider.js +1 -1
  40. package/dist/components/stack/stack.css +1 -1
  41. package/dist/components/stack/stack.d.ts +1 -1
  42. package/dist/components/stack/stack.guide.json +7 -3
  43. package/dist/components/stack/stack.js +2 -2
  44. package/dist/components/surface/surface.css +1 -1
  45. package/dist/components/surface/surface.guide.json +5 -3
  46. package/dist/components/surface/surface.js +4 -4
  47. package/dist/components/tabs/tabs.css +1 -1
  48. package/dist/components/text/text.js +1 -1
  49. package/dist/components/textarea/textarea.css +1 -1
  50. package/dist/components/textfield/textfield.css +1 -1
  51. package/dist/components/title/title.js +1 -1
  52. package/dist/components/toast/index.d.ts +2 -0
  53. package/dist/components/toast/toast-action.d.ts +9 -0
  54. package/dist/components/toast/toast-action.js +10 -0
  55. package/dist/components/toast/toast-banner.d.ts +59 -0
  56. package/dist/components/toast/toast-banner.js +66 -0
  57. package/dist/components/toast/toast-viewport.d.ts +17 -0
  58. package/dist/components/toast/toast-viewport.js +12 -0
  59. package/dist/components/toast/toast.css +1 -0
  60. package/dist/components/toast/toast.d.ts +18 -0
  61. package/dist/components/toast/toast.guide.json +26 -0
  62. package/dist/components/toast/toast.js +22 -0
  63. package/dist/components/toast/toast.module.js +7 -0
  64. package/dist/core/props/intrinsic-vira-props.js +3 -3
  65. package/dist/index.js +6 -1
  66. package/dist/preflight.css +1 -1
  67. 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`, and `Dialog.Close`, Surface panel, scrim backdrop, title, description, and swipe-to-dismiss.",
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-infinite);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
+ .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-medium);--avatar-group-gap-size:var(--space-x-small);--avatar-mask-anti-alias-size:0.5px;--avatar-mask-radius:calc((var(--avatar-size) / 2) + var(--avatar-group-gap-size));display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=horizontal]{flex-direction:row}&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--avatar-size:var(--space-large);--avatar-overlap-distance:var(--space-x-small)}&[data-size=small]{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-small)}&[data-size=regular]{--avatar-size:var(--space-wide);--avatar-overlap-distance:var(--space-medium)}&[data-size=big]{--avatar-size:var(--space-2x-wide);--avatar-overlap-distance:var(--space-large)}}.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)}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc((var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at 50% calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)),transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto;min-inline-size:var(--avatar-size)}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--avatar-radius:100%;corner-shape:unset}.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);min-block-size:var(--avatar-size);corner-shape:unset}
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", gap = "x-small", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
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: dynamicStyle,
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-touch-callout:none;-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 transparent;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:transparent;--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
+ .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}
@@ -32,7 +32,7 @@ var ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
32
32
  }
33
33
  onClick?.(event);
34
34
  },
35
- ...isDisabled ? { "aria-disabled": true } : {}
35
+ ...isDisabled && { "aria-disabled": true }
36
36
  }
37
37
  });
38
38
  };
@@ -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:transparent;--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:transparent;--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
+ .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:transparent;--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:transparent;--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}
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`, and `Dialog.Close` under a Base UI `Drawer.Root`.
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`, and `Dialog.Close`, Surface panel, scrim backdrop, title, description, and swipe-to-dismiss.",
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, render, ...fieldsetRootProps }) => {
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:transparent;&: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
+ .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:transparent;--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:transparent;--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
+ .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:transparent;--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{--scroll-arrow-background:var(--is-vibrancy-active) oklab(from var(--base-1) l a b/80%);position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--scroll-arrow-background,var(--base-1));backdrop-filter:var(--vibrancy-filter,none);border:1px solid var(--global-contrast)}.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]{--option-hover-background:var(--is-vibrancy-active) oklab(from var(--global-contrast) l a b/12%);background:var(--option-hover-background,var(--global-contrast))}&[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)}
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,2 @@
1
+ export { Separator } from './separator';
2
+ export type { SeparatorProps } from './separator';
@@ -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,3 @@
1
+ var separator_module_default = { Line: "viraui__separator-module__Line_xXOe9" };
2
+ //#endregion
3
+ export { separator_module_default as default };
@@ -0,0 +1,2 @@
1
+ export { Shimmer } from './shimmer';
2
+ export type { ShimmerProps } from './shimmer';
@@ -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}}