@nizivo/react 0.0.0-stage → 0.1.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/LICENSE +202 -0
- package/README.md +120 -2
- package/THIRD_PARTY_NOTICES +61 -0
- package/dist/_engines/react-aria/dialog.client.js +134 -0
- package/dist/_engines/react-aria/dom-allowlist.js +19 -0
- package/dist/_engines/react-aria/dom.js +31 -0
- package/dist/_engines/react-aria/locale.client.js +13 -0
- package/dist/_engines/react-aria/menu.client.js +225 -0
- package/dist/_engines/react-aria/overlay.client.js +41 -0
- package/dist/_engines/react-aria/popup.client.js +127 -0
- package/dist/_engines/react-aria/select.client.js +170 -0
- package/dist/_engines/react-aria/tabs.client.js +95 -0
- package/dist/_engines/react-aria/tooltip.client.js +72 -0
- package/dist/_internal/cx.js +11 -0
- package/dist/_internal/engine-part.d.ts +1 -0
- package/dist/_internal/field.js +20 -0
- package/dist/_internal/glyphs.js +34 -0
- package/dist/_internal/keys.js +62 -0
- package/dist/_internal/overlay.d.ts +9 -0
- package/dist/_virtual/_rolldown/runtime.js +13 -0
- package/dist/alert/alert-dismiss.client.d.ts +32 -0
- package/dist/alert/alert-dismiss.client.js +36 -0
- package/dist/alert/alert.d.ts +28 -0
- package/dist/alert/alert.js +44 -0
- package/dist/alert/index.d.ts +3 -0
- package/dist/alert/index.js +3 -0
- package/dist/augment.d.ts +13 -0
- package/dist/augment.js +0 -0
- package/dist/badge/badge.d.ts +19 -0
- package/dist/badge/badge.js +22 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +1 -0
- package/dist/button/button.d.ts +54 -0
- package/dist/button/button.js +62 -0
- package/dist/button/index.d.ts +2 -0
- package/dist/button/index.js +1 -0
- package/dist/card/card.d.ts +57 -0
- package/dist/card/card.js +62 -0
- package/dist/card/card.parts.d.ts +6 -0
- package/dist/card/card.parts.js +14 -0
- package/dist/card/index.d.ts +3 -0
- package/dist/card/index.js +3 -0
- package/dist/checkbox/checkbox.client.d.ts +37 -0
- package/dist/checkbox/checkbox.client.js +81 -0
- package/dist/checkbox/index.d.ts +2 -0
- package/dist/checkbox/index.js +1 -0
- package/dist/config/config.client.d.ts +9 -0
- package/dist/config/config.client.js +18 -0
- package/dist/config/index.d.ts +2 -0
- package/dist/config/index.js +1 -0
- package/dist/container/container.d.ts +13 -0
- package/dist/container/container.js +16 -0
- package/dist/container/index.d.ts +2 -0
- package/dist/container/index.js +1 -0
- package/dist/contracts/details.d.ts +13 -0
- package/dist/contracts/details.js +9 -0
- package/dist/contracts/index.d.ts +5 -0
- package/dist/contracts/index.js +5 -0
- package/dist/contracts/merge-props.d.ts +16 -0
- package/dist/contracts/merge-props.js +76 -0
- package/dist/contracts/render.d.ts +17 -0
- package/dist/contracts/render.js +43 -0
- package/dist/contracts/state.d.ts +42 -0
- package/dist/contracts/state.js +42 -0
- package/dist/css/alert.css +2 -0
- package/dist/css/badge.css +2 -0
- package/dist/css/base.css +2 -0
- package/dist/css/button.css +2 -0
- package/dist/css/card.css +2 -0
- package/dist/css/checkbox.css +2 -0
- package/dist/css/container.css +2 -0
- package/dist/css/delta.css +2 -0
- package/dist/css/dialog.css +2 -0
- package/dist/css/empty-state.css +2 -0
- package/dist/css/field.css +2 -0
- package/dist/css/fieldset.css +2 -0
- package/dist/css/grid.css +2 -0
- package/dist/css/heading.css +2 -0
- package/dist/css/icon-button.css +2 -0
- package/dist/css/image.css +2 -0
- package/dist/css/inline-error.css +2 -0
- package/dist/css/inline.css +2 -0
- package/dist/css/input.css +2 -0
- package/dist/css/kbd.css +2 -0
- package/dist/css/menu.css +2 -0
- package/dist/css/meter.css +2 -0
- package/dist/css/native-select.css +2 -0
- package/dist/css/progress-bar.css +2 -0
- package/dist/css/progress-ring.css +2 -0
- package/dist/css/radio-group.css +2 -0
- package/dist/css/segmented-control.css +2 -0
- package/dist/css/select.css +2 -0
- package/dist/css/separator.css +2 -0
- package/dist/css/skeleton.css +2 -0
- package/dist/css/stack.css +2 -0
- package/dist/css/switch.css +2 -0
- package/dist/css/tab-nav.css +2 -0
- package/dist/css/tabs.css +2 -0
- package/dist/css/text.css +2 -0
- package/dist/css/textarea.css +2 -0
- package/dist/css/tooltip.css +2 -0
- package/dist/delta/delta.d.ts +32 -0
- package/dist/delta/delta.js +50 -0
- package/dist/delta/index.d.ts +2 -0
- package/dist/delta/index.js +1 -0
- package/dist/dialog/dialog.client.d.ts +25 -0
- package/dist/dialog/dialog.client.js +167 -0
- package/dist/dialog/dialog.contract.d.ts +97 -0
- package/dist/dialog/dialog.parts.d.ts +6 -0
- package/dist/dialog/dialog.parts.js +15 -0
- package/dist/dialog/index.d.ts +5 -0
- package/dist/dialog/index.js +3 -0
- package/dist/empty-state/empty-state.d.ts +18 -0
- package/dist/empty-state/empty-state.js +32 -0
- package/dist/empty-state/index.d.ts +2 -0
- package/dist/empty-state/index.js +1 -0
- package/dist/field/field-scope.client.d.ts +50 -0
- package/dist/field/field-scope.client.js +205 -0
- package/dist/field/field-static.d.ts +122 -0
- package/dist/field/field-static.js +159 -0
- package/dist/field/field.d.ts +5 -0
- package/dist/field/field.js +53 -0
- package/dist/field/index.d.ts +4 -0
- package/dist/field/index.js +4 -0
- package/dist/fieldset/fieldset.d.ts +36 -0
- package/dist/fieldset/fieldset.js +63 -0
- package/dist/fieldset/index.d.ts +2 -0
- package/dist/fieldset/index.js +1 -0
- package/dist/grid/grid.d.ts +38 -0
- package/dist/grid/grid.js +28 -0
- package/dist/grid/index.d.ts +2 -0
- package/dist/grid/index.js +1 -0
- package/dist/heading/heading.d.ts +27 -0
- package/dist/heading/heading.js +26 -0
- package/dist/heading/index.d.ts +2 -0
- package/dist/heading/index.js +1 -0
- package/dist/icon-button/icon-button-static.d.ts +23 -0
- package/dist/icon-button/icon-button-static.js +83 -0
- package/dist/icon-button/icon-button.client.js +29 -0
- package/dist/icon-button/icon-button.contract.d.ts +89 -0
- package/dist/icon-button/icon-button.d.ts +5 -0
- package/dist/icon-button/icon-button.js +21 -0
- package/dist/icon-button/index.d.ts +4 -0
- package/dist/icon-button/index.js +3 -0
- package/dist/image/image.d.ts +28 -0
- package/dist/image/image.js +24 -0
- package/dist/image/index.d.ts +2 -0
- package/dist/image/index.js +1 -0
- package/dist/index.d.ts +95 -0
- package/dist/index.js +51 -0
- package/dist/inline/index.d.ts +2 -0
- package/dist/inline/index.js +1 -0
- package/dist/inline/inline.d.ts +16 -0
- package/dist/inline/inline.js +14 -0
- package/dist/inline-error/index.d.ts +2 -0
- package/dist/inline-error/index.js +1 -0
- package/dist/inline-error/inline-error.d.ts +17 -0
- package/dist/inline-error/inline-error.js +33 -0
- package/dist/input/index.d.ts +2 -0
- package/dist/input/index.js +1 -0
- package/dist/input/input.client.d.ts +39 -0
- package/dist/input/input.client.js +82 -0
- package/dist/kbd/index.d.ts +2 -0
- package/dist/kbd/index.js +1 -0
- package/dist/kbd/kbd.d.ts +19 -0
- package/dist/kbd/kbd.js +68 -0
- package/dist/menu/index.d.ts +5 -0
- package/dist/menu/index.js +3 -0
- package/dist/menu/menu.client.d.ts +14 -0
- package/dist/menu/menu.client.js +152 -0
- package/dist/menu/menu.contract.d.ts +152 -0
- package/dist/menu/menu.parts.d.ts +6 -0
- package/dist/menu/menu.parts.js +17 -0
- package/dist/meter/index.d.ts +2 -0
- package/dist/meter/index.js +1 -0
- package/dist/meter/meter.d.ts +43 -0
- package/dist/meter/meter.js +59 -0
- package/dist/native-select/index.d.ts +2 -0
- package/dist/native-select/index.js +1 -0
- package/dist/native-select/native-select.d.ts +43 -0
- package/dist/native-select/native-select.js +56 -0
- package/dist/progress-bar/index.d.ts +2 -0
- package/dist/progress-bar/index.js +1 -0
- package/dist/progress-bar/progress-bar.d.ts +34 -0
- package/dist/progress-bar/progress-bar.js +55 -0
- package/dist/progress-ring/index.d.ts +2 -0
- package/dist/progress-ring/index.js +1 -0
- package/dist/progress-ring/progress-ring.d.ts +38 -0
- package/dist/progress-ring/progress-ring.js +67 -0
- package/dist/radio-group/index.d.ts +3 -0
- package/dist/radio-group/index.js +3 -0
- package/dist/radio-group/radio-group.client.d.ts +22 -0
- package/dist/radio-group/radio-group.client.js +70 -0
- package/dist/radio-group/radio-group.d.ts +28 -0
- package/dist/radio-group/radio-group.js +35 -0
- package/dist/segmented-control/index.d.ts +3 -0
- package/dist/segmented-control/index.js +3 -0
- package/dist/segmented-control/segmented-control.client.d.ts +61 -0
- package/dist/segmented-control/segmented-control.client.js +156 -0
- package/dist/segmented-control/segmented-control.parts.d.ts +6 -0
- package/dist/segmented-control/segmented-control.parts.js +9 -0
- package/dist/select/index.d.ts +5 -0
- package/dist/select/index.js +3 -0
- package/dist/select/select.client.d.ts +12 -0
- package/dist/select/select.client.js +152 -0
- package/dist/select/select.contract.d.ts +119 -0
- package/dist/select/select.parts.d.ts +6 -0
- package/dist/select/select.parts.js +15 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.js +1 -0
- package/dist/separator/separator.d.ts +26 -0
- package/dist/separator/separator.js +23 -0
- package/dist/skeleton/index.d.ts +2 -0
- package/dist/skeleton/index.js +1 -0
- package/dist/skeleton/skeleton.d.ts +20 -0
- package/dist/skeleton/skeleton.js +19 -0
- package/dist/stack/index.d.ts +2 -0
- package/dist/stack/index.js +1 -0
- package/dist/stack/stack.d.ts +17 -0
- package/dist/stack/stack.js +14 -0
- package/dist/styles.css +536 -0
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.js +1 -0
- package/dist/switch/switch.client.d.ts +33 -0
- package/dist/switch/switch.client.js +63 -0
- package/dist/tab-nav/index.d.ts +3 -0
- package/dist/tab-nav/index.js +3 -0
- package/dist/tab-nav/tab-nav.d.ts +36 -0
- package/dist/tab-nav/tab-nav.js +47 -0
- package/dist/tab-nav/tab-nav.parts.d.ts +6 -0
- package/dist/tab-nav/tab-nav.parts.js +9 -0
- package/dist/tabs/index.d.ts +4 -0
- package/dist/tabs/index.js +3 -0
- package/dist/tabs/tabs.client.d.ts +8 -0
- package/dist/tabs/tabs.client.js +68 -0
- package/dist/tabs/tabs.contract.d.ts +89 -0
- package/dist/tabs/tabs.parts.d.ts +6 -0
- package/dist/tabs/tabs.parts.js +11 -0
- package/dist/text/index.d.ts +2 -0
- package/dist/text/index.js +1 -0
- package/dist/text/text.d.ts +21 -0
- package/dist/text/text.js +17 -0
- package/dist/textarea/index.d.ts +2 -0
- package/dist/textarea/index.js +1 -0
- package/dist/textarea/textarea.client.d.ts +18 -0
- package/dist/textarea/textarea.client.js +31 -0
- package/dist/theme-script/index.d.ts +2 -0
- package/dist/theme-script/index.js +1 -0
- package/dist/theme-script/theme-script.d.ts +43 -0
- package/dist/theme-script/theme-script.js +46 -0
- package/dist/tooltip/index.d.ts +5 -0
- package/dist/tooltip/index.js +3 -0
- package/dist/tooltip/tooltip.client.d.ts +12 -0
- package/dist/tooltip/tooltip.client.js +51 -0
- package/dist/tooltip/tooltip.contract.d.ts +60 -0
- package/dist/tooltip/tooltip.parts.d.ts +6 -0
- package/dist/tooltip/tooltip.parts.js +10 -0
- package/package.json +284 -3
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-container{box-sizing:content-box;max-inline-size:var(--nz-container-max-width,var(--nz-layout-content-max));padding-inline:var(--nz-container-padding-inline,var(--nz-grid-margin));margin-inline:auto}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-delta{--_nz-delta-bg:var(--nz-bg-subtle);--_nz-delta-fg:var(--nz-text-secondary);align-items:center;gap:var(--nz-delta-gap,var(--nz-space-1));padding-block:var(--nz-space-1);padding-inline:var(--nz-delta-padding-inline,var(--nz-space-2));border-radius:var(--nz-delta-radius,var(--nz-radius-full));background:var(--nz-delta-bg,var(--_nz-delta-bg));color:var(--nz-delta-fg,var(--_nz-delta-fg));font:var(--nz-delta-font,var(--nz-font-label-m-strong));white-space:nowrap;display:inline-flex}.nz-delta-icon{inline-size:var(--nz-size-icon-sm);block-size:var(--nz-size-icon-sm);font-size:var(--nz-size-icon-sm);flex:none;display:inline-flex}.nz-delta-value{font-variant-numeric:tabular-nums;unicode-bidi:isolate}.nz-delta[data-tone=success]{--_nz-delta-bg:var(--nz-bg-success-subtle);--_nz-delta-fg:var(--nz-text-success)}.nz-delta[data-tone=critical]{--_nz-delta-bg:var(--nz-bg-critical-subtle);--_nz-delta-fg:var(--nz-text-critical)}@media (forced-colors:active){.nz-delta{outline-offset:-1px;outline:1px solid canvastext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-dialog-trigger.nz-hit-target{min-block-size:1.5rem;min-inline-size:1.5rem}.nz-dialog-positioner{z-index:var(--nz-z-overlay);padding:var(--nz-space-8);place-items:center;display:grid;position:fixed;inset:0}.nz-dialog-backdrop{background:var(--nz-bg-scrim);transition:opacity var(--nz-duration-base) var(--nz-easing-enter);position:fixed;inset:0;&[data-entering]{opacity:0}&[data-exiting]{opacity:0;transition:opacity var(--nz-duration-fade) var(--nz-easing-exit)}}.nz-dialog-popup{--_nz-dialog-width:30rem;box-sizing:border-box;inline-size:min(var(--nz-dialog-width,var(--_nz-dialog-width)), 100%);max-block-size:calc(100dvh - 2 * var(--nz-space-8));border-radius:var(--nz-dialog-radius,var(--nz-radius-2xl));background:var(--nz-dialog-bg,var(--nz-bg-surface-raised));box-shadow:var(--nz-elevation-4);transition:scale var(--nz-duration-spring) var(--nz-easing-spring), opacity var(--nz-duration-spring) var(--nz-easing-enter);flex-direction:column;display:flex;position:relative;&[data-entering]{opacity:0;scale:var(--nz-scale-enter)}&[data-exiting]{opacity:0;transition:opacity var(--nz-duration-fade) var(--nz-easing-exit)}&[data-size=sm]{--_nz-dialog-width:25rem}&[data-size=lg]{--_nz-dialog-width:40rem}}.nz-dialog-content{border-radius:inherit;flex-direction:column;min-block-size:0;display:flex;overflow:clip;&:focus-visible{outline:none}}.nz-dialog-content>:not(.nz-dialog-close.nz-icon-button):is(:focus-visible,[data-focus-visible]){outline-offset:calc(-1 * var(--nz-border-width-focus))}.nz-dialog-content>.nz-dialog-close.nz-icon-button{--_nz-icon-button-fg:var(--nz-icon-secondary);position:absolute;inset-block-start:calc(var(--nz-space-5) - (var(--nz-size-control-md) - var(--nz-size-icon-md)) / 2);inset-inline-end:calc(var(--nz-space-5) - (var(--nz-size-control-md) - var(--nz-size-icon-md)) / 2)}.nz-dialog-content:has(>.nz-dialog-close.nz-icon-button)>.nz-dialog-title{padding-inline-end:calc(var(--nz-space-5) + var(--nz-size-icon-md) + var(--nz-space-3))}.nz-dialog-title{padding:var(--nz-space-5) var(--nz-space-6) var(--nz-space-2);color:var(--nz-text-primary);font:var(--nz-font-heading-h3);letter-spacing:var(--nz-tracking-heading-h3);margin:0}.nz-dialog-description{padding:var(--nz-space-2) var(--nz-space-6);color:var(--nz-text-secondary);font:var(--nz-font-body-l);margin:0}.nz-dialog-body{padding:var(--nz-space-2) var(--nz-space-6);overflow:auto}.nz-dialog-description:last-child,.nz-dialog-body:last-child{padding-block-end:var(--nz-space-6)}.nz-dialog-footer{justify-content:flex-end;gap:var(--nz-space-3);padding:var(--nz-space-4) var(--nz-space-6);background:var(--nz-bg-subtle);flex-wrap:wrap;margin-block-start:var(--nz-space-4);display:flex}@media (forced-colors:active){.nz-dialog-popup{border:1px solid canvastext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-empty-state{align-items:center;gap:var(--nz-empty-state-gap,var(--nz-space-4));padding:var(--nz-empty-state-padding,var(--nz-space-8));border-radius:var(--nz-empty-state-radius,var(--nz-radius-xl));background:var(--nz-empty-state-bg,var(--nz-bg-subtle));color:var(--nz-text-primary);text-align:center;flex-direction:column;display:flex}.nz-empty-state-media{inline-size:var(--nz-empty-state-media-size,8.75rem);block-size:var(--nz-empty-state-media-size,8.75rem);justify-content:center;align-items:center;display:flex;&>:is(img,svg,picture,video){object-fit:contain;max-block-size:100%;max-inline-size:100%}}.nz-empty-state-title{font:var(--nz-empty-state-title-font,var(--nz-font-heading-h3));letter-spacing:var(--nz-tracking-heading-h3);text-wrap:balance;margin:0}.nz-empty-state-actions{justify-content:center;gap:var(--nz-space-3);flex-wrap:wrap;display:flex}@media (forced-colors:active){.nz-empty-state{outline-offset:-1px;outline:1px solid canvastext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-field{--_nz-field-label-fg:var(--nz-text-primary);gap:var(--nz-field-gap,var(--nz-space-1-5));flex-direction:column;min-inline-size:0;display:flex}.nz-field[data-disabled],fieldset:disabled .nz-field{--_nz-field-label-fg:var(--nz-text-disabled)}.nz-field-label{color:var(--nz-field-label-fg,var(--_nz-field-label-fg));font:var(--nz-field-label-font,var(--nz-font-label-m));align-self:flex-start}.nz-field-required{color:var(--nz-field-required-fg,var(--nz-text-critical));margin-inline-start:var(--nz-space-0-5)}.nz-field-description{color:var(--nz-field-description-fg,var(--nz-text-tertiary));font:var(--nz-field-description-font,var(--nz-font-body-m))}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-fieldset{--_nz-fieldset-legend-fg:var(--nz-text-primary);border:0;min-inline-size:0;margin:0;padding:0}.nz-fieldset:is(:disabled,[data-disabled]){--_nz-fieldset-legend-fg:var(--nz-text-disabled)}.nz-fieldset-legend{color:var(--nz-fieldset-legend-fg,var(--_nz-fieldset-legend-fg));font:var(--nz-fieldset-legend-font,var(--nz-font-label-m));padding:0}.nz-fieldset-required{color:var(--nz-fieldset-required-fg,var(--nz-text-critical));margin-inline-start:var(--nz-space-0-5)}.nz-fieldset-content{gap:var(--nz-fieldset-gap,var(--nz-space-3));flex-direction:column;display:flex}.nz-fieldset-legend+.nz-fieldset-content{margin-block-start:var(--nz-fieldset-legend-gap,var(--nz-space-2))}.nz-fieldset-description{color:var(--nz-fieldset-description-fg,var(--nz-text-tertiary));font:var(--nz-fieldset-description-font,var(--nz-font-body-m))}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-grid{--_nz-grid-gap:var(--nz-grid-gutter);grid-template-columns:repeat(var(--nz-grid-columns), minmax(0, 1fr));gap:var(--_nz-grid-gap);display:grid}.nz-grid[data-gap="0"]{--_nz-grid-gap:var(--nz-space-0)}.nz-grid[data-gap="0-5"]{--_nz-grid-gap:var(--nz-space-0-5)}.nz-grid[data-gap="1"]{--_nz-grid-gap:var(--nz-space-1)}.nz-grid[data-gap="1-5"]{--_nz-grid-gap:var(--nz-space-1-5)}.nz-grid[data-gap="2"]{--_nz-grid-gap:var(--nz-space-2)}.nz-grid[data-gap="3"]{--_nz-grid-gap:var(--nz-space-3)}.nz-grid[data-gap="4"]{--_nz-grid-gap:var(--nz-space-4)}.nz-grid[data-gap="5"]{--_nz-grid-gap:var(--nz-space-5)}.nz-grid[data-gap="6"]{--_nz-grid-gap:var(--nz-space-6)}.nz-grid[data-gap="8"]{--_nz-grid-gap:var(--nz-space-8)}.nz-grid[data-gap="10"]{--_nz-grid-gap:var(--nz-space-10)}.nz-grid[data-gap="12"]{--_nz-grid-gap:var(--nz-space-12)}.nz-grid[data-gap="16"]{--_nz-grid-gap:var(--nz-space-16)}.nz-grid[data-gap="20"]{--_nz-grid-gap:var(--nz-space-20)}.nz-grid[data-gap="24"]{--_nz-grid-gap:var(--nz-space-24)}.nz-grid-item{--_nz-grid-item-span:1;grid-column:span min(var(--_nz-grid-item-span), var(--nz-grid-columns));min-inline-size:0}.nz-grid-item[data-span="1"]{--_nz-grid-item-span:1}.nz-grid-item[data-span="2"]{--_nz-grid-item-span:2}.nz-grid-item[data-span="3"]{--_nz-grid-item-span:3}.nz-grid-item[data-span="4"]{--_nz-grid-item-span:4}.nz-grid-item[data-span="5"]{--_nz-grid-item-span:5}.nz-grid-item[data-span="6"]{--_nz-grid-item-span:6}.nz-grid-item[data-span="7"]{--_nz-grid-item-span:7}.nz-grid-item[data-span="8"]{--_nz-grid-item-span:8}.nz-grid-item[data-span="9"]{--_nz-grid-item-span:9}.nz-grid-item[data-span="10"]{--_nz-grid-item-span:10}.nz-grid-item[data-span="11"]{--_nz-grid-item-span:11}.nz-grid-item[data-span="12"]{--_nz-grid-item-span:12}.nz-grid-item[data-span=full]{--_nz-grid-item-span:var(--nz-grid-columns)}@media (width>=40rem){.nz-grid-item[data-span-sm="1"]{--_nz-grid-item-span:1}.nz-grid-item[data-span-sm="2"]{--_nz-grid-item-span:2}.nz-grid-item[data-span-sm="3"]{--_nz-grid-item-span:3}.nz-grid-item[data-span-sm="4"]{--_nz-grid-item-span:4}.nz-grid-item[data-span-sm="5"]{--_nz-grid-item-span:5}.nz-grid-item[data-span-sm="6"]{--_nz-grid-item-span:6}.nz-grid-item[data-span-sm="7"]{--_nz-grid-item-span:7}.nz-grid-item[data-span-sm="8"]{--_nz-grid-item-span:8}.nz-grid-item[data-span-sm="9"]{--_nz-grid-item-span:9}.nz-grid-item[data-span-sm="10"]{--_nz-grid-item-span:10}.nz-grid-item[data-span-sm="11"]{--_nz-grid-item-span:11}.nz-grid-item[data-span-sm="12"]{--_nz-grid-item-span:12}.nz-grid-item[data-span-sm=full]{--_nz-grid-item-span:var(--nz-grid-columns)}}@media (width>=80rem){.nz-grid-item[data-span-lg="1"]{--_nz-grid-item-span:1}.nz-grid-item[data-span-lg="2"]{--_nz-grid-item-span:2}.nz-grid-item[data-span-lg="3"]{--_nz-grid-item-span:3}.nz-grid-item[data-span-lg="4"]{--_nz-grid-item-span:4}.nz-grid-item[data-span-lg="5"]{--_nz-grid-item-span:5}.nz-grid-item[data-span-lg="6"]{--_nz-grid-item-span:6}.nz-grid-item[data-span-lg="7"]{--_nz-grid-item-span:7}.nz-grid-item[data-span-lg="8"]{--_nz-grid-item-span:8}.nz-grid-item[data-span-lg="9"]{--_nz-grid-item-span:9}.nz-grid-item[data-span-lg="10"]{--_nz-grid-item-span:10}.nz-grid-item[data-span-lg="11"]{--_nz-grid-item-span:11}.nz-grid-item[data-span-lg="12"]{--_nz-grid-item-span:12}.nz-grid-item[data-span-lg=full]{--_nz-grid-item-span:var(--nz-grid-columns)}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-heading{--_nz-heading-font:var(--nz-font-heading-h2);--_nz-heading-tracking:var(--nz-tracking-heading-h2);font:var(--_nz-heading-font);letter-spacing:var(--_nz-heading-tracking);margin:0}.nz-heading[data-tone]{color:var(--_nz-heading-fg)}.nz-heading[data-variant=display-l]{--_nz-heading-font:var(--nz-font-display-l);--_nz-heading-tracking:var(--nz-tracking-display-l)}.nz-heading[data-variant=display-m]{--_nz-heading-font:var(--nz-font-display-m);--_nz-heading-tracking:var(--nz-tracking-display-m)}.nz-heading[data-variant=heading-h1]{--_nz-heading-font:var(--nz-font-heading-h1);--_nz-heading-tracking:var(--nz-tracking-heading-h1)}.nz-heading[data-variant=heading-h3]{--_nz-heading-font:var(--nz-font-heading-h3);--_nz-heading-tracking:var(--nz-tracking-heading-h3)}.nz-heading[data-variant=heading-h4]{--_nz-heading-font:var(--nz-font-heading-h4);--_nz-heading-tracking:var(--nz-tracking-heading-h4)}.nz-heading[data-tone=primary]{--_nz-heading-fg:var(--nz-text-primary)}.nz-heading[data-tone=secondary]{--_nz-heading-fg:var(--nz-text-secondary)}.nz-heading[data-tone=tertiary]{--_nz-heading-fg:var(--nz-text-tertiary)}.nz-heading[data-tone=disabled]{--_nz-heading-fg:var(--nz-text-disabled)}.nz-heading[data-tone=inverse]{--_nz-heading-fg:var(--nz-text-inverse)}.nz-heading[data-tone=on-brand]{--_nz-heading-fg:var(--nz-text-on-brand)}.nz-heading[data-tone=on-accent]{--_nz-heading-fg:var(--nz-text-on-accent)}.nz-heading[data-tone=on-critical]{--_nz-heading-fg:var(--nz-text-on-critical)}.nz-heading[data-tone=brand]{--_nz-heading-fg:var(--nz-text-brand)}.nz-heading[data-tone=accent]{--_nz-heading-fg:var(--nz-text-accent)}.nz-heading[data-tone=success]{--_nz-heading-fg:var(--nz-text-success)}.nz-heading[data-tone=warning]{--_nz-heading-fg:var(--nz-text-warning)}.nz-heading[data-tone=critical]{--_nz-heading-fg:var(--nz-text-critical)}.nz-heading[data-tone=info]{--_nz-heading-fg:var(--nz-text-info)}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-icon-button{--_nz-icon-button-bg:var(--nz-bg-surface);--_nz-icon-button-bg-hover:var(--nz-bg-hover);--_nz-icon-button-bg-pressed:var(--nz-bg-pressed);--_nz-icon-button-fg:var(--nz-text-primary);--_nz-icon-button-border:var(--nz-border-default);--_nz-icon-button-border-hover:var(--nz-border-strong);--_nz-icon-button-size:var(--nz-size-control-md);--_nz-icon-button-radius:var(--nz-radius-md);--_nz-icon-button-icon-size:var(--nz-size-icon-md);box-sizing:border-box;inline-size:var(--nz-icon-button-size,var(--_nz-icon-button-size));block-size:var(--nz-icon-button-size,var(--_nz-icon-button-size));border:var(--nz-border-width-default) solid var(--nz-icon-button-border,var(--_nz-icon-button-border));border-radius:var(--nz-icon-button-radius,var(--_nz-icon-button-radius));background:var(--nz-icon-button-bg,var(--_nz-icon-button-bg));color:var(--nz-icon-button-fg,var(--_nz-icon-button-fg));cursor:pointer;transition:background-color var(--nz-duration-fast) var(--nz-easing-standard), border-color var(--nz-duration-fast) var(--nz-easing-standard), color var(--nz-duration-fast) var(--nz-easing-standard), scale var(--nz-duration-instant) var(--nz-easing-standard);flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex;@media (hover:hover){&:hover:not(:disabled,[data-disabled],[aria-disabled=true]){background:var(--nz-icon-button-bg-hover,var(--_nz-icon-button-bg-hover));border-color:var(--nz-icon-button-border-hover,var(--_nz-icon-button-border-hover))}}&:active:not(:disabled,[data-disabled],[aria-disabled=true]){background:var(--nz-icon-button-bg-pressed,var(--_nz-icon-button-bg-pressed));border-color:var(--nz-icon-button-border-hover,var(--_nz-icon-button-border-hover));scale:var(--nz-scale-press)}&:focus-visible{box-shadow:0 0 0 calc(var(--nz-border-width-focus) + 4px) var(--nz-focus-halo)}&:is(:disabled,[data-disabled]){background:var(--nz-icon-button-bg-disabled,var(--nz-bg-disabled));color:var(--nz-icon-button-fg-disabled,var(--nz-text-disabled));border-color:var(--nz-border-subtle);cursor:not-allowed}&[data-pending]{cursor:progress}}.nz-icon-button[data-variant=primary]{--_nz-icon-button-bg:var(--nz-bg-brand);--_nz-icon-button-bg-hover:var(--nz-bg-brand-hover);--_nz-icon-button-bg-pressed:var(--nz-bg-brand-pressed);--_nz-icon-button-fg:var(--nz-text-on-brand);--_nz-icon-button-border:transparent;--_nz-icon-button-border-hover:transparent}.nz-icon-button[data-variant=tertiary]{--_nz-icon-button-bg:transparent;--_nz-icon-button-border:transparent;--_nz-icon-button-border-hover:transparent}.nz-icon-button[data-variant=critical]{--_nz-icon-button-bg:var(--nz-bg-critical);--_nz-icon-button-bg-hover:var(--nz-bg-critical-hover);--_nz-icon-button-bg-pressed:var(--nz-bg-critical-hover);--_nz-icon-button-fg:var(--nz-text-on-critical);--_nz-icon-button-border:transparent;--_nz-icon-button-border-hover:transparent}.nz-icon-button[data-variant=accent]{--_nz-icon-button-bg:var(--nz-bg-accent);--_nz-icon-button-bg-hover:var(--nz-bg-accent-hover);--_nz-icon-button-bg-pressed:var(--nz-bg-accent-hover);--_nz-icon-button-fg:var(--nz-text-on-accent);--_nz-icon-button-border:transparent;--_nz-icon-button-border-hover:transparent}.nz-icon-button:is([data-variant=secondary],[data-variant=tertiary])[aria-pressed=true]{--_nz-icon-button-bg:var(--nz-bg-brand-subtle);--_nz-icon-button-bg-hover:var(--nz-bg-brand-subtle);--_nz-icon-button-fg:var(--nz-text-brand);--_nz-icon-button-border:var(--nz-border-brand);--_nz-icon-button-border-hover:var(--nz-border-brand)}.nz-icon-button:is([data-variant=primary],[data-variant=critical],[data-variant=accent])[aria-pressed=true]{--_nz-icon-button-bg:var(--_nz-icon-button-bg-pressed);--_nz-icon-button-bg-hover:var(--_nz-icon-button-bg-pressed)}.nz-icon-button[data-size=sm]{--_nz-icon-button-size:var(--nz-size-control-sm);--_nz-icon-button-radius:var(--nz-radius-sm);--_nz-icon-button-icon-size:var(--nz-size-icon-sm)}.nz-icon-button[data-size=lg]{--_nz-icon-button-size:var(--nz-size-control-lg);--_nz-icon-button-icon-size:var(--nz-size-icon-lg)}.nz-icon-button-icon{inline-size:var(--_nz-icon-button-icon-size);block-size:var(--_nz-icon-button-icon-size);font-size:var(--_nz-icon-button-icon-size);display:inline-flex;&>svg{block-size:100%;inline-size:100%}}.nz-icon-button[data-pending] .nz-glyph-spinner{animation:nz-icon-button-spin var(--nz-duration-spin) linear infinite}@keyframes nz-icon-button-spin{to{rotate:1turn}}@media (forced-colors:active){.nz-icon-button{border-color:buttontext}.nz-icon-button[aria-pressed=true]{color:highlighttext;forced-color-adjust:none;background:highlight;border-color:highlight}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-image{border-radius:var(--nz-image-radius,var(--nz-radius-none));object-fit:var(--nz-image-fit,cover);block-size:auto;max-inline-size:100%;display:block}.nz-image[data-ratio="1/1"]{aspect-ratio:1}.nz-image[data-ratio="4/5"]{aspect-ratio:4/5}.nz-image[data-ratio="3/2"]{aspect-ratio:3/2}.nz-image[data-ratio="16/9"]{aspect-ratio:16/9}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-inline-error{align-items:flex-start;gap:var(--nz-inline-error-gap,var(--nz-space-1-5));color:var(--nz-inline-error-fg,var(--nz-text-critical));font:var(--nz-inline-error-font,var(--nz-font-body-m));display:flex}.nz-inline-error-icon{block-size:1lh;color:var(--nz-inline-error-icon-fg,var(--nz-icon-critical));flex:none;align-items:center;display:inline-flex;&>svg{inline-size:var(--nz-size-icon-sm);block-size:var(--nz-size-icon-sm)}}.nz-inline-error-action{flex:none}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-inline{--_nz-inline-gap:0;align-items:center;gap:var(--nz-inline-gap,var(--_nz-inline-gap));flex-wrap:wrap;display:flex}.nz-inline[data-gap="0"]{--_nz-inline-gap:var(--nz-space-0)}.nz-inline[data-gap="0-5"]{--_nz-inline-gap:var(--nz-space-0-5)}.nz-inline[data-gap="1"]{--_nz-inline-gap:var(--nz-space-1)}.nz-inline[data-gap="1-5"]{--_nz-inline-gap:var(--nz-space-1-5)}.nz-inline[data-gap="2"]{--_nz-inline-gap:var(--nz-space-2)}.nz-inline[data-gap="3"]{--_nz-inline-gap:var(--nz-space-3)}.nz-inline[data-gap="4"]{--_nz-inline-gap:var(--nz-space-4)}.nz-inline[data-gap="5"]{--_nz-inline-gap:var(--nz-space-5)}.nz-inline[data-gap="6"]{--_nz-inline-gap:var(--nz-space-6)}.nz-inline[data-gap="8"]{--_nz-inline-gap:var(--nz-space-8)}.nz-inline[data-gap="10"]{--_nz-inline-gap:var(--nz-space-10)}.nz-inline[data-gap="12"]{--_nz-inline-gap:var(--nz-space-12)}.nz-inline[data-gap="16"]{--_nz-inline-gap:var(--nz-space-16)}.nz-inline[data-gap="20"]{--_nz-inline-gap:var(--nz-space-20)}.nz-inline[data-gap="24"]{--_nz-inline-gap:var(--nz-space-24)}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-input{--_nz-input-height:var(--nz-size-control-md);--_nz-input-radius:var(--nz-radius-md);--_nz-input-gap:var(--nz-space-2);--_nz-input-border:var(--nz-border-control);--_nz-input-border-hover:var(--nz-border-control-hover);--_nz-input-bg:var(--nz-bg-surface);--_nz-input-halo:var(--nz-focus-halo);--_nz-input-font:var(--nz-font-body-m);align-items:center;gap:var(--nz-input-gap,var(--_nz-input-gap));box-sizing:border-box;min-inline-size:0;block-size:var(--nz-input-height,var(--_nz-input-height));padding-inline:var(--nz-input-padding-inline,var(--nz-space-3));border:var(--nz-border-width-default) solid var(--nz-input-border,var(--_nz-input-border));border-radius:var(--nz-input-radius,var(--_nz-input-radius));background:var(--nz-input-bg,var(--_nz-input-bg));color:var(--nz-input-fg,var(--nz-text-primary));font:var(--nz-input-font,var(--_nz-input-font));cursor:text;transition:border-color var(--nz-duration-fast) var(--nz-easing-standard), box-shadow var(--nz-duration-fast) var(--nz-easing-standard);display:inline-flex;@media (hover:hover){&:hover:not([data-disabled],:has(>.nz-input-control:disabled)){border-color:var(--nz-input-border-hover,var(--_nz-input-border-hover))}}&:focus-within{box-shadow:0 0 0 calc(var(--nz-border-width-focus) + 4px) var(--_nz-input-halo)}&[data-invalid]{--_nz-input-border:var(--nz-border-critical);--_nz-input-border-hover:var(--nz-border-critical);--_nz-input-halo:var(--nz-focus-halo-critical)}&[data-readonly]{--_nz-input-bg:var(--nz-bg-subtle)}&:is([data-disabled],:has(>.nz-input-control:disabled)){--_nz-input-border:var(--nz-border-subtle);background:var(--nz-input-bg-disabled,var(--nz-bg-disabled));color:var(--nz-input-fg-disabled,var(--nz-text-disabled));cursor:not-allowed}&[data-size=sm]{--_nz-input-height:var(--nz-size-control-sm);--_nz-input-radius:var(--nz-radius-sm);--_nz-input-gap:var(--nz-space-1-5)}&[data-size=lg]{--_nz-input-height:var(--nz-size-control-lg)}@media (pointer:coarse){--_nz-input-font:var(--nz-font-body-l)}}.nz-input-control{box-sizing:border-box;block-size:100%;min-inline-size:0;color:inherit;font:inherit;cursor:inherit;background:0 0;border:0;outline:none;flex:auto;margin:0;padding:0;&::placeholder{color:var(--nz-input-placeholder-fg,var(--nz-text-tertiary));opacity:1}&:disabled::placeholder{color:var(--nz-text-disabled)}}.nz-input-icon{color:var(--nz-input-icon-fg,var(--nz-icon-secondary));font-size:var(--nz-size-icon-sm);flex:none;display:inline-flex}.nz-input-prefix,.nz-input-suffix{color:var(--nz-input-affix-fg,var(--nz-text-secondary));white-space:nowrap;flex:none}.nz-input:is([data-disabled],:has(>.nz-input-control:disabled)) :is(.nz-input-icon,.nz-input-prefix,.nz-input-suffix){color:var(--nz-text-disabled)}}
|
package/dist/css/kbd.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-kbd{padding-block:1px;padding-inline:var(--nz-space-1-5);border:var(--nz-border-width-default) solid var(--nz-kbd-border,var(--nz-border-default));border-radius:var(--nz-kbd-radius,var(--nz-radius-xs));background:var(--nz-kbd-bg,var(--nz-bg-subtle));color:var(--nz-kbd-fg,var(--nz-text-secondary));font:var(--nz-font-mono-m);letter-spacing:var(--nz-tracking-mono-m);white-space:nowrap;align-items:center;display:inline-flex}.nz-kbd-glyphs[data-platform=apple]{display:none}:where([data-nz-platform=apple]) .nz-kbd-glyphs[data-platform=apple]{display:inline}:where([data-nz-platform=apple]) .nz-kbd-glyphs[data-platform=other]{display:none}@media (forced-colors:active){.nz-kbd{border-color:canvastext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-menu-popup{z-index:var(--nz-z-overlay);box-sizing:border-box;min-inline-size:max(12rem, var(--nz-trigger-width,0px));max-block-size:var(--nz-available-height);border:var(--nz-border-width-default) solid var(--nz-menu-border,var(--nz-border-subtle));border-radius:var(--nz-menu-radius,var(--nz-radius-lg));background:var(--nz-menu-bg,var(--nz-bg-surface-raised));box-shadow:var(--nz-menu-shadow,var(--nz-elevation-3));transform-origin:var(--nz-transform-origin);transition:scale var(--nz-duration-spring) var(--nz-easing-spring), opacity var(--nz-duration-spring) var(--nz-easing-enter);flex-direction:column;display:flex;overflow:auto;&[data-entering]{opacity:0;scale:var(--nz-scale-enter)}&[data-exiting]{opacity:0;transition:opacity var(--nz-duration-fade) var(--nz-easing-exit)}}.nz-menu-list,.nz-menu-group,.nz-menu-radio-group{gap:var(--nz-space-0-5);flex-direction:column;display:flex}.nz-menu-list{padding:var(--nz-space-1-5);outline:none}.nz-menu-item,.nz-menu-checkbox-item,.nz-menu-radio-item{align-items:center;gap:var(--nz-space-2);box-sizing:border-box;min-block-size:2.25rem;padding-block:var(--nz-space-1-5);padding-inline:var(--nz-space-3);border-radius:var(--nz-radius-sm);color:var(--nz-text-primary);font:var(--nz-font-body-m);letter-spacing:var(--nz-tracking-body-m);cursor:default;text-decoration:none;display:flex;&[data-highlighted]{background:var(--nz-bg-hover)}&[data-tone=critical]{color:var(--nz-text-critical)}&[data-checked]{background:var(--nz-bg-brand-subtle);color:var(--nz-text-brand)}&[data-checked][data-highlighted]{background:var(--nz-bg-hover)}&[data-disabled]{color:var(--nz-text-disabled);cursor:not-allowed}}.nz-menu-list:has(.nz-menu-item-indicator) .nz-menu-item{padding-inline-end:calc(var(--nz-space-3) + var(--nz-size-icon-sm) + var(--nz-space-2))}.nz-menu-item-icon,.nz-menu-item-indicator{font-size:var(--nz-size-icon-sm);flex:none;display:inline-flex}.nz-menu-item-icon{color:var(--nz-icon-secondary)}.nz-menu-item-label{flex:1;min-inline-size:0}.nz-menu-list .nz-menu-item-shortcut{color:var(--nz-text-tertiary);background:0 0;border:0;flex:none;padding:0}.nz-menu-item-indicator{visibility:hidden;color:var(--nz-icon-brand)}.nz-menu-list [data-checked]>.nz-menu-item-indicator{visibility:visible}.nz-menu-list [data-checked]>.nz-menu-item-icon{color:var(--nz-icon-brand)}.nz-menu-list [data-tone=critical]>.nz-menu-item-icon{color:var(--nz-icon-critical)}.nz-menu-list [data-disabled]>:is(.nz-menu-item-icon,.nz-menu-item-shortcut){color:inherit}.nz-menu-group-label{padding-block:var(--nz-space-1-5) var(--nz-space-1);color:var(--nz-text-tertiary);font:var(--nz-font-label-m);letter-spacing:var(--nz-tracking-label-m);padding-inline-start:var(--nz-space-3)}.nz-menu-separator{block-size:var(--nz-border-width-default);background:var(--nz-border-subtle);flex:none}@media (forced-colors:active){.nz-menu-popup{border:1px solid canvastext}:is(.nz-menu-checkbox-item,.nz-menu-radio-item)[data-checked],:is(.nz-menu-checkbox-item,.nz-menu-radio-item)[data-checked][data-highlighted]{color:highlighttext;outline-offset:calc(-2 * var(--nz-border-width-focus));forced-color-adjust:none;background:highlight;outline-color:highlighttext;&>:is(.nz-menu-item-icon,.nz-menu-item-shortcut,.nz-menu-item-indicator){color:highlighttext}}:is(.nz-menu-item,.nz-menu-checkbox-item,.nz-menu-radio-item)[data-disabled]{color:graytext}.nz-menu-separator{background:canvastext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-meter{--_nz-meter-fill:var(--nz-chart-primary);gap:var(--nz-meter-gap,var(--nz-space-2));flex-direction:column;display:flex}.nz-meter-header{justify-content:space-between;align-items:baseline;gap:var(--nz-space-3);display:flex}.nz-meter-label{min-inline-size:0;color:var(--nz-text-secondary);font:var(--nz-meter-label-font,var(--nz-font-label-m))}.nz-meter-value{color:var(--nz-text-primary);font:var(--nz-font-numeric-m);font-variant-numeric:tabular-nums;unicode-bidi:isolate;flex:none}.nz-meter-track{appearance:none;inline-size:100%;block-size:var(--nz-meter-height,var(--nz-space-1-5));border-radius:var(--nz-meter-radius,var(--nz-radius-full));background:var(--nz-meter-track-bg,var(--nz-chart-track));border:0;display:block;overflow:hidden}.nz-meter-track::-webkit-meter-bar{background:0 0;border:0;grid-row:1/-1;block-size:100%}.nz-meter-track::-webkit-meter-optimum-value{border-radius:var(--nz-meter-radius,var(--nz-radius-full));background:var(--nz-meter-fill,var(--_nz-meter-fill))}.nz-meter-track::-webkit-meter-suboptimum-value{border-radius:var(--nz-meter-radius,var(--nz-radius-full));background:var(--nz-chart-warning)}.nz-meter-track::-webkit-meter-even-less-good-value{border-radius:var(--nz-meter-radius,var(--nz-radius-full));background:var(--nz-chart-critical)}.nz-meter-track::-moz-meter-bar{border-radius:var(--nz-meter-radius,var(--nz-radius-full));background:var(--nz-meter-fill,var(--_nz-meter-fill))}.nz-meter-track:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--nz-chart-warning)}.nz-meter-track:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--nz-chart-critical)}.nz-meter[data-tone=success]{--_nz-meter-fill:var(--nz-chart-success)}.nz-meter[data-tone=warning]{--_nz-meter-fill:var(--nz-chart-warning)}.nz-meter[data-tone=critical]{--_nz-meter-fill:var(--nz-chart-critical)}.nz-meter[data-tone=neutral]{--_nz-meter-fill:var(--nz-chart-neutral)}@media (forced-colors:active){.nz-meter-track{border:1px solid canvastext}.nz-meter-track::-webkit-meter-optimum-value{forced-color-adjust:none;background:highlight}.nz-meter-track::-webkit-meter-suboptimum-value{forced-color-adjust:none;background:highlight}.nz-meter-track::-webkit-meter-even-less-good-value{forced-color-adjust:none;background:highlight}.nz-meter-track::-moz-meter-bar{forced-color-adjust:none;background:highlight}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-native-select{--_nz-native-select-height:var(--nz-size-control-md);--_nz-native-select-radius:var(--nz-radius-md);--_nz-native-select-border:var(--nz-border-control);--_nz-native-select-border-hover:var(--nz-border-control-hover);--_nz-native-select-bg:var(--nz-bg-surface);--_nz-native-select-fg:var(--nz-text-primary);--_nz-native-select-glyph:var(--nz-size-icon-sm);--_nz-native-select-padding:var(--nz-space-3);--_nz-native-select-gap:var(--nz-space-2);--_nz-native-select-halo:var(--nz-focus-halo);--_nz-native-select-font:var(--nz-font-label-m);--_nz-native-select-slot:calc(var(--_nz-native-select-padding) + var(--_nz-native-select-glyph) + var(--_nz-native-select-gap));--_nz-native-select-start:var(--_nz-native-select-padding);--_nz-native-select-inset:calc(var(--_nz-native-select-padding) + var(--nz-border-width-default));vertical-align:middle;align-items:center;min-inline-size:0;display:inline-grid;&:has(>.nz-native-select-icon){--_nz-native-select-start:var(--_nz-native-select-slot)}&[data-invalid]{--_nz-native-select-border:var(--nz-border-critical);--_nz-native-select-border-hover:var(--nz-border-critical);--_nz-native-select-halo:var(--nz-focus-halo-critical)}&:is([data-disabled],:has(>.nz-native-select-trigger:disabled)){--_nz-native-select-border:var(--nz-border-subtle);--_nz-native-select-bg:var(--nz-bg-disabled);--_nz-native-select-fg:var(--nz-text-disabled)}&[data-size=sm]{--_nz-native-select-height:var(--nz-size-control-sm);--_nz-native-select-radius:var(--nz-radius-sm)}&[data-size=lg]{--_nz-native-select-height:var(--nz-size-control-lg)}@media (pointer:coarse){--_nz-native-select-font:var(--nz-font-label-l)}}.nz-native-select-trigger,.nz-native-select-icon,.nz-native-select-chevron{grid-area:1/1}.nz-native-select-trigger{appearance:none;box-sizing:border-box;min-inline-size:0;block-size:var(--nz-native-select-height,var(--_nz-native-select-height));padding-block:0;padding-inline:var(--_nz-native-select-start) var(--_nz-native-select-slot);border:var(--nz-border-width-default) solid var(--nz-native-select-border,var(--_nz-native-select-border));border-radius:var(--nz-native-select-radius,var(--_nz-native-select-radius));background:var(--nz-native-select-bg,var(--_nz-native-select-bg));color:var(--_nz-native-select-fg);font:var(--nz-native-select-font,var(--_nz-native-select-font));text-overflow:ellipsis;cursor:pointer;transition:border-color var(--nz-duration-fast) var(--nz-easing-standard), box-shadow var(--nz-duration-fast) var(--nz-easing-standard);margin:0;@media (hover:hover){&:hover:not(:disabled){border-color:var(--_nz-native-select-border-hover)}}&:focus-visible{box-shadow:0 0 0 calc(var(--nz-border-width-focus) + 4px) var(--_nz-native-select-halo)}&:not(:disabled):has(>option[value=""]:checked){color:var(--nz-text-tertiary)}&:disabled{color:var(--_nz-native-select-fg);cursor:not-allowed}}.nz-native-select-trigger :is(option,optgroup){color:var(--nz-text-primary);background:var(--nz-bg-surface)}.nz-native-select-icon,.nz-native-select-chevron{font-size:var(--_nz-native-select-glyph);color:var(--nz-native-select-icon-fg,var(--nz-text-secondary));pointer-events:none;display:inline-flex}.nz-native-select-icon{justify-self:start;margin-inline-start:var(--_nz-native-select-inset)}.nz-native-select-chevron{justify-self:end;margin-inline-end:var(--_nz-native-select-inset)}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-progress-bar{--_nz-progress-bar-fill:var(--nz-chart-primary);gap:var(--nz-progress-bar-gap,var(--nz-space-2));flex-direction:column;display:flex}.nz-progress-bar-header{justify-content:space-between;align-items:baseline;gap:var(--nz-space-3);display:flex}.nz-progress-bar-label{min-inline-size:0;color:var(--nz-text-secondary);font:var(--nz-progress-bar-label-font,var(--nz-font-label-m))}.nz-progress-bar-value{color:var(--nz-text-primary);font:var(--nz-font-numeric-m);font-variant-numeric:tabular-nums;unicode-bidi:isolate;flex:none}.nz-progress-bar-track{appearance:none;inline-size:100%;block-size:var(--nz-progress-bar-height,var(--nz-space-2));border-radius:var(--nz-progress-bar-radius,var(--nz-radius-full));background:var(--nz-progress-bar-track-bg,var(--nz-chart-track));border:0;display:block;overflow:hidden}.nz-progress-bar-track::-webkit-progress-bar{background:0 0}.nz-progress-bar-track::-webkit-progress-value{border-radius:var(--nz-progress-bar-radius,var(--nz-radius-full));background:var(--nz-progress-bar-fill,var(--_nz-progress-bar-fill));transition:inline-size var(--nz-duration-base) var(--nz-easing-standard)}.nz-progress-bar-track::-moz-progress-bar{border-radius:var(--nz-progress-bar-radius,var(--nz-radius-full));background:var(--nz-progress-bar-fill,var(--_nz-progress-bar-fill))}.nz-progress-bar-track:indeterminate{background-image:linear-gradient(90deg, transparent, var(--nz-progress-bar-fill,var(--_nz-progress-bar-fill)), transparent);animation:nz-progress-bar-sweep var(--nz-duration-pulse) ease-in-out infinite;background-position:50% 0;background-repeat:no-repeat;background-size:40% 100%;&:dir(rtl){animation-direction:reverse}}.nz-progress-bar-track:indeterminate::-moz-progress-bar{background:0 0}@keyframes nz-progress-bar-sweep{0%{background-position:-66.67% 0}to{background-position:166.67% 0}}.nz-progress-bar[data-tone=success]{--_nz-progress-bar-fill:var(--nz-chart-success)}.nz-progress-bar[data-tone=warning]{--_nz-progress-bar-fill:var(--nz-chart-warning)}.nz-progress-bar[data-tone=critical]{--_nz-progress-bar-fill:var(--nz-chart-critical)}.nz-progress-bar[data-tone=neutral]{--_nz-progress-bar-fill:var(--nz-chart-neutral)}@media (forced-colors:active){.nz-progress-bar-track{border:1px solid canvastext}.nz-progress-bar-track::-webkit-progress-value{forced-color-adjust:none;background:highlight}.nz-progress-bar-track::-moz-progress-bar{forced-color-adjust:none;background:highlight}.nz-progress-bar-track:indeterminate{forced-color-adjust:none;background-color:canvas;background-image:linear-gradient(90deg,canvas,highlight,canvas)}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-progress-ring{--_nz-progress-ring-size:4.5rem;--_nz-progress-ring-fill:var(--nz-chart-primary);inline-size:var(--nz-progress-ring-size,var(--_nz-progress-ring-size));block-size:var(--nz-progress-ring-size,var(--_nz-progress-ring-size));color:var(--nz-text-primary);place-items:center;display:inline-grid}.nz-progress-ring-svg,.nz-progress-ring-label{grid-area:1/1}.nz-progress-ring-svg{block-size:100%;inline-size:100%}.nz-progress-ring-track{stroke:var(--nz-progress-ring-track-bg,var(--nz-chart-track))}.nz-progress-ring-fill{stroke:var(--nz-progress-ring-fill,var(--_nz-progress-ring-fill));stroke-linecap:butt;transition:stroke-dasharray var(--nz-duration-base) var(--nz-easing-standard)}.nz-progress-ring-label{font:var(--nz-progress-ring-label-font,var(--nz-font-label-m-strong));font-variant-numeric:tabular-nums;unicode-bidi:isolate}.nz-progress-ring[data-size=sm]{--_nz-progress-ring-size:3rem}.nz-progress-ring[data-size=lg]{--_nz-progress-ring-size:6rem}.nz-progress-ring[data-tone=success]{--_nz-progress-ring-fill:var(--nz-chart-success)}.nz-progress-ring[data-tone=warning]{--_nz-progress-ring-fill:var(--nz-chart-warning)}.nz-progress-ring[data-tone=critical]{--_nz-progress-ring-fill:var(--nz-chart-critical)}.nz-progress-ring[data-tone=neutral]{--_nz-progress-ring-fill:var(--nz-chart-neutral)}@media (forced-colors:active){.nz-progress-ring-svg{forced-color-adjust:none}.nz-progress-ring-track{stroke:graytext}.nz-progress-ring-fill{stroke:highlight}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-radio-group[data-orientation=horizontal]>.nz-fieldset-content{column-gap:var(--nz-radio-group-gap,var(--nz-space-6));flex-flow:wrap;&>:is(.nz-fieldset-description,.nz-fieldset-error){flex-basis:100%}}.nz-radio{--_nz-radio-size:1.25rem;justify-content:start;align-items:start;column-gap:var(--nz-radio-gap,var(--nz-space-2));color:var(--nz-text-primary);font:var(--nz-font-body-m);cursor:pointer;grid-template-columns:auto auto;display:inline-grid}.nz-radio-input{--_nz-radio-bg:var(--nz-bg-surface);--_nz-radio-border:var(--nz-border-control);--_nz-radio-ring:transparent;appearance:none;box-sizing:border-box;inline-size:var(--nz-radio-size,var(--_nz-radio-size));block-size:var(--nz-radio-size,var(--_nz-radio-size));margin:0;border:var(--nz-border-width-default) solid var(--_nz-radio-border);border-radius:var(--nz-radius-full);background:var(--_nz-radio-bg);box-shadow:inset 0 0 0 .3125rem var(--_nz-radio-ring);font:inherit;cursor:inherit;transition:background-color var(--nz-duration-fast) var(--nz-easing-standard), border-color var(--nz-duration-fast) var(--nz-easing-standard), box-shadow var(--nz-duration-fast) var(--nz-easing-standard);margin-block-start:calc((1lh - var(--nz-radio-size,var(--_nz-radio-size))) / 2)}.nz-radio-group[data-invalid] .nz-radio-input:not(:checked){--_nz-radio-border:var(--nz-border-critical)}.nz-radio-input:checked{--_nz-radio-bg:var(--nz-text-on-brand);--_nz-radio-border:var(--nz-radio-accent,var(--nz-bg-brand));--_nz-radio-ring:var(--nz-radio-accent,var(--nz-bg-brand))}@media (hover:hover){.nz-radio:hover>.nz-radio-input:not(:disabled,:checked){--_nz-radio-border:var(--nz-border-control-hover)}}.nz-radio-input:disabled{--_nz-radio-bg:var(--nz-bg-disabled);--_nz-radio-border:var(--nz-border-subtle)}.nz-radio-input:disabled:checked{--_nz-radio-bg:var(--nz-text-disabled);--_nz-radio-border:var(--nz-bg-muted);--_nz-radio-ring:var(--nz-bg-muted)}.nz-radio-label{grid-area:1/2}.nz-radio:is([data-disabled],:has(>.nz-radio-input:disabled)){color:var(--nz-text-disabled);cursor:not-allowed}@media (forced-colors:active){.nz-radio-input:checked{--_nz-radio-ring:Highlight;forced-color-adjust:none;background:highlighttext;border-color:highlight}.nz-radio-input:disabled:checked{--_nz-radio-ring:GrayText;background:canvas;border-color:graytext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-segmented-control{--_nz-segmented-control-height:var(--nz-size-control-md);--_nz-segmented-control-inset:var(--nz-space-1);--_nz-segmented-control-radius:var(--nz-radius-md);--_nz-segmented-control-item-padding-inline:var(--nz-space-3);--_nz-segmented-control-font:var(--nz-font-label-m);gap:var(--nz-segmented-control-gap,var(--nz-space-0-5));box-sizing:border-box;inline-size:fit-content;max-inline-size:100%;block-size:var(--nz-segmented-control-height,var(--_nz-segmented-control-height));padding:var(--_nz-segmented-control-inset);border-radius:var(--nz-segmented-control-radius,var(--_nz-segmented-control-radius));background:var(--nz-segmented-control-bg,var(--nz-bg-subtle));font:var(--_nz-segmented-control-font);vertical-align:middle;display:inline-flex;&[data-full-width]{inline-size:100%;display:flex}&[data-invalid]{box-shadow:inset 0 0 0 var(--nz-border-width-default) var(--nz-border-critical)}}.nz-segmented-control[data-size=sm]{--_nz-segmented-control-height:var(--nz-size-control-sm);--_nz-segmented-control-inset:var(--nz-space-0-5);--_nz-segmented-control-radius:var(--nz-radius-sm);--_nz-segmented-control-item-padding-inline:var(--nz-space-2)}.nz-segmented-control[data-size=lg]{--_nz-segmented-control-height:var(--nz-size-control-lg);--_nz-segmented-control-item-padding-inline:var(--nz-space-4);--_nz-segmented-control-font:var(--nz-font-label-l)}.nz-segmented-control-item{justify-content:center;align-items:center;gap:var(--nz-space-1-5);box-sizing:border-box;min-inline-size:0;padding-inline:var(--_nz-segmented-control-item-padding-inline);border-radius:calc(var(--nz-segmented-control-radius,var(--_nz-segmented-control-radius)) - var(--_nz-segmented-control-inset));color:var(--nz-segmented-control-fg,var(--nz-text-secondary));white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--nz-duration-fast) var(--nz-easing-standard), box-shadow var(--nz-duration-fast) var(--nz-easing-standard), color var(--nz-duration-fast) var(--nz-easing-standard);flex:none;display:inline-flex;position:relative;@media (hover:hover){&:hover:not(:has(>input:disabled)){color:var(--nz-text-primary)}}&:has(>input:checked){background:var(--nz-segmented-control-thumb-bg,var(--nz-bg-surface));box-shadow:inset 0 0 0 var(--nz-border-width-default) var(--nz-border-control), var(--nz-elevation-1);color:var(--nz-segmented-control-fg-selected,var(--nz-text-primary))}&:has(>input:disabled){color:var(--nz-text-disabled);cursor:not-allowed}&:has(>input:checked:disabled){box-shadow:inset 0 0 0 var(--nz-border-width-default) var(--nz-border-subtle)}}.nz-segmented-control[data-full-width]>.nz-segmented-control-item{flex:1 1 0;min-inline-size:fit-content}.nz-segmented-control-input{opacity:0;appearance:none;cursor:inherit;margin:0;position:absolute;inset:0}.nz-segmented-control-icon{inline-size:var(--nz-size-icon-sm);block-size:var(--nz-size-icon-sm);font-size:var(--nz-size-icon-sm);flex:none;display:inline-flex;&>svg{block-size:100%;inline-size:100%}}.nz-segmented-control-label{min-inline-size:0;display:inline-grid}.nz-segmented-control-text,.nz-segmented-control-sizer{text-overflow:ellipsis;grid-area:1/1;overflow:hidden}.nz-segmented-control-sizer,.nz-segmented-control-item:has(>input:checked) .nz-segmented-control-text{font-weight:var(--nz-font-label-m-strong-font-weight)}.nz-segmented-control-sizer{visibility:hidden}@media (forced-colors:active){.nz-segmented-control{outline:1px solid canvastext}.nz-segmented-control-item:has(>input:disabled){color:graytext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-select-trigger{--_nz-select-height:var(--nz-size-control-md);--_nz-select-radius:var(--nz-radius-md);--_nz-select-border:var(--nz-border-control);--_nz-select-border-hover:var(--nz-border-control-hover);--_nz-select-halo:var(--nz-focus-halo);--_nz-select-font:var(--nz-font-label-m);align-items:center;gap:var(--nz-space-2);box-sizing:border-box;min-inline-size:0;block-size:var(--nz-select-height,var(--_nz-select-height));padding-inline:var(--nz-space-3);border:var(--nz-border-width-default) solid var(--nz-select-border,var(--_nz-select-border));border-radius:var(--nz-select-radius,var(--_nz-select-radius));background:var(--nz-select-bg,var(--nz-bg-surface));color:var(--nz-text-primary);font:var(--_nz-select-font);cursor:pointer;transition:border-color var(--nz-duration-fast) var(--nz-easing-standard), box-shadow var(--nz-duration-fast) var(--nz-easing-standard);display:inline-flex;@media (hover:hover){&:hover:not([data-disabled],:disabled){border-color:var(--nz-select-border-hover,var(--_nz-select-border-hover))}}&:is(:focus-visible,[data-focus-visible]){box-shadow:0 0 0 calc(var(--nz-border-width-focus) + 4px) var(--_nz-select-halo)}&[data-invalid]{--_nz-select-border:var(--nz-border-critical);--_nz-select-border-hover:var(--nz-border-critical);--_nz-select-halo:var(--nz-focus-halo-critical)}&:is([data-disabled],:disabled){--_nz-select-border:var(--nz-border-subtle);background:var(--nz-bg-disabled);color:var(--nz-text-disabled);cursor:not-allowed}&[data-size=sm]{--_nz-select-height:var(--nz-size-control-sm);--_nz-select-radius:var(--nz-radius-sm)}&[data-size=lg]{--_nz-select-height:var(--nz-size-control-lg)}@media (pointer:coarse){--_nz-select-font:var(--nz-font-label-l)}}.nz-select-value{text-align:start;text-overflow:ellipsis;white-space:nowrap;flex:1;min-inline-size:0;overflow:hidden;&[data-placeholder]{color:var(--nz-text-tertiary)}}.nz-select-icon,.nz-select-chevron{font-size:var(--nz-size-icon-sm);color:var(--nz-text-secondary);flex:none;display:inline-flex}.nz-select-popup{z-index:var(--nz-z-overlay);box-sizing:border-box;min-inline-size:var(--nz-trigger-width);max-block-size:var(--nz-available-height);border:var(--nz-border-width-default) solid var(--nz-border-subtle);border-radius:var(--nz-radius-md);background:var(--nz-bg-surface-raised);box-shadow:var(--nz-elevation-4);transform-origin:var(--nz-transform-origin);transition:scale var(--nz-duration-spring) var(--nz-easing-spring), opacity var(--nz-duration-spring) var(--nz-easing-enter);flex-direction:column;display:flex;overflow:auto;&[data-entering]{opacity:0;scale:var(--nz-scale-enter)}&[data-exiting]{opacity:0;transition:opacity var(--nz-duration-fade) var(--nz-easing-exit)}}.nz-select-list,.nz-select-group{flex-direction:column;display:flex}.nz-select-list{padding:var(--nz-space-1-5);outline:none}.nz-select-item{align-items:center;gap:var(--nz-space-2);box-sizing:border-box;min-block-size:2.25rem;padding-block:var(--nz-space-2);padding-inline:var(--nz-space-3);border-radius:var(--nz-radius-sm);color:var(--nz-text-primary);font:var(--nz-font-label-m);letter-spacing:var(--nz-tracking-label-m);cursor:default;display:flex;&[data-highlighted]{background:var(--nz-bg-hover)}&[data-selected]{background:var(--nz-bg-brand-subtle);font:var(--nz-font-label-m-strong)}&[data-selected][data-highlighted]{background:var(--nz-bg-hover)}&[data-disabled]{color:var(--nz-text-disabled);cursor:not-allowed}}.nz-select-item-indicator{font-size:var(--nz-size-icon-sm);color:var(--nz-icon-brand);visibility:hidden;flex:none;margin-inline-start:auto;display:inline-flex}.nz-select-item[data-selected]>.nz-select-item-indicator{visibility:visible}.nz-select-group-label{padding-block:var(--nz-space-2) var(--nz-space-1);padding-inline:var(--nz-space-3);color:var(--nz-text-secondary);font:var(--nz-font-label-s);letter-spacing:var(--nz-tracking-label-s)}.nz-select-separator{block-size:var(--nz-border-width-default);margin-block:var(--nz-space-1);background:var(--nz-border-subtle);flex:none}@media (forced-colors:active){.nz-select-popup{border:1px solid canvastext}.nz-select-item[data-selected],.nz-select-item[data-selected][data-highlighted]{color:highlighttext;outline-offset:calc(-2 * var(--nz-border-width-focus));forced-color-adjust:none;background:highlight;outline-color:highlighttext;&>.nz-select-item-indicator{color:highlighttext}}.nz-select-item[data-disabled]{color:graytext}.nz-select-separator{background:canvastext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-separator{border:0 solid var(--nz-separator-color,var(--nz-border-subtle));border-block-start-width:var(--nz-border-width-default);flex-shrink:0;align-self:stretch;margin:0}.nz-separator[data-orientation=vertical]{border-block-start-width:0;border-inline-start-width:var(--nz-border-width-default)}@media (forced-colors:active){.nz-separator{border-color:canvastext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-skeleton{--_nz-skeleton-radius:var(--nz-radius-xs);--_nz-skeleton-width:100%;inline-size:var(--nz-skeleton-width,var(--_nz-skeleton-width));block-size:var(--nz-skeleton-height,1em);border-radius:var(--nz-skeleton-radius,var(--_nz-skeleton-radius));background:var(--nz-skeleton-bg,var(--nz-bg-muted));animation:nz-skeleton-pulse var(--nz-duration-pulse) ease-in-out infinite;display:block}.nz-skeleton[data-shape=block]{--_nz-skeleton-radius:var(--nz-radius-sm)}.nz-skeleton[data-shape=circle]{--_nz-skeleton-radius:var(--nz-radius-full);--_nz-skeleton-width:var(--nz-skeleton-height,1em);aspect-ratio:1}@keyframes nz-skeleton-pulse{50%{opacity:.5}}@media (forced-colors:active){.nz-skeleton{forced-color-adjust:none;background:graytext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-stack{--_nz-stack-gap:0;gap:var(--nz-stack-gap,var(--_nz-stack-gap));flex-direction:column;display:flex}.nz-stack[data-gap="0"]{--_nz-stack-gap:var(--nz-space-0)}.nz-stack[data-gap="0-5"]{--_nz-stack-gap:var(--nz-space-0-5)}.nz-stack[data-gap="1"]{--_nz-stack-gap:var(--nz-space-1)}.nz-stack[data-gap="1-5"]{--_nz-stack-gap:var(--nz-space-1-5)}.nz-stack[data-gap="2"]{--_nz-stack-gap:var(--nz-space-2)}.nz-stack[data-gap="3"]{--_nz-stack-gap:var(--nz-space-3)}.nz-stack[data-gap="4"]{--_nz-stack-gap:var(--nz-space-4)}.nz-stack[data-gap="5"]{--_nz-stack-gap:var(--nz-space-5)}.nz-stack[data-gap="6"]{--_nz-stack-gap:var(--nz-space-6)}.nz-stack[data-gap="8"]{--_nz-stack-gap:var(--nz-space-8)}.nz-stack[data-gap="10"]{--_nz-stack-gap:var(--nz-space-10)}.nz-stack[data-gap="12"]{--_nz-stack-gap:var(--nz-space-12)}.nz-stack[data-gap="16"]{--_nz-stack-gap:var(--nz-space-16)}.nz-stack[data-gap="20"]{--_nz-stack-gap:var(--nz-space-20)}.nz-stack[data-gap="24"]{--_nz-stack-gap:var(--nz-space-24)}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-switch{--_nz-switch-thumb-size:1rem;--_nz-switch-pad:var(--nz-space-0-5);--_nz-switch-height:calc(var(--_nz-switch-thumb-size) + 2 * var(--_nz-switch-pad));--_nz-switch-direction:1;justify-content:start;align-items:start;column-gap:var(--nz-switch-gap,var(--nz-space-2));color:var(--nz-text-primary);font:var(--nz-font-body-m);cursor:pointer;grid-template-columns:auto auto;display:inline-grid}.nz-switch:dir(rtl){--_nz-switch-direction:-1}.nz-switch-input,.nz-switch-thumb{grid-area:1/1}.nz-switch-input{--_nz-switch-bg:var(--nz-border-control);appearance:none;box-sizing:border-box;inline-size:calc(2 * var(--_nz-switch-thumb-size) + 2 * var(--_nz-switch-pad));block-size:var(--_nz-switch-height);margin:0;border-radius:var(--nz-radius-full);background:var(--_nz-switch-bg);font:inherit;cursor:inherit;transition:background-color var(--nz-duration-fade) var(--nz-easing-standard);border:0;margin-block-start:calc((1lh - var(--_nz-switch-height)) / 2)}.nz-switch-input:checked{--_nz-switch-bg:var(--nz-switch-accent,var(--nz-bg-brand))}.nz-switch-input[aria-invalid=true]:not(:checked){box-shadow:inset 0 0 0 var(--nz-border-width-default) var(--nz-border-critical)}@media (hover:hover){.nz-switch:hover>.nz-switch-input:not(:disabled,:checked){--_nz-switch-bg:var(--nz-border-control-hover)}}.nz-switch-input:disabled{--_nz-switch-bg:var(--nz-bg-disabled)}.nz-switch-input:disabled:checked{--_nz-switch-bg:var(--nz-bg-brand-muted)}.nz-switch-thumb{inline-size:var(--_nz-switch-thumb-size);block-size:var(--_nz-switch-thumb-size);border-radius:var(--nz-radius-full);background:var(--nz-switch-thumb-bg,var(--nz-bg-surface));box-shadow:var(--nz-switch-thumb-shadow,var(--nz-elevation-1));pointer-events:none;transition:translate var(--nz-duration-spring) var(--nz-easing-spring);justify-self:start;margin-block-start:calc((1lh - var(--_nz-switch-height)) / 2 + var(--_nz-switch-pad));margin-inline-start:var(--_nz-switch-pad)}.nz-switch-input:checked+.nz-switch-thumb{translate:calc(var(--_nz-switch-thumb-size) * var(--_nz-switch-direction)) 0}.nz-switch-input:disabled+.nz-switch-thumb{box-shadow:none}.nz-switch-label{grid-area:1/2}.nz-switch:is([data-disabled],:has(>.nz-switch-input:disabled)){color:var(--nz-text-disabled);cursor:not-allowed}@media (forced-colors:active){.nz-switch-input{border:1px solid canvastext}.nz-switch-input:checked{forced-color-adjust:none;background:highlight}.nz-switch-input:disabled{border-color:graytext}.nz-switch-input:disabled:checked{background:graytext}.nz-switch-thumb{forced-color-adjust:none;background:canvastext}.nz-switch-input:checked+.nz-switch-thumb{background:highlighttext}.nz-switch-input:disabled+.nz-switch-thumb{background:graytext}.nz-switch-input:disabled:checked+.nz-switch-thumb{background:canvas}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-tab-nav{overscroll-behavior-inline:contain;border-block-end:var(--nz-border-width-default) solid var(--nz-tab-nav-border,var(--nz-border-subtle));min-inline-size:0;display:flex;overflow:auto hidden}.nz-tab-nav-link{--_nz-tab-nav-link-start:calc(var(--nz-space-3) + var(--nz-space-0-5));--_nz-tab-nav-link-end:calc(var(--nz-space-3) + var(--nz-space-0-5));align-items:center;gap:var(--nz-space-1-5);box-sizing:border-box;block-size:var(--nz-size-control-md);padding-block:0 var(--nz-space-1);padding-inline:var(--_nz-tab-nav-link-start) var(--_nz-tab-nav-link-end);color:var(--nz-tab-nav-fg,var(--nz-text-secondary));font:var(--nz-font-label-m);letter-spacing:var(--nz-tracking-label-m);white-space:nowrap;transition:color var(--nz-duration-fast) var(--nz-easing-standard);flex:none;text-decoration:none;display:inline-flex;position:relative;&:first-child{--_nz-tab-nav-link-start:var(--nz-space-0-5)}&:last-child{--_nz-tab-nav-link-end:var(--nz-space-0-5)}&:before{content:"";inset-block-end:0;inset-inline:var(--_nz-tab-nav-link-start) var(--_nz-tab-nav-link-end);block-size:var(--nz-border-width-focus);transition:background-color var(--nz-duration-fast) var(--nz-easing-standard);position:absolute}@media (hover:hover){&:hover:not([aria-current=page]){color:var(--nz-text-primary);&:before{background:var(--nz-border-strong)}}}&[aria-current=page]{color:var(--nz-tab-nav-fg-current,var(--nz-text-primary));&:before{background:var(--nz-tab-nav-indicator,var(--nz-bg-brand))}}}.nz-tab-nav-icon{inline-size:var(--nz-size-icon-sm);block-size:var(--nz-size-icon-sm);font-size:var(--nz-size-icon-sm);flex:none;display:inline-flex;&>svg{block-size:100%;inline-size:100%}}.nz-tab-nav-label{display:inline-grid}.nz-tab-nav-text,.nz-tab-nav-sizer{grid-area:1/1}.nz-tab-nav-sizer,.nz-tab-nav-link[aria-current=page] .nz-tab-nav-text{font-weight:var(--nz-font-label-m-strong-font-weight);letter-spacing:var(--nz-tracking-label-m-strong)}.nz-tab-nav-sizer{visibility:hidden}.nz-tab-nav-count{padding-inline:var(--nz-space-1-5);border-radius:var(--nz-radius-full);background:var(--nz-tab-nav-count-bg,var(--nz-bg-subtle));color:var(--nz-text-secondary);font:var(--nz-font-label-s);letter-spacing:var(--nz-tracking-label-s);font-variant-numeric:tabular-nums}@media (forced-colors:active){.nz-tab-nav-link[aria-current=page]:before{forced-color-adjust:none;background:highlight}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-tabs{gap:var(--nz-tabs-gap,var(--nz-space-4));flex-direction:column;min-inline-size:0;display:flex}.nz-tabs-list{overscroll-behavior-inline:contain;border-block-end:var(--nz-border-width-default) solid var(--nz-tabs-border,var(--nz-border-subtle));min-inline-size:0;display:flex;overflow:auto hidden}.nz-tabs-tab{--_nz-tabs-tab-start:calc(var(--nz-space-3) + var(--nz-space-0-5));--_nz-tabs-tab-end:calc(var(--nz-space-3) + var(--nz-space-0-5));align-items:center;gap:var(--nz-space-1-5);box-sizing:border-box;block-size:var(--nz-size-control-md);padding-block:0 var(--nz-space-1);padding-inline:var(--_nz-tabs-tab-start) var(--_nz-tabs-tab-end);color:var(--nz-tabs-fg,var(--nz-text-secondary));font:var(--nz-font-label-m);letter-spacing:var(--nz-tracking-label-m);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--nz-duration-fast) var(--nz-easing-standard);flex:none;display:inline-flex;position:relative;&:first-child{--_nz-tabs-tab-start:var(--nz-space-0-5)}&:last-child{--_nz-tabs-tab-end:var(--nz-space-0-5)}&:before{content:"";inset-block-end:0;inset-inline:var(--_nz-tabs-tab-start) var(--_nz-tabs-tab-end);block-size:var(--nz-border-width-focus);transition:background-color var(--nz-duration-fast) var(--nz-easing-standard);position:absolute}@media (hover:hover){&:hover:not([data-disabled],[data-selected]){color:var(--nz-text-primary);&:before{background:var(--nz-border-strong)}}}&[data-selected]{color:var(--nz-tabs-fg-selected,var(--nz-text-primary));&:before{background:var(--nz-tabs-indicator,var(--nz-bg-brand))}}&[data-disabled]{color:var(--nz-text-disabled);cursor:not-allowed}}.nz-tabs-icon{inline-size:var(--nz-size-icon-sm);block-size:var(--nz-size-icon-sm);font-size:var(--nz-size-icon-sm);flex:none;display:inline-flex;&>svg{block-size:100%;inline-size:100%}}.nz-tabs-label{display:inline-grid}.nz-tabs-text,.nz-tabs-sizer{grid-area:1/1}.nz-tabs-sizer,.nz-tabs-tab[data-selected] .nz-tabs-text{font-weight:var(--nz-font-label-m-strong-font-weight);letter-spacing:var(--nz-tracking-label-m-strong)}.nz-tabs-sizer{visibility:hidden}.nz-tabs-count{padding-inline:var(--nz-space-1-5);border-radius:var(--nz-radius-full);background:var(--nz-tabs-count-bg,var(--nz-bg-subtle));color:var(--nz-text-secondary);font:var(--nz-font-label-s);letter-spacing:var(--nz-tracking-label-s);font-variant-numeric:tabular-nums;.nz-tabs-tab[data-disabled] &{color:var(--nz-text-disabled)}}.nz-tabs-panel{min-inline-size:0;&:is(:focus-visible,[data-focus-visible]){outline:var(--nz-border-width-focus) solid var(--nz-border-focus);outline-offset:2px}}@media (forced-colors:active){.nz-tabs-tab[data-selected]:before{forced-color-adjust:none;background:highlight}.nz-tabs-tab[data-disabled]{color:graytext}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-text{--_nz-text-font:var(--nz-font-body-m);--_nz-text-tracking:var(--nz-tracking-body-m);--_nz-text-numeric:normal;font:var(--_nz-text-font);font-variant-numeric:var(--_nz-text-numeric);letter-spacing:var(--_nz-text-tracking);margin:0}.nz-text[data-tone]{color:var(--_nz-text-fg)}.nz-text[data-variant=display-l]{--_nz-text-font:var(--nz-font-display-l);--_nz-text-tracking:var(--nz-tracking-display-l)}.nz-text[data-variant=display-m]{--_nz-text-font:var(--nz-font-display-m);--_nz-text-tracking:var(--nz-tracking-display-m)}.nz-text[data-variant=heading-h1]{--_nz-text-font:var(--nz-font-heading-h1);--_nz-text-tracking:var(--nz-tracking-heading-h1)}.nz-text[data-variant=heading-h2]{--_nz-text-font:var(--nz-font-heading-h2);--_nz-text-tracking:var(--nz-tracking-heading-h2)}.nz-text[data-variant=heading-h3]{--_nz-text-font:var(--nz-font-heading-h3);--_nz-text-tracking:var(--nz-tracking-heading-h3)}.nz-text[data-variant=heading-h4]{--_nz-text-font:var(--nz-font-heading-h4);--_nz-text-tracking:var(--nz-tracking-heading-h4)}.nz-text[data-variant=body-l]{--_nz-text-font:var(--nz-font-body-l);--_nz-text-tracking:var(--nz-tracking-body-l)}.nz-text[data-variant=body-m-strong]{--_nz-text-font:var(--nz-font-body-m-strong);--_nz-text-tracking:var(--nz-tracking-body-m-strong)}.nz-text[data-variant=body-s]{--_nz-text-font:var(--nz-font-body-s);--_nz-text-tracking:var(--nz-tracking-body-s)}.nz-text[data-variant=label-l]{--_nz-text-font:var(--nz-font-label-l);--_nz-text-tracking:var(--nz-tracking-label-l)}.nz-text[data-variant=label-m]{--_nz-text-font:var(--nz-font-label-m);--_nz-text-tracking:var(--nz-tracking-label-m)}.nz-text[data-variant=label-m-strong]{--_nz-text-font:var(--nz-font-label-m-strong);--_nz-text-tracking:var(--nz-tracking-label-m-strong)}.nz-text[data-variant=label-s]{--_nz-text-font:var(--nz-font-label-s);--_nz-text-tracking:var(--nz-tracking-label-s)}.nz-text[data-variant=numeric-display]{--_nz-text-font:var(--nz-font-numeric-display);--_nz-text-tracking:var(--nz-tracking-numeric-display);--_nz-text-numeric:tabular-nums}.nz-text[data-variant=numeric-kpi]{--_nz-text-font:var(--nz-font-numeric-kpi);--_nz-text-tracking:var(--nz-tracking-numeric-kpi);--_nz-text-numeric:tabular-nums}.nz-text[data-variant=numeric-l]{--_nz-text-font:var(--nz-font-numeric-l);--_nz-text-tracking:var(--nz-tracking-numeric-l);--_nz-text-numeric:tabular-nums}.nz-text[data-variant=numeric-m]{--_nz-text-font:var(--nz-font-numeric-m);--_nz-text-tracking:var(--nz-tracking-numeric-m);--_nz-text-numeric:tabular-nums}.nz-text[data-variant=mono-m]{--_nz-text-font:var(--nz-font-mono-m);--_nz-text-tracking:var(--nz-tracking-mono-m)}.nz-text[data-variant=mono-m-strong]{--_nz-text-font:var(--nz-font-mono-m-strong);--_nz-text-tracking:var(--nz-tracking-mono-m-strong)}.nz-text[data-tone=primary]{--_nz-text-fg:var(--nz-text-primary)}.nz-text[data-tone=secondary]{--_nz-text-fg:var(--nz-text-secondary)}.nz-text[data-tone=tertiary]{--_nz-text-fg:var(--nz-text-tertiary)}.nz-text[data-tone=disabled]{--_nz-text-fg:var(--nz-text-disabled)}.nz-text[data-tone=inverse]{--_nz-text-fg:var(--nz-text-inverse)}.nz-text[data-tone=on-brand]{--_nz-text-fg:var(--nz-text-on-brand)}.nz-text[data-tone=on-accent]{--_nz-text-fg:var(--nz-text-on-accent)}.nz-text[data-tone=on-critical]{--_nz-text-fg:var(--nz-text-on-critical)}.nz-text[data-tone=brand]{--_nz-text-fg:var(--nz-text-brand)}.nz-text[data-tone=accent]{--_nz-text-fg:var(--nz-text-accent)}.nz-text[data-tone=success]{--_nz-text-fg:var(--nz-text-success)}.nz-text[data-tone=warning]{--_nz-text-fg:var(--nz-text-warning)}.nz-text[data-tone=critical]{--_nz-text-fg:var(--nz-text-critical)}.nz-text[data-tone=info]{--_nz-text-fg:var(--nz-text-info)}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-textarea{--_nz-textarea-border:var(--nz-border-control);--_nz-textarea-border-hover:var(--nz-border-control-hover);--_nz-textarea-bg:var(--nz-bg-surface);--_nz-textarea-halo:var(--nz-focus-halo);--_nz-textarea-font:var(--nz-font-body-m);--_nz-textarea-padding-block:var(--nz-textarea-padding-block,var(--nz-space-3));--_nz-textarea-min:var(--nz-textarea-min-block-size,7rem);box-sizing:border-box;min-inline-size:0;min-block-size:var(--_nz-textarea-min);padding-block:var(--_nz-textarea-padding-block);padding-inline:var(--nz-textarea-padding-inline,var(--nz-space-3));border:var(--nz-border-width-default) solid var(--nz-textarea-border,var(--_nz-textarea-border));border-radius:var(--nz-textarea-radius,var(--nz-radius-md));background:var(--nz-textarea-bg,var(--_nz-textarea-bg));color:var(--nz-textarea-fg,var(--nz-text-primary));font:var(--nz-textarea-font,var(--_nz-textarea-font));resize:vertical;transition:border-color var(--nz-duration-fast) var(--nz-easing-standard), box-shadow var(--nz-duration-fast) var(--nz-easing-standard);margin:0;display:block;@supports (field-sizing:content){field-sizing:content;min-block-size:max(var(--_nz-textarea-min), calc(var(--_nz-textarea-rows,3) * 1lh + 2 * var(--_nz-textarea-padding-block) + 2 * var(--nz-border-width-default)))}@media (pointer:coarse){--_nz-textarea-font:var(--nz-font-body-l)}&::placeholder{color:var(--nz-textarea-placeholder-fg,var(--nz-text-tertiary));opacity:1}@media (hover:hover){&:hover:not(:disabled,[data-disabled]){border-color:var(--_nz-textarea-border-hover)}}&:focus-visible{box-shadow:0 0 0 calc(var(--nz-border-width-focus) + 4px) var(--_nz-textarea-halo)}&[data-invalid]{--_nz-textarea-border:var(--nz-border-critical);--_nz-textarea-border-hover:var(--nz-border-critical);--_nz-textarea-halo:var(--nz-focus-halo-critical)}&[data-readonly]{--_nz-textarea-bg:var(--nz-bg-subtle)}&[rows="1"]{--_nz-textarea-rows:1}&[rows="2"]{--_nz-textarea-rows:2}&[rows="3"]{--_nz-textarea-rows:3}&[rows="4"]{--_nz-textarea-rows:4}&[rows="5"]{--_nz-textarea-rows:5}&[rows="6"]{--_nz-textarea-rows:6}&[rows="7"]{--_nz-textarea-rows:7}&[rows="8"]{--_nz-textarea-rows:8}&[rows="9"]{--_nz-textarea-rows:9}&[rows="10"]{--_nz-textarea-rows:10}&:is(:disabled,[data-disabled]){--_nz-textarea-border:var(--nz-border-subtle);--_nz-textarea-bg:var(--nz-bg-disabled);color:var(--nz-text-disabled);cursor:not-allowed;resize:none;&::placeholder{color:var(--nz-text-disabled)}}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
|
|
2
|
+
@layer nz.components{.nz-tooltip-trigger.nz-hit-target{min-block-size:1.5rem;min-inline-size:1.5rem}.nz-tooltip-popup{z-index:var(--nz-z-overlay);align-items:center;gap:var(--nz-space-2);box-sizing:border-box;max-inline-size:20rem;padding-block:var(--nz-space-2);padding-inline:var(--nz-space-3);border-radius:var(--nz-tooltip-radius,var(--nz-radius-sm));background:var(--nz-tooltip-bg,var(--nz-bg-surface-raised));box-shadow:var(--nz-tooltip-shadow,var(--nz-elevation-3));color:var(--nz-tooltip-fg,var(--nz-text-primary));font:var(--nz-font-label-m);letter-spacing:var(--nz-tracking-label-m);transform-origin:var(--nz-transform-origin);transition:opacity var(--nz-duration-fade) var(--nz-easing-enter), translate var(--nz-duration-fast) var(--nz-easing-enter);display:flex;&[data-entering]{opacity:0}&[data-entering][data-side=top]{translate:0 var(--nz-distance-lift)}&[data-entering][data-side=bottom]{translate:0 calc(-1 * var(--nz-distance-lift))}&[data-entering][data-side=left]{translate:var(--nz-distance-lift) 0}&[data-entering][data-side=right]{translate:calc(-1 * var(--nz-distance-lift)) 0}&[data-exiting]{opacity:0;transition:opacity var(--nz-duration-fade) var(--nz-easing-exit)}}.nz-tooltip-popup .nz-tooltip-shortcut{color:var(--nz-tooltip-shortcut-fg,var(--nz-text-tertiary));background:0 0;border:0;flex:none;padding:0}@media (forced-colors:active){.nz-tooltip-popup{border:1px solid canvastext}}}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { RenderProp } from "../contracts/render.js";
|
|
2
|
+
import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
|
|
3
|
+
//#region src/delta/delta.d.ts
|
|
4
|
+
/** Figma "Trend", derived from the sign of `value`. */
|
|
5
|
+
export type DeltaTrend = "up" | "down" | "flat";
|
|
6
|
+
/** The colour: up is `success`, down is `critical`, flat is `neutral` unless `tone` says otherwise. */
|
|
7
|
+
export type DeltaTone = "success" | "critical" | "neutral";
|
|
8
|
+
export interface DeltaState {
|
|
9
|
+
trend: DeltaTrend;
|
|
10
|
+
tone: DeltaTone;
|
|
11
|
+
}
|
|
12
|
+
export interface DeltaProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
|
|
13
|
+
/** The change. With the default percent format it is a fraction: `0.124` renders "+12.4%". */
|
|
14
|
+
value: number;
|
|
15
|
+
/**
|
|
16
|
+
* Replaces the default `{ style: 'percent', maximumFractionDigits: 1 }`. `signDisplay` stays
|
|
17
|
+
* `'exceptZero'` unless you set it: the sign tells the direction without colour, so if you hide it,
|
|
18
|
+
* say the direction in `comparison`.
|
|
19
|
+
*/
|
|
20
|
+
format?: Intl.NumberFormatOptions;
|
|
21
|
+
/** BCP 47 tag for the number. @default 'en-US' */
|
|
22
|
+
locale?: string;
|
|
23
|
+
/** Visually hidden phrase read after the value, for example "vs last week". */
|
|
24
|
+
comparison?: string;
|
|
25
|
+
/** Overrides the colour derived from the sign, for example `critical` when a rise is bad. */
|
|
26
|
+
tone?: DeltaTone;
|
|
27
|
+
/** Decorative leading glyph; choose it from the sign, for example `<TrendingUp />`. */
|
|
28
|
+
icon?: ReactNode;
|
|
29
|
+
render?: RenderProp<DeltaState>;
|
|
30
|
+
}
|
|
31
|
+
export declare function Delta({ value, format, locale, comparison, tone, icon, render, className, ...rest }: DeltaProps): ReactElement;
|
|
32
|
+
//#endregion
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { cx } from "../_internal/cx.js";
|
|
2
|
+
import { renderElement } from "../contracts/render.js";
|
|
3
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/delta/delta.tsx
|
|
5
|
+
const DEFAULT_FORMAT = {
|
|
6
|
+
style: "percent",
|
|
7
|
+
maximumFractionDigits: 1
|
|
8
|
+
};
|
|
9
|
+
const TONES = {
|
|
10
|
+
up: "success",
|
|
11
|
+
down: "critical",
|
|
12
|
+
flat: "neutral"
|
|
13
|
+
};
|
|
14
|
+
function Delta({ value, format, locale = "en-US", comparison, tone, icon, render, className, ...rest }) {
|
|
15
|
+
const trend = value > 0 ? "up" : value < 0 ? "down" : "flat";
|
|
16
|
+
const resolved = tone ?? TONES[trend];
|
|
17
|
+
const options = {
|
|
18
|
+
signDisplay: "exceptZero",
|
|
19
|
+
...format ?? DEFAULT_FORMAT
|
|
20
|
+
};
|
|
21
|
+
const text = new Intl.NumberFormat(locale, options).format(value);
|
|
22
|
+
return renderElement("span", render, {
|
|
23
|
+
trend,
|
|
24
|
+
tone: resolved
|
|
25
|
+
}, {
|
|
26
|
+
"data-slot": "delta",
|
|
27
|
+
"data-tone": resolved,
|
|
28
|
+
...rest,
|
|
29
|
+
className: cx("nz-delta", className),
|
|
30
|
+
children: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
31
|
+
icon != null && /* @__PURE__ */ jsx("span", {
|
|
32
|
+
className: "nz-delta-icon",
|
|
33
|
+
"data-slot": "delta-icon",
|
|
34
|
+
"aria-hidden": "true",
|
|
35
|
+
children: icon
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ jsx("span", {
|
|
38
|
+
className: "nz-delta-value",
|
|
39
|
+
"data-slot": "delta-value",
|
|
40
|
+
children: text
|
|
41
|
+
}),
|
|
42
|
+
comparison !== void 0 && /* @__PURE__ */ jsx("span", {
|
|
43
|
+
className: "nz-visually-hidden",
|
|
44
|
+
children: ` ${comparison}`
|
|
45
|
+
})
|
|
46
|
+
] })
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
//#endregion
|
|
50
|
+
export { Delta };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Delta } from "./delta.js";
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { DialogBodyProps, DialogCloseProps, DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogRootProps, DialogTitleProps, DialogTriggerProps } from "./dialog.contract.js";
|
|
2
|
+
import { JSX } from "react";
|
|
3
|
+
//#region src/dialog/dialog.client.d.ts
|
|
4
|
+
export declare function DialogRoot({ returnFocus, ...props }: DialogRootProps): JSX.Element;
|
|
5
|
+
/**
|
|
6
|
+
* Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
|
|
7
|
+
* every standalone pressable, and dialog.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
|
|
8
|
+
* 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
|
|
9
|
+
*/
|
|
10
|
+
export declare function DialogTrigger({ className, render, ...rest }: DialogTriggerProps): JSX.Element;
|
|
11
|
+
export declare function DialogPopup({ role, size, backdrop, container, className, children, ...rest }: DialogPopupProps): JSX.Element;
|
|
12
|
+
export declare function DialogTitle({ level, className, render, ...rest }: DialogTitleProps): JSX.Element;
|
|
13
|
+
export declare function DialogDescription({ className, render, ...rest }: DialogDescriptionProps): JSX.Element;
|
|
14
|
+
/** The only scroller inside the popup. */
|
|
15
|
+
export declare function DialogBody({ className, render, ...rest }: DialogBodyProps): JSX.Element;
|
|
16
|
+
export declare function DialogFooter({ className, render, ...rest }: DialogFooterProps): JSX.Element;
|
|
17
|
+
/**
|
|
18
|
+
* With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
|
|
19
|
+
* showing the core close glyph (§12.3, §14.2), named by `labels.close`. Its markup is the IconButton
|
|
20
|
+
* element's (`iconButtonElement`, icon-button-static.tsx since M31), written out: importing that
|
|
21
|
+
* builder cost the Dialog entry about 280 B gzip against its 31 KiB cap. An overlay-lane case
|
|
22
|
+
* compares the two.
|
|
23
|
+
*/
|
|
24
|
+
export declare function DialogClose({ className, render, children, labels, ...rest }: DialogCloseProps): JSX.Element;
|
|
25
|
+
//#endregion
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx } from "../_internal/cx.js";
|
|
3
|
+
import { renderElement, toRenderFn } from "../contracts/render.js";
|
|
4
|
+
import { CloseGlyph } from "../_internal/glyphs.js";
|
|
5
|
+
import { Close, Description, Popup, Root, Title, Trigger } from "../_engines/react-aria/dialog.client.js";
|
|
6
|
+
import { createContext, use, useLayoutEffect, useMemo, useState } from "react";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
//#region src/dialog/dialog.client.tsx
|
|
9
|
+
const NestingContext = createContext(null);
|
|
10
|
+
/** `Dialog.Root`'s `returnFocus`, for its Popup. */
|
|
11
|
+
const ReturnFocusContext = createContext(true);
|
|
12
|
+
const renderDiv = toRenderFn(void 0, "div");
|
|
13
|
+
const renderP = toRenderFn(void 0, "p");
|
|
14
|
+
const TABBABLE = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable=\"false\"])";
|
|
15
|
+
/**
|
|
16
|
+
* Focus on open (§12.2): an element the consumer marked `autoFocus` keeps it (the engine sees focus
|
|
17
|
+
* inside and leaves it); an alertdialog focuses its least destructive action, the first
|
|
18
|
+
* `Dialog.Close`; a dialog focuses the first tabbable element in its `Dialog.Body`; otherwise the
|
|
19
|
+
* engine focuses the popup itself, so a long text starts at its top.
|
|
20
|
+
*/
|
|
21
|
+
function initialFocus(role) {
|
|
22
|
+
return (content) => {
|
|
23
|
+
if (role === "alertdialog") return content.querySelector("[data-slot=\"dialog-footer\"] [data-slot=\"dialog-close\"]:not(:disabled)") ?? content.querySelector("[data-slot=\"dialog-close\"]:not(:disabled)");
|
|
24
|
+
const body = content.querySelector("[data-slot=\"dialog-body\"]");
|
|
25
|
+
if (body === null) return null;
|
|
26
|
+
for (const element of body.querySelectorAll(TABBABLE)) if (element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0) return element;
|
|
27
|
+
return null;
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
const INITIAL_FOCUS = {
|
|
31
|
+
dialog: initialFocus("dialog"),
|
|
32
|
+
alertdialog: initialFocus("alertdialog")
|
|
33
|
+
};
|
|
34
|
+
function DialogRoot({ returnFocus = true, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx(ReturnFocusContext, {
|
|
36
|
+
value: returnFocus,
|
|
37
|
+
children: /* @__PURE__ */ jsx(Root, { ...props })
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
|
|
42
|
+
* every standalone pressable, and dialog.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
|
|
43
|
+
* 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
|
|
44
|
+
*/
|
|
45
|
+
function DialogTrigger({ className, render, ...rest }) {
|
|
46
|
+
return /* @__PURE__ */ jsx(Trigger, {
|
|
47
|
+
...rest,
|
|
48
|
+
className: cx("nz-dialog-trigger", render === void 0 && "nz-hit-target", className),
|
|
49
|
+
"data-slot": "dialog-trigger",
|
|
50
|
+
render: toRenderFn(render, "button")
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
function DialogPopup({ role = "dialog", size = "md", backdrop, container, className, children, ...rest }) {
|
|
54
|
+
const parent = use(NestingContext);
|
|
55
|
+
const returnFocus = use(ReturnFocusContext);
|
|
56
|
+
const [openChildren, setOpenChildren] = useState(0);
|
|
57
|
+
const nesting = useMemo(() => ({ childOpened: (delta) => setOpenChildren((n) => n + delta) }), []);
|
|
58
|
+
return /* @__PURE__ */ jsx(Popup, {
|
|
59
|
+
...rest,
|
|
60
|
+
role,
|
|
61
|
+
container,
|
|
62
|
+
backdrop: backdrop ?? parent === null,
|
|
63
|
+
positioner: {
|
|
64
|
+
className: "nz-dialog-positioner",
|
|
65
|
+
"data-slot": "dialog-positioner"
|
|
66
|
+
},
|
|
67
|
+
backdropProps: {
|
|
68
|
+
className: "nz-dialog-backdrop",
|
|
69
|
+
"data-slot": "dialog-backdrop"
|
|
70
|
+
},
|
|
71
|
+
contentProps: {
|
|
72
|
+
className: "nz-dialog-content",
|
|
73
|
+
"data-slot": "dialog-content"
|
|
74
|
+
},
|
|
75
|
+
initialFocus: INITIAL_FOCUS[role],
|
|
76
|
+
returnFocus,
|
|
77
|
+
className: cx("nz-dialog-popup", className),
|
|
78
|
+
"data-slot": "dialog-popup",
|
|
79
|
+
"data-size": size,
|
|
80
|
+
"data-nested-open": openChildren > 0 ? "" : void 0,
|
|
81
|
+
render: renderDiv,
|
|
82
|
+
children: /* @__PURE__ */ jsxs(NestingContext, {
|
|
83
|
+
value: nesting,
|
|
84
|
+
children: [parent !== null && /* @__PURE__ */ jsx(OpenSignal, { parent }), children]
|
|
85
|
+
})
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
/** Mounted only while this popup's content is mounted, i.e. while it is open. */
|
|
89
|
+
function OpenSignal({ parent }) {
|
|
90
|
+
useLayoutEffect(() => {
|
|
91
|
+
parent.childOpened(1);
|
|
92
|
+
return () => parent.childOpened(-1);
|
|
93
|
+
}, [parent]);
|
|
94
|
+
return null;
|
|
95
|
+
}
|
|
96
|
+
const HEADINGS = {
|
|
97
|
+
2: toRenderFn(void 0, "h2"),
|
|
98
|
+
3: toRenderFn(void 0, "h3"),
|
|
99
|
+
4: toRenderFn(void 0, "h4"),
|
|
100
|
+
5: toRenderFn(void 0, "h5"),
|
|
101
|
+
6: toRenderFn(void 0, "h6")
|
|
102
|
+
};
|
|
103
|
+
function DialogTitle({ level = 2, className, render, ...rest }) {
|
|
104
|
+
return /* @__PURE__ */ jsx(Title, {
|
|
105
|
+
...rest,
|
|
106
|
+
level,
|
|
107
|
+
className: cx("nz-dialog-title", className),
|
|
108
|
+
"data-slot": "dialog-title",
|
|
109
|
+
render: render === void 0 ? HEADINGS[level] : toRenderFn(render, `h${level}`)
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
function DialogDescription({ className, render, ...rest }) {
|
|
113
|
+
return /* @__PURE__ */ jsx(Description, {
|
|
114
|
+
...rest,
|
|
115
|
+
className: cx("nz-dialog-description", className),
|
|
116
|
+
"data-slot": "dialog-description",
|
|
117
|
+
render: render === void 0 ? renderP : toRenderFn(render, "p")
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
/** The only scroller inside the popup. */
|
|
121
|
+
function DialogBody({ className, render, ...rest }) {
|
|
122
|
+
return renderElement("div", render, {}, {
|
|
123
|
+
...rest,
|
|
124
|
+
className: cx("nz-dialog-body", className),
|
|
125
|
+
"data-slot": "dialog-body"
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
function DialogFooter({ className, render, ...rest }) {
|
|
129
|
+
return renderElement("div", render, {}, {
|
|
130
|
+
...rest,
|
|
131
|
+
className: cx("nz-dialog-footer", className),
|
|
132
|
+
"data-slot": "dialog-footer"
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
|
|
137
|
+
* showing the core close glyph (§12.3, §14.2), named by `labels.close`. Its markup is the IconButton
|
|
138
|
+
* element's (`iconButtonElement`, icon-button-static.tsx since M31), written out: importing that
|
|
139
|
+
* builder cost the Dialog entry about 280 B gzip against its 31 KiB cap. An overlay-lane case
|
|
140
|
+
* compares the two.
|
|
141
|
+
*/
|
|
142
|
+
function DialogClose({ className, render, children, labels, ...rest }) {
|
|
143
|
+
return /* @__PURE__ */ jsx(Close, {
|
|
144
|
+
...rest,
|
|
145
|
+
className: cx("nz-dialog-close", className),
|
|
146
|
+
"data-slot": "dialog-close",
|
|
147
|
+
render: toRenderFn(render ?? (children === void 0 ? closeIcon(rest["aria-label"] ?? labels?.close ?? "Close") : void 0), "button"),
|
|
148
|
+
children
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
function closeIcon(label) {
|
|
152
|
+
return /* @__PURE__ */ jsx("button", {
|
|
153
|
+
type: "button",
|
|
154
|
+
className: "nz-icon-button nz-hit-target",
|
|
155
|
+
"data-variant": "tertiary",
|
|
156
|
+
"data-size": "md",
|
|
157
|
+
"aria-label": label,
|
|
158
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
159
|
+
className: "nz-icon-button-icon",
|
|
160
|
+
"data-slot": "icon-button-icon",
|
|
161
|
+
"aria-hidden": "true",
|
|
162
|
+
children: /* @__PURE__ */ jsx(CloseGlyph, {})
|
|
163
|
+
})
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
//#endregion
|
|
167
|
+
export { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger };
|