@uibit/particles 0.1.0

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,21 @@
+import type { Particles as HTMLElementClass } from '@uibit/particles';
+import '@uibit/particles';
+import type { Particle, ParticleHoverEffect, ParticleMode } from '@uibit/particles';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-particles': HTMLElementClass & {
+    count?: number;
+    speed?: number;
+    mode?: ParticleMode;
+    connect?: boolean;
+    connectDistance?: number;
+    hoverEffect?: ParticleHoverEffect;
+    interactiveRadius?: number;
+    _resize?: any;
+    _loop?: any;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import '@uibit/particles';
+  import type { Particles as HTMLElementClass } from '@uibit/particles';
+  import type { Particle, ParticleHoverEffect, ParticleMode } from '@uibit/particles';
+  
+  let {
+    count = undefined,
+      speed = undefined,
+      mode = undefined,
+      connect = undefined,
+      connectDistance = undefined,
+      hoverEffect = undefined,
+      interactiveRadius = undefined,
+      _resize = undefined,
+      _loop = undefined,
+      children
+  } = $props<{
+    children?: any;
+    count?: number;
+    speed?: number;
+    mode?: ParticleMode;
+    connect?: boolean;
+    connectDistance?: number;
+    hoverEffect?: ParticleHoverEffect;
+    interactiveRadius?: number;
+    _resize?: any;
+    _loop?: any;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && count !== undefined) {
+      elementRef.count = count;
+    }
+    if (elementRef && speed !== undefined) {
+      elementRef.speed = speed;
+    }
+    if (elementRef && mode !== undefined) {
+      elementRef.mode = mode;
+    }
+    if (elementRef && connect !== undefined) {
+      elementRef.connect = connect;
+    }
+    if (elementRef && connectDistance !== undefined) {
+      elementRef.connectDistance = connectDistance;
+    }
+    if (elementRef && hoverEffect !== undefined) {
+      elementRef.hoverEffect = hoverEffect;
+    }
+    if (elementRef && interactiveRadius !== undefined) {
+      elementRef.interactiveRadius = interactiveRadius;
+    }
+    if (elementRef && _resize !== undefined) {
+      elementRef._resize = _resize;
+    }
+    if (elementRef && _loop !== undefined) {
+      elementRef._loop = _loop;
+    }
+  });
+  
+</script>
+
+<uibit-particles bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-particles>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h } from 'vue';
+import type { Particles as HTMLElementClass } from '@uibit/particles';
+import '@uibit/particles';
+import type { Particle, ParticleHoverEffect, ParticleMode } from '@uibit/particles';
+
+export const Particles = defineComponent({
+  name: 'Particles',
+  props: {
+    count: { type: [String, Number, Boolean, Array, Object] as any },
+    speed: { type: [String, Number, Boolean, Array, Object] as any },
+    mode: { type: [String, Number, Boolean, Array, Object] as any },
+    connect: { type: [String, Number, Boolean, Array, Object] as any },
+    connectDistance: { type: [String, Number, Boolean, Array, Object] as any },
+    hoverEffect: { type: [String, Number, Boolean, Array, Object] as any },
+    interactiveRadius: { type: [String, Number, Boolean, Array, Object] as any },
+    _resize: { type: [String, Number, Boolean, Array, Object] as any },
+    _loop: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: [],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+
+
+      return h('uibit-particles', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, Particles } from './particles';
+export type { Particle, ParticleHoverEffect, EffectParticlesConfig } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,QAAQ,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default, Particles } from './particles';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/particles.d.ts

@@ -0,0 +1,60 @@
+import { UIBitElement, ResizeController, LoopController } from '@uibit/core';
+import type { ParticleHoverEffect, ParticleMode } from './types';
+/**
+ * An interactive canvas effect element. Creates dynamic background visuals
+ * across many modes: particles, abstract art, grids, flow fields, and more.
+ *
+ * @cssprop [--uibit-particles-color=#6b7280] - Space or comma-separated list of colors
+ * @cssprop [--uibit-particles-line-color=#e5e7eb] - Color of connecting lines
+ * @cssprop [--uibit-particles-opacity=1] - Opacity of the canvas overlay
+ * @cssprop [--uibit-particles-min-size=0.0625rem] - Minimum particle size
+ * @cssprop [--uibit-particles-max-size=0.1875rem] - Maximum particle size
+ */
+export declare class Particles extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Number of particles / elements in the field */
+    count: number;
+    /** Speed multiplier */
+    speed: number;
+    /**
+     * Animation mode.
+     * 'float' | 'snow' | 'rain' | 'neural' | 'matrix' |
+     * 'wave' | 'vortex' | 'smoke' | 'bubbles' | 'grid' | 'aurora' | 'noise' | 'rings'
+     */
+    mode: ParticleMode;
+    /** Draw constellation lines between nearby particles */
+    connect: boolean;
+    /** Max distance for connecting lines */
+    connectDistance: number;
+    /** Hover interaction: 'repel' | 'attract' | 'grab' | 'none' */
+    hoverEffect: ParticleHoverEffect;
+    /** Radius of the mouse hover interaction zone */
+    interactiveRadius: number;
+    private _canvas;
+    private _particles;
+    private _pulses;
+    private _mouse;
+    private _ctx;
+    private _lineColor;
+    private _colorCheckTick;
+    private _matrixChars;
+    private _time;
+    protected _resize: ResizeController;
+    protected _loop: LoopController;
+    firstUpdated(): void;
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private _resizeCanvas;
+    private _setupMouseListeners;
+    private _parseColors;
+    private _parseSize;
+    private _initParticles;
+    private _updateAndDraw;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-particles': Particles;
+    }
+}
+export default Particles;
+//# sourceMappingURL=particles.d.ts.map

package/dist/particles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../src/particles.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG5F,OAAO,KAAK,EAAY,mBAAmB,EAAE,YAAY,EAAgB,MAAM,SAAS,CAAC;AAEzF;;;;;;;;;GASG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEvB,kDAAkD;IACtB,KAAK,SAAM;IAEvC,uBAAuB;IACK,KAAK,SAAK;IAEtC;;;;OAIG;IACyB,IAAI,EAAE,YAAY,CAAW;IAEzD,wDAAwD;IAC3B,OAAO,UAAS;IAE7C,wCAAwC;IACmB,eAAe,SAAO;IAEjF,+DAA+D;IACR,WAAW,EAAE,mBAAmB,CAAW;IAElG,iDAAiD;IACY,iBAAiB,SAAO;IAEpE,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,MAAM,CAAgE;IAC9E,OAAO,CAAC,IAAI,CAAyC;IACrD,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,KAAK,CAAK;IAElB,SAAS,CAAC,OAAO,mBAKd;IAEH,SAAS,CAAC,KAAK,iBAGZ;IAEH,YAAY,SAOX;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,QAKnD;IAED,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,cAAc;IAkJtB,OAAO,CAAC,cAAc;IA4WtB,MAAM,oCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,SAAS,CAAC;KAC9B;CACF;eAEc,SAAS"}