eidotter 0.4.2 → 0.5.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.
|
@@ -13,6 +13,15 @@ export interface RetroEffectsProps {
|
|
|
13
13
|
* Enable CRT flicker effect
|
|
14
14
|
*/
|
|
15
15
|
flicker?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Enable phosphor bloom/bleeding effect.
|
|
18
|
+
* Defaults to false for performance - adds an extra compositing layer.
|
|
19
|
+
*/
|
|
20
|
+
bloom?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Whether the CRT is powered on. Animates on/off transitions.
|
|
23
|
+
*/
|
|
24
|
+
powered?: boolean;
|
|
16
25
|
/**
|
|
17
26
|
* Intensity of the effects (0-1)
|
|
18
27
|
*/
|
|
@@ -28,7 +37,9 @@ export interface RetroEffectsProps {
|
|
|
28
37
|
* Features:
|
|
29
38
|
* - Scanline overlay (horizontal lines)
|
|
30
39
|
* - Glow vignette (phosphor edge darkening)
|
|
31
|
-
* - Subtle CRT flicker animation
|
|
40
|
+
* - Subtle CRT flicker animation (WCAG 2.3.1 compliant)
|
|
41
|
+
* - Phosphor bloom effect (opt-in)
|
|
42
|
+
* - Power on/off animations
|
|
32
43
|
* - Configurable intensity
|
|
33
44
|
* - Respects reduced motion preferences
|
|
34
45
|
*/
|
package/dist/eidotter.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.alert{width:100%;position:relative;overflow:hidden;text-align:left;font-size:16px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);border:none}.alert--info{background-color:var(--color-semantic-alert-info);color:var(--color-cga-amber)}.alert--success{background-color:var(--color-semantic-alert-success);color:var(--color-cga-bright-green)}.alert--warning{background-color:var(--color-semantic-alert-warning);color:var(--color-cga-amber)}.alert--error{background-color:var(--color-semantic-alert-error);color:var(--color-cga-bright-red)}.alert--large{max-width:1020px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-4);box-sizing:border-box;gap:var(--spacing-1)}.alert--small{max-width:350px;min-height:40px;overflow:hidden;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 var(--spacing-2);box-sizing:border-box;gap:var(--spacing-2)}.alert__header{align-self:stretch;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%}.alert__icon{display:flex;align-items:center;justify-content:center;align-self:flex-start;width:24px;height:24px;flex-shrink:0;margin-top:2px}.alert--small .alert__icon{width:20px;height:20px}.alert--small .alert__icon svg{width:20px!important;height:20px!important}.alert__title{flex:1;position:relative;line-height:140%}.alert__close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit}.alert__close svg{width:20px!important;height:20px!important}.alert--small .alert__content{display:none}.alert__content{align-self:stretch;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:0 0 0 32px;font-size:14px}.alert__message{flex:1;position:relative;line-height:140%;color:var(--color-cga-amber-dim)}.alert__link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;text-decoration:none}@media(prefers-contrast:high){.alert{border:2px solid currentColor}.alert__title{font-weight:700}.alert__close:focus-visible{outline:3px solid currentColor;outline-offset:2px}.alert__link{text-decoration:underline;font-weight:700}}.icon{display:inline-block;vertical-align:middle;fill:currentColor;color:var(--color-system-foreground)}.icon--l{width:56px;height:56px}.icon--s{width:24px;height:24px}.icon[role=button]{cursor:pointer}.icon[role=button]:hover{color:var(--color-system-link-hover)}@media(prefers-contrast:high){.icon[role=button]:focus-visible{outline:3px solid currentColor;outline-offset:2px}}.section{width:100%;border:1px solid var(--color-semantic-border-default);background-color:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.section__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:none;border:none;color:inherit;font-family:inherit;cursor:pointer;text-align:left}.section__title{flex:1;font-size:16px;line-height:24px}.section__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;color:inherit}.section__content{padding:16px;border-top:1px solid var(--color-semantic-border-default);font-size:14px;line-height:20px;color:var(--color-semantic-text-secondary)}.section--hover .section__header,.section__header:hover{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section--active .section__header,.section__header:active{background-color:var(--color-semantic-background-secondary);color:var(--color-cga-amber);text-shadow:0 0 8px var(--color-cga-amber-glow)}.section--expanded{border-color:var(--color-semantic-text-secondary)}.section--expanded .section__header{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section__header:focus{outline:none;box-shadow:0 0 0 2px var(--color-semantic-border-focus)}.section__icon{transition:transform .2s ease-in-out}.section--expanded .section__icon{transform:rotate(180deg)}@media(prefers-contrast:high){.section{border-width:3px}.section__title{font-weight:700}.section__content{border-top-width:2px}.section__header:focus{box-shadow:0 0 0 3px var(--color-semantic-border-focus)}}@media(prefers-reduced-motion:reduce){.section__icon{transition:none}}.accordion-fill{width:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--spacing-2);text-align:left;font-size:var(--typography-font-size-base);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-secondary)}.accordion-fill>.section{margin-bottom:4px}.accordion-fill>.section:last-child{margin-bottom:0}@media(prefers-contrast:high){.accordion-fill{font-weight:600}}.button{display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;outline:none;cursor:pointer;text-decoration:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .1s ease;box-sizing:border-box;border:2px solid;background-clip:padding-box}.button--primary{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border-color:var(--color-semantic-border-default)}.button--primary:hover:not(:disabled){background-color:var(--color-semantic-border-focus);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--primary:active:not(:disabled){background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-text-disabled)}.button--secondary{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--secondary:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--secondary:active:not(:disabled){background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border-color:var(--color-semantic-text-disabled)}.button--ghost{background-color:transparent;color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--ghost:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--ghost:active:not(:disabled){background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary)}.button--link{background-color:transparent;color:var(--color-semantic-text-accent);border-color:transparent;text-decoration:underline}.button--link:hover:not(:disabled){color:var(--color-cga-amber-bright);background-color:transparent;border-color:transparent}.button--link:active:not(:disabled){color:var(--color-semantic-text-disabled)}.button--small{font-size:12px;padding:4px 8px;min-height:24px;gap:4px}.button--medium{font-size:14px;padding:8px 16px;min-height:32px;gap:6px}.button--large{font-size:16px;padding:12px 20px;min-height:40px;gap:8px}.button--disabled,.button:disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-semantic-background-secondary)!important;color:var(--color-semantic-text-disabled)!important;border-color:var(--color-semantic-text-disabled)!important}.button--loading{cursor:wait}.button--full-width{width:100%;justify-content:center}.button__loading-indicator{animation:blink 1s infinite;margin-right:4px}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.button__content{display:inline-flex;align-items:center;justify-content:center}.button__content--loading{opacity:.7}.button:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.button{border-width:3px}}@media(prefers-reduced-motion:reduce){.button{transition:none}.button__loading-indicator{animation:none}}.card{background-color:var(--color-semantic-background-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-primary)}.card--default{border-color:var(--color-semantic-border-default)}.card--elevated{border-color:var(--color-semantic-text-secondary);box-shadow:4px 4px 0 0 var(--color-semantic-text-disabled)}.card--glow{border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-md)}.card--bordered{border-color:var(--color-semantic-text-accent);border-width:var(--border-width-medium)}.card__header{padding:var(--spacing-2) var(--spacing-3);border-bottom:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-cga-amber-dim)}.card__title{color:var(--color-semantic-text-secondary);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-bold);text-transform:uppercase}.card__body{padding:var(--spacing-3)}.card__footer{padding:var(--spacing-2) var(--spacing-3);border-top:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-semantic-background-secondary)}.card:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.card{border-width:3px}.card__header{border-bottom-width:2px}.card__footer{border-top-width:2px}.card:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){.card{transition:none}}.checkbox{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-base);color:var(--color-semantic-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox--disabled{cursor:not-allowed;opacity:.6}.checkbox__input{position:absolute;opacity:0;width:0;height:0}.checkbox__box{display:inline-block;white-space:nowrap;text-align:center;color:var(--color-semantic-text-primary)}.checkbox__box:before{content:"[ ]"}.checkbox__input:checked+.checkbox__box:before{content:"[X]";color:var(--color-semantic-text-accent)}.checkbox__input:focus-visible+.checkbox__box{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.checkbox:hover:not(.checkbox--disabled) .checkbox__box{color:var(--color-semantic-text-secondary)}.checkbox:hover:not(.checkbox--disabled) .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-secondary)}.checkbox--disabled .checkbox__box{color:var(--color-semantic-text-disabled)}.checkbox--disabled .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-disabled)}.checkbox__label{color:inherit}@media(prefers-contrast:high){.checkbox__box{font-weight:700}.checkbox__input:focus-visible+.checkbox__box{outline-width:3px}.checkbox__label{font-weight:600}}@media(prefers-reduced-motion:reduce){.checkbox{transition:none}}.command-prompt{display:flex;align-items:center;font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);background:var(--color-semantic-background-primary);color:var(--color-semantic-text-accent);padding:var(--spacing-2);cursor:text}.command-prompt__prompt{color:var(--color-semantic-text-primary);margin-right:var(--spacing-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.command-prompt__input{flex:1;background:transparent;border:none;color:var(--color-semantic-text-primary);font-family:inherit;font-size:inherit;outline:none;padding:0;margin:0;min-width:0}.command-prompt__input::placeholder{color:var(--color-semantic-text-disabled)}.command-prompt__cursor{color:var(--color-semantic-text-primary);animation:blink 1s step-end infinite;-webkit-user-select:none;user-select:none}.command-prompt--disabled{opacity:.5;cursor:not-allowed}.command-prompt--disabled .command-prompt__cursor{animation:none}.command-prompt__input:focus+.command-prompt__cursor{display:none}@media(prefers-contrast:high){.command-prompt{border:3px solid var(--color-semantic-border-default)}.command-prompt__prompt{font-weight:700}.command-prompt__input:focus{outline:3px solid var(--color-semantic-border-focus);outline-offset:2px}}@media(prefers-reduced-motion:reduce){.command-prompt__cursor{animation:none}}.progress{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.progress--small{font-size:var(--typography-font-size-xs)}.progress--medium{font-size:var(--typography-font-size-base)}.progress--large{font-size:var(--typography-font-size-lg)}.progress__bar{display:inline-block;letter-spacing:0;line-height:1}.progress__fill{color:var(--color-semantic-text-primary)}.progress--success .progress__fill{color:var(--color-semantic-status-success)}.progress--warning .progress__fill{color:var(--color-semantic-status-warning)}.progress--error .progress__fill{color:var(--color-semantic-status-error)}.progress__empty{color:var(--color-semantic-text-disabled)}.progress__label{color:var(--color-semantic-text-primary);min-width:4ch;text-align:right}@media(prefers-contrast:high){.progress__fill,.progress__label{font-weight:700}}@media(prefers-reduced-motion:reduce){.progress{transition:none}}.input{background:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);padding:var(--spacing-2);outline:none;width:100%;box-sizing:border-box}.input::placeholder{color:var(--color-semantic-text-disabled)}.input:focus{border-color:var(--color-semantic-border-focus);box-shadow:var(--shadow-glow-sm)}.input--error{border-color:var(--color-semantic-status-error)}.input--error:focus{border-color:var(--color-semantic-status-error)}.input--disabled,.input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-semantic-background-primary)}@media(prefers-contrast:high){.input{border-width:3px}.input:focus{outline:3px solid var(--color-semantic-border-focus);outline-offset:2px}}:root{--terminal-bg: var(--color-semantic-background-primary);--terminal-border: var(--color-semantic-text-disabled);--terminal-border-active: var(--color-semantic-text-secondary);--terminal-title-bg: var(--color-semantic-background-secondary);--terminal-title-text: var(--color-semantic-text-secondary);--terminal-title-bg-inactive: var(--color-semantic-background-secondary);--terminal-title-text-inactive: var(--color-semantic-text-primary);--terminal-text: var(--color-semantic-text-primary);--terminal-control-bg: var(--color-semantic-text-primary);--terminal-control-symbol: var(--color-semantic-background-primary)}.terminal{background-color:var(--terminal-bg);border:2px solid var(--terminal-border);color:var(--terminal-text);font-family:Perfect DOS VGA,monospace;display:flex;flex-direction:column;box-shadow:5px 5px 0 var(--effects-drop-shadow);min-width:320px;min-height:200px}.terminal:focus,.terminal--active{border-color:var(--terminal-border-active);outline:none}.terminal--active .terminal__title-bar{background-color:var(--color-semantic-background-accent)}.terminal--inactive{border-color:var(--terminal-border)}.terminal--inactive .terminal__title-bar{background-color:var(--terminal-title-bg-inactive);color:var(--terminal-title-text-inactive)}.terminal--small{width:480px;height:320px}.terminal--medium{width:640px;height:480px}.terminal--large{width:800px;height:600px}.terminal--maximized{width:100vw;height:100vh;position:fixed;top:0;left:0;border:none;box-shadow:none;z-index:1000}.terminal__title-bar{background-color:var(--terminal-title-bg);color:var(--terminal-title-text);padding:2px 4px;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:default;height:24px}.terminal__title{display:flex;align-items:center;gap:4px}.terminal__controls{display:flex}.terminal__control{background-color:var(--terminal-control-bg);border:1px solid var(--terminal-control-symbol);width:20px;height:20px;margin-left:2px;cursor:default;display:flex;align-items:center;justify-content:center;color:var(--terminal-control-symbol)}.terminal__control:active{filter:invert(1)}.terminal__content{flex-grow:1;padding:8px;overflow-y:auto}.terminal__default-content{display:flex;flex-direction:column}.terminal__prompt{display:flex}.terminal__path{margin-right:4px}.terminal__cursor{background-color:var(--terminal-text);width:8px;height:16px;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.terminal__resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize}.terminal--minimized{display:none}.terminal__taskbar-item{display:inline-flex;align-items:center;background-color:var(--terminal-control-bg);border:1px solid var(--color-semantic-background-primary);padding:2px 8px;cursor:default;-webkit-user-select:none;user-select:none}.terminal__taskbar-title{margin-left:4px;color:var(--color-semantic-background-primary)}@media(prefers-contrast:high){.terminal{border-width:3px}.terminal__title{font-weight:700}.terminal__control{border-width:2px}.terminal:focus{outline:3px solid var(--color-semantic-border-focus);outline-offset:2px}}@media(prefers-reduced-motion:reduce){.terminal__cursor{animation:none}}.tabs{display:inline-flex;align-items:center;gap:0;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);box-sizing:border-box}.tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:inherit;font-weight:var(--typography-font-weight-regular);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:all .15s ease;color:var(--color-semantic-text-primary);opacity:.7}.tabs__tab:hover:not(:disabled){opacity:1}.tabs__tab--active{opacity:1}.tabs__tab--disabled{cursor:not-allowed;opacity:.3}.tabs--underline{gap:4px}.tabs--underline .tabs__tab{padding:8px 16px;border-bottom:2px solid transparent}.tabs--underline .tabs__tab--active{border-bottom-color:var(--color-semantic-text-accent);color:var(--color-semantic-text-accent)}.tabs--underline .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){border-bottom-color:var(--color-semantic-border-default)}.tabs--pills{gap:4px;padding:4px;background-color:var(--color-semantic-background-secondary);border:1px solid var(--color-semantic-border-default);border-radius:2px}.tabs--pills .tabs__tab{padding:6px 12px;border-radius:2px}.tabs--pills .tabs__tab--active{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.tabs--pills .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){background-color:var(--color-semantic-background-primary)}.tabs--small .tabs__tab{font-size:10px;padding:4px 8px}.tabs--small.tabs--underline .tabs__tab{padding:4px 10px}.tabs--medium .tabs__tab{font-size:12px}.tabs--large .tabs__tab{font-size:14px;padding:10px 20px}.tabs--large.tabs--underline .tabs__tab{padding:10px 20px}.tabs--large.tabs--pills .tabs__tab{padding:8px 16px}.tabs__tab:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.tabs--underline .tabs__tab{border-bottom-width:3px}.tabs--pills{border-width:2px}}@media(prefers-reduced-motion:reduce){.tabs__tab{transition:none}}.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:2px;text-transform:uppercase;letter-spacing:.05em;box-sizing:border-box}.badge--small{font-size:10px;padding:2px 6px;min-height:18px;gap:4px}.badge--medium{font-size:12px;padding:4px 8px;min-height:22px;gap:6px}.badge--default{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border:1px solid var(--color-semantic-border-default)}.badge--success{background-color:transparent;color:var(--color-cga-bright-green);border:1px solid var(--color-cga-bright-green)}.badge--warning{background-color:transparent;color:var(--color-cga-yellow);border:1px solid var(--color-cga-yellow)}.badge--error{background-color:transparent;color:var(--color-cga-bright-red);border:1px solid var(--color-cga-bright-red)}.badge--info{background-color:transparent;color:var(--color-cga-bright-cyan);border:1px solid var(--color-cga-bright-cyan)}.badge--accent{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border:1px solid var(--color-semantic-border-default)}.badge__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.badge--default .badge__dot{background-color:var(--color-semantic-text-primary)}.badge--success .badge__dot{background-color:var(--color-cga-bright-green)}.badge--warning .badge__dot{background-color:var(--color-cga-yellow)}.badge--error .badge__dot{background-color:var(--color-cga-bright-red)}.badge--info .badge__dot{background-color:var(--color-cga-bright-cyan)}.badge--accent .badge__dot{background-color:var(--color-semantic-text-secondary)}.badge__content{display:inline-flex;align-items:center}@media(prefers-contrast:high){.badge{border-width:2px}}@media(prefers-reduced-motion:reduce){.badge{transition:none}}.switch{display:inline-flex;align-items:center;justify-content:flex-start;padding:0;border:none;background:transparent;cursor:pointer;outline:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.switch__track{position:relative;display:inline-flex;align-items:center;width:40px;height:20px;background-color:var(--color-semantic-background-secondary);border:2px solid var(--color-semantic-border-default);border-radius:2px;transition:all .15s ease}.switch__thumb{position:absolute;left:2px;width:12px;height:12px;background-color:var(--color-semantic-text-primary);border-radius:1px;transition:transform .15s ease,background-color .15s ease}.switch--checked .switch__track{background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-border-focus)}.switch--checked .switch__thumb{transform:translate(20px);background-color:var(--color-semantic-text-secondary)}.switch:hover:not(.switch--disabled) .switch__track{border-color:var(--color-semantic-border-hover)}.switch:hover:not(.switch--disabled):not(.switch--checked) .switch__thumb{background-color:var(--color-semantic-text-accent)}.switch:focus-visible .switch__track{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch--disabled .switch__track{background-color:var(--color-semantic-background-secondary);border-color:var(--color-semantic-border-disabled)}.switch--disabled .switch__thumb{background-color:var(--color-semantic-text-disabled)}@media(prefers-contrast:high){.switch__track{border-width:3px}}@media(prefers-reduced-motion:reduce){.switch__track,.switch__thumb{transition:none}}.breadcrumb{font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-xs);text-transform:uppercase;letter-spacing:.35em}.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.breadcrumb__item{display:flex;align-items:center;gap:8px}.breadcrumb__link{display:inline-flex;align-items:center;gap:4px;color:var(--color-semantic-text-disabled);text-decoration:none;transition:color .15s ease}.breadcrumb__link:hover{color:var(--color-semantic-text-primary)}.breadcrumb__link:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.breadcrumb__back-arrow{font-size:1em;line-height:1}.breadcrumb__separator{color:var(--color-semantic-text-disabled);opacity:.6;-webkit-user-select:none;user-select:none}.breadcrumb__current{color:var(--color-semantic-text-primary)}@media(min-width:768px){.breadcrumb{font-size:var(--typography-font-size-sm)}}@media(prefers-contrast:high){.breadcrumb__link:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){.breadcrumb__link{transition:none}}.retro-effects{--retro-intensity: 1;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999}.retro-effects__scanlines{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.6 * var(--retro-intensity));mix-blend-mode:screen;background:repeating-linear-gradient(to bottom,var(--effects-scanline-light) 0px,var(--effects-scanline-dark) 1px,transparent 2px,transparent 4px);animation:retro-scanline 9s linear infinite}.retro-effects__glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:var(--retro-intensity);box-shadow:inset 0 0 200px var(--effects-vignette-glow);background:radial-gradient(ellipse 120% 100% at center,transparent 0%,transparent 50%,var(--effects-vignette-edge) 80%,var(--effects-vignette-corner) 100%)}.retro-effects__flicker{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.04 * var(--retro-intensity));background-color:var(--effects-screen-tint);animation:retro-flicker .18s steps(2) infinite}@keyframes retro-scanline{0%{transform:translateY(0)}to{transform:translateY(12px)}}@keyframes retro-flicker{0%{opacity:calc(.02 * var(--retro-intensity))}50%{opacity:calc(.06 * var(--retro-intensity))}to{opacity:calc(.02 * var(--retro-intensity))}}@media(prefers-reduced-motion:reduce){.retro-effects__scanlines,.retro-effects__flicker{animation:none}}@media(prefers-contrast:high){.retro-effects{display:none}}.timeline-node{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.timeline-node__marker{display:block;background:var(--color-cga-amber-dim);border:2px solid var(--color-cga-amber-dim);transition:all .15s ease;flex-shrink:0}.timeline-node--small .timeline-node__marker{width:8px;height:8px}.timeline-node--medium .timeline-node__marker{width:12px;height:12px}.timeline-node--large .timeline-node__marker{width:16px;height:16px}.timeline-node--circle .timeline-node__marker{border-radius:50%}.timeline-node--square .timeline-node__marker{border-radius:2px}.timeline-node--diamond .timeline-node__marker{transform:rotate(45deg)}.timeline-node--diamond.timeline-node--small .timeline-node__marker{width:7px;height:7px}.timeline-node--diamond.timeline-node--medium .timeline-node__marker{width:10px;height:10px}.timeline-node--diamond.timeline-node--large .timeline-node__marker{width:14px;height:14px}.timeline-node--default .timeline-node__marker{background:var(--color-cga-amber-dim);border-color:var(--color-cga-amber-dim)}.timeline-node--primary .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber)}.timeline-node--secondary .timeline-node__marker{background:var(--color-semantic-text-primary);border-color:var(--color-semantic-text-primary)}.timeline-node--accent .timeline-node__marker{background:var(--color-semantic-text-accent);border-color:var(--color-semantic-text-accent)}.timeline-node--interactive{cursor:pointer}.timeline-node--interactive:hover .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-sm)}.timeline-node--active .timeline-node__marker{background:var(--color-cga-amber-bright);border-color:var(--color-cga-amber-bright);box-shadow:var(--shadow-glow-sm)}.timeline-node--active.timeline-node--interactive:hover .timeline-node__marker{box-shadow:var(--shadow-glow-md)}.timeline-node--interactive:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.timeline-node__label{color:var(--color-cga-amber);font-size:var(--typography-font-size-xs);white-space:nowrap}.timeline-node--small .timeline-node__label{font-size:10px}.timeline-node--large .timeline-node__label{font-size:var(--typography-font-size-sm)}.timeline-node--label-left,.timeline-node--label-right{flex-direction:row}.timeline-node--label-top,.timeline-node--label-bottom{flex-direction:column}.timeline-node__label--left,.timeline-node__label--top{order:-1}@media(prefers-reduced-motion:reduce){.timeline-node__marker{transition:none}}@media(prefers-contrast:high){.timeline-node__marker{border-width:3px}.timeline-node--interactive:focus-visible{outline-width:3px}}.modal{padding:0;border:none;background:transparent;max-width:100vw;max-height:100vh}.modal::backdrop{background-color:var(--effects-overlay)}.modal__container{background-color:var(--color-semantic-background-primary);border:2px solid var(--color-cga-yellow);box-shadow:var(--shadow-drop);width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);display:flex;flex-direction:column;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4);border-bottom:1px solid var(--color-cga-dark-gray)}.modal__title{margin:0;font-size:16px;font-weight:400;color:var(--color-cga-yellow);line-height:1.4}.modal__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:var(--color-cga-light-gray)}.modal__close:hover{color:var(--color-cga-yellow)}.modal__close:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.modal__body{padding:var(--spacing-4);color:var(--color-cga-light-gray);font-size:14px;line-height:1.5;overflow-y:auto;flex:1}.modal__footer{display:flex;gap:var(--spacing-2);justify-content:flex-end;padding:var(--spacing-4);border-top:1px solid var(--color-cga-dark-gray)}.modal[open]{animation:modal-open .15s ease-out}.modal[open]::backdrop{animation:backdrop-open .15s ease-out}@keyframes modal-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes backdrop-open{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.modal[open],.modal[open]::backdrop{animation:none}}@media(prefers-contrast:high){.modal__container{border-width:3px}}.stat{display:flex;flex-direction:column;gap:4px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);box-sizing:border-box}.stat--small{gap:2px}.stat--small .stat__label{font-size:10px}.stat--small .stat__value{font-size:18px}.stat--small .stat__trend{font-size:10px}.stat--medium{gap:4px}.stat--medium .stat__label{font-size:11px}.stat--medium .stat__value{font-size:24px}.stat--medium .stat__trend{font-size:11px}.stat--large{gap:6px}.stat--large .stat__label{font-size:12px}.stat--large .stat__value{font-size:32px}.stat--large .stat__trend{font-size:12px}.stat__label{color:var(--color-semantic-text-primary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.stat__value{color:var(--color-semantic-text-accent);font-weight:var(--typography-font-weight-bold);line-height:1;font-variant-numeric:tabular-nums}.stat__trend{display:inline-flex;align-items:center;gap:4px;line-height:1}.stat__trend--up{color:var(--color-cga-bright-green)}.stat__trend--down{color:var(--color-cga-bright-red)}.stat__trend--neutral{color:var(--color-semantic-text-primary)}.stat__trend-icon{font-size:.8em}.stat__trend-value{font-variant-numeric:tabular-nums}@media(prefers-contrast:high){.stat__value,.stat__trend{font-weight:700}.stat__trend-icon{font-size:1em}}@media(prefers-reduced-motion:reduce){.stat{transition:none}}
|
|
1
|
+
.alert{width:100%;position:relative;overflow:hidden;text-align:left;font-size:16px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);border:none}.alert--info{background-color:var(--color-semantic-alert-info);color:var(--color-cga-amber)}.alert--success{background-color:var(--color-semantic-alert-success);color:var(--color-cga-bright-green)}.alert--warning{background-color:var(--color-semantic-alert-warning);color:var(--color-cga-amber)}.alert--error{background-color:var(--color-semantic-alert-error);color:var(--color-cga-bright-red)}.alert--large{max-width:1020px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-4);box-sizing:border-box;gap:var(--spacing-1)}.alert--small{max-width:350px;min-height:40px;overflow:hidden;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 var(--spacing-2);box-sizing:border-box;gap:var(--spacing-2)}.alert__header{align-self:stretch;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%}.alert__icon{display:flex;align-items:center;justify-content:center;align-self:flex-start;width:24px;height:24px;flex-shrink:0;margin-top:2px}.alert--small .alert__icon{width:20px;height:20px}.alert--small .alert__icon svg{width:20px!important;height:20px!important}.alert__title{flex:1;position:relative;line-height:140%}.alert__close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit}.alert__close svg{width:20px!important;height:20px!important}.alert--small .alert__content{display:none}.alert__content{align-self:stretch;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:0 0 0 32px;font-size:14px}.alert__message{flex:1;position:relative;line-height:140%;color:var(--color-cga-amber-dim)}.alert__link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;text-decoration:none}@media(prefers-contrast:high){.alert{border:2px solid currentColor}.alert__title{font-weight:700}.alert__close:focus-visible{outline:3px solid currentColor;outline-offset:2px}.alert__link{text-decoration:underline;font-weight:700}}.icon{display:inline-block;vertical-align:middle;fill:currentColor;color:var(--color-system-foreground)}.icon--l{width:56px;height:56px}.icon--s{width:24px;height:24px}.icon[role=button]{cursor:pointer}.icon[role=button]:hover{color:var(--color-system-link-hover)}@media(prefers-contrast:high){.icon[role=button]:focus-visible{outline:3px solid currentColor;outline-offset:2px}}.section{width:100%;border:1px solid var(--color-semantic-border-default);background-color:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.section__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:none;border:none;color:inherit;font-family:inherit;cursor:pointer;text-align:left}.section__title{flex:1;font-size:16px;line-height:24px}.section__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;color:inherit}.section__content{padding:16px;border-top:1px solid var(--color-semantic-border-default);font-size:14px;line-height:20px;color:var(--color-semantic-text-secondary)}.section--hover .section__header,.section__header:hover{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section--active .section__header,.section__header:active{background-color:var(--color-semantic-background-secondary);color:var(--color-cga-amber);text-shadow:0 0 8px var(--color-cga-amber-glow)}.section--expanded{border-color:var(--color-semantic-text-secondary)}.section--expanded .section__header{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.section__header:focus{outline:none;box-shadow:0 0 0 2px var(--color-semantic-border-focus)}.section__icon{transition:transform .2s ease-in-out}.section--expanded .section__icon{transform:rotate(180deg)}@media(prefers-contrast:high){.section{border-width:3px}.section__title{font-weight:700}.section__content{border-top-width:2px}.section__header:focus{box-shadow:0 0 0 3px var(--color-semantic-border-focus)}}@media(prefers-reduced-motion:reduce){.section__icon{transition:none}}.accordion-fill{width:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--spacing-2);text-align:left;font-size:var(--typography-font-size-base);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-secondary)}.accordion-fill>.section{margin-bottom:4px}.accordion-fill>.section:last-child{margin-bottom:0}@media(prefers-contrast:high){.accordion-fill{font-weight:600}}.button{display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;outline:none;cursor:pointer;text-decoration:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .1s ease;box-sizing:border-box;border:2px solid;background-clip:padding-box}.button--primary{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border-color:var(--color-semantic-border-default)}.button--primary:hover:not(:disabled){background-color:var(--color-semantic-border-focus);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--primary:active:not(:disabled){background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-text-disabled)}.button--secondary{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--secondary:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--secondary:active:not(:disabled){background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border-color:var(--color-semantic-text-disabled)}.button--ghost{background-color:transparent;color:var(--color-semantic-text-primary);border-color:var(--color-semantic-border-default)}.button--ghost:hover:not(:disabled){background-color:var(--color-semantic-text-primary);color:var(--color-semantic-background-primary);border-color:var(--color-semantic-text-secondary);box-shadow:var(--shadow-glow-sm)}.button--ghost:active:not(:disabled){background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary)}.button--link{background-color:transparent;color:var(--color-semantic-text-accent);border-color:transparent;text-decoration:underline}.button--link:hover:not(:disabled){color:var(--color-cga-amber-bright);background-color:transparent;border-color:transparent}.button--link:active:not(:disabled){color:var(--color-semantic-text-disabled)}.button--small{font-size:12px;padding:4px 8px;min-height:24px;gap:4px}.button--medium{font-size:14px;padding:8px 16px;min-height:32px;gap:6px}.button--large{font-size:16px;padding:12px 20px;min-height:40px;gap:8px}.button--disabled,.button:disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-semantic-background-secondary)!important;color:var(--color-semantic-text-disabled)!important;border-color:var(--color-semantic-text-disabled)!important}.button--loading{cursor:wait}.button--full-width{width:100%;justify-content:center}.button__loading-indicator{animation:blink 1s infinite;margin-right:4px}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.button__content{display:inline-flex;align-items:center;justify-content:center}.button__content--loading{opacity:.7}.button:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.button{border-width:3px}}@media(prefers-reduced-motion:reduce){.button{transition:none}.button__loading-indicator{animation:none}}.card{background-color:var(--color-semantic-background-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);color:var(--color-semantic-text-primary)}.card--default{border-color:var(--color-semantic-border-default)}.card--elevated{border-color:var(--color-semantic-text-secondary);box-shadow:4px 4px 0 0 var(--color-semantic-text-disabled)}.card--glow{border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-md)}.card--bordered{border-color:var(--color-semantic-text-accent);border-width:var(--border-width-medium)}.card__header{padding:var(--spacing-2) var(--spacing-3);border-bottom:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-cga-amber-dim)}.card__title{color:var(--color-semantic-text-secondary);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-bold);text-transform:uppercase}.card__body{padding:var(--spacing-3)}.card__footer{padding:var(--spacing-2) var(--spacing-3);border-top:var(--border-width-thin) solid var(--color-semantic-text-disabled);background-color:var(--color-semantic-background-secondary)}.card:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.card{border-width:3px}.card__header{border-bottom-width:2px}.card__footer{border-top-width:2px}.card:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){.card{transition:none}}.checkbox{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-base);color:var(--color-semantic-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox--disabled{cursor:not-allowed;opacity:.6}.checkbox__input{position:absolute;opacity:0;width:0;height:0}.checkbox__box{display:inline-block;white-space:nowrap;text-align:center;color:var(--color-semantic-text-primary)}.checkbox__box:before{content:"[ ]"}.checkbox__input:checked+.checkbox__box:before{content:"[X]";color:var(--color-semantic-text-accent)}.checkbox__input:focus-visible+.checkbox__box{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.checkbox:hover:not(.checkbox--disabled) .checkbox__box{color:var(--color-semantic-text-secondary)}.checkbox:hover:not(.checkbox--disabled) .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-secondary)}.checkbox--disabled .checkbox__box{color:var(--color-semantic-text-disabled)}.checkbox--disabled .checkbox__input:checked+.checkbox__box:before{color:var(--color-semantic-text-disabled)}.checkbox__label{color:inherit}@media(prefers-contrast:high){.checkbox__box{font-weight:700}.checkbox__input:focus-visible+.checkbox__box{outline-width:3px}.checkbox__label{font-weight:600}}@media(prefers-reduced-motion:reduce){.checkbox{transition:none}}.command-prompt{display:flex;align-items:center;font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);background:var(--color-semantic-background-primary);color:var(--color-semantic-text-accent);padding:var(--spacing-2);cursor:text}.command-prompt__prompt{color:var(--color-semantic-text-primary);margin-right:var(--spacing-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.command-prompt__input{flex:1;background:transparent;border:none;color:var(--color-semantic-text-primary);font-family:inherit;font-size:inherit;outline:none;padding:0;margin:0;min-width:0}.command-prompt__input::placeholder{color:var(--color-semantic-text-disabled)}.command-prompt__cursor{color:var(--color-semantic-text-primary);animation:blink 1s step-end infinite;-webkit-user-select:none;user-select:none}.command-prompt--disabled{opacity:.5;cursor:not-allowed}.command-prompt--disabled .command-prompt__cursor{animation:none}.command-prompt__input:focus+.command-prompt__cursor{display:none}@media(prefers-contrast:high){.command-prompt{border:3px solid var(--color-semantic-border-default)}.command-prompt__prompt{font-weight:700}.command-prompt__input:focus{outline:3px solid var(--color-semantic-border-focus);outline-offset:2px}}@media(prefers-reduced-motion:reduce){.command-prompt__cursor{animation:none}}.progress{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.progress--small{font-size:var(--typography-font-size-xs)}.progress--medium{font-size:var(--typography-font-size-base)}.progress--large{font-size:var(--typography-font-size-lg)}.progress__bar{display:inline-block;letter-spacing:0;line-height:1}.progress__fill{color:var(--color-semantic-text-primary)}.progress--success .progress__fill{color:var(--color-semantic-status-success)}.progress--warning .progress__fill{color:var(--color-semantic-status-warning)}.progress--error .progress__fill{color:var(--color-semantic-status-error)}.progress__empty{color:var(--color-semantic-text-disabled)}.progress__label{color:var(--color-semantic-text-primary);min-width:4ch;text-align:right}@media(prefers-contrast:high){.progress__fill,.progress__label{font-weight:700}}@media(prefers-reduced-motion:reduce){.progress{transition:none}}.input{background:var(--color-semantic-background-primary);color:var(--color-semantic-text-primary);border:var(--border-width-medium) solid var(--color-semantic-border-default);font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-base);padding:var(--spacing-2);outline:none;width:100%;box-sizing:border-box}.input::placeholder{color:var(--color-semantic-text-disabled)}.input:focus{border-color:var(--color-semantic-border-focus);box-shadow:var(--shadow-glow-sm)}.input--error{border-color:var(--color-semantic-status-error)}.input--error:focus{border-color:var(--color-semantic-status-error)}.input--disabled,.input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-semantic-background-primary)}@media(prefers-contrast:high){.input{border-width:3px}.input:focus{outline:3px solid var(--color-semantic-border-focus);outline-offset:2px}}:root{--terminal-bg: var(--color-semantic-background-primary);--terminal-border: var(--color-semantic-text-disabled);--terminal-border-active: var(--color-semantic-text-secondary);--terminal-title-bg: var(--color-semantic-background-secondary);--terminal-title-text: var(--color-semantic-text-secondary);--terminal-title-bg-inactive: var(--color-semantic-background-secondary);--terminal-title-text-inactive: var(--color-semantic-text-primary);--terminal-text: var(--color-semantic-text-primary);--terminal-control-bg: var(--color-semantic-text-primary);--terminal-control-symbol: var(--color-semantic-background-primary)}.terminal{background-color:var(--terminal-bg);border:2px solid var(--terminal-border);color:var(--terminal-text);font-family:Perfect DOS VGA,monospace;display:flex;flex-direction:column;box-shadow:5px 5px 0 var(--effects-drop-shadow);min-width:320px;min-height:200px}.terminal:focus,.terminal--active{border-color:var(--terminal-border-active);outline:none}.terminal--active .terminal__title-bar{background-color:var(--color-semantic-background-accent)}.terminal--inactive{border-color:var(--terminal-border)}.terminal--inactive .terminal__title-bar{background-color:var(--terminal-title-bg-inactive);color:var(--terminal-title-text-inactive)}.terminal--small{width:480px;height:320px}.terminal--medium{width:640px;height:480px}.terminal--large{width:800px;height:600px}.terminal--maximized{width:100vw;height:100vh;position:fixed;top:0;left:0;border:none;box-shadow:none;z-index:1000}.terminal__title-bar{background-color:var(--terminal-title-bg);color:var(--terminal-title-text);padding:2px 4px;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:default;height:24px}.terminal__title{display:flex;align-items:center;gap:4px}.terminal__controls{display:flex}.terminal__control{background-color:var(--terminal-control-bg);border:1px solid var(--terminal-control-symbol);width:20px;height:20px;margin-left:2px;cursor:default;display:flex;align-items:center;justify-content:center;color:var(--terminal-control-symbol)}.terminal__control:active{filter:invert(1)}.terminal__content{flex-grow:1;padding:8px;overflow-y:auto}.terminal__default-content{display:flex;flex-direction:column}.terminal__prompt{display:flex}.terminal__path{margin-right:4px}.terminal__cursor{background-color:var(--terminal-text);width:8px;height:16px;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.terminal__resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize}.terminal--minimized{display:none}.terminal__taskbar-item{display:inline-flex;align-items:center;background-color:var(--terminal-control-bg);border:1px solid var(--color-semantic-background-primary);padding:2px 8px;cursor:default;-webkit-user-select:none;user-select:none}.terminal__taskbar-title{margin-left:4px;color:var(--color-semantic-background-primary)}@media(prefers-contrast:high){.terminal{border-width:3px}.terminal__title{font-weight:700}.terminal__control{border-width:2px}.terminal:focus{outline:3px solid var(--color-semantic-border-focus);outline-offset:2px}}@media(prefers-reduced-motion:reduce){.terminal__cursor{animation:none}}.tabs{display:inline-flex;align-items:center;gap:0;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);box-sizing:border-box}.tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:inherit;font-weight:var(--typography-font-weight-regular);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:all .15s ease;color:var(--color-semantic-text-primary);opacity:.7}.tabs__tab:hover:not(:disabled){opacity:1}.tabs__tab--active{opacity:1}.tabs__tab--disabled{cursor:not-allowed;opacity:.3}.tabs--underline{gap:4px}.tabs--underline .tabs__tab{padding:8px 16px;border-bottom:2px solid transparent}.tabs--underline .tabs__tab--active{border-bottom-color:var(--color-semantic-text-accent);color:var(--color-semantic-text-accent)}.tabs--underline .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){border-bottom-color:var(--color-semantic-border-default)}.tabs--pills{gap:4px;padding:4px;background-color:var(--color-semantic-background-secondary);border:1px solid var(--color-semantic-border-default);border-radius:2px}.tabs--pills .tabs__tab{padding:6px 12px;border-radius:2px}.tabs--pills .tabs__tab--active{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary)}.tabs--pills .tabs__tab:hover:not(:disabled):not(.tabs__tab--active){background-color:var(--color-semantic-background-primary)}.tabs--small .tabs__tab{font-size:10px;padding:4px 8px}.tabs--small.tabs--underline .tabs__tab{padding:4px 10px}.tabs--medium .tabs__tab{font-size:12px}.tabs--large .tabs__tab{font-size:14px;padding:10px 20px}.tabs--large.tabs--underline .tabs__tab{padding:10px 20px}.tabs--large.tabs--pills .tabs__tab{padding:8px 16px}.tabs__tab:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}@media(prefers-contrast:high){.tabs--underline .tabs__tab{border-bottom-width:3px}.tabs--pills{border-width:2px}}@media(prefers-reduced-motion:reduce){.tabs__tab{transition:none}}.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-weight:var(--typography-font-weight-regular);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:2px;text-transform:uppercase;letter-spacing:.05em;box-sizing:border-box}.badge--small{font-size:10px;padding:2px 6px;min-height:18px;gap:4px}.badge--medium{font-size:12px;padding:4px 8px;min-height:22px;gap:6px}.badge--default{background-color:var(--color-semantic-background-secondary);color:var(--color-semantic-text-primary);border:1px solid var(--color-semantic-border-default)}.badge--success{background-color:transparent;color:var(--color-cga-bright-green);border:1px solid var(--color-cga-bright-green)}.badge--warning{background-color:transparent;color:var(--color-cga-yellow);border:1px solid var(--color-cga-yellow)}.badge--error{background-color:transparent;color:var(--color-cga-bright-red);border:1px solid var(--color-cga-bright-red)}.badge--info{background-color:transparent;color:var(--color-cga-bright-cyan);border:1px solid var(--color-cga-bright-cyan)}.badge--accent{background-color:var(--color-semantic-background-accent);color:var(--color-semantic-text-secondary);border:1px solid var(--color-semantic-border-default)}.badge__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.badge--default .badge__dot{background-color:var(--color-semantic-text-primary)}.badge--success .badge__dot{background-color:var(--color-cga-bright-green)}.badge--warning .badge__dot{background-color:var(--color-cga-yellow)}.badge--error .badge__dot{background-color:var(--color-cga-bright-red)}.badge--info .badge__dot{background-color:var(--color-cga-bright-cyan)}.badge--accent .badge__dot{background-color:var(--color-semantic-text-secondary)}.badge__content{display:inline-flex;align-items:center;transform:translateY(1px)}@media(prefers-contrast:high){.badge{border-width:2px}}@media(prefers-reduced-motion:reduce){.badge{transition:none}}.switch{display:inline-flex;align-items:center;justify-content:flex-start;padding:0;border:none;background:transparent;cursor:pointer;outline:none;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.switch__track{position:relative;display:inline-flex;align-items:center;width:40px;height:20px;background-color:var(--color-semantic-background-secondary);border:2px solid var(--color-semantic-border-default);border-radius:2px;transition:all .15s ease}.switch__thumb{position:absolute;left:2px;width:12px;height:12px;background-color:var(--color-semantic-text-primary);border-radius:1px;transition:transform .15s ease,background-color .15s ease}.switch--checked .switch__track{background-color:var(--color-semantic-background-accent);border-color:var(--color-semantic-border-focus)}.switch--checked .switch__thumb{transform:translate(20px);background-color:var(--color-semantic-text-secondary)}.switch:hover:not(.switch--disabled) .switch__track{border-color:var(--color-semantic-border-hover)}.switch:hover:not(.switch--disabled):not(.switch--checked) .switch__thumb{background-color:var(--color-semantic-text-accent)}.switch:focus-visible .switch__track{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch--disabled .switch__track{background-color:var(--color-semantic-background-secondary);border-color:var(--color-semantic-border-disabled)}.switch--disabled .switch__thumb{background-color:var(--color-semantic-text-disabled)}@media(prefers-contrast:high){.switch__track{border-width:3px}}@media(prefers-reduced-motion:reduce){.switch__track,.switch__thumb{transition:none}}.breadcrumb{font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);font-size:var(--typography-font-size-xs);text-transform:uppercase;letter-spacing:.35em}.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.breadcrumb__item{display:flex;align-items:center;gap:8px}.breadcrumb__link{display:inline-flex;align-items:center;gap:4px;color:var(--color-semantic-text-disabled);text-decoration:none;transition:color .15s ease}.breadcrumb__link:hover{color:var(--color-semantic-text-primary)}.breadcrumb__link:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.breadcrumb__back-arrow{font-size:1em;line-height:1}.breadcrumb__separator{color:var(--color-semantic-text-disabled);opacity:.6;-webkit-user-select:none;user-select:none}.breadcrumb__current{color:var(--color-semantic-text-primary)}@media(min-width:768px){.breadcrumb{font-size:var(--typography-font-size-sm)}}@media(prefers-contrast:high){.breadcrumb__link:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){.breadcrumb__link{transition:none}}.retro-effects{--retro-intensity: 1;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999}.retro-effects__scanlines{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.6 * var(--retro-intensity));mix-blend-mode:screen;background:repeating-linear-gradient(to bottom,var(--effects-scanline-light) 0px,var(--effects-scanline-dark) 1px,transparent 2px,transparent 4px);animation:retro-scanline 9s linear infinite}.retro-effects__glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:var(--retro-intensity);box-shadow:inset 0 0 200px var(--effects-vignette-glow);background:radial-gradient(ellipse 120% 100% at center,transparent 0%,transparent 50%,var(--effects-vignette-edge) 80%,var(--effects-vignette-corner) 100%)}.retro-effects__flicker{position:absolute;top:0;right:0;bottom:0;left:0;opacity:calc(.04 * var(--retro-intensity));background-color:var(--effects-screen-tint);animation:retro-flicker .5s steps(4) infinite}.retro-effects__bloom{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:calc(.5 * var(--retro-intensity));box-shadow:inset 0 0 40px var(--effects-phosphor-glow),inset 0 0 80px #ffb0000d;background:radial-gradient(ellipse at center,rgba(255,176,0,.03) 0%,transparent 60%)}@keyframes retro-scanline{0%{transform:translateY(0)}to{transform:translateY(12px)}}@keyframes retro-flicker{0%{opacity:calc(.02 * var(--retro-intensity))}50%{opacity:calc(.06 * var(--retro-intensity))}to{opacity:calc(.02 * var(--retro-intensity))}}@keyframes retro-power-off{0%{transform:scaleY(1) scaleX(1);opacity:1}50%{transform:scaleY(.005) scaleX(1);opacity:1}to{transform:scaleY(0) scaleX(0);opacity:0}}@keyframes retro-power-on{0%{transform:scaleY(0) scaleX(0);opacity:1}50%{transform:scaleY(.02) scaleX(1);opacity:1}to{transform:scaleY(1) scaleX(1);opacity:1}}.retro-effects--powering-off{animation:retro-power-off var(--duration-power-off, .4s) ease-in forwards;transform-origin:center center}.retro-effects--powering-on{animation:retro-power-on var(--duration-power-on, .6s) ease-out forwards;transform-origin:center center}.retro-effects--off{transform:scaleY(0) scaleX(0);opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.retro-effects__scanlines{animation:none}.retro-effects__flicker{animation:none;opacity:calc(.03 * var(--retro-intensity))}.retro-effects--powering-off{animation:none;transition:opacity .2s ease-out;opacity:0}.retro-effects--powering-on{animation:none;transition:opacity .3s ease-in;opacity:1}}@media(prefers-contrast:high){.retro-effects{display:none}}.timeline-node{display:inline-flex;align-items:center;gap:var(--spacing-2);font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.timeline-node__marker{display:block;background:var(--color-cga-amber-dim);border:2px solid var(--color-cga-amber-dim);transition:all .15s ease;flex-shrink:0}.timeline-node--small .timeline-node__marker{width:8px;height:8px}.timeline-node--medium .timeline-node__marker{width:12px;height:12px}.timeline-node--large .timeline-node__marker{width:16px;height:16px}.timeline-node--circle .timeline-node__marker{border-radius:50%}.timeline-node--square .timeline-node__marker{border-radius:2px}.timeline-node--diamond .timeline-node__marker{transform:rotate(45deg)}.timeline-node--diamond.timeline-node--small .timeline-node__marker{width:7px;height:7px}.timeline-node--diamond.timeline-node--medium .timeline-node__marker{width:10px;height:10px}.timeline-node--diamond.timeline-node--large .timeline-node__marker{width:14px;height:14px}.timeline-node--default .timeline-node__marker{background:var(--color-cga-amber-dim);border-color:var(--color-cga-amber-dim)}.timeline-node--primary .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber)}.timeline-node--secondary .timeline-node__marker{background:var(--color-semantic-text-primary);border-color:var(--color-semantic-text-primary)}.timeline-node--accent .timeline-node__marker{background:var(--color-semantic-text-accent);border-color:var(--color-semantic-text-accent)}.timeline-node--interactive{cursor:pointer}.timeline-node--interactive:hover .timeline-node__marker{background:var(--color-cga-amber);border-color:var(--color-cga-amber);box-shadow:var(--shadow-glow-sm)}.timeline-node--active .timeline-node__marker{background:var(--color-cga-amber-bright);border-color:var(--color-cga-amber-bright);box-shadow:var(--shadow-glow-sm)}.timeline-node--active.timeline-node--interactive:hover .timeline-node__marker{box-shadow:var(--shadow-glow-md)}.timeline-node--interactive:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.timeline-node__label{color:var(--color-cga-amber);font-size:var(--typography-font-size-xs);white-space:nowrap}.timeline-node--small .timeline-node__label{font-size:10px}.timeline-node--large .timeline-node__label{font-size:var(--typography-font-size-sm)}.timeline-node--label-left,.timeline-node--label-right{flex-direction:row}.timeline-node--label-top,.timeline-node--label-bottom{flex-direction:column}.timeline-node__label--left,.timeline-node__label--top{order:-1}@media(prefers-reduced-motion:reduce){.timeline-node__marker{transition:none}}@media(prefers-contrast:high){.timeline-node__marker{border-width:3px}.timeline-node--interactive:focus-visible{outline-width:3px}}.modal{padding:0;border:none;background:transparent;max-width:100vw;max-height:100vh}.modal::backdrop{background-color:var(--effects-overlay)}.modal__container{background-color:var(--color-semantic-background-primary);border:2px solid var(--color-cga-yellow);box-shadow:var(--shadow-drop);width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);display:flex;flex-direction:column;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4);border-bottom:1px solid var(--color-cga-dark-gray)}.modal__title{margin:0;font-size:16px;font-weight:400;color:var(--color-cga-yellow);line-height:1.4}.modal__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:var(--color-cga-light-gray)}.modal__close:hover{color:var(--color-cga-yellow)}.modal__close:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.modal__body{padding:var(--spacing-4);color:var(--color-cga-light-gray);font-size:14px;line-height:1.5;overflow-y:auto;flex:1}.modal__footer{display:flex;gap:var(--spacing-2);justify-content:flex-end;padding:var(--spacing-4);border-top:1px solid var(--color-cga-dark-gray)}.modal[open]{animation:modal-open .15s ease-out}.modal[open]::backdrop{animation:backdrop-open .15s ease-out}@keyframes modal-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes backdrop-open{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.modal[open],.modal[open]::backdrop{animation:none}}@media(prefers-contrast:high){.modal__container{border-width:3px}}.stat{display:flex;flex-direction:column;gap:4px;font-family:var(--typography-font-family-primary),var(--typography-font-family-fallback);box-sizing:border-box}.stat--small{gap:2px}.stat--small .stat__label{font-size:10px}.stat--small .stat__value{font-size:18px}.stat--small .stat__trend{font-size:10px}.stat--medium{gap:4px}.stat--medium .stat__label{font-size:11px}.stat--medium .stat__value{font-size:24px}.stat--medium .stat__trend{font-size:11px}.stat--large{gap:6px}.stat--large .stat__label{font-size:12px}.stat--large .stat__value{font-size:32px}.stat--large .stat__trend{font-size:12px}.stat__label{color:var(--color-semantic-text-primary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.stat__value{color:var(--color-semantic-text-accent);font-weight:var(--typography-font-weight-bold);line-height:1;font-variant-numeric:tabular-nums}.stat__trend{display:inline-flex;align-items:center;gap:4px;line-height:1}.stat__trend--up{color:var(--color-cga-bright-green)}.stat__trend--down{color:var(--color-cga-bright-red)}.stat__trend--neutral{color:var(--color-semantic-text-primary)}.stat__trend-icon{font-size:.8em}.stat__trend-value{font-variant-numeric:tabular-nums}@media(prefers-contrast:high){.stat__value,.stat__trend{font-weight:700}.stat__trend-icon{font-size:1em}}@media(prefers-reduced-motion:reduce){.stat{transition:none}}
|
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as e, jsxs as u, Fragment as
|
|
2
|
-
import A, { useState as y, useEffect as
|
|
1
|
+
import { jsx as e, jsxs as u, Fragment as z } from "react/jsx-runtime";
|
|
2
|
+
import A, { useState as y, useEffect as x, useRef as S, forwardRef as E, useCallback as I, useId as K } from "react";
|
|
3
3
|
import { createPortal as R } from "react-dom";
|
|
4
|
-
const
|
|
4
|
+
const $ = ({
|
|
5
5
|
name: r,
|
|
6
6
|
size: i = "L",
|
|
7
7
|
className: t = "",
|
|
@@ -26,7 +26,7 @@ const k = ({
|
|
|
26
26
|
success: "Done",
|
|
27
27
|
warning: "Warning",
|
|
28
28
|
error: "Error"
|
|
29
|
-
},
|
|
29
|
+
}, V = ({
|
|
30
30
|
size: r = "large",
|
|
31
31
|
type: i = "info",
|
|
32
32
|
title: t = "Notification Title",
|
|
@@ -37,7 +37,7 @@ const k = ({
|
|
|
37
37
|
}) => /* @__PURE__ */ u("div", { className: `alert alert--${r} alert--${i} ${l}`.trim(), children: [
|
|
38
38
|
/* @__PURE__ */ u("div", { className: "alert__header", children: [
|
|
39
39
|
/* @__PURE__ */ e("div", { className: "alert__icon", children: /* @__PURE__ */ e(
|
|
40
|
-
|
|
40
|
+
$,
|
|
41
41
|
{
|
|
42
42
|
name: L[i],
|
|
43
43
|
size: "L",
|
|
@@ -52,7 +52,7 @@ const k = ({
|
|
|
52
52
|
onClick: n,
|
|
53
53
|
"aria-label": "Close alert",
|
|
54
54
|
children: /* @__PURE__ */ e(
|
|
55
|
-
|
|
55
|
+
$,
|
|
56
56
|
{
|
|
57
57
|
name: "Close",
|
|
58
58
|
size: "S"
|
|
@@ -82,12 +82,12 @@ const k = ({
|
|
|
82
82
|
onToggle: s
|
|
83
83
|
}) => {
|
|
84
84
|
const [l, o] = y(t);
|
|
85
|
-
|
|
85
|
+
x(() => {
|
|
86
86
|
o(t);
|
|
87
87
|
}, [t]);
|
|
88
88
|
const c = () => {
|
|
89
|
-
const
|
|
90
|
-
o(
|
|
89
|
+
const d = !l;
|
|
90
|
+
o(d), s == null || s(d);
|
|
91
91
|
};
|
|
92
92
|
return /* @__PURE__ */ u(
|
|
93
93
|
"div",
|
|
@@ -108,7 +108,7 @@ const k = ({
|
|
|
108
108
|
children: [
|
|
109
109
|
/* @__PURE__ */ e("div", { className: "section__title", children: r }),
|
|
110
110
|
/* @__PURE__ */ e("div", { className: "section__icon", children: /* @__PURE__ */ e(
|
|
111
|
-
|
|
111
|
+
$,
|
|
112
112
|
{
|
|
113
113
|
name: l ? "Chevron Up" : "Chevron Down",
|
|
114
114
|
size: "S"
|
|
@@ -121,7 +121,7 @@ const k = ({
|
|
|
121
121
|
]
|
|
122
122
|
}
|
|
123
123
|
);
|
|
124
|
-
},
|
|
124
|
+
}, W = ({
|
|
125
125
|
sections: r,
|
|
126
126
|
defaultExpandedIndex: i = -1
|
|
127
127
|
}) => {
|
|
@@ -138,7 +138,7 @@ const k = ({
|
|
|
138
138
|
},
|
|
139
139
|
l
|
|
140
140
|
)) });
|
|
141
|
-
},
|
|
141
|
+
}, O = ({
|
|
142
142
|
variant: r = "primary",
|
|
143
143
|
size: i = "medium",
|
|
144
144
|
type: t = "button",
|
|
@@ -148,11 +148,11 @@ const k = ({
|
|
|
148
148
|
onClick: l,
|
|
149
149
|
className: o = "",
|
|
150
150
|
fullWidth: c = !1,
|
|
151
|
-
...
|
|
151
|
+
...d
|
|
152
152
|
}) => {
|
|
153
|
-
const
|
|
154
|
-
a || n || l == null || l(
|
|
155
|
-
},
|
|
153
|
+
const m = (f) => {
|
|
154
|
+
a || n || l == null || l(f);
|
|
155
|
+
}, _ = [
|
|
156
156
|
"button",
|
|
157
157
|
`button--${r}`,
|
|
158
158
|
`button--${i}`,
|
|
@@ -165,18 +165,18 @@ const k = ({
|
|
|
165
165
|
"button",
|
|
166
166
|
{
|
|
167
167
|
type: t,
|
|
168
|
-
className:
|
|
169
|
-
onClick:
|
|
168
|
+
className: _,
|
|
169
|
+
onClick: m,
|
|
170
170
|
disabled: a || n,
|
|
171
171
|
"aria-disabled": a || n,
|
|
172
|
-
...
|
|
172
|
+
...d,
|
|
173
173
|
children: [
|
|
174
174
|
n && /* @__PURE__ */ e("span", { className: "button__loading-indicator", "aria-hidden": "true", children: "█" }),
|
|
175
175
|
/* @__PURE__ */ e("span", { className: `button__content ${n ? "button__content--loading" : ""}`, children: s })
|
|
176
176
|
]
|
|
177
177
|
}
|
|
178
178
|
);
|
|
179
|
-
},
|
|
179
|
+
}, Q = ({
|
|
180
180
|
title: r,
|
|
181
181
|
children: i,
|
|
182
182
|
footer: t,
|
|
@@ -194,7 +194,7 @@ const k = ({
|
|
|
194
194
|
/* @__PURE__ */ e("div", { className: "card__body", children: i }),
|
|
195
195
|
t && /* @__PURE__ */ e("div", { className: "card__footer", children: t })
|
|
196
196
|
] });
|
|
197
|
-
},
|
|
197
|
+
}, G = ({
|
|
198
198
|
checked: r,
|
|
199
199
|
defaultChecked: i,
|
|
200
200
|
onChange: t,
|
|
@@ -204,16 +204,16 @@ const k = ({
|
|
|
204
204
|
value: l,
|
|
205
205
|
className: o = "",
|
|
206
206
|
"aria-label": c,
|
|
207
|
-
...
|
|
207
|
+
...d
|
|
208
208
|
}) => {
|
|
209
|
-
const
|
|
210
|
-
n || t == null || t(
|
|
211
|
-
},
|
|
209
|
+
const m = (f) => {
|
|
210
|
+
n || t == null || t(f.target.checked);
|
|
211
|
+
}, _ = [
|
|
212
212
|
"checkbox",
|
|
213
213
|
n && "checkbox--disabled",
|
|
214
214
|
o
|
|
215
215
|
].filter(Boolean).join(" ");
|
|
216
|
-
return /* @__PURE__ */ u("label", { className:
|
|
216
|
+
return /* @__PURE__ */ u("label", { className: _, children: [
|
|
217
217
|
/* @__PURE__ */ e(
|
|
218
218
|
"input",
|
|
219
219
|
{
|
|
@@ -221,18 +221,18 @@ const k = ({
|
|
|
221
221
|
className: "checkbox__input",
|
|
222
222
|
checked: r,
|
|
223
223
|
defaultChecked: i,
|
|
224
|
-
onChange:
|
|
224
|
+
onChange: m,
|
|
225
225
|
disabled: n,
|
|
226
226
|
name: s,
|
|
227
227
|
value: l,
|
|
228
228
|
"aria-label": c || a,
|
|
229
|
-
...
|
|
229
|
+
...d
|
|
230
230
|
}
|
|
231
231
|
),
|
|
232
232
|
/* @__PURE__ */ e("span", { className: "checkbox__box", "aria-hidden": "true" }),
|
|
233
233
|
a && /* @__PURE__ */ e("span", { className: "checkbox__label", children: a })
|
|
234
234
|
] });
|
|
235
|
-
},
|
|
235
|
+
}, H = ({
|
|
236
236
|
prompt: r = "C:\\>",
|
|
237
237
|
onCommand: i,
|
|
238
238
|
autoFocus: t = !1,
|
|
@@ -241,19 +241,19 @@ const k = ({
|
|
|
241
241
|
disabled: s = !1
|
|
242
242
|
}) => {
|
|
243
243
|
const [l, o] = y(""), c = S(null);
|
|
244
|
-
|
|
244
|
+
x(() => {
|
|
245
245
|
t && c.current && c.current.focus();
|
|
246
246
|
}, [t]);
|
|
247
|
-
const
|
|
248
|
-
|
|
249
|
-
},
|
|
247
|
+
const d = (_) => {
|
|
248
|
+
_.key === "Enter" && l.trim() && !s && (i(l.trim()), o(""));
|
|
249
|
+
}, m = () => {
|
|
250
250
|
!s && c.current && c.current.focus();
|
|
251
251
|
};
|
|
252
252
|
return /* @__PURE__ */ u(
|
|
253
253
|
"div",
|
|
254
254
|
{
|
|
255
255
|
className: `command-prompt ${s ? "command-prompt--disabled" : ""} ${a}`.trim(),
|
|
256
|
-
onClick:
|
|
256
|
+
onClick: m,
|
|
257
257
|
role: "textbox",
|
|
258
258
|
"aria-label": "Command prompt",
|
|
259
259
|
children: [
|
|
@@ -264,8 +264,8 @@ const k = ({
|
|
|
264
264
|
ref: c,
|
|
265
265
|
className: "command-prompt__input",
|
|
266
266
|
value: l,
|
|
267
|
-
onChange: (
|
|
268
|
-
onKeyDown:
|
|
267
|
+
onChange: (_) => o(_.target.value),
|
|
268
|
+
onKeyDown: d,
|
|
269
269
|
autoFocus: t,
|
|
270
270
|
spellCheck: !1,
|
|
271
271
|
autoComplete: "off",
|
|
@@ -280,7 +280,7 @@ const k = ({
|
|
|
280
280
|
]
|
|
281
281
|
}
|
|
282
282
|
);
|
|
283
|
-
},
|
|
283
|
+
}, J = ({
|
|
284
284
|
value: r,
|
|
285
285
|
max: i = 100,
|
|
286
286
|
variant: t = "default",
|
|
@@ -290,7 +290,7 @@ const k = ({
|
|
|
290
290
|
"aria-label": l,
|
|
291
291
|
...o
|
|
292
292
|
}) => {
|
|
293
|
-
const c = Math.min(100, Math.max(0, r / i * 100)),
|
|
293
|
+
const c = Math.min(100, Math.max(0, r / i * 100)), d = Math.round(c / 5), m = 20 - d, _ = [
|
|
294
294
|
"progress",
|
|
295
295
|
`progress--${t}`,
|
|
296
296
|
`progress--${a}`,
|
|
@@ -299,7 +299,7 @@ const k = ({
|
|
|
299
299
|
return /* @__PURE__ */ u(
|
|
300
300
|
"div",
|
|
301
301
|
{
|
|
302
|
-
className:
|
|
302
|
+
className: _,
|
|
303
303
|
role: "progressbar",
|
|
304
304
|
"aria-valuenow": r,
|
|
305
305
|
"aria-valuemin": 0,
|
|
@@ -308,8 +308,8 @@ const k = ({
|
|
|
308
308
|
...o,
|
|
309
309
|
children: [
|
|
310
310
|
/* @__PURE__ */ u("span", { className: "progress__bar", children: [
|
|
311
|
-
/* @__PURE__ */ e("span", { className: "progress__fill", children: "█".repeat(
|
|
312
|
-
/* @__PURE__ */ e("span", { className: "progress__empty", children: "░".repeat(
|
|
311
|
+
/* @__PURE__ */ e("span", { className: "progress__fill", children: "█".repeat(d) }),
|
|
312
|
+
/* @__PURE__ */ e("span", { className: "progress__empty", children: "░".repeat(m) })
|
|
313
313
|
] }),
|
|
314
314
|
n && /* @__PURE__ */ u("span", { className: "progress__label", children: [
|
|
315
315
|
Math.round(c),
|
|
@@ -352,38 +352,38 @@ const X = ({
|
|
|
352
352
|
closeable: l = !0,
|
|
353
353
|
children: o,
|
|
354
354
|
onMinimize: c,
|
|
355
|
-
onMaximize:
|
|
356
|
-
onClose:
|
|
357
|
-
onFocus:
|
|
358
|
-
className:
|
|
355
|
+
onMaximize: d,
|
|
356
|
+
onClose: m,
|
|
357
|
+
onFocus: _,
|
|
358
|
+
className: f = "",
|
|
359
359
|
autoFocus: g = !1
|
|
360
360
|
}) => {
|
|
361
|
-
const [
|
|
362
|
-
|
|
361
|
+
const [p, h] = y(t), [b, N] = y(!1), v = S(null);
|
|
362
|
+
x(() => {
|
|
363
363
|
g && v.current && v.current.focus();
|
|
364
364
|
}, [g]);
|
|
365
|
-
const
|
|
366
|
-
|
|
367
|
-
}, x = () => {
|
|
368
|
-
f(!b), m == null || m();
|
|
369
|
-
}, w = () => {
|
|
370
|
-
d == null || d();
|
|
365
|
+
const w = () => {
|
|
366
|
+
h("minimized"), c == null || c();
|
|
371
367
|
}, B = () => {
|
|
372
|
-
|
|
373
|
-
},
|
|
374
|
-
|
|
368
|
+
N(!b), d == null || d();
|
|
369
|
+
}, k = () => {
|
|
370
|
+
m == null || m();
|
|
371
|
+
}, D = () => {
|
|
372
|
+
h("active"), _ == null || _();
|
|
373
|
+
}, j = (C) => {
|
|
374
|
+
C.altKey && C.key === "F4" && l && (C.preventDefault(), k());
|
|
375
375
|
};
|
|
376
|
-
return
|
|
376
|
+
return p === "minimized" ? /* @__PURE__ */ e(
|
|
377
377
|
"div",
|
|
378
378
|
{
|
|
379
|
-
className: `terminal terminal--minimized ${
|
|
380
|
-
onClick:
|
|
379
|
+
className: `terminal terminal--minimized ${f}`.trim(),
|
|
380
|
+
onClick: D,
|
|
381
381
|
role: "button",
|
|
382
382
|
tabIndex: 0,
|
|
383
383
|
"aria-label": `Restore ${i} window`,
|
|
384
|
-
onKeyDown: (C) => C.key === "Enter" &&
|
|
384
|
+
onKeyDown: (C) => C.key === "Enter" && D(),
|
|
385
385
|
children: /* @__PURE__ */ u("div", { className: "terminal__taskbar-item", children: [
|
|
386
|
-
/* @__PURE__ */ e(
|
|
386
|
+
/* @__PURE__ */ e($, { name: "App", size: "S" }),
|
|
387
387
|
/* @__PURE__ */ e("span", { className: "terminal__taskbar-title", children: i })
|
|
388
388
|
] })
|
|
389
389
|
}
|
|
@@ -391,16 +391,16 @@ const X = ({
|
|
|
391
391
|
"div",
|
|
392
392
|
{
|
|
393
393
|
ref: v,
|
|
394
|
-
className: `terminal terminal--${r} terminal--${
|
|
394
|
+
className: `terminal terminal--${r} terminal--${p} ${b ? "terminal--maximized" : ""} ${f}`.trim(),
|
|
395
395
|
tabIndex: 0,
|
|
396
396
|
role: "dialog",
|
|
397
397
|
"aria-label": `${i} terminal window`,
|
|
398
|
-
onFocus:
|
|
399
|
-
onKeyDown:
|
|
398
|
+
onFocus: D,
|
|
399
|
+
onKeyDown: j,
|
|
400
400
|
children: [
|
|
401
401
|
/* @__PURE__ */ u("div", { className: "terminal__title-bar", children: [
|
|
402
402
|
/* @__PURE__ */ u("div", { className: "terminal__title", children: [
|
|
403
|
-
/* @__PURE__ */ e(
|
|
403
|
+
/* @__PURE__ */ e($, { name: "App", size: "S", "aria-hidden": "true" }),
|
|
404
404
|
/* @__PURE__ */ e("span", { className: "terminal__title-text", children: i })
|
|
405
405
|
] }),
|
|
406
406
|
/* @__PURE__ */ u("div", { className: "terminal__controls", children: [
|
|
@@ -408,30 +408,30 @@ const X = ({
|
|
|
408
408
|
"button",
|
|
409
409
|
{
|
|
410
410
|
className: "terminal__control terminal__control--minimize",
|
|
411
|
-
onClick:
|
|
411
|
+
onClick: w,
|
|
412
412
|
"aria-label": "Minimize window",
|
|
413
413
|
title: "Minimize",
|
|
414
|
-
children: /* @__PURE__ */ e(
|
|
414
|
+
children: /* @__PURE__ */ e($, { name: "Cancel", size: "S" })
|
|
415
415
|
}
|
|
416
416
|
),
|
|
417
417
|
s && /* @__PURE__ */ e(
|
|
418
418
|
"button",
|
|
419
419
|
{
|
|
420
420
|
className: "terminal__control terminal__control--maximize",
|
|
421
|
-
onClick:
|
|
421
|
+
onClick: B,
|
|
422
422
|
"aria-label": b ? "Restore window" : "Maximize window",
|
|
423
423
|
title: b ? "Restore" : "Maximize",
|
|
424
|
-
children: /* @__PURE__ */ e(
|
|
424
|
+
children: /* @__PURE__ */ e($, { name: b ? "Fullscreen" : "Add", size: "S" })
|
|
425
425
|
}
|
|
426
426
|
),
|
|
427
427
|
l && /* @__PURE__ */ e(
|
|
428
428
|
"button",
|
|
429
429
|
{
|
|
430
430
|
className: "terminal__control terminal__control--close",
|
|
431
|
-
onClick:
|
|
431
|
+
onClick: k,
|
|
432
432
|
"aria-label": "Close window",
|
|
433
433
|
title: "Close",
|
|
434
|
-
children: /* @__PURE__ */ e(
|
|
434
|
+
children: /* @__PURE__ */ e($, { name: "Close", size: "S" })
|
|
435
435
|
}
|
|
436
436
|
)
|
|
437
437
|
] })
|
|
@@ -454,61 +454,61 @@ const X = ({
|
|
|
454
454
|
className: l = "",
|
|
455
455
|
...o
|
|
456
456
|
}) => {
|
|
457
|
-
var
|
|
458
|
-
const [c,
|
|
459
|
-
n || ((
|
|
460
|
-
),
|
|
461
|
-
b || (a === void 0 &&
|
|
462
|
-
}, [a, s]),
|
|
463
|
-
var
|
|
464
|
-
const
|
|
465
|
-
let
|
|
466
|
-
switch (
|
|
457
|
+
var p;
|
|
458
|
+
const [c, d] = y(
|
|
459
|
+
n || ((p = r[0]) == null ? void 0 : p.id) || ""
|
|
460
|
+
), m = a !== void 0 ? a : c, _ = I((h, b) => {
|
|
461
|
+
b || (a === void 0 && d(h), s == null || s(h));
|
|
462
|
+
}, [a, s]), f = I((h, b) => {
|
|
463
|
+
var B;
|
|
464
|
+
const N = r.filter((k) => !k.disabled), v = N.findIndex((k) => k.id === r[b].id);
|
|
465
|
+
let w = null;
|
|
466
|
+
switch (h.key) {
|
|
467
467
|
case "ArrowLeft":
|
|
468
468
|
case "ArrowUp":
|
|
469
|
-
|
|
469
|
+
h.preventDefault(), w = v > 0 ? v - 1 : N.length - 1;
|
|
470
470
|
break;
|
|
471
471
|
case "ArrowRight":
|
|
472
472
|
case "ArrowDown":
|
|
473
|
-
|
|
473
|
+
h.preventDefault(), w = v < N.length - 1 ? v + 1 : 0;
|
|
474
474
|
break;
|
|
475
475
|
case "Home":
|
|
476
|
-
|
|
476
|
+
h.preventDefault(), w = 0;
|
|
477
477
|
break;
|
|
478
478
|
case "End":
|
|
479
|
-
|
|
479
|
+
h.preventDefault(), w = N.length - 1;
|
|
480
480
|
break;
|
|
481
481
|
}
|
|
482
|
-
if (
|
|
483
|
-
const
|
|
484
|
-
|
|
482
|
+
if (w !== null) {
|
|
483
|
+
const k = N[w];
|
|
484
|
+
_(k.id, k.disabled), (B = document.querySelectorAll('[role="tab"]:not([disabled])')[w]) == null || B.focus();
|
|
485
485
|
}
|
|
486
|
-
}, [r,
|
|
486
|
+
}, [r, _]), g = [
|
|
487
487
|
"tabs",
|
|
488
488
|
`tabs--${i}`,
|
|
489
489
|
`tabs--${t}`,
|
|
490
490
|
l
|
|
491
491
|
].filter(Boolean).join(" ");
|
|
492
|
-
return /* @__PURE__ */ e("div", { className: g, role: "tablist", ...o, children: r.map((
|
|
493
|
-
const
|
|
492
|
+
return /* @__PURE__ */ e("div", { className: g, role: "tablist", ...o, children: r.map((h, b) => {
|
|
493
|
+
const N = m === h.id, v = [
|
|
494
494
|
"tabs__tab",
|
|
495
|
-
|
|
496
|
-
|
|
495
|
+
N && "tabs__tab--active",
|
|
496
|
+
h.disabled && "tabs__tab--disabled"
|
|
497
497
|
].filter(Boolean).join(" ");
|
|
498
498
|
return /* @__PURE__ */ e(
|
|
499
499
|
"button",
|
|
500
500
|
{
|
|
501
501
|
role: "tab",
|
|
502
|
-
id: `tab-${
|
|
503
|
-
"aria-selected":
|
|
504
|
-
tabIndex:
|
|
505
|
-
disabled:
|
|
502
|
+
id: `tab-${h.id}`,
|
|
503
|
+
"aria-selected": N,
|
|
504
|
+
tabIndex: N ? 0 : -1,
|
|
505
|
+
disabled: h.disabled,
|
|
506
506
|
className: v,
|
|
507
|
-
onClick: () => h
|
|
508
|
-
onKeyDown: (
|
|
509
|
-
children:
|
|
507
|
+
onClick: () => _(h.id, h.disabled),
|
|
508
|
+
onKeyDown: (w) => f(w, b),
|
|
509
|
+
children: h.label
|
|
510
510
|
},
|
|
511
|
-
|
|
511
|
+
h.id
|
|
512
512
|
);
|
|
513
513
|
}) });
|
|
514
514
|
}, Z = ({
|
|
@@ -540,15 +540,15 @@ const X = ({
|
|
|
540
540
|
className: l = "",
|
|
541
541
|
...o
|
|
542
542
|
}) => {
|
|
543
|
-
const [c,
|
|
543
|
+
const [c, d] = A.useState(i), m = r !== void 0, _ = m ? r : c, f = () => {
|
|
544
544
|
if (a) return;
|
|
545
|
-
const
|
|
546
|
-
|
|
547
|
-
}, g = (
|
|
548
|
-
(
|
|
549
|
-
},
|
|
545
|
+
const h = !_;
|
|
546
|
+
m || d(h), t == null || t(h);
|
|
547
|
+
}, g = (h) => {
|
|
548
|
+
(h.key === " " || h.key === "Enter") && (h.preventDefault(), f());
|
|
549
|
+
}, p = [
|
|
550
550
|
"switch",
|
|
551
|
-
|
|
551
|
+
_ && "switch--checked",
|
|
552
552
|
a && "switch--disabled",
|
|
553
553
|
l
|
|
554
554
|
].filter(Boolean).join(" ");
|
|
@@ -557,10 +557,10 @@ const X = ({
|
|
|
557
557
|
{
|
|
558
558
|
type: "button",
|
|
559
559
|
role: "switch",
|
|
560
|
-
"aria-checked":
|
|
560
|
+
"aria-checked": _,
|
|
561
561
|
"aria-disabled": a,
|
|
562
|
-
className:
|
|
563
|
-
onClick:
|
|
562
|
+
className: p,
|
|
563
|
+
onClick: f,
|
|
564
564
|
onKeyDown: g,
|
|
565
565
|
disabled: a,
|
|
566
566
|
...o,
|
|
@@ -571,7 +571,7 @@ const X = ({
|
|
|
571
571
|
{
|
|
572
572
|
type: "hidden",
|
|
573
573
|
name: n,
|
|
574
|
-
value:
|
|
574
|
+
value: _ ? s || "on" : ""
|
|
575
575
|
}
|
|
576
576
|
)
|
|
577
577
|
]
|
|
@@ -588,19 +588,19 @@ const X = ({
|
|
|
588
588
|
const l = [
|
|
589
589
|
"breadcrumb",
|
|
590
590
|
s
|
|
591
|
-
].filter(Boolean).join(" "), o = (c,
|
|
592
|
-
const
|
|
593
|
-
t &&
|
|
591
|
+
].filter(Boolean).join(" "), o = (c, d) => {
|
|
592
|
+
const m = /* @__PURE__ */ u(z, { children: [
|
|
593
|
+
t && d && /* @__PURE__ */ e("span", { className: "breadcrumb__back-arrow", "aria-hidden": "true", children: "<" }),
|
|
594
594
|
/* @__PURE__ */ e("span", { children: c.label })
|
|
595
595
|
] });
|
|
596
|
-
return n ? /* @__PURE__ */ e(n, { href: c.href, className: "breadcrumb__link", children:
|
|
596
|
+
return n ? /* @__PURE__ */ e(n, { href: c.href, className: "breadcrumb__link", children: m }) : /* @__PURE__ */ e("a", { href: c.href, className: "breadcrumb__link", children: m });
|
|
597
597
|
};
|
|
598
598
|
return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: l, children: /* @__PURE__ */ u("ol", { className: "breadcrumb__list", children: [
|
|
599
|
-
r.map((c,
|
|
600
|
-
const
|
|
599
|
+
r.map((c, d) => {
|
|
600
|
+
const m = d === r.length - 1, _ = d < r.length - 1;
|
|
601
601
|
return /* @__PURE__ */ u("li", { className: "breadcrumb__item", children: [
|
|
602
|
-
o(c,
|
|
603
|
-
|
|
602
|
+
o(c, m),
|
|
603
|
+
_ && /* @__PURE__ */ e("span", { className: "breadcrumb__separator", "aria-hidden": "true", children: a })
|
|
604
604
|
] }, `${c.href}-${c.label}`);
|
|
605
605
|
}),
|
|
606
606
|
r.length > 0 && /* @__PURE__ */ e("li", { className: "breadcrumb__item", children: /* @__PURE__ */ e("span", { className: "breadcrumb__separator", "aria-hidden": "true", children: a }) }),
|
|
@@ -610,18 +610,42 @@ const X = ({
|
|
|
610
610
|
scanlines: r = !0,
|
|
611
611
|
glow: i = !0,
|
|
612
612
|
flicker: t = !0,
|
|
613
|
-
|
|
614
|
-
|
|
613
|
+
bloom: a = !1,
|
|
614
|
+
powered: n = !0,
|
|
615
|
+
intensity: s = 1,
|
|
616
|
+
className: l = ""
|
|
615
617
|
}) => {
|
|
616
|
-
const
|
|
618
|
+
const o = S(n), [c, d] = y(
|
|
619
|
+
n ? "on" : "off"
|
|
620
|
+
);
|
|
621
|
+
x(() => {
|
|
622
|
+
const p = o.current;
|
|
623
|
+
o.current = n, p !== n && d(n ? "powering-on" : "powering-off");
|
|
624
|
+
}, [n]);
|
|
625
|
+
const m = (p) => {
|
|
626
|
+
p.animationName !== "retro-power-on" && p.animationName !== "retro-power-off" || (c === "powering-on" ? d("on") : c === "powering-off" && d("off"));
|
|
627
|
+
}, _ = [
|
|
617
628
|
"retro-effects",
|
|
618
|
-
|
|
629
|
+
c === "powering-off" && "retro-effects--powering-off",
|
|
630
|
+
c === "powering-on" && "retro-effects--powering-on",
|
|
631
|
+
c === "off" && "retro-effects--off",
|
|
632
|
+
l
|
|
619
633
|
].filter(Boolean).join(" ");
|
|
620
|
-
return /* @__PURE__ */
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
634
|
+
return /* @__PURE__ */ e(
|
|
635
|
+
"div",
|
|
636
|
+
{
|
|
637
|
+
className: _,
|
|
638
|
+
style: { "--retro-intensity": s },
|
|
639
|
+
"aria-hidden": "true",
|
|
640
|
+
onAnimationEnd: m,
|
|
641
|
+
children: c !== "off" && /* @__PURE__ */ u(z, { children: [
|
|
642
|
+
r && /* @__PURE__ */ e("div", { className: "retro-effects__scanlines" }),
|
|
643
|
+
i && /* @__PURE__ */ e("div", { className: "retro-effects__glow" }),
|
|
644
|
+
t && /* @__PURE__ */ e("div", { className: "retro-effects__flicker" }),
|
|
645
|
+
a && /* @__PURE__ */ e("div", { className: "retro-effects__bloom" })
|
|
646
|
+
] })
|
|
647
|
+
}
|
|
648
|
+
);
|
|
625
649
|
}, ne = ({
|
|
626
650
|
shape: r = "circle",
|
|
627
651
|
variant: i = "default",
|
|
@@ -633,7 +657,7 @@ const X = ({
|
|
|
633
657
|
onClick: o,
|
|
634
658
|
...c
|
|
635
659
|
}) => {
|
|
636
|
-
const
|
|
660
|
+
const d = [
|
|
637
661
|
"timeline-node",
|
|
638
662
|
`timeline-node--${r}`,
|
|
639
663
|
`timeline-node--${i}`,
|
|
@@ -646,12 +670,12 @@ const X = ({
|
|
|
646
670
|
return /* @__PURE__ */ u(
|
|
647
671
|
"div",
|
|
648
672
|
{
|
|
649
|
-
className:
|
|
673
|
+
className: d,
|
|
650
674
|
onClick: () => {
|
|
651
675
|
o && o();
|
|
652
676
|
},
|
|
653
|
-
onKeyDown: (
|
|
654
|
-
o && (
|
|
677
|
+
onKeyDown: (f) => {
|
|
678
|
+
o && (f.key === "Enter" || f.key === " ") && (f.preventDefault(), o());
|
|
655
679
|
},
|
|
656
680
|
role: o ? "button" : void 0,
|
|
657
681
|
tabIndex: o ? 0 : void 0,
|
|
@@ -675,14 +699,14 @@ const X = ({
|
|
|
675
699
|
className: s = ""
|
|
676
700
|
}) => {
|
|
677
701
|
const l = S(null), o = K();
|
|
678
|
-
|
|
679
|
-
const
|
|
680
|
-
|
|
702
|
+
x(() => {
|
|
703
|
+
const m = l.current;
|
|
704
|
+
m && (r && !m.open ? m.showModal() : !r && m.open && m.close());
|
|
681
705
|
}, [r]);
|
|
682
706
|
const c = () => {
|
|
683
707
|
i();
|
|
684
|
-
},
|
|
685
|
-
|
|
708
|
+
}, d = (m) => {
|
|
709
|
+
m.target === l.current && i();
|
|
686
710
|
};
|
|
687
711
|
return R(
|
|
688
712
|
/* @__PURE__ */ e(
|
|
@@ -692,7 +716,7 @@ const X = ({
|
|
|
692
716
|
className: `modal ${s}`.trim(),
|
|
693
717
|
"aria-labelledby": o,
|
|
694
718
|
onClose: c,
|
|
695
|
-
onClick:
|
|
719
|
+
onClick: d,
|
|
696
720
|
children: /* @__PURE__ */ u("div", { className: "modal__container", children: [
|
|
697
721
|
/* @__PURE__ */ u("header", { className: "modal__header", children: [
|
|
698
722
|
/* @__PURE__ */ e("h2", { id: o, className: "modal__title", children: t }),
|
|
@@ -703,7 +727,7 @@ const X = ({
|
|
|
703
727
|
className: "modal__close",
|
|
704
728
|
onClick: i,
|
|
705
729
|
"aria-label": "Close modal",
|
|
706
|
-
children: /* @__PURE__ */ e(
|
|
730
|
+
children: /* @__PURE__ */ e($, { name: "Close", size: "S" })
|
|
707
731
|
}
|
|
708
732
|
)
|
|
709
733
|
] }),
|
|
@@ -730,7 +754,7 @@ const X = ({
|
|
|
730
754
|
].filter(Boolean).join(" "), c = [
|
|
731
755
|
"stat__trend",
|
|
732
756
|
t && `stat__trend--${t}`
|
|
733
|
-
].filter(Boolean).join(" "),
|
|
757
|
+
].filter(Boolean).join(" "), d = () => {
|
|
734
758
|
switch (t) {
|
|
735
759
|
case "up":
|
|
736
760
|
return "▲";
|
|
@@ -762,7 +786,7 @@ const X = ({
|
|
|
762
786
|
}
|
|
763
787
|
})()}${a ? `, ${a}` : ""}`,
|
|
764
788
|
children: [
|
|
765
|
-
/* @__PURE__ */ e("span", { className: "stat__trend-icon", "aria-hidden": "true", children:
|
|
789
|
+
/* @__PURE__ */ e("span", { className: "stat__trend-icon", "aria-hidden": "true", children: d() }),
|
|
766
790
|
a && /* @__PURE__ */ e("span", { className: "stat__trend-value", children: a })
|
|
767
791
|
]
|
|
768
792
|
}
|
|
@@ -770,18 +794,18 @@ const X = ({
|
|
|
770
794
|
] });
|
|
771
795
|
}, se = "0.4.0";
|
|
772
796
|
export {
|
|
773
|
-
|
|
774
|
-
|
|
797
|
+
W as AccordionFill,
|
|
798
|
+
V as Alert,
|
|
775
799
|
Z as Badge,
|
|
776
800
|
ee as Breadcrumb,
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
801
|
+
O as Button,
|
|
802
|
+
Q as Card,
|
|
803
|
+
G as Checkbox,
|
|
804
|
+
H as CommandPrompt,
|
|
805
|
+
$ as Icon,
|
|
782
806
|
T as Input,
|
|
783
807
|
te as Modal,
|
|
784
|
-
|
|
808
|
+
J as Progress,
|
|
785
809
|
ae as RetroEffects,
|
|
786
810
|
M as Section,
|
|
787
811
|
re as Stat,
|
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(_,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom"],e):(_=typeof globalThis<"u"?globalThis:_||self,e(_.eidotter={},_.jsxRuntime,_.React,_.ReactDOM))})(this,(function(_,e,b,I){"use strict";const k=({name:l,size:c="L",className:r="",onClick:a,color:s,role:n})=>{const t=process.env.NODE_ENV==="production"?"/eiDotter":"";return e.jsx("svg",{className:`icon ${c==="L"?"icon--l":"icon--s"} ${r} ${n?`icon--${n}`:""}`.trim(),onClick:a,role:n,"aria-label":`${l} icon`,style:s?{color:s}:void 0,children:e.jsx("use",{href:`${t}/icons/sprites.svg#${l}`})})},j={info:"Info",success:"Done",warning:"Warning",error:"Error"},A=({size:l="large",type:c="info",title:r="Notification Title",children:a="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit amet diam neque bibendum. Quisque in praesent sit erat...",onClose:s,onClickHere:n,className:t=""})=>e.jsxs("div",{className:`alert alert--${l} alert--${c} ${t}`.trim(),children:[e.jsxs("div",{className:"alert__header",children:[e.jsx("div",{className:"alert__icon",children:e.jsx(k,{name:j[c],size:"L","aria-label":`${c} alert`})}),e.jsx("div",{className:"alert__title",children:r}),s&&e.jsx("button",{className:"alert__close",onClick:s,"aria-label":"Close alert",children:e.jsx(k,{name:"Close",size:"S"})})]}),e.jsx("div",{className:"alert__content",children:e.jsxs("div",{className:"alert__message",children:[e.jsx("span",{children:a}),n&&e.jsx("button",{className:"alert__link",onClick:n,"aria-label":"Click for more information",children:"Click here"})]})})]}),D=({title:l,children:c,defaultExpanded:r=!1,isHovered:a=!1,isActive:s=!1,onToggle:n})=>{const[t,o]=b.useState(r);b.useEffect(()=>{o(r)},[r]);const i=()=>{const d=!t;o(d),n==null||n(d)};return e.jsxs("div",{className:`
|
|
2
2
|
section
|
|
3
3
|
${t?"section--expanded":""}
|
|
4
4
|
${a?"section--hover":""}
|
|
5
5
|
${s?"section--active":""}
|
|
6
|
-
`.trim(),children:[e.jsxs("button",{className:"section__header",onClick:i,"aria-expanded":t,children:[e.jsx("div",{className:"section__title",children:l}),e.jsx("div",{className:"section__icon",children:e.jsx(w,{name:t?"Chevron Up":"Chevron Down",size:"S"})})]}),t&&e.jsx("div",{className:"section__content",children:c})]})},A=({sections:l,defaultExpandedIndex:c=-1})=>{const[r,a]=b.useState(c),s=(n,t)=>{a(t?n:-1)};return e.jsx("div",{className:"accordion-fill",children:l.map((n,t)=>e.jsx(D,{title:n.title,defaultExpanded:t===c,onToggle:o=>s(t,o),children:n.content},t))})},x=({variant:l="primary",size:c="medium",type:r="button",disabled:a=!1,loading:s=!1,children:n,onClick:t,className:o="",fullWidth:i=!1,..._})=>{const d=p=>{a||s||t==null||t(p)},f=["button",`button--${l}`,`button--${c}`,a&&"button--disabled",s&&"button--loading",i&&"button--full-width",o].filter(Boolean).join(" ");return e.jsxs("button",{type:r,className:f,onClick:d,disabled:a||s,"aria-disabled":a||s,..._,children:[s&&e.jsx("span",{className:"button__loading-indicator","aria-hidden":"true",children:"█"}),e.jsx("span",{className:`button__content ${s?"button__content--loading":""}`,children:n})]})},T=({title:l,children:c,footer:r,variant:a="default",className:s="",...n})=>{const t=["card",`card--${a}`,s].filter(Boolean).join(" ");return e.jsxs("div",{className:t,...n,children:[l&&e.jsx("div",{className:"card__header",children:e.jsx("span",{className:"card__title",children:l})}),e.jsx("div",{className:"card__body",children:c}),r&&e.jsx("div",{className:"card__footer",children:r})]})},K=({checked:l,defaultChecked:c,onChange:r,label:a,disabled:s=!1,name:n,value:t,className:o="","aria-label":i,..._})=>{const d=p=>{s||r==null||r(p.target.checked)},f=["checkbox",s&&"checkbox--disabled",o].filter(Boolean).join(" ");return e.jsxs("label",{className:f,children:[e.jsx("input",{type:"checkbox",className:"checkbox__input",checked:l,defaultChecked:c,onChange:d,disabled:s,name:n,value:t,"aria-label":i||a,..._}),e.jsx("span",{className:"checkbox__box","aria-hidden":"true"}),a&&e.jsx("span",{className:"checkbox__label",children:a})]})},M=({prompt:l="C:\\>",onCommand:c,autoFocus:r=!1,className:a="",placeholder:s,disabled:n=!1})=>{const[t,o]=b.useState(""),i=b.useRef(null);b.useEffect(()=>{r&&i.current&&i.current.focus()},[r]);const _=f=>{f.key==="Enter"&&t.trim()&&!n&&(c(t.trim()),o(""))},d=()=>{!n&&i.current&&i.current.focus()};return e.jsxs("div",{className:`command-prompt ${n?"command-prompt--disabled":""} ${a}`.trim(),onClick:d,role:"textbox","aria-label":"Command prompt",children:[e.jsx("span",{className:"command-prompt__prompt","aria-hidden":"true",children:l}),e.jsx("input",{ref:i,className:"command-prompt__input",value:t,onChange:f=>o(f.target.value),onKeyDown:_,autoFocus:r,spellCheck:!1,autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",placeholder:s,disabled:n,"aria-label":"Command input"}),e.jsx("span",{className:"command-prompt__cursor","aria-hidden":"true",children:"█"})]})},L=({value:l,max:c=100,variant:r="default",size:a="medium",showLabel:s=!1,className:n="","aria-label":t,...o})=>{const i=Math.min(100,Math.max(0,l/c*100)),_=Math.round(i/5),d=20-_,f=["progress",`progress--${r}`,`progress--${a}`,n].filter(Boolean).join(" ");return e.jsxs("div",{className:f,role:"progressbar","aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":c,"aria-label":t||`Progress: ${Math.round(i)}%`,...o,children:[e.jsxs("span",{className:"progress__bar",children:[e.jsx("span",{className:"progress__fill",children:"█".repeat(_)}),e.jsx("span",{className:"progress__empty",children:"░".repeat(d)})]}),s&&e.jsxs("span",{className:"progress__label",children:[Math.round(i),"%"]})]})},I=b.forwardRef(({variant:l="default",className:c="",disabled:r,...a},s)=>{const n=["input",`input--${l}`,r&&"input--disabled",c].filter(Boolean).join(" ");return e.jsx("input",{ref:s,className:n,disabled:r,"aria-invalid":l==="error",...a})});I.displayName="Input";const q=({size:l="medium",title:c="MS-DOS Terminal",state:r="active",resizable:a=!0,minimizable:s=!0,maximizable:n=!0,closeable:t=!0,children:o,onMinimize:i,onMaximize:_,onClose:d,onFocus:f,className:p="",autoFocus:g=!1})=>{const[y,m]=b.useState(r),[u,N]=b.useState(!1),k=b.useRef(null);b.useEffect(()=>{g&&k.current&&k.current.focus()},[g]);const v=()=>{m("minimized"),i==null||i()},S=()=>{N(!u),_==null||_()},$=()=>{d==null||d()},B=()=>{m("active"),f==null||f()},V=C=>{C.altKey&&C.key==="F4"&&t&&(C.preventDefault(),$())};return y==="minimized"?e.jsx("div",{className:`terminal terminal--minimized ${p}`.trim(),onClick:B,role:"button",tabIndex:0,"aria-label":`Restore ${c} window`,onKeyDown:C=>C.key==="Enter"&&B(),children:e.jsxs("div",{className:"terminal__taskbar-item",children:[e.jsx(w,{name:"App",size:"S"}),e.jsx("span",{className:"terminal__taskbar-title",children:c})]})}):e.jsxs("div",{ref:k,className:`terminal terminal--${l} terminal--${y} ${u?"terminal--maximized":""} ${p}`.trim(),tabIndex:0,role:"dialog","aria-label":`${c} terminal window`,onFocus:B,onKeyDown:V,children:[e.jsxs("div",{className:"terminal__title-bar",children:[e.jsxs("div",{className:"terminal__title",children:[e.jsx(w,{name:"App",size:"S","aria-hidden":"true"}),e.jsx("span",{className:"terminal__title-text",children:c})]}),e.jsxs("div",{className:"terminal__controls",children:[s&&e.jsx("button",{className:"terminal__control terminal__control--minimize",onClick:v,"aria-label":"Minimize window",title:"Minimize",children:e.jsx(w,{name:"Cancel",size:"S"})}),n&&e.jsx("button",{className:"terminal__control terminal__control--maximize",onClick:S,"aria-label":u?"Restore window":"Maximize window",title:u?"Restore":"Maximize",children:e.jsx(w,{name:u?"Fullscreen":"Add",size:"S"})}),t&&e.jsx("button",{className:"terminal__control terminal__control--close",onClick:$,"aria-label":"Close window",title:"Close",children:e.jsx(w,{name:"Close",size:"S"})})]})]}),e.jsx("div",{className:"terminal__content",role:"main",children:o||e.jsx("div",{className:"terminal__default-content",children:e.jsxs("div",{className:"terminal__prompt",children:[e.jsx("span",{className:"terminal__path",children:"C:\\\\>"}),e.jsx("span",{className:"terminal__cursor",children:"█"})]})})}),a&&e.jsx("div",{className:"terminal__resize-handle","aria-hidden":"true"})]})},O=({tabs:l,variant:c="underline",size:r="medium",activeTab:a,defaultActiveTab:s,onTabChange:n,className:t="",...o})=>{var y;const[i,_]=b.useState(s||((y=l[0])==null?void 0:y.id)||""),d=a!==void 0?a:i,f=b.useCallback((m,u)=>{u||(a===void 0&&_(m),n==null||n(m))},[a,n]),p=b.useCallback((m,u)=>{var S;const N=l.filter($=>!$.disabled),k=N.findIndex($=>$.id===l[u].id);let v=null;switch(m.key){case"ArrowLeft":case"ArrowUp":m.preventDefault(),v=k>0?k-1:N.length-1;break;case"ArrowRight":case"ArrowDown":m.preventDefault(),v=k<N.length-1?k+1:0;break;case"Home":m.preventDefault(),v=0;break;case"End":m.preventDefault(),v=N.length-1;break}if(v!==null){const $=N[v];f($.id,$.disabled),(S=document.querySelectorAll('[role="tab"]:not([disabled])')[v])==null||S.focus()}},[l,f]),g=["tabs",`tabs--${c}`,`tabs--${r}`,t].filter(Boolean).join(" ");return e.jsx("div",{className:g,role:"tablist",...o,children:l.map((m,u)=>{const N=d===m.id,k=["tabs__tab",N&&"tabs__tab--active",m.disabled&&"tabs__tab--disabled"].filter(Boolean).join(" ");return e.jsx("button",{role:"tab",id:`tab-${m.id}`,"aria-selected":N,tabIndex:N?0:-1,disabled:m.disabled,className:k,onClick:()=>f(m.id,m.disabled),onKeyDown:v=>p(v,u),children:m.label},m.id)})})},P=({variant:l="default",size:c="medium",dot:r=!1,children:a,className:s="",...n})=>{const t=["badge",`badge--${l}`,`badge--${c}`,r&&"badge--with-dot",s].filter(Boolean).join(" ");return e.jsxs("span",{className:t,...n,children:[r&&e.jsx("span",{className:"badge__dot","aria-hidden":"true"}),e.jsx("span",{className:"badge__content",children:a})]})},U=({checked:l,defaultChecked:c=!1,onCheckedChange:r,disabled:a=!1,name:s,value:n,className:t="",...o})=>{const[i,_]=b.useState(c),d=l!==void 0,f=d?l:i,p=()=>{if(a)return;const m=!f;d||_(m),r==null||r(m)},g=m=>{(m.key===" "||m.key==="Enter")&&(m.preventDefault(),p())},y=["switch",f&&"switch--checked",a&&"switch--disabled",t].filter(Boolean).join(" ");return e.jsxs("button",{type:"button",role:"switch","aria-checked":f,"aria-disabled":a,className:y,onClick:p,onKeyDown:g,disabled:a,...o,children:[e.jsx("span",{className:"switch__track",children:e.jsx("span",{className:"switch__thumb"})}),s&&e.jsx("input",{type:"hidden",name:s,value:f?n||"on":""})]})},W=({trail:l=[],currentLabel:c,showBackArrow:r=!0,separator:a="/",linkComponent:s,className:n=""})=>{const t=["breadcrumb",n].filter(Boolean).join(" "),o=(i,_)=>{const d=e.jsxs(e.Fragment,{children:[r&&_&&e.jsx("span",{className:"breadcrumb__back-arrow","aria-hidden":"true",children:"<"}),e.jsx("span",{children:i.label})]});return s?e.jsx(s,{href:i.href,className:"breadcrumb__link",children:d}):e.jsx("a",{href:i.href,className:"breadcrumb__link",children:d})};return e.jsx("nav",{"aria-label":"Breadcrumb",className:t,children:e.jsxs("ol",{className:"breadcrumb__list",children:[l.map((i,_)=>{const d=_===l.length-1,f=_<l.length-1;return e.jsxs("li",{className:"breadcrumb__item",children:[o(i,d),f&&e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})]},`${i.href}-${i.label}`)}),l.length>0&&e.jsx("li",{className:"breadcrumb__item",children:e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})}),e.jsx("li",{className:"breadcrumb__item breadcrumb__item--current","aria-current":"page",children:e.jsx("span",{className:"breadcrumb__current",children:c})})]})})},Q=({scanlines:l=!0,glow:c=!0,flicker:r=!0,intensity:a=1,className:s=""})=>{const n=["retro-effects",s].filter(Boolean).join(" "),t={"--retro-intensity":a};return e.jsxs("div",{className:n,style:t,"aria-hidden":"true",children:[l&&e.jsx("div",{className:"retro-effects__scanlines"}),c&&e.jsx("div",{className:"retro-effects__glow"}),r&&e.jsx("div",{className:"retro-effects__flicker"})]})},F=({shape:l="circle",variant:c="default",isActive:r=!1,label:a,labelPosition:s="left",size:n="medium",className:t="",onClick:o,...i})=>{const _=["timeline-node",`timeline-node--${l}`,`timeline-node--${c}`,`timeline-node--${n}`,`timeline-node--label-${s}`,r&&"timeline-node--active",o&&"timeline-node--interactive",t].filter(Boolean).join(" "),d=()=>{o&&o()},f=p=>{o&&(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),o())};return e.jsxs("div",{className:_,onClick:d,onKeyDown:f,role:o?"button":void 0,tabIndex:o?0:void 0,"aria-pressed":o?r:void 0,...i,children:[a&&s==="left"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--left",children:a}),a&&s==="top"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--top",children:a}),e.jsx("span",{className:"timeline-node__marker","aria-hidden":"true"}),a&&s==="right"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--right",children:a}),a&&s==="bottom"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--bottom",children:a})]})},G=({isOpen:l,onClose:c,title:r,children:a,footer:s,className:n=""})=>{const t=b.useRef(null),o=b.useId();b.useEffect(()=>{const d=t.current;d&&(l&&!d.open?d.showModal():!l&&d.open&&d.close())},[l]);const i=()=>{c()},_=d=>{d.target===t.current&&c()};return j.createPortal(e.jsx("dialog",{ref:t,className:`modal ${n}`.trim(),"aria-labelledby":o,onClose:i,onClick:_,children:e.jsxs("div",{className:"modal__container",children:[e.jsxs("header",{className:"modal__header",children:[e.jsx("h2",{id:o,className:"modal__title",children:r}),e.jsx("button",{type:"button",className:"modal__close",onClick:c,"aria-label":"Close modal",children:e.jsx(w,{name:"Close",size:"S"})})]}),e.jsx("div",{className:"modal__body",children:a}),s&&e.jsx("footer",{className:"modal__footer",children:s})]})}),document.body)},H=({label:l,value:c,trend:r,trendValue:a,size:s="medium",className:n="",...t})=>{const o=["stat",`stat--${s}`,n].filter(Boolean).join(" "),i=["stat__trend",r&&`stat__trend--${r}`].filter(Boolean).join(" "),_=()=>{switch(r){case"up":return"▲";case"down":return"▼";case"neutral":return"►";default:return null}},d=()=>{switch(r){case"up":return"increasing";case"down":return"decreasing";case"neutral":return"unchanged";default:return""}};return e.jsxs("div",{className:o,...t,children:[e.jsx("span",{className:"stat__label",children:l}),e.jsx("span",{className:"stat__value",children:c}),r&&e.jsxs("span",{className:i,"aria-label":`Trend: ${d()}${a?`, ${a}`:""}`,children:[e.jsx("span",{className:"stat__trend-icon","aria-hidden":"true",children:_()}),a&&e.jsx("span",{className:"stat__trend-value",children:a})]})]})},J="0.4.0";h.AccordionFill=A,h.Alert=z,h.Badge=P,h.Breadcrumb=W,h.Button=x,h.Card=T,h.Checkbox=K,h.CommandPrompt=M,h.Icon=w,h.Input=I,h.Modal=G,h.Progress=L,h.RetroEffects=Q,h.Section=D,h.Stat=H,h.Switch=U,h.Tabs=O,h.Terminal=q,h.TimelineNode=F,h.version=J,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
|
|
6
|
+
`.trim(),children:[e.jsxs("button",{className:"section__header",onClick:i,"aria-expanded":t,children:[e.jsx("div",{className:"section__title",children:l}),e.jsx("div",{className:"section__icon",children:e.jsx(k,{name:t?"Chevron Up":"Chevron Down",size:"S"})})]}),t&&e.jsx("div",{className:"section__content",children:c})]})},z=({sections:l,defaultExpandedIndex:c=-1})=>{const[r,a]=b.useState(c),s=(n,t)=>{a(t?n:-1)};return e.jsx("div",{className:"accordion-fill",children:l.map((n,t)=>e.jsx(D,{title:n.title,defaultExpanded:t===c,onToggle:o=>s(t,o),children:n.content},t))})},T=({variant:l="primary",size:c="medium",type:r="button",disabled:a=!1,loading:s=!1,children:n,onClick:t,className:o="",fullWidth:i=!1,...d})=>{const f=p=>{a||s||t==null||t(p)},h=["button",`button--${l}`,`button--${c}`,a&&"button--disabled",s&&"button--loading",i&&"button--full-width",o].filter(Boolean).join(" ");return e.jsxs("button",{type:r,className:h,onClick:f,disabled:a||s,"aria-disabled":a||s,...d,children:[s&&e.jsx("span",{className:"button__loading-indicator","aria-hidden":"true",children:"█"}),e.jsx("span",{className:`button__content ${s?"button__content--loading":""}`,children:n})]})},x=({title:l,children:c,footer:r,variant:a="default",className:s="",...n})=>{const t=["card",`card--${a}`,s].filter(Boolean).join(" ");return e.jsxs("div",{className:t,...n,children:[l&&e.jsx("div",{className:"card__header",children:e.jsx("span",{className:"card__title",children:l})}),e.jsx("div",{className:"card__body",children:c}),r&&e.jsx("div",{className:"card__footer",children:r})]})},K=({checked:l,defaultChecked:c,onChange:r,label:a,disabled:s=!1,name:n,value:t,className:o="","aria-label":i,...d})=>{const f=p=>{s||r==null||r(p.target.checked)},h=["checkbox",s&&"checkbox--disabled",o].filter(Boolean).join(" ");return e.jsxs("label",{className:h,children:[e.jsx("input",{type:"checkbox",className:"checkbox__input",checked:l,defaultChecked:c,onChange:f,disabled:s,name:n,value:t,"aria-label":i||a,...d}),e.jsx("span",{className:"checkbox__box","aria-hidden":"true"}),a&&e.jsx("span",{className:"checkbox__label",children:a})]})},M=({prompt:l="C:\\>",onCommand:c,autoFocus:r=!1,className:a="",placeholder:s,disabled:n=!1})=>{const[t,o]=b.useState(""),i=b.useRef(null);b.useEffect(()=>{r&&i.current&&i.current.focus()},[r]);const d=h=>{h.key==="Enter"&&t.trim()&&!n&&(c(t.trim()),o(""))},f=()=>{!n&&i.current&&i.current.focus()};return e.jsxs("div",{className:`command-prompt ${n?"command-prompt--disabled":""} ${a}`.trim(),onClick:f,role:"textbox","aria-label":"Command prompt",children:[e.jsx("span",{className:"command-prompt__prompt","aria-hidden":"true",children:l}),e.jsx("input",{ref:i,className:"command-prompt__input",value:t,onChange:h=>o(h.target.value),onKeyDown:d,autoFocus:r,spellCheck:!1,autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",placeholder:s,disabled:n,"aria-label":"Command input"}),e.jsx("span",{className:"command-prompt__cursor","aria-hidden":"true",children:"█"})]})},L=({value:l,max:c=100,variant:r="default",size:a="medium",showLabel:s=!1,className:n="","aria-label":t,...o})=>{const i=Math.min(100,Math.max(0,l/c*100)),d=Math.round(i/5),f=20-d,h=["progress",`progress--${r}`,`progress--${a}`,n].filter(Boolean).join(" ");return e.jsxs("div",{className:h,role:"progressbar","aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":c,"aria-label":t||`Progress: ${Math.round(i)}%`,...o,children:[e.jsxs("span",{className:"progress__bar",children:[e.jsx("span",{className:"progress__fill",children:"█".repeat(d)}),e.jsx("span",{className:"progress__empty",children:"░".repeat(f)})]}),s&&e.jsxs("span",{className:"progress__label",children:[Math.round(i),"%"]})]})},E=b.forwardRef(({variant:l="default",className:c="",disabled:r,...a},s)=>{const n=["input",`input--${l}`,r&&"input--disabled",c].filter(Boolean).join(" ");return e.jsx("input",{ref:s,className:n,disabled:r,"aria-invalid":l==="error",...a})});E.displayName="Input";const q=({size:l="medium",title:c="MS-DOS Terminal",state:r="active",resizable:a=!0,minimizable:s=!0,maximizable:n=!0,closeable:t=!0,children:o,onMinimize:i,onMaximize:d,onClose:f,onFocus:h,className:p="",autoFocus:y=!1})=>{const[u,m]=b.useState(r),[N,w]=b.useState(!1),g=b.useRef(null);b.useEffect(()=>{y&&g.current&&g.current.focus()},[y]);const v=()=>{m("minimized"),i==null||i()},S=()=>{w(!N),d==null||d()},$=()=>{f==null||f()},B=()=>{m("active"),h==null||h()},J=C=>{C.altKey&&C.key==="F4"&&t&&(C.preventDefault(),$())};return u==="minimized"?e.jsx("div",{className:`terminal terminal--minimized ${p}`.trim(),onClick:B,role:"button",tabIndex:0,"aria-label":`Restore ${c} window`,onKeyDown:C=>C.key==="Enter"&&B(),children:e.jsxs("div",{className:"terminal__taskbar-item",children:[e.jsx(k,{name:"App",size:"S"}),e.jsx("span",{className:"terminal__taskbar-title",children:c})]})}):e.jsxs("div",{ref:g,className:`terminal terminal--${l} terminal--${u} ${N?"terminal--maximized":""} ${p}`.trim(),tabIndex:0,role:"dialog","aria-label":`${c} terminal window`,onFocus:B,onKeyDown:J,children:[e.jsxs("div",{className:"terminal__title-bar",children:[e.jsxs("div",{className:"terminal__title",children:[e.jsx(k,{name:"App",size:"S","aria-hidden":"true"}),e.jsx("span",{className:"terminal__title-text",children:c})]}),e.jsxs("div",{className:"terminal__controls",children:[s&&e.jsx("button",{className:"terminal__control terminal__control--minimize",onClick:v,"aria-label":"Minimize window",title:"Minimize",children:e.jsx(k,{name:"Cancel",size:"S"})}),n&&e.jsx("button",{className:"terminal__control terminal__control--maximize",onClick:S,"aria-label":N?"Restore window":"Maximize window",title:N?"Restore":"Maximize",children:e.jsx(k,{name:N?"Fullscreen":"Add",size:"S"})}),t&&e.jsx("button",{className:"terminal__control terminal__control--close",onClick:$,"aria-label":"Close window",title:"Close",children:e.jsx(k,{name:"Close",size:"S"})})]})]}),e.jsx("div",{className:"terminal__content",role:"main",children:o||e.jsx("div",{className:"terminal__default-content",children:e.jsxs("div",{className:"terminal__prompt",children:[e.jsx("span",{className:"terminal__path",children:"C:\\\\>"}),e.jsx("span",{className:"terminal__cursor",children:"█"})]})})}),a&&e.jsx("div",{className:"terminal__resize-handle","aria-hidden":"true"})]})},P=({tabs:l,variant:c="underline",size:r="medium",activeTab:a,defaultActiveTab:s,onTabChange:n,className:t="",...o})=>{var u;const[i,d]=b.useState(s||((u=l[0])==null?void 0:u.id)||""),f=a!==void 0?a:i,h=b.useCallback((m,N)=>{N||(a===void 0&&d(m),n==null||n(m))},[a,n]),p=b.useCallback((m,N)=>{var S;const w=l.filter($=>!$.disabled),g=w.findIndex($=>$.id===l[N].id);let v=null;switch(m.key){case"ArrowLeft":case"ArrowUp":m.preventDefault(),v=g>0?g-1:w.length-1;break;case"ArrowRight":case"ArrowDown":m.preventDefault(),v=g<w.length-1?g+1:0;break;case"Home":m.preventDefault(),v=0;break;case"End":m.preventDefault(),v=w.length-1;break}if(v!==null){const $=w[v];h($.id,$.disabled),(S=document.querySelectorAll('[role="tab"]:not([disabled])')[v])==null||S.focus()}},[l,h]),y=["tabs",`tabs--${c}`,`tabs--${r}`,t].filter(Boolean).join(" ");return e.jsx("div",{className:y,role:"tablist",...o,children:l.map((m,N)=>{const w=f===m.id,g=["tabs__tab",w&&"tabs__tab--active",m.disabled&&"tabs__tab--disabled"].filter(Boolean).join(" ");return e.jsx("button",{role:"tab",id:`tab-${m.id}`,"aria-selected":w,tabIndex:w?0:-1,disabled:m.disabled,className:g,onClick:()=>h(m.id,m.disabled),onKeyDown:v=>p(v,N),children:m.label},m.id)})})},O=({variant:l="default",size:c="medium",dot:r=!1,children:a,className:s="",...n})=>{const t=["badge",`badge--${l}`,`badge--${c}`,r&&"badge--with-dot",s].filter(Boolean).join(" ");return e.jsxs("span",{className:t,...n,children:[r&&e.jsx("span",{className:"badge__dot","aria-hidden":"true"}),e.jsx("span",{className:"badge__content",children:a})]})},U=({checked:l,defaultChecked:c=!1,onCheckedChange:r,disabled:a=!1,name:s,value:n,className:t="",...o})=>{const[i,d]=b.useState(c),f=l!==void 0,h=f?l:i,p=()=>{if(a)return;const m=!h;f||d(m),r==null||r(m)},y=m=>{(m.key===" "||m.key==="Enter")&&(m.preventDefault(),p())},u=["switch",h&&"switch--checked",a&&"switch--disabled",t].filter(Boolean).join(" ");return e.jsxs("button",{type:"button",role:"switch","aria-checked":h,"aria-disabled":a,className:u,onClick:p,onKeyDown:y,disabled:a,...o,children:[e.jsx("span",{className:"switch__track",children:e.jsx("span",{className:"switch__thumb"})}),s&&e.jsx("input",{type:"hidden",name:s,value:h?n||"on":""})]})},W=({trail:l=[],currentLabel:c,showBackArrow:r=!0,separator:a="/",linkComponent:s,className:n=""})=>{const t=["breadcrumb",n].filter(Boolean).join(" "),o=(i,d)=>{const f=e.jsxs(e.Fragment,{children:[r&&d&&e.jsx("span",{className:"breadcrumb__back-arrow","aria-hidden":"true",children:"<"}),e.jsx("span",{children:i.label})]});return s?e.jsx(s,{href:i.href,className:"breadcrumb__link",children:f}):e.jsx("a",{href:i.href,className:"breadcrumb__link",children:f})};return e.jsx("nav",{"aria-label":"Breadcrumb",className:t,children:e.jsxs("ol",{className:"breadcrumb__list",children:[l.map((i,d)=>{const f=d===l.length-1,h=d<l.length-1;return e.jsxs("li",{className:"breadcrumb__item",children:[o(i,f),h&&e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})]},`${i.href}-${i.label}`)}),l.length>0&&e.jsx("li",{className:"breadcrumb__item",children:e.jsx("span",{className:"breadcrumb__separator","aria-hidden":"true",children:a})}),e.jsx("li",{className:"breadcrumb__item breadcrumb__item--current","aria-current":"page",children:e.jsx("span",{className:"breadcrumb__current",children:c})})]})})},F=({scanlines:l=!0,glow:c=!0,flicker:r=!0,bloom:a=!1,powered:s=!0,intensity:n=1,className:t=""})=>{const o=b.useRef(s),[i,d]=b.useState(s?"on":"off");b.useEffect(()=>{const u=o.current;o.current=s,u!==s&&d(s?"powering-on":"powering-off")},[s]);const f=u=>{u.animationName!=="retro-power-on"&&u.animationName!=="retro-power-off"||(i==="powering-on"?d("on"):i==="powering-off"&&d("off"))},h=["retro-effects",i==="powering-off"&&"retro-effects--powering-off",i==="powering-on"&&"retro-effects--powering-on",i==="off"&&"retro-effects--off",t].filter(Boolean).join(" "),p={"--retro-intensity":n},y=i!=="off";return e.jsx("div",{className:h,style:p,"aria-hidden":"true",onAnimationEnd:f,children:y&&e.jsxs(e.Fragment,{children:[l&&e.jsx("div",{className:"retro-effects__scanlines"}),c&&e.jsx("div",{className:"retro-effects__glow"}),r&&e.jsx("div",{className:"retro-effects__flicker"}),a&&e.jsx("div",{className:"retro-effects__bloom"})]})})},Q=({shape:l="circle",variant:c="default",isActive:r=!1,label:a,labelPosition:s="left",size:n="medium",className:t="",onClick:o,...i})=>{const d=["timeline-node",`timeline-node--${l}`,`timeline-node--${c}`,`timeline-node--${n}`,`timeline-node--label-${s}`,r&&"timeline-node--active",o&&"timeline-node--interactive",t].filter(Boolean).join(" "),f=()=>{o&&o()},h=p=>{o&&(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),o())};return e.jsxs("div",{className:d,onClick:f,onKeyDown:h,role:o?"button":void 0,tabIndex:o?0:void 0,"aria-pressed":o?r:void 0,...i,children:[a&&s==="left"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--left",children:a}),a&&s==="top"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--top",children:a}),e.jsx("span",{className:"timeline-node__marker","aria-hidden":"true"}),a&&s==="right"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--right",children:a}),a&&s==="bottom"&&e.jsx("span",{className:"timeline-node__label timeline-node__label--bottom",children:a})]})},V=({isOpen:l,onClose:c,title:r,children:a,footer:s,className:n=""})=>{const t=b.useRef(null),o=b.useId();b.useEffect(()=>{const f=t.current;f&&(l&&!f.open?f.showModal():!l&&f.open&&f.close())},[l]);const i=()=>{c()},d=f=>{f.target===t.current&&c()};return I.createPortal(e.jsx("dialog",{ref:t,className:`modal ${n}`.trim(),"aria-labelledby":o,onClose:i,onClick:d,children:e.jsxs("div",{className:"modal__container",children:[e.jsxs("header",{className:"modal__header",children:[e.jsx("h2",{id:o,className:"modal__title",children:r}),e.jsx("button",{type:"button",className:"modal__close",onClick:c,"aria-label":"Close modal",children:e.jsx(k,{name:"Close",size:"S"})})]}),e.jsx("div",{className:"modal__body",children:a}),s&&e.jsx("footer",{className:"modal__footer",children:s})]})}),document.body)},G=({label:l,value:c,trend:r,trendValue:a,size:s="medium",className:n="",...t})=>{const o=["stat",`stat--${s}`,n].filter(Boolean).join(" "),i=["stat__trend",r&&`stat__trend--${r}`].filter(Boolean).join(" "),d=()=>{switch(r){case"up":return"▲";case"down":return"▼";case"neutral":return"►";default:return null}},f=()=>{switch(r){case"up":return"increasing";case"down":return"decreasing";case"neutral":return"unchanged";default:return""}};return e.jsxs("div",{className:o,...t,children:[e.jsx("span",{className:"stat__label",children:l}),e.jsx("span",{className:"stat__value",children:c}),r&&e.jsxs("span",{className:i,"aria-label":`Trend: ${f()}${a?`, ${a}`:""}`,children:[e.jsx("span",{className:"stat__trend-icon","aria-hidden":"true",children:d()}),a&&e.jsx("span",{className:"stat__trend-value",children:a})]})]})},H="0.4.0";_.AccordionFill=z,_.Alert=A,_.Badge=O,_.Breadcrumb=W,_.Button=T,_.Card=x,_.Checkbox=K,_.CommandPrompt=M,_.Icon=k,_.Input=E,_.Modal=V,_.Progress=L,_.RetroEffects=F,_.Section=D,_.Stat=G,_.Switch=U,_.Tabs=P,_.Terminal=q,_.TimelineNode=Q,_.version=H,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
package/src/styles/tokens.css
CHANGED
|
@@ -70,6 +70,8 @@
|
|
|
70
70
|
--duration-fast: 100ms;
|
|
71
71
|
--duration-normal: 200ms;
|
|
72
72
|
--duration-slow: 400ms;
|
|
73
|
+
--duration-power-off: 400ms; /** CRT power-off animation */
|
|
74
|
+
--duration-power-on: 600ms; /** CRT power-on animation (phosphor warm-up) */
|
|
73
75
|
--opacity-0: 0; /** Fully transparent */
|
|
74
76
|
--opacity-10: 0.1; /** Subtle hover overlays */
|
|
75
77
|
--opacity-25: 0.25; /** Light overlays */
|
|
@@ -94,6 +96,8 @@
|
|
|
94
96
|
--effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
|
|
95
97
|
--effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
|
|
96
98
|
--effects-drop-shadow: rgba(0, 0, 0, 0.5); /** Terminal window drop shadow */
|
|
99
|
+
--effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
|
|
100
|
+
--effects-crt-background: #060300; /** Dark warm-black for CRT screen (not pure black) */
|
|
97
101
|
--color-semantic-background-primary: var(--color-cga-black);
|
|
98
102
|
--color-semantic-background-secondary: var(--color-cga-dark-gray);
|
|
99
103
|
--color-semantic-background-accent: var(--color-cga-amber);
|