@viraui/react 2026.7.1 → 2026.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalog.json +9 -3
- package/dist/components/button/button.css +1 -1
- package/dist/components/direction-provider/index.d.ts +2 -0
- package/dist/components/direction-provider/index.js +2 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/menu/menu-popup.d.ts +2 -2
- package/dist/components/menu/menu.css +1 -1
- package/dist/components/progressive-blur/progressive-blur.css +1 -1
- package/dist/components/prose/prose.d.ts +4 -1
- package/dist/components/select/select-group.js +1 -1
- package/dist/components/select/select.css +1 -1
- package/dist/components/select/select.js +4 -1
- package/dist/components/spinner/spinner.d.ts +6 -1
- package/dist/components/spinner/variants/arc.css +1 -0
- package/dist/components/spinner/variants/arc.d.ts +2 -0
- package/dist/components/spinner/variants/arc.js +19 -0
- package/dist/components/spinner/variants/arc.module.js +8 -0
- package/dist/components/spinner/variants/atom.css +1 -0
- package/dist/components/spinner/variants/atom.d.ts +6 -0
- package/dist/components/spinner/variants/atom.js +40 -0
- package/dist/components/spinner/variants/atom.module.js +8 -0
- package/dist/components/spinner/variants/blocks.css +1 -0
- package/dist/components/spinner/variants/blocks.d.ts +2 -0
- package/dist/components/spinner/variants/blocks.js +25 -0
- package/dist/components/spinner/variants/blocks.module.js +8 -0
- package/dist/components/spinner/variants/bouncing-dots.css +1 -0
- package/dist/components/spinner/variants/bouncing-dots.d.ts +2 -0
- package/dist/components/spinner/variants/bouncing-dots.js +21 -0
- package/dist/components/spinner/variants/bouncing-dots.module.js +8 -0
- package/dist/components/spinner/variants/cascade.css +1 -0
- package/dist/components/spinner/variants/cascade.d.ts +2 -0
- package/dist/components/spinner/variants/cascade.js +34 -0
- package/dist/components/spinner/variants/cascade.module.js +8 -0
- package/dist/components/spinner/variants/circular-dots.css +1 -0
- package/dist/components/spinner/variants/circular-dots.d.ts +2 -0
- package/dist/components/spinner/variants/circular-dots.js +26 -0
- package/dist/components/spinner/variants/circular-dots.module.js +8 -0
- package/dist/components/spinner/variants/classic-v2.css +1 -0
- package/dist/components/spinner/variants/classic-v2.d.ts +2 -0
- package/dist/components/spinner/variants/classic-v2.js +24 -0
- package/dist/components/spinner/variants/classic-v2.module.js +8 -0
- package/dist/components/spinner/variants/classic.css +1 -0
- package/dist/components/spinner/variants/classic.d.ts +2 -0
- package/dist/components/spinner/variants/classic.js +22 -0
- package/dist/components/spinner/variants/classic.module.js +8 -0
- package/dist/components/spinner/variants/clock.css +1 -0
- package/dist/components/spinner/variants/clock.d.ts +2 -0
- package/dist/components/spinner/variants/clock.js +18 -0
- package/dist/components/spinner/variants/clock.module.js +8 -0
- package/dist/components/spinner/variants/comet.css +1 -0
- package/dist/components/spinner/variants/comet.d.ts +2 -0
- package/dist/components/spinner/variants/comet.js +33 -0
- package/dist/components/spinner/variants/comet.module.js +10 -0
- package/dist/components/spinner/variants/compass.css +1 -0
- package/dist/components/spinner/variants/compass.d.ts +2 -0
- package/dist/components/spinner/variants/compass.js +16 -0
- package/dist/components/spinner/variants/compass.module.js +8 -0
- package/dist/components/spinner/variants/dual.css +1 -0
- package/dist/components/spinner/variants/dual.d.ts +2 -0
- package/dist/components/spinner/variants/dual.js +25 -0
- package/dist/components/spinner/variants/dual.module.js +10 -0
- package/dist/components/spinner/variants/eclipse.css +1 -0
- package/dist/components/spinner/variants/eclipse.d.ts +6 -0
- package/dist/components/spinner/variants/eclipse.js +21 -0
- package/dist/components/spinner/variants/eclipse.module.js +9 -0
- package/dist/components/spinner/variants/flip.css +1 -0
- package/dist/components/spinner/variants/flip.d.ts +2 -0
- package/dist/components/spinner/variants/flip.js +17 -0
- package/dist/components/spinner/variants/flip.module.js +8 -0
- package/dist/components/spinner/variants/gather.css +1 -0
- package/dist/components/spinner/variants/gather.d.ts +2 -0
- package/dist/components/spinner/variants/gather.js +50 -0
- package/dist/components/spinner/variants/gather.module.js +11 -0
- package/dist/components/spinner/variants/index.d.ts +9 -1
- package/dist/components/spinner/variants/index.js +96 -10
- package/dist/components/spinner/variants/leap.css +1 -0
- package/dist/components/spinner/variants/leap.d.ts +6 -0
- package/dist/components/spinner/variants/leap.js +27 -0
- package/dist/components/spinner/variants/leap.module.js +8 -0
- package/dist/components/spinner/variants/linear-dots.css +1 -0
- package/dist/components/spinner/variants/linear-dots.d.ts +2 -0
- package/dist/components/spinner/variants/linear-dots.js +21 -0
- package/dist/components/spinner/variants/linear-dots.module.js +8 -0
- package/dist/components/spinner/variants/loading.css +1 -0
- package/dist/components/spinner/variants/loading.d.ts +2 -0
- package/dist/components/spinner/variants/loading.js +50 -0
- package/dist/components/spinner/variants/loading.module.js +8 -0
- package/dist/components/spinner/variants/morph.css +1 -0
- package/dist/components/spinner/variants/morph.d.ts +2 -0
- package/dist/components/spinner/variants/morph.js +17 -0
- package/dist/components/spinner/variants/morph.module.js +8 -0
- package/dist/components/spinner/variants/orbit.css +1 -0
- package/dist/components/spinner/variants/orbit.d.ts +2 -0
- package/dist/components/spinner/variants/orbit.js +24 -0
- package/dist/components/spinner/variants/orbit.module.js +8 -0
- package/dist/components/spinner/variants/pulse.css +1 -0
- package/dist/components/spinner/variants/pulse.d.ts +2 -0
- package/dist/components/spinner/variants/pulse.js +19 -0
- package/dist/components/spinner/variants/pulse.module.js +8 -0
- package/dist/components/spinner/variants/radar.css +1 -0
- package/dist/components/spinner/variants/radar.d.ts +2 -0
- package/dist/components/spinner/variants/radar.js +53 -0
- package/dist/components/spinner/variants/radar.module.js +8 -0
- package/dist/components/spinner/variants/ring.css +1 -0
- package/dist/components/spinner/variants/ring.d.ts +2 -0
- package/dist/components/spinner/variants/ring.js +24 -0
- package/dist/components/spinner/variants/ring.module.js +8 -0
- package/dist/components/spinner/variants/ripple.css +1 -0
- package/dist/components/spinner/variants/ripple.d.ts +2 -0
- package/dist/components/spinner/variants/ripple.js +23 -0
- package/dist/components/spinner/variants/ripple.module.js +8 -0
- package/dist/components/spinner/variants/slide.css +1 -0
- package/dist/components/spinner/variants/slide.d.ts +2 -0
- package/dist/components/spinner/variants/slide.js +24 -0
- package/dist/components/spinner/variants/slide.module.js +8 -0
- package/dist/components/spinner/variants/snake.css +1 -0
- package/dist/components/spinner/variants/snake.d.ts +2 -0
- package/dist/components/spinner/variants/snake.js +19 -0
- package/dist/components/spinner/variants/snake.module.js +11 -0
- package/dist/components/spinner/variants/swirl.css +1 -0
- package/dist/components/spinner/variants/swirl.d.ts +2 -0
- package/dist/components/spinner/variants/swirl.js +35 -0
- package/dist/components/spinner/variants/swirl.module.js +8 -0
- package/dist/components/spinner/variants/trace.css +1 -0
- package/dist/components/spinner/variants/trace.d.ts +2 -0
- package/dist/components/spinner/variants/trace.js +28 -0
- package/dist/components/spinner/variants/trace.module.js +8 -0
- package/dist/components/spinner/variants/wave.css +1 -0
- package/dist/components/spinner/variants/wave.d.ts +2 -0
- package/dist/components/spinner/variants/wave.js +25 -0
- package/dist/components/spinner/variants/wave.module.js +8 -0
- package/dist/components/stack/stack.css +1 -1
- package/dist/components/stack/stack.d.ts +15 -3
- package/dist/components/stack/stack.js +2 -1
- package/dist/components/surface/surface.css +1 -1
- package/dist/components/text/text.css +1 -1
- package/dist/components/text/text.d.ts +10 -2
- package/dist/components/title/title.d.ts +7 -0
- package/dist/index.js +2 -1
- package/dist/preflight.css +1 -1
- package/dist/specs/PROTOCOL.md +1 -1
- package/dist/specs/activity-hints.xml +4 -4
- package/dist/specs/components/accordion/props.xml +2 -2
- package/dist/specs/components/accordion/usage.xml +2 -0
- package/dist/specs/components/autocomplete/patterns.xml +4 -4
- package/dist/specs/components/autocomplete/props.xml +2 -2
- package/dist/specs/components/autocomplete/usage.xml +1 -1
- package/dist/specs/components/button/patterns.xml +2 -2
- package/dist/specs/components/button/props.xml +4 -4
- package/dist/specs/components/button/usage.xml +2 -1
- package/dist/specs/components/chip/patterns.xml +2 -2
- package/dist/specs/components/chip/props.xml +2 -2
- package/dist/specs/components/chip/usage.xml +2 -0
- package/dist/specs/components/direction-provider/a11y.xml +6 -0
- package/dist/specs/components/direction-provider/meta.xml +20 -0
- package/dist/specs/components/direction-provider/patterns.xml +27 -0
- package/dist/specs/components/direction-provider/props.xml +18 -0
- package/dist/specs/components/direction-provider/usage.xml +10 -0
- package/dist/specs/components/disclosure/patterns.xml +2 -2
- package/dist/specs/components/disclosure/props.xml +2 -2
- package/dist/specs/components/disclosure/usage.xml +2 -0
- package/dist/specs/components/glow/patterns.xml +1 -1
- package/dist/specs/components/grid/patterns.xml +3 -3
- package/dist/specs/components/icon-button/props.xml +4 -4
- package/dist/specs/components/icon-button/usage.xml +3 -1
- package/dist/specs/components/menu/patterns.xml +18 -18
- package/dist/specs/components/menu/props.xml +5 -5
- package/dist/specs/components/menu/usage.xml +3 -1
- package/dist/specs/components/meter/patterns.xml +1 -1
- package/dist/specs/components/progressive-blur/usage.xml +2 -0
- package/dist/specs/components/prose/meta.xml +1 -1
- package/dist/specs/components/prose/patterns.xml +34 -10
- package/dist/specs/components/prose/props.xml +3 -1
- package/dist/specs/components/prose/usage.xml +4 -1
- package/dist/specs/components/select/patterns.xml +2 -2
- package/dist/specs/components/select/props.xml +2 -2
- package/dist/specs/components/select/usage.xml +1 -0
- package/dist/specs/components/slider/patterns.xml +1 -1
- package/dist/specs/components/spinner/props.xml +1 -1
- package/dist/specs/components/spinner/usage.xml +1 -1
- package/dist/specs/components/stack/patterns.xml +102 -4
- package/dist/specs/components/stack/props.xml +9 -3
- package/dist/specs/components/stack/usage.xml +7 -3
- package/dist/specs/components/surface/patterns.xml +3 -3
- package/dist/specs/components/surface/usage.xml +1 -1
- package/dist/specs/components/tabs/patterns.xml +3 -3
- package/dist/specs/components/tabs/props.xml +1 -1
- package/dist/specs/components/tabs/usage.xml +2 -1
- package/dist/specs/components/text/meta.xml +2 -1
- package/dist/specs/components/text/patterns.xml +19 -16
- package/dist/specs/components/text/props.xml +8 -6
- package/dist/specs/components/text/usage.xml +9 -3
- package/dist/specs/components/textfield/patterns.xml +3 -3
- package/dist/specs/components/textfield/props.xml +2 -2
- package/dist/specs/components/textfield/usage.xml +2 -1
- package/dist/specs/components/title/meta.xml +2 -1
- package/dist/specs/components/title/patterns.xml +11 -10
- package/dist/specs/components/title/props.xml +5 -4
- package/dist/specs/components/title/usage.xml +8 -3
- package/dist/specs/components/toggle-button/patterns.xml +8 -8
- package/dist/specs/components/toggle-button/props.xml +3 -3
- package/dist/specs/components/toggle-button/usage.xml +2 -0
- package/dist/specs/components/toggle-group/patterns.xml +3 -3
- package/dist/specs/components/tooltip/patterns.xml +7 -7
- package/dist/specs/foundation/attributes.xml +24 -4
- package/dist/specs/foundation/bootstrap.xml +1 -1
- package/dist/specs/foundation/modules.xml +14 -5
- package/dist/specs/foundation/theme-topics.xml +3 -3
- package/dist/specs/foundation/toggles.xml +3 -3
- package/dist/specs/index.xml +14 -22
- package/dist/specs/patterns/compose-layout-first.xml +1 -1
- package/package.json +2 -2
- package/dist/components/spinner/variants/bars.d.ts +0 -2
- package/dist/components/spinner/variants/bars.js +0 -134
- package/dist/components/spinner/variants/dot-grid.css +0 -1
- package/dist/components/spinner/variants/dot-grid.d.ts +0 -2
- package/dist/components/spinner/variants/dot-grid.js +0 -57
- package/dist/components/spinner/variants/dot-grid.module.js +0 -16
- package/dist/components/spinner/variants/dots.d.ts +0 -2
- package/dist/components/spinner/variants/dots.js +0 -189
- package/dist/specs/patterns/equal-width-actions.xml +0 -22
- package/dist/specs/patterns/page-chrome.xml +0 -34
- package/dist/specs/patterns/stack-as-surface.xml +0 -37
package/dist/catalog.json
CHANGED
|
@@ -86,6 +86,12 @@
|
|
|
86
86
|
"summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
|
|
87
87
|
"agentDocs": "./specs/components/dialog/meta.xml"
|
|
88
88
|
},
|
|
89
|
+
{
|
|
90
|
+
"id": "direction-provider",
|
|
91
|
+
"name": "DirectionProvider",
|
|
92
|
+
"summary": "Transparent re-export of Base UI DirectionProvider and useDirection. Enables RTL behavior for Base UI–backed components; does not set HTML dir or CSS direction — pair with document dir=rtl on a portal ancestor (usually html).",
|
|
93
|
+
"agentDocs": "./specs/components/direction-provider/meta.xml"
|
|
94
|
+
},
|
|
89
95
|
{
|
|
90
96
|
"id": "disclosure",
|
|
91
97
|
"name": "Disclosure",
|
|
@@ -179,7 +185,7 @@
|
|
|
179
185
|
{
|
|
180
186
|
"id": "prose",
|
|
181
187
|
"name": "Prose",
|
|
182
|
-
"summary": "
|
|
188
|
+
"summary": "Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm; reading column via parent Stack `maxWidth` sized for body Text `size`.",
|
|
183
189
|
"agentDocs": "./specs/components/prose/meta.xml"
|
|
184
190
|
},
|
|
185
191
|
{
|
|
@@ -257,7 +263,7 @@
|
|
|
257
263
|
{
|
|
258
264
|
"id": "text",
|
|
259
265
|
"name": "Text",
|
|
260
|
-
"summary": "Theme-aware body-copy primitive with tone, family, and
|
|
266
|
+
"summary": "Theme-aware body-copy primitive with tone, family, sizing, and readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
|
|
261
267
|
"agentDocs": "./specs/components/text/meta.xml"
|
|
262
268
|
},
|
|
263
269
|
{
|
|
@@ -275,7 +281,7 @@
|
|
|
275
281
|
{
|
|
276
282
|
"id": "title",
|
|
277
283
|
"name": "Title",
|
|
278
|
-
"summary": "Theme-aware heading and display typography
|
|
284
|
+
"summary": "Theme-aware heading and display typography with readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
|
|
279
285
|
"agentDocs": "./specs/components/title/meta.xml"
|
|
280
286
|
},
|
|
281
287
|
{
|
|
@@ -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:true;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-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--space-xl) - var(--space-s) - var(--space-xs) - var(--space-2xs));--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);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"
|
|
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:true;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-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--space-xl) - var(--space-s) - var(--space-xs) - var(--space-2xs));--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);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" 500;gap:var(--space-s);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-m);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]{--__corner-shape:round;border-radius:var(--radius-full)}&[data-size=l]{--vui-button-height:calc(var(--space-2xl) + var(--space-xs));--vui-button-padding-inline:var(--space-m);--vui-button-padding-block:var(--space-s);--vui-button-radius:var(--radius-m);--vui-button-icon-size:calc(var(--space-l) - var(--space-xs))}&[data-size=s]{--vui-button-height:var(--space-xl);--vui-button-padding-inline:var(--space-s);--vui-button-padding-block:var(--space-xs);--vui-button-radius:var(--radius-s);--vui-button-icon-size:calc(var(--space-l) - var(--space-s));gap:var(--space-xs);font-size:var(--font-scale-body-s)}&[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(--global-foreground);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(--global-foreground);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]:is(:disabled,[data-disabled],[aria-disabled=true]){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:round(to-zero,var(--vui-button-icon-size),2px);inline-size:round(to-zero,var(--vui-button-icon-size),2px);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)}}
|
|
@@ -6,8 +6,8 @@ type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style'
|
|
|
6
6
|
*
|
|
7
7
|
* Encapsulates Portal + Positioner + Popup with Elevator + Surface list chrome
|
|
8
8
|
* (Select-like). Positioning props forward to the Positioner; `sideOffset`
|
|
9
|
-
* defaults to `2`. RTL placement comes from
|
|
10
|
-
* app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
|
|
9
|
+
* defaults to `2`. RTL placement comes from `@viraui/react` `DirectionProvider`
|
|
10
|
+
* (Base UI re-export); app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
|
|
11
11
|
*
|
|
12
12
|
* @defaultValue `sideOffset` is `2`.
|
|
13
13
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-xs);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-xl)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-s);min-block-size:var(--space-s);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-xs);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-xl)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-s);min-block-size:var(--space-s);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;color:inherit;text-decoration:none;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}
|
|
@@ -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;border-radius:inherit;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}
|
|
@@ -3,7 +3,10 @@ import type * as React from 'react';
|
|
|
3
3
|
/**
|
|
4
4
|
* Public Prose props.
|
|
5
5
|
*
|
|
6
|
-
*
|
|
6
|
+
* Text-wall grouping for articles, docs, privacy/terms — heading-aware em rhythm
|
|
7
|
+
* on direct document blocks. Prefer Stack `maxWidth` sized for the body Text `size`
|
|
8
|
+
* (~10–12 words/line; smaller → narrower). Short UI blurbs stay on Text/Title.
|
|
9
|
+
* Native `div` attributes pass through.
|
|
7
10
|
* Replace the root with Base UI `render` (for example `article`). No `as` prop.
|
|
8
11
|
*
|
|
9
12
|
* @defaultValue Native div pass-through props keep React defaults.
|
|
@@ -10,7 +10,7 @@ function SelectGroup({ children, className, label, ...groupProps }) {
|
|
|
10
10
|
className,
|
|
11
11
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
12
12
|
rowGap: "2xs",
|
|
13
|
-
vPadding: "2xs"
|
|
13
|
+
vPadding: ["2xs", 0]
|
|
14
14
|
}),
|
|
15
15
|
children: [/* @__PURE__ */ jsxs(Select.GroupLabel, {
|
|
16
16
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2xl);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-m);--vui-select-trigger-padding-inline-start:calc(var(--space-s) + var(--space-xs));--vui-select-trigger-padding-inline-end:var(--space-xs);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" *";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"* ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;block-size:round(to-zero,var(--vui-select-input-height),2px);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;transition:background var(--duration-instant) var(--easing-standard);&:not([data-disabled],:disabled):hover{--vui-select-control-group-background:var(--base-2)}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-s);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-m);--vui-select-list-padding:var(--space-xs);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-l);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2xl);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-m);--vui-select-trigger-padding-inline-start:calc(var(--space-s) + var(--space-xs));--vui-select-trigger-padding-inline-end:var(--space-xs);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" *";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"* ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;block-size:round(to-zero,var(--vui-select-input-height),2px);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;transition:background var(--duration-instant) var(--easing-standard);&:not([data-disabled],:disabled):hover{--vui-select-control-group-background:var(--base-2)}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-s);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-m);--vui-select-list-padding:var(--space-xs);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-l);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-m);min-block-size:var(--space-m);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/8%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
|
|
@@ -119,7 +119,10 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
|
|
|
119
119
|
vPadding: "xs",
|
|
120
120
|
"data-vibrant": true
|
|
121
121
|
}),
|
|
122
|
-
children
|
|
122
|
+
children: /* @__PURE__ */ jsx(Stack, {
|
|
123
|
+
rowGap: "2xs",
|
|
124
|
+
children
|
|
125
|
+
})
|
|
123
126
|
})
|
|
124
127
|
}),
|
|
125
128
|
/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
|
|
@@ -14,7 +14,12 @@ export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
|
|
|
14
14
|
*/
|
|
15
15
|
color?: string;
|
|
16
16
|
/**
|
|
17
|
-
* Visual animation style.
|
|
17
|
+
* Visual animation style. Catalog: `arc`, `atom`, `blocks`, `bouncing-dots`,
|
|
18
|
+
* `cascade`, `circular-dots`, `classic`, `classic-v2`, `clock`, `comet`,
|
|
19
|
+
* `compass`, `dual`, `eclipse`, `flip`, `gather`, `leap`, `linear-dots`,
|
|
20
|
+
* `loading`, `morph`, `orbit`, `pulse`, `radar`, `ring`, `ripple`, `slide`,
|
|
21
|
+
* `snake`, `swirl`, `trace`, `wave`. Legacy aliases: `bars`→`wave`,
|
|
22
|
+
* `dot-grid`→`blocks`, `dots`→`eclipse`.
|
|
18
23
|
*
|
|
19
24
|
* @defaultValue 'bars'
|
|
20
25
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__arc-module__spinner-arc-spin_hfLao{to{transform:rotate(1turn)}}.viraui__arc-module__Spin_iS5dU{transform-origin:12px 12px;animation:viraui__arc-module__spinner-arc-spin_hfLao .8s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import './arc.css';
|
|
2
|
+
import arc_module_default from "./arc.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/arc.tsx
|
|
5
|
+
var ArcGlyph = () => /* @__PURE__ */ jsx("g", {
|
|
6
|
+
fill: "none",
|
|
7
|
+
stroke: "currentColor",
|
|
8
|
+
strokeWidth: "2.5",
|
|
9
|
+
strokeLinecap: "round",
|
|
10
|
+
children: /* @__PURE__ */ jsx("circle", {
|
|
11
|
+
className: arc_module_default.Spin,
|
|
12
|
+
cx: "12",
|
|
13
|
+
cy: "12",
|
|
14
|
+
r: "10",
|
|
15
|
+
strokeDasharray: "18 44.8"
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
//#endregion
|
|
19
|
+
export { ArcGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/arc.module.css
|
|
2
|
+
var Spin = "viraui__arc-module__Spin_iS5dU";
|
|
3
|
+
var arc_module_default = {
|
|
4
|
+
Spin,
|
|
5
|
+
"spinner-arc-spin": "viraui__arc-module__spinner-arc-spin_hfLao"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Spin, arc_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__atom-module__spinner-atom-spin_pBfsa{to{transform:rotate(1turn)}}.viraui__atom-module__Orbit_Ceb6Y{transform-origin:12px 12px;animation:viraui__atom-module__spinner-atom-spin_pBfsa 1s linear infinite;animation-delay:calc(1s * (var(--__spinner-atom-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;transform:rotate(60deg)}}}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import './atom.css';
|
|
2
|
+
import atom_module_default from "./atom.module.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/atom.tsx
|
|
5
|
+
/** Upstream: 3 orbits, tilt step = 180 / count. */
|
|
6
|
+
var ORBITS = [
|
|
7
|
+
0,
|
|
8
|
+
1,
|
|
9
|
+
2
|
|
10
|
+
];
|
|
11
|
+
var TILT = 180 / ORBITS.length;
|
|
12
|
+
/**
|
|
13
|
+
* 2D projection of upstream 3-orbit atom (shell + tilted ellipses).
|
|
14
|
+
* Pure SVG — no foreignObject / CSS 3D.
|
|
15
|
+
*/
|
|
16
|
+
var AtomGlyph = () => /* @__PURE__ */ jsxs("g", {
|
|
17
|
+
fill: "none",
|
|
18
|
+
stroke: "currentColor",
|
|
19
|
+
strokeLinecap: "round",
|
|
20
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
21
|
+
cx: "12",
|
|
22
|
+
cy: "12",
|
|
23
|
+
r: "11.34",
|
|
24
|
+
strokeWidth: "1.32"
|
|
25
|
+
}), ORBITS.map((index) => /* @__PURE__ */ jsx("g", {
|
|
26
|
+
transform: `rotate(${index * TILT} 12 12)`,
|
|
27
|
+
children: /* @__PURE__ */ jsx("ellipse", {
|
|
28
|
+
className: atom_module_default.Orbit,
|
|
29
|
+
cx: "12",
|
|
30
|
+
cy: "12",
|
|
31
|
+
rx: "11.34",
|
|
32
|
+
ry: "4",
|
|
33
|
+
opacity: "0.55",
|
|
34
|
+
strokeWidth: "1.08",
|
|
35
|
+
style: { "--__spinner-atom-step": index }
|
|
36
|
+
})
|
|
37
|
+
}, index))]
|
|
38
|
+
});
|
|
39
|
+
//#endregion
|
|
40
|
+
export { AtomGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/atom.module.css
|
|
2
|
+
var Orbit = "viraui__atom-module__Orbit_Ceb6Y";
|
|
3
|
+
var atom_module_default = {
|
|
4
|
+
Orbit,
|
|
5
|
+
"spinner-atom-spin": "viraui__atom-module__spinner-atom-spin_pBfsa"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Orbit, atom_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__blocks-module__spinner-blocks-sweep_KLVpF{0%,70%,to{transform:scale(1)}35%{transform:scale(0)}}.viraui__blocks-module__Cell_5peuH{transform-box:fill-box;transform-origin:center;animation:viraui__blocks-module__spinner-blocks-sweep_KLVpF 1.3s ease-in-out infinite;animation-delay:calc(1.3s * (var(--__spinner-blocks-step) - 5) / 5);@media (prefers-reduced-motion:reduce){animation:none;transform:scale(.8)}}}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import './blocks.css';
|
|
2
|
+
import blocks_module_default from "./blocks.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/blocks.tsx
|
|
5
|
+
var SIDE = 3;
|
|
6
|
+
var CELL = 20.8 / SIDE;
|
|
7
|
+
var CELLS = Array.from({ length: 9 }, (_, index) => ({
|
|
8
|
+
col: index % SIDE,
|
|
9
|
+
row: Math.floor(index / SIDE),
|
|
10
|
+
step: index % SIDE + Math.floor(index / SIDE)
|
|
11
|
+
}));
|
|
12
|
+
var BlocksGlyph = () => /* @__PURE__ */ jsx("g", {
|
|
13
|
+
fill: "currentColor",
|
|
14
|
+
children: CELLS.map(({ col, row, step }) => /* @__PURE__ */ jsx("rect", {
|
|
15
|
+
className: blocks_module_default.Cell,
|
|
16
|
+
x: col * 8.533333333333333,
|
|
17
|
+
y: row * 8.533333333333333,
|
|
18
|
+
width: CELL,
|
|
19
|
+
height: CELL,
|
|
20
|
+
rx: "1.5",
|
|
21
|
+
style: { "--__spinner-blocks-step": step }
|
|
22
|
+
}, `${col}-${row}`))
|
|
23
|
+
});
|
|
24
|
+
//#endregion
|
|
25
|
+
export { BlocksGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/blocks.module.css
|
|
2
|
+
var Cell = "viraui__blocks-module__Cell_5peuH";
|
|
3
|
+
var blocks_module_default = {
|
|
4
|
+
Cell,
|
|
5
|
+
"spinner-blocks-sweep": "viraui__blocks-module__spinner-blocks-sweep_KLVpF"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Cell, blocks_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej{0%{transform:translateY(14%)}to{transform:translateY(-72%)}}.viraui__bouncing-dots-module__Dot_oIZQs{transform-box:fill-box;transform-origin:center;animation:viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej .5s ease-in-out infinite alternate;animation-delay:calc(.5s * (var(--__spinner-bouncing-dots-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;transform:translateY(calc(var(--__spinner-bouncing-dots-step) * -20%))}}}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import './bouncing-dots.css';
|
|
2
|
+
import bouncing_dots_module_default from "./bouncing-dots.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/bouncing-dots.tsx
|
|
5
|
+
var DOTS = [
|
|
6
|
+
0,
|
|
7
|
+
1,
|
|
8
|
+
2
|
|
9
|
+
];
|
|
10
|
+
var BouncingDotsGlyph = () => /* @__PURE__ */ jsx("g", {
|
|
11
|
+
fill: "currentColor",
|
|
12
|
+
children: DOTS.map((index) => /* @__PURE__ */ jsx("circle", {
|
|
13
|
+
className: bouncing_dots_module_default.Dot,
|
|
14
|
+
cx: 5 + index * 7,
|
|
15
|
+
cy: "14",
|
|
16
|
+
r: "3",
|
|
17
|
+
style: { "--__spinner-bouncing-dots-step": index }
|
|
18
|
+
}, index))
|
|
19
|
+
});
|
|
20
|
+
//#endregion
|
|
21
|
+
export { BouncingDotsGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/bouncing-dots.module.css
|
|
2
|
+
var Dot = "viraui__bouncing-dots-module__Dot_oIZQs";
|
|
3
|
+
var bouncing_dots_module_default = {
|
|
4
|
+
Dot,
|
|
5
|
+
"spinner-bouncing-dots-bounce": "viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Dot, bouncing_dots_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__cascade-module__spinner-cascade-turn_eKyVK{to{transform:rotate(1turn)}}.viraui__cascade-module__Arc_t1Trm{transform-origin:12px 12px;animation:viraui__cascade-module__spinner-cascade-turn_eKyVK 1.5s cubic-bezier(.68,-.75,.265,1.75) infinite;animation-delay:calc(1.5s * (var(--__spinner-cascade-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none}}}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import './cascade.css';
|
|
2
|
+
import cascade_module_default from "./cascade.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/cascade.tsx
|
|
5
|
+
var RADII = [
|
|
6
|
+
{
|
|
7
|
+
r: 10.5,
|
|
8
|
+
dash: 16.5
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
r: 7,
|
|
12
|
+
dash: 11
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
r: 3.5,
|
|
16
|
+
dash: 5.5
|
|
17
|
+
}
|
|
18
|
+
];
|
|
19
|
+
var CascadeGlyph = () => /* @__PURE__ */ jsx("g", {
|
|
20
|
+
fill: "none",
|
|
21
|
+
stroke: "currentColor",
|
|
22
|
+
strokeWidth: "2",
|
|
23
|
+
strokeLinecap: "round",
|
|
24
|
+
children: RADII.map(({ r, dash }, index) => /* @__PURE__ */ jsx("circle", {
|
|
25
|
+
className: cascade_module_default.Arc,
|
|
26
|
+
cx: "12",
|
|
27
|
+
cy: "12",
|
|
28
|
+
r,
|
|
29
|
+
strokeDasharray: `${dash} ${dash * 3}`,
|
|
30
|
+
style: { "--__spinner-cascade-step": index }
|
|
31
|
+
}, r))
|
|
32
|
+
});
|
|
33
|
+
//#endregion
|
|
34
|
+
export { CascadeGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/cascade.module.css
|
|
2
|
+
var Arc = "viraui__cascade-module__Arc_t1Trm";
|
|
3
|
+
var cascade_module_default = {
|
|
4
|
+
Arc,
|
|
5
|
+
"spinner-cascade-turn": "viraui__cascade-module__spinner-cascade-turn_eKyVK"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Arc, cascade_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__circular-dots-module__spinner-circular-dots-fade_27GIR{0%{opacity:1}to{opacity:.2}}.viraui__circular-dots-module__Dot_puBZv{animation:viraui__circular-dots-module__spinner-circular-dots-fade_27GIR .8s linear infinite;animation-delay:calc(.8s * (var(--__spinner-circular-dots-step) - 8) / 8);@media (prefers-reduced-motion:reduce){animation:none;opacity:.6}}}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import './circular-dots.css';
|
|
2
|
+
import circular_dots_module_default from "./circular-dots.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/circular-dots.tsx
|
|
5
|
+
var DOTS = [
|
|
6
|
+
[12, 2.25],
|
|
7
|
+
[18.894, 5.106],
|
|
8
|
+
[21.75, 12],
|
|
9
|
+
[18.894, 18.894],
|
|
10
|
+
[12, 21.75],
|
|
11
|
+
[5.106, 18.894],
|
|
12
|
+
[2.25, 12],
|
|
13
|
+
[5.106, 5.106]
|
|
14
|
+
];
|
|
15
|
+
var CircularDotsGlyph = () => /* @__PURE__ */ jsx("g", {
|
|
16
|
+
fill: "currentColor",
|
|
17
|
+
children: DOTS.map(([cx, cy], index) => /* @__PURE__ */ jsx("circle", {
|
|
18
|
+
className: circular_dots_module_default.Dot,
|
|
19
|
+
cx,
|
|
20
|
+
cy,
|
|
21
|
+
r: "2.25",
|
|
22
|
+
style: { "--__spinner-circular-dots-step": index }
|
|
23
|
+
}, `${cx}-${cy}`))
|
|
24
|
+
});
|
|
25
|
+
//#endregion
|
|
26
|
+
export { CircularDotsGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/circular-dots.module.css
|
|
2
|
+
var Dot = "viraui__circular-dots-module__Dot_puBZv";
|
|
3
|
+
var circular_dots_module_default = {
|
|
4
|
+
Dot,
|
|
5
|
+
"spinner-circular-dots-fade": "viraui__circular-dots-module__spinner-circular-dots-fade_27GIR"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Dot, circular_dots_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3{0%{opacity:1}to{opacity:.4}}.viraui__classic-v2-module__Tick_n5bOq{animation:viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3 .8s linear infinite;animation-delay:calc(.8s * (var(--__spinner-classic-v2-step) - 8) / 8);@media (prefers-reduced-motion:reduce){animation:none;opacity:.5}}}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import './classic-v2.css';
|
|
2
|
+
import classic_v2_module_default from "./classic-v2.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/classic-v2.tsx
|
|
5
|
+
var TICKS = [
|
|
6
|
+
"M11 1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V1Z",
|
|
7
|
+
"M17.6569 7.75736C17.2664 8.14788 16.6332 8.14788 16.2426 7.75736C15.8521 7.36684 15.8521 6.73367 16.2426 6.34315L19.0711 3.51472C19.4616 3.12419 20.0948 3.12419 20.4853 3.51472C20.8758 3.90524 20.8758 4.53841 20.4853 4.92893L17.6569 7.75736Z",
|
|
8
|
+
"M19 13C18.4477 13 18 12.5523 18 12C18 11.4477 18.4477 11 19 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H19Z",
|
|
9
|
+
"M16.2426 17.6569C15.8521 17.2664 15.8521 16.6332 16.2426 16.2426C16.6332 15.8521 17.2664 15.8521 17.6569 16.2426L20.4853 19.0711C20.8758 19.4616 20.8758 20.0948 20.4853 20.4853C20.0948 20.8758 19.4616 20.8758 19.0711 20.4853L16.2426 17.6569Z",
|
|
10
|
+
"M11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19V23C13 23.5523 12.5523 24 12 24C11.4477 24 11 23.5523 11 23V19Z",
|
|
11
|
+
"M4.92893 20.4853C4.53841 20.8758 3.90524 20.8758 3.51472 20.4853C3.12419 20.0948 3.12419 19.4616 3.51472 19.0711L6.34315 16.2426C6.73367 15.8521 7.36684 15.8521 7.75736 16.2426C8.14788 16.6332 8.14788 17.2664 7.75736 17.6569L4.92893 20.4853Z",
|
|
12
|
+
"M1 13C0.447715 13 0 12.5523 0 12C0 11.4477 0.447715 11 1 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H1Z",
|
|
13
|
+
"M3.51472 4.92893C3.12419 4.53841 3.12419 3.90524 3.51472 3.51472C3.90524 3.12419 4.53841 3.12419 4.92893 3.51472L7.75736 6.34315C8.14788 6.73367 8.14788 7.36684 7.75736 7.75736C7.36684 8.14788 6.73367 8.14788 6.34315 7.75736L3.51472 4.92893Z"
|
|
14
|
+
];
|
|
15
|
+
var ClassicV2Glyph = () => /* @__PURE__ */ jsx("g", {
|
|
16
|
+
fill: "currentColor",
|
|
17
|
+
children: TICKS.map((d, index) => /* @__PURE__ */ jsx("path", {
|
|
18
|
+
className: classic_v2_module_default.Tick,
|
|
19
|
+
d,
|
|
20
|
+
style: { "--__spinner-classic-v2-step": index }
|
|
21
|
+
}, d))
|
|
22
|
+
});
|
|
23
|
+
//#endregion
|
|
24
|
+
export { ClassicV2Glyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/classic-v2.module.css
|
|
2
|
+
var Tick = "viraui__classic-v2-module__Tick_n5bOq";
|
|
3
|
+
var classic_v2_module_default = {
|
|
4
|
+
Tick,
|
|
5
|
+
"spinner-classic-v2-fade": "viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Tick, classic_v2_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__classic-module__spinner-classic-fade_HUDyu{0%{opacity:1}to{opacity:.15}}.viraui__classic-module__Bar_9S0w-{transform-origin:12px 12px;animation:viraui__classic-module__spinner-classic-fade_HUDyu 1.2s linear infinite;animation-delay:calc(1.2s * (var(--__spinner-classic-step) - 12) / 12);@media (prefers-reduced-motion:reduce){animation:none;opacity:.5}}}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import './classic.css';
|
|
2
|
+
import classic_module_default from "./classic.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/classic.tsx
|
|
5
|
+
var BARS = Array.from({ length: 12 }, (_, index) => index);
|
|
6
|
+
var ClassicGlyph = () => /* @__PURE__ */ jsx("g", {
|
|
7
|
+
fill: "currentColor",
|
|
8
|
+
children: BARS.map((index) => /* @__PURE__ */ jsx("rect", {
|
|
9
|
+
className: classic_module_default.Bar,
|
|
10
|
+
x: "16.5",
|
|
11
|
+
y: "10.8",
|
|
12
|
+
width: "5.5",
|
|
13
|
+
height: "2.4",
|
|
14
|
+
rx: "1.2",
|
|
15
|
+
style: {
|
|
16
|
+
"--__spinner-classic-step": index,
|
|
17
|
+
transform: `rotate(${index * 30}deg)`
|
|
18
|
+
}
|
|
19
|
+
}, index))
|
|
20
|
+
});
|
|
21
|
+
//#endregion
|
|
22
|
+
export { ClassicGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/classic.module.css
|
|
2
|
+
var Bar = "viraui__classic-module__Bar_9S0w-";
|
|
3
|
+
var classic_module_default = {
|
|
4
|
+
Bar,
|
|
5
|
+
"spinner-classic-fade": "viraui__classic-module__spinner-classic-fade_HUDyu"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Bar, classic_module_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__clock-module__spinner-clock-spin_Ht1e1{to{transform:rotate(1turn)}}.viraui__clock-module__Hand_Za5YY{transform-origin:12px 12px;animation:viraui__clock-module__spinner-clock-spin_Ht1e1 1.2s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import './clock.css';
|
|
2
|
+
import clock_module_default from "./clock.module.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/spinner/variants/clock.tsx
|
|
5
|
+
var ClockGlyph = () => /* @__PURE__ */ jsxs("g", {
|
|
6
|
+
fill: "currentColor",
|
|
7
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
8
|
+
cx: "12",
|
|
9
|
+
cy: "12",
|
|
10
|
+
r: "12",
|
|
11
|
+
opacity: "0.1"
|
|
12
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
13
|
+
className: clock_module_default.Hand,
|
|
14
|
+
d: "M16.7906 4.3809C15.7809 3.74609 14.6596 3.32096 13.4931 3.12471C12.6761 2.98727 12 3.67158 12 4.5V10.8049C12 11.2382 12.1874 11.6503 12.5139 11.9352L17.8499 16.5905C18.4931 17.1516 19.487 17.067 19.8965 16.3181C20.4534 15.2997 20.8104 14.1787 20.9426 13.0157C21.1338 11.3315 20.8457 9.62751 20.1111 8.0999C19.3766 6.57228 18.2255 5.28315 16.7906 4.3809Z"
|
|
15
|
+
})]
|
|
16
|
+
});
|
|
17
|
+
//#endregion
|
|
18
|
+
export { ClockGlyph as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region src/components/spinner/variants/clock.module.css
|
|
2
|
+
var Hand = "viraui__clock-module__Hand_Za5YY";
|
|
3
|
+
var clock_module_default = {
|
|
4
|
+
Hand,
|
|
5
|
+
"spinner-clock-spin": "viraui__clock-module__spinner-clock-spin_Ht1e1"
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Hand, clock_module_default as default };
|