@viraui/react 1.0.13 → 1.0.14

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 (140) hide show
  1. package/dist/catalog.json +10 -4
  2. package/dist/components/accordion/accordion.css +1 -1
  3. package/dist/components/accordion/accordion.guide.json +26 -0
  4. package/dist/components/annotate/annotate.css +1 -1
  5. package/dist/components/annotate/annotate.guide.json +46 -57
  6. package/dist/components/avatar/avatar.css +1 -1
  7. package/dist/components/avatar/avatar.guide.json +22 -10
  8. package/dist/components/avatar/avatar.js +0 -2
  9. package/dist/components/avatar-group/avatar-group.css +1 -7
  10. package/dist/components/avatar-group/avatar-group.guide.json +23 -16
  11. package/dist/components/badge/badge.css +1 -1
  12. package/dist/components/badge/badge.d.ts +1 -1
  13. package/dist/components/badge/badge.guide.json +17 -13
  14. package/dist/components/badge/badge.js +1 -1
  15. package/dist/components/basic-input/basic-input.css +1 -1
  16. package/dist/components/basic-input/field-label.css +1 -1
  17. package/dist/components/basic-input/field-label.js +2 -0
  18. package/dist/components/bleed/bleed.guide.json +9 -6
  19. package/dist/components/button/button-chrome.d.ts +3 -1
  20. package/dist/components/button/button-chrome.js +3 -2
  21. package/dist/components/button/button-link.guide.json +55 -1
  22. package/dist/components/button/button-link.js +1 -0
  23. package/dist/components/button/button.css +1 -1
  24. package/dist/components/button/button.guide.json +27 -7
  25. package/dist/components/button/button.js +1 -0
  26. package/dist/components/checkbox/checkbox.css +1 -1
  27. package/dist/components/checkbox/checkbox.guide.json +40 -1
  28. package/dist/components/checkbox/checkbox.js +2 -2
  29. package/dist/components/checkbox/checkbox.module.js +1 -3
  30. package/dist/components/chip/chip.css +1 -1
  31. package/dist/components/chip/chip.guide.json +23 -6
  32. package/dist/components/chip/chip.js +1 -0
  33. package/dist/components/clamp-text/clamp-text.css +1 -1
  34. package/dist/components/clamp-text/clamp-text.guide.json +9 -0
  35. package/dist/components/dialog/dialog-sheet.js +1 -1
  36. package/dist/components/dialog/dialog.css +1 -1
  37. package/dist/components/dialog/dialog.guide.json +24 -0
  38. package/dist/components/dialog/dialog.module.js +1 -3
  39. package/dist/components/elevator/elevator.guide.json +23 -1
  40. package/dist/components/fieldset/fieldset.guide.json +16 -3
  41. package/dist/components/fieldset/fieldset.js +6 -6
  42. package/dist/components/fit-text/fit-text.css +1 -1
  43. package/dist/components/fit-text/fit-text.guide.json +2 -4
  44. package/dist/components/icon-button/icon-button-link.guide.json +52 -1
  45. package/dist/components/icon-button/icon-button-link.js +2 -2
  46. package/dist/components/icon-button/icon-button.d.ts +1 -1
  47. package/dist/components/icon-button/icon-button.guide.json +48 -3
  48. package/dist/components/icon-button/icon-button.js +2 -2
  49. package/dist/components/index.d.ts +1 -0
  50. package/dist/components/linear-progress/linear-progress.guide.json +16 -5
  51. package/dist/components/linear-progress/linear-progress.js +0 -1
  52. package/dist/components/masonry/masonry.d.ts +1 -1
  53. package/dist/components/masonry/masonry.guide.json +11 -9
  54. package/dist/components/menu/index.d.ts +11 -0
  55. package/dist/components/menu/menu-checkbox-item.d.ts +42 -0
  56. package/dist/components/menu/menu-checkbox-item.js +28 -0
  57. package/dist/components/menu/menu-group.d.ts +12 -0
  58. package/dist/components/menu/menu-group.js +36 -0
  59. package/dist/components/menu/menu-indicator-slot.d.ts +15 -0
  60. package/dist/components/menu/menu-indicator-slot.js +52 -0
  61. package/dist/components/menu/menu-item-row.d.ts +18 -0
  62. package/dist/components/menu/menu-item-row.js +47 -0
  63. package/dist/components/menu/menu-item.d.ts +36 -0
  64. package/dist/components/menu/menu-item.js +23 -0
  65. package/dist/components/menu/menu-link-item.d.ts +36 -0
  66. package/dist/components/menu/menu-link-item.js +26 -0
  67. package/dist/components/menu/menu-popup.d.ts +17 -0
  68. package/dist/components/menu/menu-popup.js +28 -0
  69. package/dist/components/menu/menu-radio-group.d.ts +16 -0
  70. package/dist/components/menu/menu-radio-group.js +36 -0
  71. package/dist/components/menu/menu-radio-item.d.ts +42 -0
  72. package/dist/components/menu/menu-radio-item.js +28 -0
  73. package/dist/components/menu/menu-separator.d.ts +9 -0
  74. package/dist/components/menu/menu-separator.js +15 -0
  75. package/dist/components/menu/menu-submenu-trigger.d.ts +29 -0
  76. package/dist/components/menu/menu-submenu-trigger.js +26 -0
  77. package/dist/components/menu/menu.css +1 -0
  78. package/dist/components/menu/menu.d.ts +58 -0
  79. package/dist/components/menu/menu.guide.json +101 -0
  80. package/dist/components/menu/menu.js +36 -0
  81. package/dist/components/menu/menu.module.js +13 -0
  82. package/dist/components/meter/meter.guide.json +15 -4
  83. package/dist/components/meter/meter.js +0 -1
  84. package/dist/components/popover/popover-sheet.js +1 -1
  85. package/dist/components/popover/popover.guide.json +25 -1
  86. package/dist/components/progressive-blur/progressive-blur.css +1 -1
  87. package/dist/components/progressive-blur/progressive-blur.guide.json +14 -4
  88. package/dist/components/progressive-blur/progressive-blur.js +2 -2
  89. package/dist/components/radio/radio.css +1 -1
  90. package/dist/components/radio/radio.guide.json +34 -1
  91. package/dist/components/radio/radio.js +28 -31
  92. package/dist/components/select/select-group.js +1 -1
  93. package/dist/components/select/select-option.d.ts +1 -1
  94. package/dist/components/select/select-option.js +2 -5
  95. package/dist/components/select/select-separator.js +7 -4
  96. package/dist/components/select/select.css +1 -1
  97. package/dist/components/select/select.guide.json +49 -8
  98. package/dist/components/select/select.js +1 -1
  99. package/dist/components/select/select.module.js +1 -5
  100. package/dist/components/separator/separator.guide.json +28 -1
  101. package/dist/components/shimmer/shimmer.css +1 -1
  102. package/dist/components/shimmer/shimmer.guide.json +19 -16
  103. package/dist/components/skeleton/skeleton.guide.json +24 -31
  104. package/dist/components/slider/slider.guide.json +27 -7
  105. package/dist/components/spinner/spinner.guide.json +5 -4
  106. package/dist/components/stack/stack.guide.json +49 -47
  107. package/dist/components/static-noise/static-noise.guide.json +18 -2
  108. package/dist/components/surface/surface.css +1 -1
  109. package/dist/components/surface/surface.guide.json +41 -48
  110. package/dist/components/switch/switch.css +1 -1
  111. package/dist/components/switch/switch.guide.json +25 -10
  112. package/dist/components/tabs/tabs.guide.json +11 -0
  113. package/dist/components/text/text.css +1 -1
  114. package/dist/components/text/text.guide.json +67 -76
  115. package/dist/components/textarea/textarea.css +1 -1
  116. package/dist/components/textarea/textarea.d.ts +4 -3
  117. package/dist/components/textarea/textarea.guide.json +19 -7
  118. package/dist/components/textfield/textfield.css +1 -1
  119. package/dist/components/textfield/textfield.guide.json +22 -7
  120. package/dist/components/title/title.css +1 -1
  121. package/dist/components/title/title.guide.json +62 -72
  122. package/dist/components/title/title.js +0 -1
  123. package/dist/components/toast/toast.css +1 -1
  124. package/dist/components/toast/toast.guide.json +32 -1
  125. package/dist/components/toggle-button/toggle-button.css +1 -0
  126. package/dist/components/toggle-button/toggle-button.d.ts +7 -0
  127. package/dist/components/toggle-button/toggle-button.guide.json +29 -2
  128. package/dist/components/toggle-button/toggle-button.js +18 -3
  129. package/dist/components/toggle-button/toggle-button.module.js +9 -0
  130. package/dist/components/toggle-group/toggle-group.d.ts +2 -1
  131. package/dist/components/toggle-group/toggle-group.guide.json +2 -3
  132. package/dist/components/tooltip/tooltip.guide.json +8 -1
  133. package/dist/components/typewriter/typewriter.css +1 -1
  134. package/dist/components/typewriter/typewriter.guide.json +27 -5
  135. package/dist/index.js +12 -2
  136. package/dist/internal/chrome-icons/chrome-icons.d.ts +2 -0
  137. package/dist/internal/chrome-icons/chrome-icons.js +7 -1
  138. package/dist/preflight-surface.json +1 -1
  139. package/dist/preflight.css +1 -1
  140. package/package.json +3 -3
@@ -14,7 +14,7 @@
14
14
  ],
15
15
  "accessibility": [
16
16
  "The visual display layer is aria-hidden; completed phrases announce through the polite live region",
17
- "Reduced motion shows the current phrase immediately without cycling delays",
17
+ "Reduced motion shows the final phrase immediately without cycling delays",
18
18
  "Parent region owns loading or busy semantics when Typewriter is decorative"
19
19
  ],
20
20
  "antiPatterns": [
@@ -25,15 +25,37 @@
25
25
  "related": ["Text", "Title", "Shimmer"],
26
26
  "properties": {
27
27
  "react": {
28
+ "caret": {
29
+ "description": "Selects the caret style rendered after the typed text."
30
+ },
28
31
  "caretColor": {
29
- "description": "Overrides the caret color.",
30
- "refCss": "caret-color"
32
+ "description": "Overrides the caret color."
33
+ },
34
+ "delay": {
35
+ "description": "Sets the initial delay before typing starts, in milliseconds."
36
+ },
37
+ "deleteSpeed": {
38
+ "description": "Sets the delay between deleted characters in milliseconds."
39
+ },
40
+ "loop": {
41
+ "description": "Repeats the phrase cycle after the final phrase is deleted."
42
+ },
43
+ "pause": {
44
+ "description": "Sets the pause after a phrase completes before deletion starts, in milliseconds."
45
+ },
46
+ "preserveSpace": {
47
+ "description": "Reserves the full phrase width while characters are typed."
48
+ },
49
+ "speed": {
50
+ "description": "Sets the delay between typed characters in milliseconds."
51
+ },
52
+ "texts": {
53
+ "description": "Cycles through multiple phrases instead of a single `children` string."
31
54
  }
32
55
  },
33
56
  "css": {
34
57
  "caret-color": {
35
- "description": "Typewriter caret color.",
36
- "refReact": "caretColor"
58
+ "description": "Typewriter caret color."
37
59
  }
38
60
  }
39
61
  }
package/dist/index.js CHANGED
@@ -28,6 +28,17 @@ import { IconButton } from "./components/icon-button/icon-button.js";
28
28
  import { IconButtonLink } from "./components/icon-button/icon-button-link.js";
29
29
  import { LinearProgress } from "./components/linear-progress/linear-progress.js";
30
30
  import { Masonry } from "./components/masonry/masonry.js";
31
+ import { Surface } from "./components/surface/surface.js";
32
+ import { MenuCheckboxItem } from "./components/menu/menu-checkbox-item.js";
33
+ import { MenuGroup } from "./components/menu/menu-group.js";
34
+ import { MenuItem } from "./components/menu/menu-item.js";
35
+ import { MenuLinkItem } from "./components/menu/menu-link-item.js";
36
+ import { MenuPopup } from "./components/menu/menu-popup.js";
37
+ import { MenuRadioGroup } from "./components/menu/menu-radio-group.js";
38
+ import { MenuRadioItem } from "./components/menu/menu-radio-item.js";
39
+ import { MenuSeparator } from "./components/menu/menu-separator.js";
40
+ import { MenuSubmenuTrigger } from "./components/menu/menu-submenu-trigger.js";
41
+ import { Menu, MenuSubmenu, MenuTrigger } from "./components/menu/menu.js";
31
42
  import { Meter } from "./components/meter/meter.js";
32
43
  import { PopoverSheet } from "./components/popover/popover-sheet.js";
33
44
  import { Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
@@ -40,7 +51,6 @@ import { Shimmer } from "./components/shimmer/shimmer.js";
40
51
  import { Skeleton } from "./components/skeleton/skeleton.js";
41
52
  import { Slider } from "./components/slider/slider.js";
42
53
  import { StaticNoise } from "./components/static-noise/static-noise.js";
43
- import { Surface } from "./components/surface/surface.js";
44
54
  import { Switch } from "./components/switch/switch.js";
45
55
  import { Tabs } from "./components/tabs/tabs.js";
46
56
  import { Textarea } from "./components/textarea/textarea.js";
@@ -52,4 +62,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
52
62
  import { Typewriter } from "./components/typewriter/typewriter.js";
53
63
  import { TooltipContent } from "./components/tooltip/tooltip-content.js";
54
64
  import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
55
- export { Accordion, Annotate, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
65
+ export { Accordion, Annotate, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
@@ -15,4 +15,6 @@ export declare const ChromeCheck: React.FC<ChromeIconProps>;
15
15
  export declare const ChromeChevronExpandY: React.FC<ChromeIconProps>;
16
16
  export declare const ChromeChevronUp: React.FC<ChromeIconProps>;
17
17
  export declare const ChromeChevronDown: React.FC<ChromeIconProps>;
18
+ /** End-edge chevron (submenu). Mirror in RTL via CSS `:dir(rtl)`, not JS. */
19
+ export declare const ChromeChevronEnd: React.FC<ChromeIconProps>;
18
20
  export declare const ChromeXmark: React.FC<ChromeIconProps>;
@@ -40,10 +40,16 @@ var ChromeChevronDown = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg,
40
40
  size,
41
41
  children: /* @__PURE__ */ jsx("path", { d: "M9 13.5a.74.74 0 0 1-.53-.22L2.22 7.03a.75.75 0 0 1 1.061-1.06l5.72 5.72 5.72-5.72a.75.75 0 1 1 1.061 1.061l-6.25 6.25a.75.75 0 0 1-.53.22z" })
42
42
  });
43
+ /** End-edge chevron (submenu). Mirror in RTL via CSS `:dir(rtl)`, not JS. */
44
+ var ChromeChevronEnd = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
45
+ className,
46
+ size,
47
+ children: /* @__PURE__ */ jsx("path", { d: "M13.28 8.47 7.03 2.22a.75.75 0 1 0-1.061 1.061l5.72 5.72-5.72 5.72a.75.75 0 0 0 1.06 1.061l6.25-6.25a.75.75 0 0 0 0-1.061z" })
48
+ });
43
49
  var ChromeXmark = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
44
50
  className,
45
51
  size,
46
52
  children: /* @__PURE__ */ jsx("path", { d: "M13.664 3.23a.783.783 0 1 1 1.107 1.106L10.107 9l4.664 4.664a.783.783 0 0 1-1.107 1.107L9 10.107 4.336 14.77a.783.783 0 1 1-1.107-1.107L7.893 9 3.23 4.336a.782.782 0 1 1 1.107-1.107L9 7.893z" })
47
53
  });
48
54
  //#endregion
49
- export { ChromeCheck, ChromeChevronDown, ChromeChevronExpandY, ChromeChevronUp, ChromeMinus, ChromePlus, ChromeXmark };
55
+ export { ChromeCheck, ChromeChevronDown, ChromeChevronEnd, ChromeChevronExpandY, ChromeChevronUp, ChromeMinus, ChromePlus, ChromeXmark };
@@ -134,7 +134,7 @@
134
134
  "name": "--shadow-color",
135
135
  "module": "elevations",
136
136
  "setBy": "inline style or component elevation mapping",
137
- "default": "oklch(0% 0 0deg)",
137
+ "default": "oklch(0% 0 0)",
138
138
  "purpose": "Shadow tint for data-elevation stacks."
139
139
  },
140
140
  {
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklab(0 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono)}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color-scheme:dark}[data-mode=light]{color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono)}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color-scheme:dark}[data-mode=light]{color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viraui/react",
3
- "version": "1.0.13",
3
+ "version": "1.0.14",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist"
@@ -35,10 +35,10 @@
35
35
  "unplugin-dts": "1.0.3",
36
36
  "vite": "8.1.4",
37
37
  "vite-plugin-static-copy": "4.1.1",
38
+ "@viraui/foundation": "1.0.14",
38
39
  "@viraui/icons": "0.1.7",
39
40
  "@viraui/postcss-config": "0.0.18",
40
- "@viraui/tsconfig": "0.0.17",
41
- "@viraui/foundation": "1.0.13"
41
+ "@viraui/tsconfig": "0.0.17"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "@base-ui/react": ">=1.6.0",