@nukleas/cyberdesign 0.1.0

package/dist/react/Kbd.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** `lg` renders the larger standalone key. */
+    size?: 'md' | 'lg';
+    /** Accent-highlighted key with a neon glow. */
+    accent?: boolean;
+    children?: ReactNode;
+}
+/** Keyboard key — boxed glyph with size and accent variants. */
+export declare function Kbd({ size, accent, className, children, ...rest }: KbdProps): import("react").JSX.Element;
+export interface KbdGroupProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Separator rendered between keys (default `+`). */
+    separator?: ReactNode;
+    /** `Kbd` keys to combine. */
+    children?: ReactNode;
+}
+/** Key combination group — joins multiple `Kbd` keys with a separator (e.g. ⌘ + K). */
+export declare function KbdGroup({ separator, className, children, ...rest }: KbdGroupProps): import("react").JSX.Element;

package/dist/react/Kbd.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Keyboard key — boxed glyph with size and accent variants. */
+export function Kbd({ size = 'md', accent = false, className = '', children, ...rest }) {
+    return (_jsx("kbd", { className: cx('cd-kbd', size === 'lg' && 'cd-kbd--lg', accent && 'cd-kbd--accent', className), ...rest, children: children }));
+}
+/** Key combination group — joins multiple `Kbd` keys with a separator (e.g. ⌘ + K). */
+export function KbdGroup({ separator = '+', className = '', children, ...rest }) {
+    const keys = Array.isArray(children) ? children : [children];
+    return (_jsx("span", { className: cx('cd-kbd-group', className), ...rest, children: keys.map((key, i) => (_jsxs("span", { style: { display: 'contents' }, children: [i > 0 && _jsx("span", { className: "cd-kbd-group__sep", children: separator }), key] }, i))) }));
+}

package/dist/react/Label.d.ts

@@ -0,0 +1,8 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Append a red required asterisk. */
+    required?: boolean;
+    children?: ReactNode;
+}
+/** Uppercase form label — optional required asterisk. */
+export declare function Label({ required, className, children, ...rest }: LabelProps): import("react").JSX.Element;

package/dist/react/Label.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Uppercase form label — optional required asterisk. */
+export function Label({ required = false, className = '', children, ...rest }) {
+    return (_jsx("label", { className: cx('cd-form-label', required && 'cd-form-label--required', className), ...rest, children: children }));
+}

package/dist/react/Modal.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Controls visibility — adds `is-open` to animate the overlay/panel in. */
+    open: boolean;
+    /** Fired by the backdrop click, the ✕ close button, and Escape handlers you wire up. */
+    onClose?: () => void;
+    /** Uppercase accent heading rendered in the header. Omit to hide the header. */
+    title?: ReactNode;
+    /** Footer content (typically action buttons). Omit to hide the footer. */
+    footer?: ReactNode;
+    /** Panel width. `default` is 480px; `sm` 340px, `lg` 680px, `xl` 900px. */
+    size?: 'default' | 'sm' | 'lg' | 'xl';
+    /** Hide the header ✕ close button. */
+    hideClose?: boolean;
+    /** Dialog body content. */
+    children?: ReactNode;
+}
+/** Centered modal dialog over a dimmed backdrop — controlled via `open` / `onClose`. */
+export declare function Modal({ open, onClose, title, footer, size, hideClose, className, children, ...rest }: ModalProps): import("react").JSX.Element;

package/dist/react/Modal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Centered modal dialog over a dimmed backdrop — controlled via `open` / `onClose`. */
+export function Modal({ open, onClose, title, footer, size = 'default', hideClose = false, className = '', children, ...rest }) {
+    return (_jsx("div", { className: cx('cd-modal-overlay', open && 'is-open'), onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose?.();
+        }, children: _jsxs("div", { className: cx('cd-modal', size !== 'default' && `cd-modal--${size}`, className), role: "dialog", "aria-modal": "true", ...rest, children: [(title != null || !hideClose) && (_jsxs("div", { className: "cd-modal__header", children: [title != null && _jsx("span", { className: "cd-modal__title", children: title }), !hideClose && (_jsx("button", { className: "cd-modal__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }))] })), _jsx("div", { className: "cd-modal__body", children: children }), footer != null && _jsx("div", { className: "cd-modal__footer", children: footer })] }) }));
+}

package/dist/react/Pagination.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Current page (1-based). */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Fired with the target page when a control is activated. */
+    onPageChange?: (page: number) => void;
+    /** How many sibling pages to show on each side of the current page. */
+    siblingCount?: number;
+    /** Size variant. */
+    size?: 'default' | 'sm' | 'lg';
+    /** Collapse gaps so items share borders. */
+    compact?: boolean;
+    /** Show "Page X of Y" info text after the controls. */
+    showInfo?: boolean;
+    /** Prev button label. */
+    prevLabel?: React.ReactNode;
+    /** Next button label. */
+    nextLabel?: React.ReactNode;
+}
+/** Page navigation — windowed page list with prev/next, ellipsis and optional info. */
+export declare function Pagination({ page, pageCount, onPageChange, siblingCount, size, compact, showInfo, prevLabel, nextLabel, className, ...rest }: PaginationProps): import("react").JSX.Element;

package/dist/react/Pagination.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Build the windowed list of page numbers with `'…'` gaps. */
+function buildPages(page, pageCount, siblingCount) {
+    const total = pageCount;
+    // pages always shown: first, last, current ± siblingCount
+    const left = Math.max(2, page - siblingCount);
+    const right = Math.min(total - 1, page + siblingCount);
+    const pages = [1];
+    if (left > 2)
+        pages.push('…');
+    for (let p = left; p <= right; p++)
+        pages.push(p);
+    if (right < total - 1)
+        pages.push('…');
+    if (total > 1)
+        pages.push(total);
+    return pages;
+}
+/** Page navigation — windowed page list with prev/next, ellipsis and optional info. */
+export function Pagination({ page, pageCount, onPageChange, siblingCount = 1, size = 'default', compact = false, showInfo = false, prevLabel = '‹ Prev', nextLabel = 'Next ›', className = '', ...rest }) {
+    const go = (p) => {
+        if (p < 1 || p > pageCount || p === page)
+            return;
+        onPageChange?.(p);
+    };
+    return (_jsxs("nav", { className: cx('cd-pagination', size !== 'default' && `cd-pagination--${size}`, compact && 'cd-pagination--compact', className), "aria-label": "Pagination", ...rest, children: [_jsx("button", { type: "button", className: "cd-pagination__prev cd-pagination__item", disabled: page <= 1, "aria-disabled": page <= 1 || undefined, onClick: () => go(page - 1), children: prevLabel }), buildPages(page, pageCount, siblingCount).map((p, i) => p === '…' ? (_jsx("span", { className: "cd-pagination__ellipsis", children: "\u00B7\u00B7\u00B7" }, `e${i}`)) : (_jsx("button", { type: "button", className: cx('cd-pagination__item', p === page && 'is-active'), "aria-current": p === page ? 'page' : undefined, onClick: () => go(p), children: p }, p))), _jsx("button", { type: "button", className: "cd-pagination__next cd-pagination__item", disabled: page >= pageCount, "aria-disabled": page >= pageCount || undefined, onClick: () => go(page + 1), children: nextLabel }), showInfo && (_jsxs("span", { className: "cd-pagination__info", children: ["Page ", page, " of ", pageCount] }))] }));
+}

package/dist/react/PanelHeader.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface PanelHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Trailing actions slot (right-aligned), e.g. a count or status indicator. */
+    actions?: ReactNode;
+    /** Header label / title content. */
+    children?: ReactNode;
+}
+/** Panel header bar — uppercase neon title with an animated sweep and a right-aligned actions slot. */
+export declare function PanelHeader({ actions, className, children, ...rest }: PanelHeaderProps): import("react").JSX.Element;

package/dist/react/PanelHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Panel header bar — uppercase neon title with an animated sweep and a right-aligned actions slot. */
+export function PanelHeader({ actions, className = '', children, ...rest }) {
+    return (_jsxs("div", { className: cx('cd-panel-header', className), ...rest, children: [children, actions != null && (_jsx("div", { className: "cd-panel-header__actions", children: actions }))] }));
+}

package/dist/react/Progress.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fill percentage (0–100). Ignored when `indeterminate`. */
+    value?: number;
+    /** Color variant. Default uses the theme accent. */
+    variant?: 'default' | 'danger' | 'success' | 'warning';
+    /** Taller 8px bar. */
+    thick?: boolean;
+    /** Scanning/indeterminate animation (no fixed value). */
+    indeterminate?: boolean;
+}
+/** Progress bar — accent fill driven by `value`%, with color, thick, and indeterminate variants. */
+export declare function Progress({ value, variant, thick, indeterminate, className, ...rest }: ProgressProps): import("react").JSX.Element;

package/dist/react/Progress.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Progress bar — accent fill driven by `value`%, with color, thick, and indeterminate variants. */
+export function Progress({ value = 0, variant = 'default', thick = false, indeterminate = false, className = '', ...rest }) {
+    return (_jsx("div", { className: cx('cd-progress', variant !== 'default' && `cd-progress--${variant}`, thick && 'cd-progress--thick', indeterminate && 'cd-progress--indeterminate', className), role: "progressbar", "aria-valuenow": indeterminate ? undefined : value, "aria-valuemin": 0, "aria-valuemax": 100, ...rest, children: _jsx("div", { className: "cd-progress__bar", style: indeterminate ? undefined : { width: `${value}%` } }) }));
+}

package/dist/react/Radio.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Text shown beside the dot. When set, wraps the input in a `cd-control` label. */
+    label?: ReactNode;
+    /** Smaller helper line below the label. */
+    description?: ReactNode;
+}
+/** Cyber radio — neon filled dot; renders inside a `cd-control` label when labelled. */
+export declare function Radio({ label, description, className, ...rest }: RadioProps): import("react").JSX.Element;

package/dist/react/Radio.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Cyber radio — neon filled dot; renders inside a `cd-control` label when labelled. */
+export function Radio({ label, description, className = '', ...rest }) {
+    const input = (_jsx("input", { type: "radio", className: cx('cd-radio', !label && className), ...rest }));
+    if (label == null && description == null)
+        return input;
+    return (_jsxs("label", { className: cx('cd-control', className), children: [_jsx("input", { type: "radio", className: "cd-radio", ...rest }), _jsxs("span", { className: "cd-control__label", children: [label, description != null && _jsx("span", { className: "cd-control__desc", children: description })] })] }));
+}

package/dist/react/Scanner.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ScannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Sweep top-to-bottom instead of left-to-right. */
+    vertical?: boolean;
+    /** Fainter return-sweep look. */
+    ping?: boolean;
+    /** Content scanned by the sweep line. */
+    children?: ReactNode;
+}
+/** Animated scan/sweep-line overlay — wraps content with a glowing lidar/radar sweep. */
+export declare function Scanner({ vertical, ping, className, children, ...rest }: ScannerProps): import("react").JSX.Element;

package/dist/react/Scanner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Animated scan/sweep-line overlay — wraps content with a glowing lidar/radar sweep. */
+export function Scanner({ vertical = false, ping = false, className = '', children, ...rest }) {
+    return (_jsxs("div", { className: cx('cd-scanner', vertical && 'cd-scanner--vertical', ping && 'cd-scanner--ping', className), ...rest, children: [_jsx("div", { className: "cd-scanner__line" }), children] }));
+}

package/dist/react/Select.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, SelectHTMLAttributes } from 'react';
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** `sm` is the compact height; default is the standard height. */
+    size?: 'sm' | 'md';
+    /** Uppercase tracked label styling (viz-controls pattern). */
+    label?: boolean;
+    /** Error state — red border. */
+    error?: boolean;
+    /** `<option>` elements. */
+    children?: ReactNode;
+}
+/** Native select with custom neon chevron — wraps the element for the arrow. */
+export declare function Select({ size, label, error, className, children, ...rest }: SelectProps): import("react").JSX.Element;

package/dist/react/Select.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Native select with custom neon chevron — wraps the element for the arrow. */
+export function Select({ size = 'md', label = false, error = false, className = '', children, ...rest }) {
+    return (_jsx("div", { className: "cd-select-wrap", children: _jsx("select", { className: cx('cd-select', size === 'sm' && 'cd-select--sm', label && 'cd-select--label', error && 'cd-select--error', className), ...rest, children: children }) }));
+}

package/dist/react/Separator.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    /** Orientation. `vertical` draws a vertical divider. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Neon gradient line instead of a plain rule. */
+    neon?: boolean;
+    /** Optional inline label (e.g. "OR"); centers it between the rules. */
+    children?: ReactNode;
+}
+/** Divider rule — horizontal/vertical, optional neon gradient and centered label. */
+export declare function Separator({ orientation, neon, className, children, ...rest }: SeparatorProps): import("react").JSX.Element;

package/dist/react/Separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Divider rule — horizontal/vertical, optional neon gradient and centered label. */
+export function Separator({ orientation = 'horizontal', neon = false, className = '', children, ...rest }) {
+    const hasLabel = children != null;
+    return (_jsx("div", { className: cx('cd-separator', orientation === 'vertical' && 'cd-separator--vertical', neon && 'cd-separator--neon', hasLabel && 'cd-separator--label', !hasLabel && orientation === 'horizontal' && 'cd-separator--plain', className), role: "separator", ...rest, children: children }));
+}

package/dist/react/Skeleton.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Pre-sized shape. `block`/`card` render the compound containers; the rest are line/avatar/button placeholders. */
+    shape?: 'plain' | 'text' | 'heading' | 'avatar' | 'btn' | 'block' | 'card';
+    /** Fractional width helper (full / 3/4 / 1/2 / 1/3). Ignored for `block`/`card`. */
+    width?: 'full' | '3/4' | '1/2' | '1/3';
+}
+/** Shimmering loading placeholder — text/heading/avatar/btn shapes plus block & card containers. */
+export declare function Skeleton({ shape, width, className, children, ...rest }: SkeletonProps): import("react").JSX.Element;
+/** Inline row inside a `cd-skeleton-block` (e.g. avatar + text lines). */
+export declare function SkeletonRow({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/react/Skeleton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Shimmering loading placeholder — text/heading/avatar/btn shapes plus block & card containers. */
+export function Skeleton({ shape = 'plain', width, className = '', children, ...rest }) {
+    if (shape === 'card' || shape === 'block') {
+        return (_jsx("div", { className: cx(`cd-skeleton-${shape}`, className), ...rest, children: children }));
+    }
+    return (_jsx("div", { className: cx('cd-skeleton', shape !== 'plain' && `cd-skeleton--${shape}`, width && `cd-skeleton--w-${width}`, className), ...rest, children: children }));
+}
+/** Inline row inside a `cd-skeleton-block` (e.g. avatar + text lines). */
+export function SkeletonRow({ className = '', children, ...rest }) {
+    return (_jsx("div", { className: cx('cd-skeleton-block__row', className), ...rest, children: children }));
+}

package/dist/react/Slider.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** When provided, renders the value label beside the track inside a `cd-slider-wrap`. */
+    value?: InputHTMLAttributes<HTMLInputElement>['value'];
+    /** Node shown in the trailing `cd-slider-value` label. When set, wraps in `cd-slider-wrap`. */
+    valueLabel?: ReactNode;
+}
+/** Range slider — neon track with 3D thumb; optional trailing value label. */
+export declare function Slider({ valueLabel, className, ...rest }: SliderProps): import("react").JSX.Element;

package/dist/react/Slider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Range slider — neon track with 3D thumb; optional trailing value label. */
+export function Slider({ valueLabel, className = '', ...rest }) {
+    const input = (_jsx("input", { type: "range", className: cx('cd-slider', !valueLabel && className), ...rest }));
+    if (valueLabel == null)
+        return input;
+    return (_jsxs("div", { className: cx('cd-slider-wrap', className), children: [_jsx("input", { type: "range", className: "cd-slider", ...rest }), _jsx("span", { className: "cd-slider-value", children: valueLabel })] }));
+}

package/dist/react/Spinner.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter preset. `md` is the default (no modifier). */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** `ring` (default), `dual` counter-rotating rings, or `dots` pulse. */
+    variant?: 'ring' | 'dual' | 'dots';
+    /** Accessible label announced to screen readers. */
+    label?: string;
+}
+/** Loading spinner — ring / dual-ring / dot-pulse variants in five sizes. */
+export declare function Spinner({ size, variant, label, className, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/react/Spinner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Loading spinner — ring / dual-ring / dot-pulse variants in five sizes. */
+export function Spinner({ size = 'md', variant = 'ring', label = 'Loading', className = '', ...rest }) {
+    return (_jsx("div", { role: "status", "aria-label": label, className: cx('cd-spinner', size !== 'md' && `cd-spinner--${size}`, variant === 'dual' && 'cd-spinner--dual', variant === 'dots' && 'cd-spinner--dots', className), ...rest, children: variant === 'dots' && _jsx("span", {}) }));
+}

package/dist/react/Stat.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface StatProps extends HTMLAttributes<HTMLDivElement> {
+    /** Uppercase caption above the value. */
+    label: ReactNode;
+    /** The headline metric. */
+    value: ReactNode;
+    /** Secondary change/context line below the value. */
+    delta?: ReactNode;
+    /** Tints the delta green (`up`) or red (`down`). */
+    trend?: 'up' | 'down';
+    /** Color treatment for the value. Default is the neon-green metric look. */
+    variant?: 'default' | 'accent' | 'red' | 'yellow' | 'blue' | 'magenta';
+}
+/** Metric block — uppercase label, neon value and optional trend delta. */
+export declare function Stat({ label, value, delta, trend, variant, className, ...rest }: StatProps): import("react").JSX.Element;
+export declare namespace Stat {
+    var Grid: typeof StatGrid;
+}
+/** Grid container that separates `Stat` cards with 1px border lines. */
+export declare function StatGrid({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/react/Stat.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Metric block — uppercase label, neon value and optional trend delta. */
+export function Stat({ label, value, delta, trend, variant = 'default', className = '', ...rest }) {
+    return (_jsxs("div", { className: cx('cd-stat', variant !== 'default' && `cd-stat--${variant}`, className), ...rest, children: [_jsx("span", { className: "cd-stat__label", children: label }), _jsx("span", { className: "cd-stat__value", children: value }), delta != null && (_jsx("span", { className: cx('cd-stat__delta', trend && `cd-stat__delta--${trend}`), children: delta }))] }));
+}
+/** Grid container that separates `Stat` cards with 1px border lines. */
+export function StatGrid({ className = '', children, ...rest }) {
+    return (_jsx("div", { className: cx('cd-stats', className), ...rest, children: children }));
+}
+Stat.Grid = StatGrid;

package/dist/react/Switch.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** `sm` is the compact track; default is the standard size. */
+    size?: 'sm' | 'md';
+    /** Text shown beside the toggle. */
+    label?: ReactNode;
+}
+/** Toggle switch — visually-hidden checkbox driving a neon track + thumb. */
+export declare function Switch({ size, label, className, ...rest }: SwitchProps): import("react").JSX.Element;

package/dist/react/Switch.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Toggle switch — visually-hidden checkbox driving a neon track + thumb. */
+export function Switch({ size = 'md', label, className = '', ...rest }) {
+    return (_jsxs("label", { className: cx('cd-switch', size === 'sm' && 'cd-switch--sm', className), children: [_jsx("input", { type: "checkbox", className: "cd-switch__input", ...rest }), _jsx("span", { className: "cd-switch__track", children: _jsx("span", { className: "cd-switch__thumb" }) }), label != null && _jsx("span", { className: "cd-switch__label", children: label })] }));
+}

package/dist/react/Table.d.ts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes, ReactNode } from 'react';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Tighter padding and smaller type. */
+    compact?: boolean;
+    /** Draw cell borders. */
+    bordered?: boolean;
+    /** Wrap the table in a horizontally-scrollable `cd-table-wrap` container. */
+    scroll?: boolean;
+    /** Props forwarded to the wrapping `cd-table-wrap` div when `scroll` is set. */
+    wrapProps?: HTMLAttributes<HTMLDivElement>;
+    children?: ReactNode;
+}
+/** Cyber data table — accent uppercase headers, status dots, numeric cells. Compose with Table.Head/Body/Row/HeaderCell/Cell. */
+export declare function Table({ compact, bordered, scroll, wrapProps, className, children, ...rest }: TableProps): import("react").JSX.Element;
+export declare namespace Table {
+    var Head: typeof TableHead;
+    var Body: typeof TableBody;
+    var Row: typeof TableRow;
+    var HeaderCell: typeof TableHeaderCell;
+    var Cell: typeof TableCell;
+}
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    children?: ReactNode;
+}
+/** `<thead>` group for the table header row(s). */
+declare function TableHead({ children, ...rest }: TableHeadProps): import("react").JSX.Element;
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    children?: ReactNode;
+}
+/** `<tbody>` group for the table data rows. */
+declare function TableBody({ children, ...rest }: TableBodyProps): import("react").JSX.Element;
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    children?: ReactNode;
+}
+/** `<tr>` table row. */
+declare function TableRow({ children, ...rest }: TableRowProps): import("react").JSX.Element;
+export interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Right-aligned tabular-numeric header cell (`cd-table__num`). */
+    numeric?: boolean;
+    /** Mark column sortable; `'asc'`/`'desc'` show a direction arrow (sets `data-sort`). */
+    sort?: boolean | 'asc' | 'desc';
+    children?: ReactNode;
+}
+/** `<th>` header cell — supports numeric alignment and a sortable `data-sort` indicator. */
+declare function TableHeaderCell({ numeric, sort, className, children, ...rest }: TableHeaderCellProps): import("react").JSX.Element;
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Right-aligned tabular-numeric, accent-colored cell (`cd-table__num`). */
+    numeric?: boolean;
+    /** Status dot prefix (sets `data-status`). */
+    status?: 'ok' | 'warn' | 'err' | 'idle';
+    children?: ReactNode;
+}
+/** `<td>` data cell — supports numeric alignment and a leading status dot. */
+declare function TableCell({ numeric, status, className, children, ...rest }: TableCellProps): import("react").JSX.Element;
+export {};

package/dist/react/Table.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Cyber data table — accent uppercase headers, status dots, numeric cells. Compose with Table.Head/Body/Row/HeaderCell/Cell. */
+export function Table({ compact = false, bordered = false, scroll = false, wrapProps, className = '', children, ...rest }) {
+    const table = (_jsx("table", { className: cx('cd-table', compact && 'cd-table--compact', bordered && 'cd-table--bordered', className), ...rest, children: children }));
+    if (!scroll)
+        return table;
+    const { className: wrapClassName = '', ...wrapRest } = wrapProps ?? {};
+    return (_jsx("div", { className: cx('cd-table-wrap', wrapClassName), ...wrapRest, children: table }));
+}
+/** `<thead>` group for the table header row(s). */
+function TableHead({ children, ...rest }) {
+    return _jsx("thead", { ...rest, children: children });
+}
+/** `<tbody>` group for the table data rows. */
+function TableBody({ children, ...rest }) {
+    return _jsx("tbody", { ...rest, children: children });
+}
+/** `<tr>` table row. */
+function TableRow({ children, ...rest }) {
+    return _jsx("tr", { ...rest, children: children });
+}
+/** `<th>` header cell — supports numeric alignment and a sortable `data-sort` indicator. */
+function TableHeaderCell({ numeric = false, sort, className = '', children, ...rest }) {
+    const dataSort = sort === true ? '' : sort || undefined;
+    return (_jsx("th", { className: cx(numeric && 'cd-table__num', className), "data-sort": dataSort, ...rest, children: children }));
+}
+/** `<td>` data cell — supports numeric alignment and a leading status dot. */
+function TableCell({ numeric = false, status, className = '', children, ...rest }) {
+    return (_jsx("td", { className: cx(numeric && 'cd-table__num', className), "data-status": status, ...rest, children: children }));
+}
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;

package/dist/react/Tabs.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export interface TabItem {
+    /** Tab label (also the trigger text). */
+    label: ReactNode;
+    /** Panel content shown when this tab is active. */
+    content?: ReactNode;
+    /** Optional trailing badge node in the trigger (e.g. a count). */
+    badge?: ReactNode;
+    /** Disable selection of this tab. */
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /** The tabs to render, in order. */
+    items: TabItem[];
+    /** Layout style: underline (default), pills, or vertical. */
+    variant?: 'underline' | 'pills' | 'vertical';
+    /** Index of the initially-active tab (uncontrolled). */
+    defaultActive?: number;
+    /** Controlled active index. When set, `onTabChange` should update it. */
+    active?: number;
+    /** Fires with the new index when a tab is selected. */
+    onTabChange?: (index: number) => void;
+    /** Hide the panels region (trigger-only, e.g. a filter bar). */
+    hidePanels?: boolean;
+    className?: string;
+}
+/** Tabbed navigation — underline / pills / vertical, with optional badges and panels. */
+export declare function Tabs({ items, variant, defaultActive, active, onTabChange, hidePanels, className, }: TabsProps): import("react").JSX.Element;

package/dist/react/Tabs.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Tabbed navigation — underline / pills / vertical, with optional badges and panels. */
+export function Tabs({ items, variant = 'underline', defaultActive = 0, active, onTabChange, hidePanels = false, className = '', }) {
+    const [internal, setInternal] = useState(defaultActive);
+    const current = active ?? internal;
+    const select = (i) => {
+        if (items[i]?.disabled)
+            return;
+        if (active == null)
+            setInternal(i);
+        onTabChange?.(i);
+    };
+    return (_jsxs("div", { className: cx('cd-tabs', variant === 'pills' && 'cd-tabs--pills', variant === 'vertical' && 'cd-tabs--vertical', className), children: [_jsx("div", { className: "cd-tabs__list", role: "tablist", children: items.map((item, i) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": i === current, disabled: item.disabled, className: cx('cd-tabs__trigger', i === current && 'is-active'), onClick: () => select(i), children: [item.label, item.badge != null && (_jsx("span", { className: "cd-badge cd-badge--orange", style: { marginLeft: 4 }, children: item.badge }))] }, i))) }), !hidePanels && (_jsx("div", { className: "cd-tabs__panels", children: items.map((item, i) => (_jsx("div", { role: "tabpanel", className: cx('cd-tabs__panel', i === current && 'is-active'), children: item.content }, i))) }))] }));
+}

package/dist/react/Terminal.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+/** Semantic line kinds — map to `cd-terminal__line--*` modifiers. */
+export type TerminalLineType = 'system' | 'prompt' | 'command' | 'output' | 'error';
+export interface TerminalLine {
+    /** Line text content. */
+    text: ReactNode;
+    /** Line kind; omit for the default (plain) line. */
+    type?: TerminalLineType;
+    /** Prompt glyph shown before the text (for `prompt` lines, e.g. `root@net> `). */
+    prompt?: ReactNode;
+}
+export interface TerminalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Header title text (theme-accent colored). Omit to hide the header. */
+    title?: ReactNode;
+    /** Show the min/max/close window control dots in the header. */
+    controls?: boolean;
+    /** The log lines to render in the body. */
+    lines?: TerminalLine[];
+    /** Tighter spacing / smaller type. */
+    compact?: boolean;
+    /** Extra CRT inner scanline overlay. */
+    crt?: boolean;
+    /** Render a bottom command input row. */
+    input?: boolean;
+    /** Prompt glyph shown before the input field. */
+    inputPrompt?: ReactNode;
+    /** Props forwarded to the input field element. */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** Extra body content rendered after `lines`. */
+    children?: ReactNode;
+}
+/** Cyberpunk terminal/console window — header, scrollable log body and optional command input. */
+export declare function Terminal({ title, controls, lines, compact, crt, input, inputPrompt, inputProps, className, children, ...rest }: TerminalProps): import("react").JSX.Element;

package/dist/react/Terminal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Cyberpunk terminal/console window — header, scrollable log body and optional command input. */
+export function Terminal({ title, controls = false, lines = [], compact = false, crt = false, input = false, inputPrompt = 'root@net> ', inputProps, className = '', children, ...rest }) {
+    return (_jsxs("div", { className: cx('cd-terminal', compact && 'cd-terminal--compact', crt && 'cd-terminal--crt', className), ...rest, children: [(title != null || controls) && (_jsxs("div", { className: "cd-terminal__header", children: [title != null && _jsx("span", { className: "cd-terminal__title", children: title }), controls && (_jsxs("div", { className: "cd-terminal__controls", children: [_jsx("span", { className: "cd-terminal__dot cd-terminal__dot--min", title: "Minimize" }), _jsx("span", { className: "cd-terminal__dot cd-terminal__dot--max", title: "Maximize" }), _jsx("span", { className: "cd-terminal__dot cd-terminal__dot--close", title: "Close" })] }))] })), _jsxs("div", { className: "cd-terminal__body cd-scrollbar", children: [lines.map((line, i) => (_jsxs("div", { className: cx('cd-terminal__line', line.type && `cd-terminal__line--${line.type}`), children: [line.prompt != null && _jsx("span", { className: "cd-terminal__prompt", children: line.prompt }), line.text] }, i))), children] }), input && (_jsxs("div", { className: "cd-terminal__input", children: [inputPrompt != null && _jsx("span", { className: "cd-terminal__prompt", children: inputPrompt }), _jsx("input", { className: "cd-terminal__field", placeholder: "type command...", ...inputProps })] }))] }));
+}

package/dist/react/Textarea.d.ts

@@ -0,0 +1,7 @@
+import type { TextareaHTMLAttributes } from 'react';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Error state — red border. */
+    error?: boolean;
+}
+/** Cyber multi-line text area — vertical resize, neon focus ring, error state. */
+export declare function Textarea({ error, className, ...rest }: TextareaProps): import("react").JSX.Element;

package/dist/react/Textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Cyber multi-line text area — vertical resize, neon focus ring, error state. */
+export function Textarea({ error = false, className = '', ...rest }) {
+    return (_jsx("textarea", { className: cx('cd-textarea', error && 'cd-textarea--error', className), ...rest }));
+}

package/dist/react/Ticker.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TickerProps extends HTMLAttributes<HTMLDivElement> {
+    /** The feed items to scroll, in order. */
+    items: ReactNode[];
+    /** Scroll speed; `fast` ≈ 9s, `slow` ≈ 32s (default ≈ 18s). */
+    speed?: 'fast' | 'slow';
+    /** Shorthand for `speed="fast"`. */
+    fast?: boolean;
+    /** Scroll vertically instead of horizontally. */
+    vertical?: boolean;
+}
+/** Auto-scrolling data ticker / feed — pauses on hover, respects reduced motion. */
+export declare function Ticker({ items, speed, fast, vertical, className, ...rest }: TickerProps): import("react").JSX.Element;