eidotter 0.36.0 → 0.37.0

package/dist/components/Progress/components/index.js

@@ -0,0 +1 @@
+export { Progress } from './Progress.js';

package/dist/components/Progress/index.d.ts

@@ -1,2 +1,2 @@
-export { Progress } from './components';
-export type { ProgressProps } from './components';
+export { Progress } from './components/index.js';
+export type { ProgressProps } from './components/index.js';

package/dist/components/Progress/index.js

@@ -0,0 +1 @@
+export { Progress } from './components/index.js';

package/dist/components/RetroEffects/components/RetroEffects.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './RetroEffects.css';
 export type PowerState = 'on' | 'powering-on' | 'powering-off' | 'off';
 export interface RetroEffectsProps {
     /**

package/dist/components/RetroEffects/components/RetroEffects.js

@@ -0,0 +1,163 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { prefersReducedMotion } from '../../../utils/prefersReducedMotion.js';
+const DEFAULT_BOOT_STORAGE_KEY = 'eidotter:retro-boot';
+const BOOT_FLAG_VALUE = '1';
+/** Read a sessionStorage flag, swallowing access errors (private mode, SSR). */
+const hasBootedThisSession = (key) => {
+    if (typeof window === 'undefined')
+        return false;
+    try {
+        return window.sessionStorage.getItem(key) === BOOT_FLAG_VALUE;
+    }
+    catch {
+        return false;
+    }
+};
+/** Record the sessionStorage flag, swallowing access errors. */
+const markBootedThisSession = (key) => {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.sessionStorage.setItem(key, BOOT_FLAG_VALUE);
+    }
+    catch {
+        /* storage unavailable — boot still plays, just won't be remembered */
+    }
+};
+/**
+ * CRT Monitor Effects component for authentic DOS terminal aesthetics
+ *
+ * Features:
+ * - Scanline overlay (horizontal lines)
+ * - Glow vignette (phosphor edge darkening)
+ * - Subtle CRT flicker animation (WCAG 2.3.1 compliant)
+ * - Phosphor bloom effect (opt-in)
+ * - Power on/off animations
+ * - Configurable intensity
+ * - Respects reduced motion preferences
+ */
+export const RetroEffects = ({ scanlines = true, glow = true, flicker = true, bloom = false, powered = true, boot = false, bootOnce = false, bootStorageKey = DEFAULT_BOOT_STORAGE_KEY, intensity = 1, className, onPowerStateChange, onPowerOn, onPowerOff, onBootComplete, }) => {
+    const prevPoweredRef = useRef(powered);
+    const [powerState, setPowerState] = useState(powered ? 'on' : 'off');
+    // Non-gated boot keeps its on-mount behavior; the gated (bootOnce) path starts
+    // un-booted and is decided post-mount so SSR/first paint never render a stale
+    // overlay (no hydration mismatch on reload when the flag is already set).
+    // (Non-gated boot is intentionally NOT SSR-gated — it plays on every mount.)
+    const [booting, setBooting] = useState(boot && !bootOnce);
+    // Boot completes exactly once per mount. Guards against the StrictMode dev
+    // double-invoke of effects and the (theoretical) animationend + safety-timeout
+    // race both calling through twice.
+    const bootSignaledRef = useRef(false);
+    // Pin the storage key to its mount-time value. The read (decision effect) and
+    // the write (completeBoot, recreated each render) must use the SAME key, or a
+    // consumer passing a changing key would write a different key than was checked
+    // and the next visit would replay. This makes the "read once on mount" contract
+    // structural rather than documentation-only.
+    const bootStorageKeyRef = useRef(bootStorageKey);
+    // Keep the latest onBootComplete without re-running the mount-only effects that
+    // call it (adding it to their deps would re-trigger the boot decision).
+    const onBootCompleteRef = useRef(onBootComplete);
+    useEffect(() => {
+        onBootCompleteRef.current = onBootComplete;
+    });
+    // One-shot completion signal: settle the layer, remember the session, notify.
+    const signalBootComplete = () => {
+        if (bootSignaledRef.current)
+            return;
+        bootSignaledRef.current = true;
+        onBootCompleteRef.current?.();
+    };
+    // Settle the boot layer and signal completion. For the gated path the session
+    // flag is recorded HERE (on completion) rather than at the play decision, so a
+    // discarded StrictMode dev double-mount doesn't pre-set the flag and suppress
+    // the real boot. The flag is only "remembered" once a boot has actually run.
+    const completeBoot = () => {
+        setBooting(false);
+        if (bootOnce)
+            markBootedThisSession(bootStorageKeyRef.current);
+        signalBootComplete();
+    };
+    // Gated boot: decide once on mount whether this tab session has already booted.
+    useEffect(() => {
+        if (!boot || !bootOnce)
+            return;
+        if (hasBootedThisSession(bootStorageKeyRef.current)) {
+            // Already shown this session — skip, but still signal completion so
+            // consumers sequencing boot text off onBootComplete don't stall.
+            signalBootComplete();
+            return;
+        }
+        setBooting(true);
+        // Mount-only: gating is a first-load decision, not reactive to prop churn.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Boot settles via the glow's animationend; reduced-motion (where the boot
+    // layer is display:none and never animates) and any missed event settle via
+    // this effect instead.
+    useEffect(() => {
+        if (!booting)
+            return;
+        if (prefersReducedMotion()) {
+            completeBoot();
+            return;
+        }
+        const safety = window.setTimeout(() => {
+            completeBoot();
+        }, 1200);
+        return () => window.clearTimeout(safety);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [booting]);
+    const handleBootAnimationEnd = (event) => {
+        if (event.animationName !== 'eidotter-retro-boot-glow')
+            return;
+        completeBoot();
+    };
+    // Track power state transitions (intentional: animation state machine requires
+    // syncing prop changes to transitional states, settled by onAnimationEnd)
+    useEffect(() => {
+        const prevPowered = prevPoweredRef.current;
+        prevPoweredRef.current = powered;
+        if (prevPowered !== powered) {
+            const newState = powered ? 'powering-on' : 'powering-off';
+            setPowerState(newState);
+            onPowerStateChange?.(newState);
+        }
+    }, [powered, onPowerStateChange]);
+    // Settle power state after animation/transition completes
+    const settlePowerState = () => {
+        if (powerState === 'powering-on') {
+            setPowerState('on');
+            onPowerStateChange?.('on');
+            onPowerOn?.();
+        }
+        else if (powerState === 'powering-off') {
+            setPowerState('off');
+            onPowerStateChange?.('off');
+            onPowerOff?.();
+        }
+    };
+    // Handle animation end to settle into final state
+    const handleAnimationEnd = (event) => {
+        // Only respond to power animations, ignore any other animations
+        if (event.animationName !== 'retro-power-on' && event.animationName !== 'retro-power-off') {
+            return;
+        }
+        settlePowerState();
+    };
+    // Handle transition end for reduced-motion mode where CSS replaces
+    // animations with opacity transitions
+    const handleTransitionEnd = (event) => {
+        if (event.propertyName !== 'opacity')
+            return;
+        if (powerState !== 'powering-on' && powerState !== 'powering-off')
+            return;
+        settlePowerState();
+    };
+    const opacityStyle = { '--retro-intensity': intensity };
+    // Don't render children when fully off
+    const isVisible = powerState !== 'off';
+    return (_jsxs("div", { className: cn('fixed inset-0 pointer-events-none z-[9999]', 'eidotter-retro-effects', powerState === 'powering-off' && 'eidotter-retro-effects--powering-off', powerState === 'powering-on' && 'eidotter-retro-effects--powering-on', powerState === 'off' && 'eidotter-retro-effects--off', className), style: opacityStyle, "aria-hidden": "true", onAnimationEnd: handleAnimationEnd, onTransitionEnd: handleTransitionEnd, children: [isVisible && (_jsxs(_Fragment, { children: [scanlines && _jsx("div", { className: "eidotter-retro-effects__scanlines" }), glow && _jsx("div", { className: "eidotter-retro-effects__glow" }), flicker && _jsx("div", { className: "eidotter-retro-effects__flicker" }), bloom && _jsx("div", { className: "eidotter-retro-effects__bloom" })] })), booting && (_jsxs("div", { className: "eidotter-retro-effects__boot", onAnimationEnd: handleBootAnimationEnd, children: [_jsx("div", { className: "eidotter-retro-effects__boot-panel eidotter-retro-effects__boot-panel--top" }), _jsx("div", { className: "eidotter-retro-effects__boot-panel eidotter-retro-effects__boot-panel--bottom" }), _jsx("div", { className: "eidotter-retro-effects__boot-line" }), _jsx("div", { className: "eidotter-retro-effects__boot-glow" })] }))] }));
+};

package/dist/components/RetroEffects/components/index.d.ts

@@ -1,2 +1,2 @@
-export { RetroEffects } from './RetroEffects';
-export type { RetroEffectsProps, PowerState } from './RetroEffects';
+export { RetroEffects } from './RetroEffects.js';
+export type { RetroEffectsProps, PowerState } from './RetroEffects.js';

package/dist/components/RetroEffects/components/index.js

@@ -0,0 +1 @@
+export { RetroEffects } from './RetroEffects.js';

package/dist/components/RetroEffects/index.d.ts

@@ -1,2 +1,2 @@
-export { RetroEffects } from './components';
-export type { RetroEffectsProps, PowerState } from './components';
+export { RetroEffects } from './components/index.js';
+export type { RetroEffectsProps, PowerState } from './components/index.js';

package/dist/components/RetroEffects/index.js

@@ -0,0 +1 @@
+export { RetroEffects } from './components/index.js';

package/dist/components/SectionHeading/components/SectionHeading.js

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+const toneClasses = {
+    default: 'text-dos-text-primary',
+    error: 'text-dos-error',
+    warning: 'text-dos-warning',
+    info: 'text-dos-info',
+};
+/**
+ * DOS-styled section heading — an uppercase `<h3>` label with an optional
+ * trailing `(count)` and tone-driven colour. Pure presentational.
+ *
+ * Ported from Steuerdash (DMNC-855); the steuerdash version hardcoded
+ * `text-cga-*` — this routes tones through `text-dos-*` semantic roles instead
+ * so the heading re-themes and stays AA-safe under amber-mono.
+ */
+export const SectionHeading = ({ title, count, tone = 'default', children, className, }) => (_jsxs("h3", { className: cn('eidotter-section-heading', 'font-dos uppercase tracking-wider mb-2 text-dos-text-sm', toneClasses[tone], className), children: [title, count !== undefined && ` (${count})`, children] }));
+SectionHeading.displayName = 'SectionHeading';

package/dist/components/SectionHeading/components/index.d.ts

@@ -1,2 +1,2 @@
-export { SectionHeading } from './SectionHeading';
-export type { SectionHeadingProps } from './SectionHeading';
+export { SectionHeading } from './SectionHeading.js';
+export type { SectionHeadingProps } from './SectionHeading.js';

package/dist/components/SectionHeading/components/index.js

@@ -0,0 +1 @@
+export { SectionHeading } from './SectionHeading.js';

package/dist/components/SectionHeading/index.d.ts

@@ -1,2 +1,2 @@
-export { SectionHeading } from './components';
-export type { SectionHeadingProps } from './components';
+export { SectionHeading } from './components/index.js';
+export type { SectionHeadingProps } from './components/index.js';

package/dist/components/SectionHeading/index.js

@@ -0,0 +1 @@
+export { SectionHeading } from './components/index.js';

package/dist/components/Select/components/Select.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+/**
+ * DOS-styled select — MVP wrapper around a native `<select>` (DMNC-860).
+ * Ported from Steuerdash.
+ *
+ * Font-size is set via inline style, not a `text-dos-*` class: Tailwind v4's
+ * Preflight form reset (`select { font-size: 100% }`) outranks utility classes
+ * on a native `<select>`, so the inline style is the reliable escape hatch
+ * (token-driven). Upstream component fix tracked at eidotter#349.
+ */
+export const Select = ({ value, options, onChange, id, disabled, className, 'aria-label': ariaLabel, }) => (_jsx("select", { id: id, "aria-label": ariaLabel, value: value, disabled: disabled, onChange: (e) => onChange(e.target.value), style: { fontSize: 'var(--typography-font-size-text-xs)' }, className: cn('eidotter-select', 'min-w-[5rem] cursor-pointer font-dos px-2 py-1', 'bg-dos-bg-secondary text-dos-text-primary border border-dos-border-default', 'hover:border-dos-text-accent focus:border-dos-text-accent focus:outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', className), children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }));
+Select.displayName = 'Select';

package/dist/components/Select/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Select } from './Select';
-export type { SelectProps, SelectOption } from './Select';
+export { Select } from './Select.js';
+export type { SelectProps, SelectOption } from './Select.js';

package/dist/components/Select/components/index.js

@@ -0,0 +1 @@
+export { Select } from './Select.js';

package/dist/components/Select/index.d.ts

@@ -1,2 +1,2 @@
-export { Select } from './components';
-export type { SelectProps, SelectOption } from './components';
+export { Select } from './components/index.js';
+export type { SelectProps, SelectOption } from './components/index.js';

package/dist/components/Select/index.js

@@ -0,0 +1 @@
+export { Select } from './components/index.js';

package/dist/components/Separator/components/Separator.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Separator.css';
 export interface SeparatorProps {
     /** Orientation of the separator line */
     orientation?: 'horizontal' | 'vertical';

package/dist/components/Separator/components/Separator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+const orientationClasses = {
+    horizontal: 'h-px w-full',
+    vertical: 'w-px h-full',
+};
+/**
+ * DOS-styled Separator component for visual division of content.
+ * Pure presentational — no React Aria needed.
+ */
+export const Separator = ({ orientation = 'horizontal', className, }) => (_jsx("div", { role: "separator", "aria-orientation": orientation, className: cn('shrink-0 bg-dos-border-default', 'eidotter-separator', orientationClasses[orientation], className) }));

package/dist/components/Separator/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Separator } from './Separator';
-export type { SeparatorProps } from './Separator';
+export { Separator } from './Separator.js';
+export type { SeparatorProps } from './Separator.js';

package/dist/components/Separator/components/index.js

@@ -0,0 +1 @@
+export { Separator } from './Separator.js';

package/dist/components/Separator/index.d.ts

@@ -1,2 +1,2 @@
-export { Separator } from './components';
-export type { SeparatorProps } from './components';
+export { Separator } from './components/index.js';
+export type { SeparatorProps } from './components/index.js';

package/dist/components/Separator/index.js

@@ -0,0 +1 @@
+export { Separator } from './components/index.js';

package/dist/components/Skeleton/components/Skeleton.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Skeleton.css';
 export type SkeletonVariant = 'text' | 'card' | 'figure' | 'timeline';
 export interface SkeletonProps {
     /** Placeholder shape */

package/dist/components/Skeleton/components/Skeleton.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+/**
+ * DOS/CGA loading placeholder. Instead of the modern smooth gray shimmer,
+ * placeholder lines are rows of shade characters (░ ▒ ▓) — character-cell
+ * by character-cell, like a screenful of unrendered text mode — with a CRT
+ * hum-bar glow band rolling top→bottom over them, phosphor-decay tail
+ * trailing upward, the way the refresh beat rolls down a CGA monitor.
+ *
+ * Purely presentational: render it while real content loads, then swap it
+ * out. The band is compositor-only (transform). Under
+ * `prefers-reduced-motion` it is replaced by a gentle opacity breathing;
+ * `prefers-contrast: high` disables all animation.
+ *
+ * Glyph rows are `aria-hidden`; the wrapper announces `label` via
+ * `role="status"`.
+ */
+// Deterministic shade textures — stable across renders/SSR, clipped by the
+// container so any width works. Light texture reads as pending body text;
+// the dense one as a pending heading / media area.
+const TEXTURE_LIGHT = '░░░░▒░░░░░░░▒░░░▒▒░░░░░░▒░░░░░░░▒░░░░▒░░';
+const TEXTURE_DENSE = '▒▒▓▒▒▒▒▓▒▒▒▒▒▓▒▒▒▒▒▒▓▒▒▒▒▓▒▒▒▒▒▓▒▒▒▒▒▓▒';
+const REPEAT = 6; // 240 cells — wider than any realistic container
+const DEFAULT_LINES = {
+    text: 3,
+    card: 3,
+    figure: 4,
+    timeline: 2,
+};
+const Line = ({ dense = false, width = 'full' }) => (_jsx("span", { className: cn('eidotter-skeleton__line', width === 'short' && 'eidotter-skeleton__line--short', width === 'meta' && 'eidotter-skeleton__line--meta'), children: (dense ? TEXTURE_DENSE : TEXTURE_LIGHT).repeat(REPEAT) }));
+function renderLines(count, dense = false, shortenLast = true) {
+    return Array.from({ length: count }, (_, i) => (_jsx(Line, { dense: dense, width: shortenLast && i === count - 1 && count > 1 ? 'short' : 'full' }, i)));
+}
+export const Skeleton = ({ variant = 'text', lines, animated = true, label = 'Loading', className, }) => {
+    const lineCount = Math.max(1, lines ?? DEFAULT_LINES[variant]);
+    let glyphs;
+    switch (variant) {
+        case 'card':
+            glyphs = (_jsxs(_Fragment, { children: [_jsx(Line, { dense: true, width: "meta" }), renderLines(lineCount)] }));
+            break;
+        case 'figure':
+            glyphs = renderLines(lineCount, true, false);
+            break;
+        case 'timeline':
+            glyphs = (_jsxs(_Fragment, { children: [_jsx("span", { className: "eidotter-skeleton__marker border-2 border-dos-border-default" }), _jsxs("span", { className: "eidotter-skeleton__entry", children: [_jsx(Line, { width: "meta" }), renderLines(lineCount)] })] }));
+            break;
+        default:
+            glyphs = renderLines(lineCount);
+    }
+    return (_jsx("div", { role: "status", "aria-label": label, className: cn('eidotter-skeleton font-dos text-dos-text-muted', `eidotter-skeleton--${variant}`, animated && 'eidotter-skeleton--animated', variant === 'card' && 'border-2 border-dos-border-default bg-dos-bg-secondary p-4', variant === 'figure' && 'border-2 border-dos-border-default bg-dos-bg-secondary', className), children: _jsx("div", { "aria-hidden": "true", className: "eidotter-skeleton__glyphs", children: glyphs }) }));
+};
+Skeleton.displayName = 'Skeleton';

package/dist/components/Skeleton/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Skeleton } from './Skeleton';
-export type { SkeletonProps, SkeletonVariant } from './Skeleton';
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton.js';

package/dist/components/Skeleton/components/index.js

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton.js';

package/dist/components/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export { Skeleton } from './components';
-export type { SkeletonProps, SkeletonVariant } from './components';
+export { Skeleton } from './components/index.js';
+export type { SkeletonProps, SkeletonVariant } from './components/index.js';

package/dist/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from './components/index.js';

package/dist/components/Stat/components/Stat.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Stat.css';
 export interface StatProps {
     /** The label describing the metric */
     label: string;

package/dist/components/Stat/components/Stat.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useTextScramble } from '../../../hooks/useTextScramble.js';
+import { cn } from '../../../utils/cn.js';
+const sizeClasses = {
+    sm: { root: 'gap-0.5', label: 'text-dos-text-xs', value: 'text-dos-display-xs', trend: 'text-dos-text-xs' },
+    md: { root: 'gap-1', label: 'text-dos-text-sm', value: 'text-dos-display-sm', trend: 'text-dos-text-sm' },
+    lg: { root: 'gap-1.5', label: 'text-dos-text-md', value: 'text-dos-display-md', trend: 'text-dos-text-md' },
+    small: { root: 'gap-0.5', label: 'text-dos-text-xs', value: 'text-dos-display-xs', trend: 'text-dos-text-xs' },
+    medium: { root: 'gap-1', label: 'text-dos-text-sm', value: 'text-dos-display-sm', trend: 'text-dos-text-sm' },
+    large: { root: 'gap-1.5', label: 'text-dos-text-md', value: 'text-dos-display-md', trend: 'text-dos-text-md' },
+};
+const trendColorClasses = {
+    up: 'text-dos-text-success',
+    down: 'text-dos-text-error',
+    neutral: 'text-dos-text-brand',
+};
+const trendIcons = {
+    up: '▲',
+    down: '▼',
+    neutral: '►',
+};
+const trendLabels = {
+    up: 'increasing',
+    down: 'decreasing',
+    neutral: 'unchanged',
+};
+/**
+ * DOS-styled Stat component for displaying metrics with optional trends.
+ * Pure presentational — no React Aria needed.
+ */
+export const Stat = forwardRef(({ label, value, trend, trendValue, size = 'md', scramble = false, className, ...props }, ref) => {
+    const { text: scrambledValue } = useTextScramble(String(value), {
+        speed: 30,
+        enabled: scramble,
+    });
+    const displayValue = scramble ? scrambledValue : String(value);
+    const s = sizeClasses[size] || sizeClasses.md;
+    return (_jsxs("div", { ref: ref, className: cn('flex flex-col font-dos', 'eidotter-stat', s.root, className), ...props, children: [_jsx("span", { className: cn('text-dos-text-brand uppercase tracking-wider leading-tight', s.label), children: label }), _jsx("span", { className: cn('text-dos-text-accent font-bold leading-none tabular-nums', s.value), children: displayValue }), trend && (_jsxs("span", { className: cn('inline-flex items-center gap-1 leading-none', trendColorClasses[trend], s.trend), "aria-label": `Trend: ${trendLabels[trend]}${trendValue ? `, ${trendValue}` : ''}`, children: [_jsx("span", { className: "text-[0.8em]", "aria-hidden": "true", children: trendIcons[trend] }), trendValue && (_jsx("span", { className: "tabular-nums", children: trendValue }))] }))] }));
+});
+Stat.displayName = 'Stat';

package/dist/components/Stat/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Stat } from './Stat';
-export type { StatProps } from './Stat';
+export { Stat } from './Stat.js';
+export type { StatProps } from './Stat.js';

package/dist/components/Stat/components/index.js

@@ -0,0 +1 @@
+export { Stat } from './Stat.js';

package/dist/components/Stat/index.d.ts

@@ -1,2 +1,2 @@
-export { Stat } from './components';
-export type { StatProps } from './components';
+export { Stat } from './components/index.js';
+export type { StatProps } from './components/index.js';

package/dist/components/Stat/index.js

@@ -0,0 +1 @@
+export { Stat } from './components/index.js';

package/dist/components/Switch/components/Switch.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Switch.css';
 export interface SwitchProps {
     /** Whether the switch is on (controlled) */
     checked?: boolean;

package/dist/components/Switch/components/Switch.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Switch as AriaSwitch } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+/**
+ * DOS-styled Switch with phosphor glow toggle effect.
+ * Built on React Aria for accessible toggle behavior.
+ */
+export const Switch = forwardRef(({ checked, defaultChecked = false, onChange, onCheckedChange, disabled = false, size = 'md', type = 'default', label, name, value, className, ...props }, ref) => (_jsx(AriaSwitch, { ref: ref, isSelected: checked, defaultSelected: defaultChecked, onChange: onChange ?? onCheckedChange, isDisabled: disabled, name: name, value: value, className: cn('inline-flex items-center gap-2 cursor-pointer outline-none font-dos group', 'eidotter-switch', disabled && 'opacity-50 cursor-not-allowed', className), "data-size": size, "data-type": type, ...props, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('eidotter-switch__track', isSelected && 'eidotter-switch__track--checked', type === 'slim' && 'eidotter-switch__track--slim', size === 'sm' && 'eidotter-switch__track--sm'), children: _jsx("span", { className: "eidotter-switch__thumb" }) }), label && _jsx("span", { className: "text-[var(--color-cga-amber)]", children: label })] })) })));
+Switch.displayName = 'Switch';

package/dist/components/Switch/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Switch } from './Switch';
-export type { SwitchProps } from './Switch';
+export { Switch } from './Switch.js';
+export type { SwitchProps } from './Switch.js';

package/dist/components/Switch/components/index.js

@@ -0,0 +1 @@
+export { Switch } from './Switch.js';

package/dist/components/Switch/index.d.ts

@@ -1,2 +1,2 @@
-export { Switch } from './components';
-export type { SwitchProps } from './components';
+export { Switch } from './components/index.js';
+export type { SwitchProps } from './components/index.js';

package/dist/components/Switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './components/index.js';

package/dist/components/Tabs/components/Tabs.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Tabs.css';
 export interface TabItem {
     /** Unique identifier for the tab */
     id: string;

package/dist/components/Tabs/components/Tabs.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect, useCallback, forwardRef } from 'react';
+import { Tabs as AriaTabs, TabList as AriaTabList, Tab as AriaTab, TabPanel as AriaTabPanel, } from 'react-aria-components';
+import { cn } from '../../../utils/cn.js';
+const sizeClasses = {
+    sm: 'eidotter-tabs--sm',
+    md: 'eidotter-tabs--md',
+    lg: 'eidotter-tabs--lg',
+    small: 'eidotter-tabs--sm',
+    medium: 'eidotter-tabs--md',
+    large: 'eidotter-tabs--lg',
+};
+const variantClasses = {
+    underline: 'eidotter-tabs--underline',
+    pills: 'eidotter-tabs--pills',
+};
+/**
+ * DOS-styled Tabs with React Aria keyboard navigation and phosphor indicator.
+ * React Aria handles arrow keys, Home, End, roving tabindex, and ARIA roles.
+ */
+export const Tabs = forwardRef(({ tabs, variant = 'underline', size = 'md', activeTab, defaultActiveTab, onSelectionChange, onTabChange, className, ...props }, ref) => {
+    const tabListRef = useRef(null);
+    const prevTabRef = useRef(activeTab ?? defaultActiveTab ?? tabs[0]?.id ?? '');
+    // Track current selection for indicator repositioning in uncontrolled mode
+    const [internalKey, setInternalKey] = useState(activeTab ?? defaultActiveTab ?? tabs[0]?.id ?? '');
+    const changeHandler = onSelectionChange ?? onTabChange;
+    const handleSelectionChange = useCallback((key) => {
+        const newId = String(key);
+        const previous = activeTab ?? prevTabRef.current;
+        prevTabRef.current = newId;
+        setInternalKey(newId);
+        changeHandler?.(newId, previous);
+    }, [activeTab, changeHandler]);
+    // Reposition the underline indicator when selection or variant changes
+    useLayoutEffect(() => {
+        const container = tabListRef.current;
+        if (!container || variant !== 'underline')
+            return;
+        const updateIndicator = () => {
+            const btn = container.querySelector('[aria-selected="true"]');
+            if (btn) {
+                container.style.setProperty('--indicator-left', `${btn.offsetLeft}px`);
+                container.style.setProperty('--indicator-width', `${btn.offsetWidth}px`);
+            }
+        };
+        updateIndicator();
+        const observer = new ResizeObserver(updateIndicator);
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [activeTab, internalKey, variant]);
+    return (_jsxs(AriaTabs, { ref: ref, selectedKey: activeTab, defaultSelectedKey: defaultActiveTab ?? tabs[0]?.id, onSelectionChange: handleSelectionChange, className: cn('eidotter-tabs', variantClasses[variant], sizeClasses[size] || sizeClasses.md, className), children: [_jsxs("div", { ref: tabListRef, className: "relative", children: [_jsx(AriaTabList, { className: "inline-flex items-center font-dos eidotter-tabs__list", "aria-label": props['aria-label'], children: tabs.map((tab) => (_jsx(AriaTab, { id: tab.id, isDisabled: tab.disabled, className: ({ isSelected, isDisabled }) => cn('eidotter-tabs__tab', isSelected && 'eidotter-tabs__tab--active', isDisabled && 'eidotter-tabs__tab--disabled'), children: tab.label }, tab.id))) }), variant === 'underline' && _jsx("span", { className: "eidotter-tabs__indicator", "aria-hidden": "true" })] }), tabs.map((tab) => (_jsx(AriaTabPanel, { id: tab.id, className: "hidden" }, tab.id)))] }));
+});
+Tabs.displayName = 'Tabs';

package/dist/components/Tabs/components/index.d.ts

@@ -1,2 +1,2 @@
-export { Tabs } from './Tabs';
-export type { TabsProps, TabItem } from './Tabs';
+export { Tabs } from './Tabs.js';
+export type { TabsProps, TabItem } from './Tabs.js';

package/dist/components/Tabs/components/index.js

@@ -0,0 +1 @@
+export { Tabs } from './Tabs.js';

package/dist/components/Tabs/index.d.ts

@@ -1,2 +1,2 @@
-export { Tabs } from './components';
-export type { TabsProps, TabItem } from './components';
+export { Tabs } from './components/index.js';
+export type { TabsProps, TabItem } from './components/index.js';

package/dist/components/Tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from './components/index.js';

package/dist/components/Tag/components/Tag.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Tag.css';
 export interface TagProps {
     /** Tag display text */
     children: React.ReactNode;