@kayf/ui 0.1.0

package/dist/components/AuroraCard/AuroraCard.d.ts

@@ -0,0 +1,22 @@
+import { KayfElement } from '../../core/KayfElement';
+export declare class AuroraCard extends KayfElement {
+    private _canvas;
+    private _ctx;
+    private _blobs;
+    private _raf;
+    private _resizeOb;
+    static get observedAttributes(): string[];
+    get speedValue(): number;
+    get blurSize(): number;
+    get opacityValue(): number;
+    get isStatic(): boolean;
+    get colorList(): number[][];
+    protected styles(): string;
+    protected template(): string;
+    protected setup(): void;
+    protected cleanup(): void;
+    private _initBlobs;
+    private _resize;
+    private _startLoop;
+    private _drawFrame;
+}

package/dist/components/BeamButton/BeamButton.d.ts

@@ -0,0 +1,40 @@
+import { KayfElement } from '../../core/KayfElement';
+import { ColorVariant } from '../../core/tokens';
+/**
+ * <kayf-beam-button>
+ *
+ * Атрибуты:
+ *   color    — cyan | violet | emerald | amber | red (default: cyan)
+ *   variant  — solid | outline | ghost (default: outline)
+ *   size     — sm | md | lg (default: md)
+ *   disabled — boolean
+ *   loading  — boolean, показывает spinner
+ *
+ * Слоты:
+ *   (default)  — текст кнопки
+ *   icon-left  — иконка слева
+ *   icon-right — иконка справа
+ *
+ * События:
+ *   kayf-click — не срабатывает если disabled/loading
+ *
+ * Пример:
+ *   <kayf-beam-button color="cyan" variant="solid" size="lg">
+ *     Launch Eclipse
+ *   </kayf-beam-button>
+ */
+type Variant = 'solid' | 'outline' | 'ghost';
+type Size = 'sm' | 'md' | 'lg';
+export declare class BeamButton extends KayfElement {
+    static get observedAttributes(): string[];
+    get color(): ColorVariant;
+    get variant(): Variant;
+    get size(): Size;
+    get isDisabled(): boolean;
+    get isLoading(): boolean;
+    protected styles(): string;
+    protected template(): string;
+    protected setup(): void;
+    protected cleanup(): void;
+}
+export {};

package/dist/components/GlitchText/GlitchText.d.ts

@@ -0,0 +1,44 @@
+import { KayfElement } from '../../core/KayfElement';
+import { ColorVariant } from '../../core/tokens';
+/**
+ * <kayf-glitch-text>
+ *
+ * Атрибуты:
+ *   color     - cyan | violet | emerald | amber | red | white (default: cyan)
+ *   intensity - subtle | medium | hard                     (default: medium)
+ *   speed     - slow | normal | fast                       (default: normal)
+ *   text      - fallback текст, если slot пустой
+ *   static    - boolean, отключает анимации
+ *   uppercase - boolean, включает text-transform: uppercase
+ *
+ * Пример:
+ *   <kayf-glitch-text color="violet" intensity="hard">
+ *     SIGNAL LOST
+ *   </kayf-glitch-text>
+ */
+type Intensity = 'subtle' | 'medium' | 'hard';
+type Speed = 'slow' | 'normal' | 'fast';
+export declare class GlitchText extends KayfElement {
+    private _wrap?;
+    private _slot?;
+    private _layerA?;
+    private _layerB?;
+    private _onSlotChange?;
+    private _onEnter?;
+    private _observer?;
+    private _burstInterval;
+    private _burstTimeout;
+    static get observedAttributes(): string[];
+    get color(): ColorVariant;
+    get intensity(): Intensity;
+    get speed(): Speed;
+    get isStatic(): boolean;
+    get isUppercase(): boolean;
+    protected styles(): string;
+    protected template(): string;
+    protected setup(): void;
+    protected cleanup(): void;
+    private _resolveText;
+    private _burst;
+}
+export {};

package/dist/components/HudPanel/HudPanel.d.ts

@@ -0,0 +1,23 @@
+import { KayfElement } from '../../core/KayfElement';
+import { ColorVariant } from '../../core/tokens';
+export declare class HudPanel extends KayfElement {
+    private _panel?;
+    private _spot?;
+    private _titleSlot?;
+    private _metaSlot?;
+    private _footerSlot?;
+    private _onMove?;
+    private _onLeave?;
+    private _onSlotChange?;
+    static get observedAttributes(): string[];
+    get color(): ColorVariant;
+    get glowLevel(): string;
+    get radius(): number;
+    get padding(): number;
+    protected styles(): string;
+    protected template(): string;
+    protected setup(): void;
+    protected cleanup(): void;
+    private _syncSlotState;
+    private _slotHasContent;
+}

package/dist/components/SpotlightCard/SpotlightCard.d.ts

@@ -0,0 +1,12 @@
+import { KayfElement } from '../../core/KayfElement';
+import { ColorVariant } from '../../core/tokens';
+export declare class SpotlightCard extends KayfElement {
+    static get observedAttributes(): string[];
+    get color(): ColorVariant;
+    get glowLevel(): string;
+    get radius(): number;
+    protected styles(): string;
+    protected template(): string;
+    protected setup(): void;
+    protected cleanup(): void;
+}

package/dist/core/KayfElement.d.ts

@@ -0,0 +1,20 @@
+/**
+ * KayfElement - базовый класс для всех компонентов.
+ */
+export declare abstract class KayfElement extends HTMLElement {
+    protected root: ShadowRoot;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected update(): void;
+    protected abstract template(): string;
+    protected styles(): string;
+    protected render(): void;
+    protected setup(): void;
+    protected cleanup(): void;
+    protected attr(name: string, fallback?: string): string;
+    protected numAttr(name: string, fallback?: number): number;
+    protected boolAttr(name: string): boolean;
+}

package/dist/core/tokens.d.ts

@@ -0,0 +1,31 @@
+export declare const tokens: {
+    readonly colors: {
+        readonly cyan: "#00d4ff";
+        readonly violet: "#7c3aed";
+        readonly emerald: "#10b981";
+        readonly amber: "#f59e0b";
+        readonly red: "#ef4444";
+        readonly white: "#e8e8f0";
+    };
+    readonly glow: {
+        readonly cyan: "rgba(0, 212, 255, 0.2)";
+        readonly violet: "rgba(124, 58, 237, 0.2)";
+        readonly emerald: "rgba(16, 185, 129, 0.2)";
+        readonly amber: "rgba(245, 158, 11, 0.2)";
+        readonly red: "rgba(239, 68, 68, 0.2)";
+        readonly white: "rgba(232, 232, 240, 0.2)";
+    };
+    readonly spotlight: {
+        readonly cyan: "rgba(0, 212, 255, 0.12)";
+        readonly violet: "rgba(124, 58, 237, 0.12)";
+        readonly emerald: "rgba(16, 185, 129, 0.12)";
+        readonly amber: "rgba(245, 158, 11, 0.12)";
+        readonly red: "rgba(239, 68, 68, 0.12)";
+        readonly white: "rgba(232, 232, 240, 0.12)";
+    };
+};
+export type ColorVariant = keyof typeof tokens.colors;
+export declare const baseCSS = "\n  :host {\n    --kayf-cyan:    #00d4ff;\n    --kayf-violet:  #7c3aed;\n    --kayf-emerald: #10b981;\n    --kayf-amber:   #f59e0b;\n    --kayf-red:     #ef4444;\n    --kayf-bg:      #050508;\n    --kayf-surface: rgba(255, 255, 255, 0.03);\n    --kayf-border:  rgba(255, 255, 255, 0.07);\n    --kayf-text:    #e8e8f0;\n    --kayf-muted:   rgba(232, 232, 240, 0.4);\n    --kayf-font-sans: 'Syne', system-ui, sans-serif;\n    --kayf-font-mono: 'JetBrains Mono', monospace;\n  }\n";
+export declare function getColor(v: ColorVariant | string): string;
+export declare function getGlow(v: ColorVariant | string): string;
+export declare function getSpotlight(v: ColorVariant | string): string;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { KayfElement } from './core/KayfElement';
+export { tokens, baseCSS, getColor, getGlow, getSpotlight } from './core/tokens';
+export type { ColorVariant } from './core/tokens';
+export { SpotlightCard } from './components/SpotlightCard/SpotlightCard';
+export { BeamButton } from './components/BeamButton/BeamButton';
+export { AuroraCard } from './components/AuroraCard/AuroraCard';
+export { GlitchText } from './components/GlitchText/GlitchText';
+export { HudPanel } from './components/HudPanel/HudPanel';
+export declare const version = "0.1.0";