@viraui/react 2026.2.1 → 2026.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/components/annotate/annotate.css +1 -1
- package/dist/components/avatar-group/avatar-group.css +7 -1
- package/dist/components/badge/badge.js +7 -12
- package/dist/components/beam/beam.js +20 -25
- package/dist/components/button/button.css +1 -1
- package/dist/components/chip/chip.css +1 -1
- package/dist/components/dialog/dialog.css +14 -1
- package/dist/components/fit-text/fit-text.css +3 -1
- package/dist/components/glow/glow.css +13 -1
- package/dist/components/glow/glow.js +0 -1
- package/dist/components/grid/grid.css +1 -1
- package/dist/components/progressive-blur/progressive-blur.css +1 -1
- package/dist/components/progressive-blur/progressive-blur.js +2 -1
- package/dist/components/radio/radio.css +1 -1
- package/dist/components/separator/separator.guide.json +3 -4
- package/dist/components/separator/separator.js +0 -1
- package/dist/components/shimmer/shimmer.css +1 -1
- package/dist/components/spinner/variants/index.js +4 -2
- package/dist/components/surface/surface.css +7 -1
- package/dist/components/switch/switch.css +1 -1
- package/dist/components/text/text.css +17 -1
- package/dist/components/title/title.css +33 -1
- package/dist/components/toast/toast.css +6 -1
- package/dist/components/typewriter/typewriter.js +4 -2
- package/dist/preflight.css +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<!-- PROJECT LOGO -->
|
|
2
2
|
<br />
|
|
3
3
|
<div align="center">
|
|
4
|
+
<h3 align="center" title="ViraUI">
|
|
5
|
+
<img alt="ViraUI" src="https://viraui.dev/viraui-logo-midgray.png" height="30" draggable="false" />
|
|
6
|
+
</h3>
|
|
4
7
|
<br />
|
|
5
8
|
<h2 align="center" style="font-weight: 500;">
|
|
6
9
|
Ship real UI at the speed of thought.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-annotate-color{syntax:"<color>";inherits:true;initial-value:#d16500}@property --vui-annotate-arrow-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-arrow-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-rotate{syntax:"<angle>";inherits:true;initial-value:-4deg}@property --vui-annotate-target-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-max-width{syntax:"<length>";inherits:true;initial-value:150px}@property --vui-annotate-z-index{syntax:"*";inherits:true;initial-value:auto}@property --vui-annotate-text-align{syntax:"*";inherits:true;initial-value:start}@property --__annotate-tail-x{syntax:"<length>";inherits:true;initial-value:23px}@property --__annotate-tail-y{syntax:"<length>";inherits:true;initial-value:4px}@property --__annotate-note-align-x{syntax:"<length-percentage>";inherits:true;initial-value:-50%}@property --__annotate-note-align-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__annotate-arrow-mask{syntax:"*";inherits:true;initial-value:none}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--global-foreground);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap));anchor-name:--vui-annotate-target;anchor-scope:--vui-annotate-target,--vui-annotate-arrow;display:inline-block;overflow:visible;border-radius:var(--radius-x-small)}.viraui__annotate-module__Arrow_T4B-6{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-target;anchor-name:--vui-annotate-arrow;width:46px;height:38px;transform:translate(var(--vui-annotate-arrow-x),var(--vui-annotate-arrow-y));transform-origin:50% 50%;mask:var(--__annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color);pointer-events:none}.viraui__annotate-module__Note_8UW-R{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-arrow;left:calc(anchor(left) + var(--__annotate-tail-x));top:calc(anchor(top) + var(--__annotate-tail-y));width:max-content;max-width:var(--vui-annotate-label-max-width);transform:translate(calc(var(--__annotate-note-align-x) + var(--vui-annotate-text-x)),calc(var(--__annotate-note-align-y) + var(--vui-annotate-text-y))) rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard SE,Marker Felt,Dancing Script,sans-serif,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);text-align:var(--vui-annotate-text-align);white-space:normal;pointer-events:none}.viraui__annotate-module__Annotate_7C36U[data-mark=true]{background:oklab(from var(--vui-annotate-color) l a b/30%);box-shadow:-.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%),.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%)}.viraui__annotate-module__Annotate_7C36U[data-side=top]{--__annotate-tail-x:23px;--__annotate-tail-y:4px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 4c-1 9-1 20 0 31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 29 6 7 6-7'/%3E%3C/svg%3E");position-area:block-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-start]{--__annotate-tail-x:6px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 6c10 2 22 14 34 26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 22 4 10-10-4'/%3E%3C/svg%3E");position-area:block-start inline-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-end]{--__annotate-tail-x:40px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 6C30 8 18 20 6 32'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10 22 6 32l10-4'/%3E%3C/svg%3E");position-area:block-start inline-end;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom]{--__annotate-tail-x:23px;--__annotate-tail-y:35px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 35c-1-9-1-20 0-31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 10 6-7 6 7'/%3E%3C/svg%3E");position-area:block-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start]{--__annotate-tail-x:6px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 32c10-2 22-14 34-26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m30 10 10-4-4 10'/%3E%3C/svg%3E");position-area:block-end inline-start;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end]{--__annotate-tail-x:40px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 32C30 30 18 18 6 6'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16 10 6 6l4 10'/%3E%3C/svg%3E");position-area:block-end inline-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=start]{--__annotate-tail-x:4px;--__annotate-tail-y:19px;--__annotate-note-align-x:calc(-100% - var(--vui-annotate-label-gap));--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M4 19c11-1 27-1 39 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 13 7 6-7 6'/%3E%3C/svg%3E");position-area:inline-start;margin-inline-end:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=end]{--__annotate-tail-x:43px;--__annotate-tail-y:19px;--__annotate-note-align-x:var(--vui-annotate-label-gap);--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M43 19c-11-1-28-1-40 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 13-7 6 7 6'/%3E%3C/svg%3E");position-area:inline-end;margin-inline-start:var(--vui-annotate-target-gap)}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-annotate-color{syntax:"<color>";inherits:true;initial-value:#d16500}@property --vui-annotate-arrow-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-arrow-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-rotate{syntax:"<angle>";inherits:true;initial-value:-4deg}@property --vui-annotate-target-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-max-width{syntax:"<length>";inherits:true;initial-value:150px}@property --vui-annotate-z-index{syntax:"*";inherits:true;initial-value:auto}@property --vui-annotate-text-align{syntax:"*";inherits:true;initial-value:start}@property --__annotate-tail-x{syntax:"<length>";inherits:true;initial-value:23px}@property --__annotate-tail-y{syntax:"<length>";inherits:true;initial-value:4px}@property --__annotate-note-align-x{syntax:"<length-percentage>";inherits:true;initial-value:-50%}@property --__annotate-note-align-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__annotate-arrow-mask{syntax:"*";inherits:true;initial-value:none}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--global-foreground);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap));anchor-name:--vui-annotate-target;anchor-scope:--vui-annotate-target,--vui-annotate-arrow;display:inline-block;overflow:visible;border-radius:var(--radius-x-small)}.viraui__annotate-module__Arrow_T4B-6{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-target;anchor-name:--vui-annotate-arrow;width:46px;height:38px;transform:translate(var(--vui-annotate-arrow-x),var(--vui-annotate-arrow-y));transform-origin:50% 50%;mask:var(--__annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color);pointer-events:none}.viraui__annotate-module__Note_8UW-R{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-arrow;left:calc(anchor(left) + var(--__annotate-tail-x));top:calc(anchor(top) + var(--__annotate-tail-y));width:max-content;max-width:var(--vui-annotate-label-max-width);transform:translate(calc(var(--__annotate-note-align-x) + var(--vui-annotate-text-x)),calc(var(--__annotate-note-align-y) + var(--vui-annotate-text-y))) rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard SE,Marker Felt,Dancing Script,sans-serif,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);text-align:var(--vui-annotate-text-align);white-space:normal;pointer-events:none}.viraui__annotate-module__Annotate_7C36U[data-mark=true]{background:oklab(from var(--vui-annotate-color) l a b/30%);box-shadow:-.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%),.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%)}.viraui__annotate-module__Annotate_7C36U[data-side=top]{--__annotate-tail-x:23px;--__annotate-tail-y:4px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M23%204c-1%209-1%2020%200%2031%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m17%2029%206%207%206-7%22%2F%3E%3C%2Fsvg%3E");position-area:block-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-start]{--__annotate-tail-x:6px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%206c10%202%2022%2014%2034%2026%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m36%2022%204%2010-10-4%22%2F%3E%3C%2Fsvg%3E");position-area:block-start inline-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-end]{--__annotate-tail-x:40px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M40%206C30%208%2018%2020%206%2032%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M10%2022%206%2032l10-4%22%2F%3E%3C%2Fsvg%3E");position-area:block-start inline-end;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom]{--__annotate-tail-x:23px;--__annotate-tail-y:35px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M23%2035c-1-9-1-20%200-31%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m17%2010%206-7%206%207%22%2F%3E%3C%2Fsvg%3E");position-area:block-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start]{--__annotate-tail-x:6px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%2032c10-2%2022-14%2034-26%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m30%2010%2010-4-4%2010%22%2F%3E%3C%2Fsvg%3E");position-area:block-end inline-start;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end]{--__annotate-tail-x:40px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M40%2032C30%2030%2018%2018%206%206%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M16%2010%206%206l4%2010%22%2F%3E%3C%2Fsvg%3E");position-area:block-end inline-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=start]{--__annotate-tail-x:4px;--__annotate-tail-y:19px;--__annotate-note-align-x:calc(-100% - var(--vui-annotate-label-gap));--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M4%2019c11-1%2027-1%2039%200%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m36%2013%207%206-7%206%22%2F%3E%3C%2Fsvg%3E");position-area:inline-start;margin-inline-end:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=end]{--__annotate-tail-x:43px;--__annotate-tail-y:19px;--__annotate-note-align-x:var(--vui-annotate-label-gap);--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M43%2019c-11-1-28-1-40%200%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m10%2013-7%206%207%206%22%2F%3E%3C%2Fsvg%3E");position-area:inline-end;margin-inline-start:var(--vui-annotate-target-gap)}}
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__avatar-group-hole-half{syntax:"<length>";inherits:false;initial-value:0}@property --__avatar-group-hole-r{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cx{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cy{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-corner-tl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-tr{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-br{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-bl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-inset{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-edge{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=large]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-x-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--__avatar-group-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--__avatar-group-hole-r:calc(
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__avatar-group-hole-half{syntax:"<length>";inherits:false;initial-value:0}@property --__avatar-group-hole-r{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cx{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cy{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-corner-tl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-tr{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-br{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-bl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-inset{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-edge{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=large]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-x-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--__avatar-group-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--__avatar-group-hole-r:calc(
|
|
2
|
+
min(var(--vui-avatar-group-item-radius), var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size)
|
|
3
|
+
);.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--__avatar-group-hole-cx:calc(
|
|
4
|
+
100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance)
|
|
5
|
+
);--__avatar-group-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--__avatar-group-hole-cx:calc(var(--vui-avatar-group-overlap-distance) - (var(--vui-avatar-group-size) / 2));--__avatar-group-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--__avatar-group-hole-cx:50%;--__avatar-group-hole-cy:calc(
|
|
6
|
+
100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance)
|
|
7
|
+
)}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--__avatar-group-hole-edge:calc((var(--__avatar-group-hole-half) - var(--__avatar-group-hole-r)) * 2);--__avatar-group-hole-corner-inset:calc(var(--__avatar-group-hole-r) * 0.85);--__avatar-group-hole-corner-tr:arc by var(--__avatar-group-hole-r) var(--__avatar-group-hole-r) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-br:arc by calc(var(--__avatar-group-hole-r) * -1) var(--__avatar-group-hole-r) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-bl:arc by calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -1) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-tl:arc by var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * -1) of var(--__avatar-group-hole-r) cw;@supports (corner-shape:squircle){@container root not style(--effect-corner-shape: initial){--__avatar-group-hole-corner-tr:curve by var(--__avatar-group-hole-r) var(--__avatar-group-hole-r) with var(--__avatar-group-hole-corner-inset) 0px / var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * 0.15);--__avatar-group-hole-corner-br:curve by calc(var(--__avatar-group-hole-r) * -1) var(--__avatar-group-hole-r) with 0px var(--__avatar-group-hole-corner-inset) / calc(var(--__avatar-group-hole-r) * -0.15) var(--__avatar-group-hole-r);--__avatar-group-hole-corner-bl:curve by calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -1) with calc(var(--__avatar-group-hole-corner-inset) * -1) 0px / calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -0.15);--__avatar-group-hole-corner-tl:curve by var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * -1) with 0px calc(var(--__avatar-group-hole-corner-inset) * -1) / calc(var(--__avatar-group-hole-r) * 0.15) calc(var(--__avatar-group-hole-r) * -1)}}clip-path:shape(evenodd from 0 0,line to 100% 0,line to 100% 100%,line to 0 100%,close,move to calc(var(--__avatar-group-hole-cx) - var(--__avatar-group-hole-half) + var(--__avatar-group-hole-r)) calc(var(--__avatar-group-hole-cy) - var(--__avatar-group-hole-half)),line by var(--__avatar-group-hole-edge) 0,var(--__avatar-group-hole-corner-tr),line by 0 var(--__avatar-group-hole-edge),var(--__avatar-group-hole-corner-br),line by calc(var(--__avatar-group-hole-edge) * -1) 0,var(--__avatar-group-hole-corner-bl),line by 0 calc(var(--__avatar-group-hole-edge) * -1),var(--__avatar-group-hole-corner-tl),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__OverflowPill_nMmTD{min-inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size)}}@layer viraui.overrides{.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--vui-avatar-radius:var(--vui-avatar-group-item-radius)}.viraui__avatar-group-module__OverflowPill_nMmTD{--vui-surface-border-radius-top-left:var(--vui-avatar-group-item-radius);--vui-surface-border-radius-top-right:var(--vui-avatar-group-item-radius);--vui-surface-border-radius-bottom-right:var(--vui-avatar-group-item-radius);--vui-surface-border-radius-bottom-left:var(--vui-avatar-group-item-radius)}}
|
|
@@ -2,26 +2,21 @@ import './badge.css';
|
|
|
2
2
|
import { clsx } from "../../core/clsx.js";
|
|
3
3
|
import badge_module_default from "./badge.module.js";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import {
|
|
5
|
+
import { useState } from "react";
|
|
6
6
|
//#region src/components/badge/badge.tsx
|
|
7
7
|
var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
8
8
|
var Badge = ({ size = "0.5rem", children, className, color, position = "top-end", ref, show = false, style, ...otherProps }) => {
|
|
9
9
|
const [present, setPresent] = useState(show);
|
|
10
10
|
const [exiting, setExiting] = useState(false);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
if (!present) return;
|
|
11
|
+
if (show && (!present || exiting)) {
|
|
12
|
+
setPresent(true);
|
|
13
|
+
setExiting(false);
|
|
14
|
+
} else if (!show && present && !exiting) {
|
|
18
15
|
if (prefersReducedMotion()) {
|
|
19
16
|
setPresent(false);
|
|
20
17
|
setExiting(false);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
setExiting(true);
|
|
24
|
-
}, [show, present]);
|
|
18
|
+
} else setExiting(true);
|
|
19
|
+
}
|
|
25
20
|
const handleAnimationEnd = (event) => {
|
|
26
21
|
if (!exiting) return;
|
|
27
22
|
if (!(event.target instanceof HTMLElement) || event.target.parentElement !== event.currentTarget) return;
|
|
@@ -40,6 +40,16 @@ var Beam = ({ animate = true, brightness: brightnessProp, children, className, c
|
|
|
40
40
|
x: 1,
|
|
41
41
|
y: 1
|
|
42
42
|
});
|
|
43
|
+
const [prevVariant, setPrevVariant] = useState(variant);
|
|
44
|
+
if (animate && !isActive && !isFading) setIsActive(true);
|
|
45
|
+
else if (!animate && isActive && !isFading) setIsFading(true);
|
|
46
|
+
if (variant !== prevVariant) {
|
|
47
|
+
setPrevVariant(variant);
|
|
48
|
+
if (variant !== "pulse-outside") setPulseGlowScale({
|
|
49
|
+
x: 1,
|
|
50
|
+
y: 1
|
|
51
|
+
});
|
|
52
|
+
}
|
|
43
53
|
const duration = durationProp ?? DEFAULT_DURATION[variant];
|
|
44
54
|
const isPulse = variant === "pulse-inside" || variant === "pulse-outside";
|
|
45
55
|
const staticColors = staticColorsProp ?? color !== "colorful";
|
|
@@ -52,17 +62,8 @@ var Beam = ({ animate = true, brightness: brightnessProp, children, className, c
|
|
|
52
62
|
rootRef.current = node;
|
|
53
63
|
assignRef(ref, node);
|
|
54
64
|
}, [ref]);
|
|
55
|
-
useEffect(() => {
|
|
56
|
-
if (animate && !isActive && !isFading) setIsActive(true);
|
|
57
|
-
else if (!animate && isActive && !isFading) setIsFading(true);
|
|
58
|
-
}, [
|
|
59
|
-
animate,
|
|
60
|
-
isActive,
|
|
61
|
-
isFading
|
|
62
|
-
]);
|
|
63
65
|
useEffect(() => {
|
|
64
66
|
const el = rootRef.current;
|
|
65
|
-
if (!el || typeof IntersectionObserver === "undefined") return;
|
|
66
67
|
const observer = new IntersectionObserver((entries) => {
|
|
67
68
|
for (const entry of entries) setIsVisible(entry.isIntersecting);
|
|
68
69
|
}, { rootMargin: "256px" });
|
|
@@ -70,15 +71,8 @@ var Beam = ({ animate = true, brightness: brightnessProp, children, className, c
|
|
|
70
71
|
return () => observer.disconnect();
|
|
71
72
|
}, []);
|
|
72
73
|
useEffect(() => {
|
|
73
|
-
if (variant !== "pulse-outside")
|
|
74
|
-
setPulseGlowScale({
|
|
75
|
-
x: 1,
|
|
76
|
-
y: 1
|
|
77
|
-
});
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
74
|
+
if (variant !== "pulse-outside") return;
|
|
80
75
|
const el = rootRef.current;
|
|
81
|
-
if (!el) return;
|
|
82
76
|
const REF_WIDTH = 350;
|
|
83
77
|
const REF_HEIGHT = 140;
|
|
84
78
|
const MIN_SCALE = .35;
|
|
@@ -97,20 +91,21 @@ var Beam = ({ animate = true, brightness: brightnessProp, children, className, c
|
|
|
97
91
|
});
|
|
98
92
|
};
|
|
99
93
|
measure();
|
|
100
|
-
const resizeObserver =
|
|
101
|
-
resizeObserver
|
|
102
|
-
const mutationObserver =
|
|
103
|
-
mutationObserver
|
|
94
|
+
const resizeObserver = new ResizeObserver(measure);
|
|
95
|
+
resizeObserver.observe(el);
|
|
96
|
+
const mutationObserver = new MutationObserver(measure);
|
|
97
|
+
mutationObserver.observe(el, { childList: true });
|
|
104
98
|
return () => {
|
|
105
|
-
resizeObserver
|
|
106
|
-
mutationObserver
|
|
99
|
+
resizeObserver.disconnect();
|
|
100
|
+
mutationObserver.disconnect();
|
|
107
101
|
};
|
|
108
102
|
}, [variant]);
|
|
109
103
|
useEffect(() => {
|
|
110
104
|
if (!isPulse || !(isActive || isFading) || !isVisible) return;
|
|
111
105
|
const el = rootRef.current;
|
|
112
|
-
|
|
113
|
-
|
|
106
|
+
const durationSec = parseDurationSeconds(duration);
|
|
107
|
+
const config = getBeamPulseDriverConfig(variant, durationSec, staticColors);
|
|
108
|
+
return registerBeamPulse(el, config);
|
|
114
109
|
}, [
|
|
115
110
|
isPulse,
|
|
116
111
|
variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);--vui-chip-icon-size:0.9em;block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;max-inline-size:max-content;min-inline-size:max-content;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);--vui-chip-icon-size:0.9em;block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;max-inline-size:max-content;min-inline-size:max-content;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b / 0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-color:var(--highlight-gray)}&[data-variant=gray],&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=slate]{--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-color:var(--highlight-yellow)}&[data-variant=green],&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=green]{--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-color:var(--highlight-cyan)}&[data-variant=cyan],&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=purple]{--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid],&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=acid]{--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta],&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=magenta]{--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-block-size:100%;padding-inline:var(--space-small);.viraui__chip-module__Chip_2D18T[data-addon-position=start] &{padding-inline-start:var(--space-small);padding-inline-end:calc(var(--space-small) + var(--space-2x-small))}.viraui__chip-module__Chip_2D18T[data-addon-position=end] &{padding-inline-start:calc(var(--space-small) + var(--space-2x-small));padding-inline-end:var(--space-small)}}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;>svg{inline-size:var(--vui-chip-icon-size);block-size:var(--vui-chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;overflow:hidden;text-overflow:ellipsis}}
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-dialog-max-block-size{syntax:"*";inherits:false;initial-value:97dvh}@property --__dialog-bleed{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-step{syntax:"<number>";inherits:false;initial-value:.05}@property --__dialog-stack-progress{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-peek-offset{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-scale-base{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-translate-y{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-radius{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-transition{syntax:"<number>";inherits:false;initial-value: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-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-swiping]:not([data-ending-style]){opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--__dialog-bleed:var(--space-wide);--__dialog-peek:var(--space-medium);--__dialog-stack-progress:clamp(0,var(--drawer-swipe-progress,
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-dialog-max-block-size{syntax:"*";inherits:false;initial-value:97dvh}@property --__dialog-bleed{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-step{syntax:"<number>";inherits:false;initial-value:.05}@property --__dialog-stack-progress{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-peek-offset{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-scale-base{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-translate-y{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-radius{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-transition{syntax:"<number>";inherits:false;initial-value: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-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-swiping]:not([data-ending-style]){opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--__dialog-bleed:var(--space-wide);--__dialog-peek:var(--space-medium);--__dialog-stack-progress:clamp(0, var(--drawer-swipe-progress, 0), 1);--__dialog-stack-peek-offset:max(
|
|
2
|
+
0px,
|
|
3
|
+
calc((var(--nested-drawers, 0) - var(--__dialog-stack-progress)) * var(--__dialog-peek))
|
|
4
|
+
);--__dialog-stack-scale-base:max(0, calc(1 - var(--nested-drawers, 0) * var(--__dialog-stack-step)));--__dialog-stack-scale:clamp(
|
|
5
|
+
0,
|
|
6
|
+
calc(var(--__dialog-stack-scale-base) + var(--__dialog-stack-step) * var(--__dialog-stack-progress)),
|
|
7
|
+
1
|
|
8
|
+
);--__dialog-stack-shrink:calc(1 - var(--__dialog-stack-scale));--__dialog-stack-height:max(
|
|
9
|
+
0px,
|
|
10
|
+
calc(var(--drawer-frontmost-height, var(--drawer-height, 0px)) - var(--__dialog-bleed))
|
|
11
|
+
);--__dialog-translate-y:calc(
|
|
12
|
+
var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--__dialog-stack-peek-offset) -
|
|
13
|
+
var(--__dialog-stack-shrink) * var(--__dialog-stack-height)
|
|
14
|
+
);max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--__dialog-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(--__dialog-translate-y)) scale(var(--__dialog-stack-scale));&[data-nested-drawer-open]{height:calc(var(--__dialog-stack-height) + var(--__dialog-bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.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{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),overflow 0s allow-discrete var(--duration-fast);.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0;overflow:hidden;transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1;overflow:hidden}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--__dialog-indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--__dialog-indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--__dialog-indent-transition)),calc(var(--duration-fast) * var(--__dialog-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(--__dialog-indent-radius);border-top-right-radius:var(--__dialog-indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__fit-text-captured-length{syntax:"<length>";inherits:true;initial-value:0}@property --vui-fit-text-max-font-size{syntax:"<length>";inherits:true;initial-value:calc(infinity * 1px)}@property --__fit-text-available-space{syntax:"<length>";inherits:true;initial-value:0}@property --__fit-text-ratio{syntax:"<number>";inherits:false;initial-value:1}.viraui__fit-text-module__FitText_CdAvq{--__fit-text-captured-length:initial;display:flex;container-type:inline-size;.viraui__fit-text-module__Container_bawpR{--__fit-text-captured-length:100cqi;--__fit-text-available-space:var(--__fit-text-captured-length);flex-grow:1;container-type:inline-size}.viraui__fit-text-module__Display_Hraif{--__fit-text-captured-length:100cqi;--__fit-text-ratio:tan(
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__fit-text-captured-length{syntax:"<length>";inherits:true;initial-value:0}@property --vui-fit-text-max-font-size{syntax:"<length>";inherits:true;initial-value:calc(infinity * 1px)}@property --__fit-text-available-space{syntax:"<length>";inherits:true;initial-value:0}@property --__fit-text-ratio{syntax:"<number>";inherits:false;initial-value:1}.viraui__fit-text-module__FitText_CdAvq{--__fit-text-captured-length:initial;display:flex;container-type:inline-size;.viraui__fit-text-module__Container_bawpR{--__fit-text-captured-length:100cqi;--__fit-text-available-space:var(--__fit-text-captured-length);flex-grow:1;container-type:inline-size}.viraui__fit-text-module__Display_Hraif{--__fit-text-captured-length:100cqi;--__fit-text-ratio:tan(
|
|
2
|
+
atan2(var(--__fit-text-available-space), var(--__fit-text-available-space) - var(--__fit-text-captured-length))
|
|
3
|
+
);inline-size:var(--__fit-text-available-space);font-size:clamp(0px,1em * var(--__fit-text-ratio),var(--vui-fit-text-max-font-size));>*{font-size:1em;max-inline-size:none;display:block}}.viraui__fit-text-module__Reference_6wCx7{visibility:hidden;>*{font-size:inherit;max-inline-size:none}}}}
|
|
@@ -1 +1,13 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-angle-lag{syntax:"<time>";inherits:true;initial-value:80ms}@property --vui-glow-active-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-spread{syntax:"<number>";inherits:true;initial-value:250}@property --vui-glow-border-width{syntax:"<length>";inherits:true;initial-value:2px}@property --vui-glow-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-glow-border-offset{syntax:"<length>";inherits:true;initial-value:5px}@property --vui-glow-color{syntax:"*";inherits:true;initial-value:#0000}@property --__glow-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__glow-module__Glow_7394e{--vui-glow-border-color:var(--global-contrast);--vui-glow-color:conic-gradient(from 180deg at 50% 70
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-angle-lag{syntax:"<time>";inherits:true;initial-value:80ms}@property --vui-glow-active-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-spread{syntax:"<number>";inherits:true;initial-value:250}@property --vui-glow-border-width{syntax:"<length>";inherits:true;initial-value:2px}@property --vui-glow-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-glow-border-offset{syntax:"<length>";inherits:true;initial-value:5px}@property --vui-glow-color{syntax:"*";inherits:true;initial-value:#0000}@property --__glow-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__glow-module__Glow_7394e{--vui-glow-border-color:var(--global-contrast);--vui-glow-color:conic-gradient(from 180deg at 50% 70%, #0000, var(--global-primary), #0000);--__glow-radius-tl:var(--vui-surface-border-radius-top-left);--__glow-radius-tr:var(--vui-surface-border-radius-top-right);--__glow-radius-br:var(--vui-surface-border-radius-bottom-right);--__glow-radius-bl:var(--vui-surface-border-radius-bottom-left);position:relative;z-index:0;transition:--vui-glow-starting-angle var(--vui-glow-angle-lag) ease-out;&[data-glow-fit-content=true]{max-width:fit-content}&[data-glow-rainbow=true]{--vui-glow-color:conic-gradient(
|
|
2
|
+
from 180deg at 50% 50%,
|
|
3
|
+
var(--highlight-cyan),
|
|
4
|
+
var(--highlight-blue),
|
|
5
|
+
var(--highlight-green),
|
|
6
|
+
var(--highlight-purple),
|
|
7
|
+
var(--highlight-red),
|
|
8
|
+
var(--highlight-indigo),
|
|
9
|
+
var(--highlight-yellow),
|
|
10
|
+
var(--highlight-salmon),
|
|
11
|
+
var(--highlight-magenta),
|
|
12
|
+
var(--highlight-cyan)
|
|
13
|
+
)}&>*{--vui-glow-starting-angle:initial;--vui-glow-active-opacity:initial}&:after,&:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}@media (hover:none),(pointer:coarse){display:none}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-grid-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-columns{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-rows{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-column-min-w{syntax:"*";inherits:false;initial-value:10rem}@property --vui-grid-row-min-h{syntax:"*";inherits:false;initial-value:1fr}@property --vui-grid-column-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-item-column{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-item-row{syntax:"*";inherits:false;initial-value:auto}.viraui__grid-module__Grid_rTZor{--vui-grid-column-size:minmax(min(var(--vui-grid-column-min-w),100%),1fr);display:grid;inline-size:100%;max-inline-size:100%;box-sizing:border-box;gap:var(--vui-grid-row-gap) var(--vui-grid-column-gap);grid-template-columns:repeat(var(--vui-grid-columns),minmax(0,1fr));&[data-grid-filling-type=fill]{grid-template-columns:repeat(auto-fill,var(--vui-grid-column-size))}&[data-grid-filling-type=fit]{grid-template-columns:repeat(auto-fit,var(--vui-grid-column-size))}&[data-grid-fixed-breadth=true]{inline-size:max-content;max-inline-size:none;grid-template-columns:repeat(var(--vui-grid-columns),var(--vui-grid-column-min-w))}&[data-grid-has-rows=true]{grid-template-rows:repeat(var(--vui-grid-rows),var(--vui-grid-row-min-h))}&:where([data-grid-has-padding=true]){padding:var(--vui-grid-padding-block-start) var(--vui-grid-padding-inline-end) var(--vui-grid-padding-block-end) var(--vui-grid-padding-inline-start)}}.viraui__grid-module__Item_vNnv3{display:block;grid-column:var(--vui-grid-item-column);grid-row:var(--vui-grid-item-row);&[data-grid-item-fullwidth=true]{grid-column:1/-1}&[data-grid-item-fullheight=true]{grid-row:1/-1}&[data-grid-item-subgrid]{display:grid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=column]{grid-template-columns:subgrid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=row]{grid-template-rows:subgrid}}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-grid-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-columns{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-rows{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-column-min-w{syntax:"*";inherits:false;initial-value:10rem}@property --vui-grid-row-min-h{syntax:"*";inherits:false;initial-value:1fr}@property --vui-grid-column-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-item-column{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-item-row{syntax:"*";inherits:false;initial-value:auto}.viraui__grid-module__Grid_rTZor{--vui-grid-column-size:minmax(min(var(--vui-grid-column-min-w), 100%), 1fr);display:grid;inline-size:100%;max-inline-size:100%;box-sizing:border-box;gap:var(--vui-grid-row-gap) var(--vui-grid-column-gap);grid-template-columns:repeat(var(--vui-grid-columns),minmax(0,1fr));&[data-grid-filling-type=fill]{grid-template-columns:repeat(auto-fill,var(--vui-grid-column-size))}&[data-grid-filling-type=fit]{grid-template-columns:repeat(auto-fit,var(--vui-grid-column-size))}&[data-grid-fixed-breadth=true]{inline-size:max-content;max-inline-size:none;grid-template-columns:repeat(var(--vui-grid-columns),var(--vui-grid-column-min-w))}&[data-grid-has-rows=true]{grid-template-rows:repeat(var(--vui-grid-rows),var(--vui-grid-row-min-h))}&:where([data-grid-has-padding=true]){padding:var(--vui-grid-padding-block-start) var(--vui-grid-padding-inline-end) var(--vui-grid-padding-block-end) var(--vui-grid-padding-inline-start)}}.viraui__grid-module__Item_vNnv3{display:block;grid-column:var(--vui-grid-item-column);grid-row:var(--vui-grid-item-row);&[data-grid-item-fullwidth=true]{grid-column:1/-1}&[data-grid-item-fullheight=true]{grid-row:1/-1}&[data-grid-item-subgrid]{display:grid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=column]{grid-template-columns:subgrid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=row]{grid-template-rows:subgrid}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}@property --__progressive-blur-factor{syntax:"<number>";inherits:false;initial-value:1}@property --__progressive-blur-mask-image{syntax:"<image>";inherits:false;initial-value:linear-gradient(#0000,#0000)}@property --__progressive-blur-mask-gradient{syntax:"*";inherits:false;initial-value:#0000}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none;&[data-direction=top]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to top,var(--__progressive-blur-mask-gradient))}}&[data-direction=right]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to right,var(--__progressive-blur-mask-gradient))}}&[data-direction=bottom]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to bottom,var(--__progressive-blur-mask-gradient))}}&[data-direction=left]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to left,var(--__progressive-blur-mask-gradient))}}}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}@property --__progressive-blur-factor{syntax:"<number>";inherits:false;initial-value:1}@property --__progressive-blur-mask-image{syntax:"<image>";inherits:false;initial-value:linear-gradient(#0000,#0000)}@property --__progressive-blur-mask-gradient{syntax:"*";inherits:false;initial-value:#0000}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none;&[data-direction=top]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to top, var(--__progressive-blur-mask-gradient))}}&[data-direction=right]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to right, var(--__progressive-blur-mask-gradient))}}&[data-direction=bottom]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to bottom, var(--__progressive-blur-mask-gradient))}}&[data-direction=left]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to left, var(--__progressive-blur-mask-gradient))}}}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}
|
|
@@ -12,7 +12,8 @@ var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing
|
|
|
12
12
|
};
|
|
13
13
|
const layers = Array.from({ length: resolvedSteps }, (_, layerIndex) => {
|
|
14
14
|
const factor = getProgressiveBlurFactor(easing, layerIndex, resolvedSteps);
|
|
15
|
-
const
|
|
15
|
+
const maskStops = getProgressiveBlurMaskStops(layerIndex, resolvedSteps);
|
|
16
|
+
const maskGradient = formatProgressiveBlurMaskGradient(maskStops);
|
|
16
17
|
return /* @__PURE__ */ jsx("span", {
|
|
17
18
|
"aria-hidden": "true",
|
|
18
19
|
className: progressive_blur_module_default.Layer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest,var(--vui-radio-size),2px);--__radio-disk-size:round(down,calc(var(--__radio-size) / 2),2px);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=medium]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest, var(--vui-radio-size), 2px);--__radio-disk-size:round(down, calc(var(--__radio-size) / 2), 2px);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=medium]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}
|
|
@@ -12,10 +12,9 @@
|
|
|
12
12
|
"Surface borders or card outlines — use Surface border props"
|
|
13
13
|
],
|
|
14
14
|
"accessibility": [
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"Use render to swap the line root when
|
|
18
|
-
"Do not force aria-hidden — consumer decides decorative vs structural role"
|
|
15
|
+
"Standalone line is a native hr (implicit separator); orientation is visual via data-separator-orientation and Stack direction",
|
|
16
|
+
"Menu.Separator / Select.Separator own a11y through Base UI (Menu: role separator + aria-orientation; Select listbox: role presentation)",
|
|
17
|
+
"Use render to swap the line root element when needed"
|
|
19
18
|
],
|
|
20
19
|
"antiPatterns": [
|
|
21
20
|
"Using Select.Separator for general layout dividers",
|
|
@@ -22,7 +22,6 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
|
|
|
22
22
|
props: {
|
|
23
23
|
...otherProps,
|
|
24
24
|
"data-separator-orientation": orientation,
|
|
25
|
-
"aria-orientation": orientation,
|
|
26
25
|
className: clsx(separator_module_default.Line, className),
|
|
27
26
|
style: dynamicStyle
|
|
28
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}@property --__shimmer-base{syntax:"<color>";inherits:false;initial-value:currentcolor}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--vui-shimmer-highlight:oklch(from var(--__shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--__shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--__shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-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){background-image:none;-webkit-text-fill-color:
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}@property --__shimmer-base{syntax:"<color>";inherits:false;initial-value:currentcolor}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--vui-shimmer-highlight:oklch(from var(--__shimmer-base) min(calc(l + 0.35), 1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--__shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--__shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-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){background-image:none;-webkit-text-fill-color:initial}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}}
|
|
@@ -6,10 +6,12 @@ var SPINNER_VIEW_BOXES = {
|
|
|
6
6
|
"dot-grid": "-13 -13 45 45",
|
|
7
7
|
dots: "0 0 24 24"
|
|
8
8
|
};
|
|
9
|
+
var DotGridGlyph = lazy(() => import("./dot-grid.js"));
|
|
10
|
+
var DotsGlyph = lazy(() => import("./dots.js"));
|
|
9
11
|
var SPINNER_GLYPHS = {
|
|
10
12
|
bars: BarsGlyph,
|
|
11
|
-
"dot-grid":
|
|
12
|
-
dots:
|
|
13
|
+
"dot-grid": DotGridGlyph,
|
|
14
|
+
dots: DotsGlyph
|
|
13
15
|
};
|
|
14
16
|
var isLazySpinnerVariant = (variant) => variant === "dot-grid" || variant === "dots";
|
|
15
17
|
//#endregion
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;&[data-surface-color=primary]{--vui-surface-background:light-dark(
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;&[data-surface-color=primary]{--vui-surface-background:light-dark(
|
|
2
|
+
oklab(from var(--global-primary) l a b / 20%),
|
|
3
|
+
oklab(from var(--global-primary) l a b / 10%)
|
|
4
|
+
)}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(
|
|
5
|
+
oklab(from var(--global-primary) l a b / 20%),
|
|
6
|
+
oklab(from var(--global-primary) l a b / 10%)
|
|
7
|
+
)}@container root not style(--effect-vibrancy: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}&[data-surface-container=true]{container:surface/inline-size}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --__switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{max-block-size:min-content;&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);--__switch-thumb-inset:round(nearest,var(--vui-switch-thumb-inset),1px);--__switch-thumb-size:round(nearest,var(--vui-switch-thumb-size),2px);--__switch-track-block-size:calc(var(--__switch-thumb-size) + 2 * var(--__switch-thumb-inset));position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--__switch-thumb-size) * 2) + var(--__switch-thumb-inset) * 2);block-size:var(--__switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--__switch-thumb-inset));position:absolute;inset-block:var(--__switch-thumb-inset);inset-inline-start:var(--__switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--__switch-thumb-size);block-size:var(--__switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --__switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{max-block-size:min-content;&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);--__switch-thumb-inset:round(nearest, var(--vui-switch-thumb-inset), 1px);--__switch-thumb-size:round(nearest, var(--vui-switch-thumb-size), 2px);--__switch-track-block-size:calc(var(--__switch-thumb-size) + 2 * var(--__switch-thumb-inset));position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--__switch-thumb-size) * 2) + var(--__switch-thumb-inset) * 2);block-size:var(--__switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--__switch-thumb-inset));position:absolute;inset-block:var(--__switch-thumb-inset);inset-inline-start:var(--__switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--__switch-thumb-size);block-size:var(--__switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}
|
|
@@ -1 +1,17 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(
|
|
2
|
+
var(--font-scale-body-medium),
|
|
3
|
+
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
|
|
4
|
+
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
|
|
5
|
+
);--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small), var(--__text-medium), var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(
|
|
6
|
+
var(--font-scale-body-large),
|
|
7
|
+
calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),
|
|
8
|
+
var(--font-scale-body-x-large)
|
|
9
|
+
)}&[data-text-size=large]{--vui-text-font-size:clamp(
|
|
10
|
+
var(--font-scale-body-medium),
|
|
11
|
+
calc(var(--__text-medium) * pow(var(--font-heading-typescale), 1)),
|
|
12
|
+
var(--font-scale-body-large)
|
|
13
|
+
)}&[data-text-size=small]{--vui-text-font-size:clamp(
|
|
14
|
+
var(--font-scale-body-x-small),
|
|
15
|
+
calc(var(--__text-medium) * pow(var(--font-heading-typescale), -0.1)),
|
|
16
|
+
var(--font-scale-body-small)
|
|
17
|
+
)}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}
|
|
@@ -1 +1,33 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(
|
|
2
|
+
var(--font-scale-body-medium),
|
|
3
|
+
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
|
|
4
|
+
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
|
|
5
|
+
);--vui-title-font-size:clamp(
|
|
6
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5)),
|
|
7
|
+
calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),
|
|
8
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6))
|
|
9
|
+
);--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(
|
|
10
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6)),
|
|
11
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6) + 4.643cqi - 0.9286rem),
|
|
12
|
+
var(--font-scale-display)
|
|
13
|
+
)}&[data-title-size="2"]{--vui-title-font-size:clamp(
|
|
14
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4)),
|
|
15
|
+
calc(var(--__title-medium) * pow(var(--font-heading-typescale), 4)),
|
|
16
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5))
|
|
17
|
+
)}&[data-title-size="3"]{--vui-title-font-size:clamp(
|
|
18
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3)),
|
|
19
|
+
calc(var(--__title-medium) * pow(var(--font-heading-typescale), 3)),
|
|
20
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4))
|
|
21
|
+
)}&[data-title-size="4"]{--vui-title-font-size:clamp(
|
|
22
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2)),
|
|
23
|
+
calc(var(--__title-medium) * pow(var(--font-heading-typescale), 2)),
|
|
24
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3))
|
|
25
|
+
)}&[data-title-size="5"]{--vui-title-font-size:clamp(
|
|
26
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1)),
|
|
27
|
+
calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),
|
|
28
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2))
|
|
29
|
+
);--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(
|
|
30
|
+
var(--font-scale-body-medium),
|
|
31
|
+
var(--__title-medium),
|
|
32
|
+
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1))
|
|
33
|
+
);--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__toast-gap{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__toast-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__toast-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-offset-y{syntax:"<length>";inherits:false;initial-value:0}.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}}}@layer viraui.overrides{.viraui__toast-module__Banner_QkOlo{--__toast-gap:var(--space-small);--__toast-peek:var(--space-small);--__toast-scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--__toast-shrink:calc(1 - var(--__toast-scale));--__toast-stack-height:var(--toast-frontmost-height,
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__toast-gap{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__toast-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__toast-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-offset-y{syntax:"<length>";inherits:false;initial-value:0}.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}}}@layer viraui.overrides{.viraui__toast-module__Banner_QkOlo{--__toast-gap:var(--space-small);--__toast-peek:var(--space-small);--__toast-scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--__toast-shrink:calc(1 - var(--__toast-scale));--__toast-stack-height:var(--toast-frontmost-height, var(--toast-height, 0px));--__toast-offset-y:calc(
|
|
2
|
+
var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--__toast-gap) * -1) +
|
|
3
|
+
var(--toast-swipe-movement-y, 0px)
|
|
4
|
+
);position:absolute;inset-inline-end:0;inset-block-end:0;z-index:calc(1000 - var(--toast-index, 0));inline-size:100%;min-inline-size:16rem;will-change:transform,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--__toast-peek)) - (var(--__toast-shrink) * var(--__toast-stack-height))));transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-swiping]{transition:none}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y));block-size:var(--toast-height,auto)}&[data-starting-style]{transform:scale(1) translateY(150%)}&[data-ending-style]{opacity:0;transform:scale(1) translateY(150%);&[data-swipe-direction=up]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) - 150%))}&[data-swipe-direction=down]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) + 150%))}&[data-swipe-direction=left]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) - 150%)) translateY(var(--__toast-offset-y))}&[data-swipe-direction=right]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) + 150%)) translateY(var(--__toast-offset-y))}}&[data-limited]{opacity:0}&:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:calc(var(--__toast-gap) + 1px)}}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-left],.viraui__toast-module__Viewport_oSF5e[data-position=top-left]) .viraui__toast-module__Banner_QkOlo{inset-inline-end:auto;inset-inline-start:0}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-center],.viraui__toast-module__Viewport_oSF5e[data-position=top-center]) .viraui__toast-module__Banner_QkOlo{inset-inline:0;margin-inline:auto}.viraui__toast-module__Viewport_oSF5e[data-position^=top-] .viraui__toast-module__Banner_QkOlo{inset-block-end:auto;inset-block-start:0;transform-origin:top center;--__toast-offset-y:calc(
|
|
5
|
+
var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--__toast-gap)) + var(--toast-swipe-movement-y, 0px)
|
|
6
|
+
);transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--__toast-peek)) + (var(--__toast-shrink) * var(--__toast-stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2x-small))}&[data-expanded]{transform:none}}}
|
|
@@ -16,10 +16,12 @@ var Typewriter = ({ caret = "pipe", caretColor, children, className, delay = 0,
|
|
|
16
16
|
const textsKey = resolveTextsKey(texts, children);
|
|
17
17
|
const firstText = splitTextsKey(textsKey)[0] ?? "";
|
|
18
18
|
const [phrase, setPhrase] = useState(firstText);
|
|
19
|
+
const [prevTextsKey, setPrevTextsKey] = useState(textsKey);
|
|
19
20
|
const [typedHost, setTypedHost] = useState(null);
|
|
20
|
-
|
|
21
|
+
if (textsKey !== prevTextsKey) {
|
|
22
|
+
setPrevTextsKey(textsKey);
|
|
21
23
|
setPhrase(firstText);
|
|
22
|
-
}
|
|
24
|
+
}
|
|
23
25
|
useEffect(() => {
|
|
24
26
|
if (!typedHost || !textsKey) return;
|
|
25
27
|
const controller = new AbortController();
|
package/dist/preflight.css
CHANGED
|
@@ -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:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}: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;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::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}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[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)}[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{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}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:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@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(--effect-vibrancy: 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:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}: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;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::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}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[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)}[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{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}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:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@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(--effect-vibrancy: 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": "2026.2.
|
|
3
|
+
"version": "2026.2.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"registry": "https://registry.npmjs.org/"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@base-ui/react": "1.
|
|
31
|
-
"postcss": "8.5.
|
|
30
|
+
"@base-ui/react": ">=1.7.0",
|
|
31
|
+
"postcss": "8.5.26",
|
|
32
32
|
"postcss-cli": "11.0.1",
|
|
33
|
-
"react": ">=19.2.
|
|
34
|
-
"react-dom": ">=19.2.
|
|
33
|
+
"react": ">=19.2.8",
|
|
34
|
+
"react-dom": ">=19.2.8",
|
|
35
35
|
"unplugin-dts": "1.0.3",
|
|
36
|
-
"vite": "8.
|
|
36
|
+
"vite": "8.2.2",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.2.
|
|
39
|
-
"@viraui/icons": "2026.0.
|
|
38
|
+
"@viraui/foundation": "2026.2.2",
|
|
39
|
+
"@viraui/icons": "2026.0.2",
|
|
40
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
41
|
"@viraui/tsconfig": "2026.0.0"
|
|
42
42
|
},
|