@uibit/effect-trigger 0.1.0

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,87 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/effect-trigger';
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+
+@Component({
+  selector: 'uibit-effect-trigger',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(uibit-particle-create)': 'uibitParticleCreate.emit($event)'
+  }
+})
+export class NgxEffectTrigger {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.trigger = this.trigger();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.behavior = this.behavior();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.density = this.density();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.velocity = this.velocity();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.randomize = this.randomize();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.stagger = this.stagger();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.scaleRange = this.scaleRange();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.rotationRange = this.rotationRange();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.keyframes = this.keyframes();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.targetSelector = this.targetSelector();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.destinationSelector = this.destinationSelector();
+      }
+    });
+  }
+
+  readonly trigger = input<EffectTriggerType, any>('click');
+  readonly behavior = input<EffectBehaviorType, any>('float-displace');
+  readonly density = input<number, any>(1, { transform: numberAttribute });
+  readonly velocity = input<string, any>('1s');
+  readonly randomize = input<boolean, any>(false, { transform: booleanAttribute });
+  readonly stagger = input<string, any>('0ms');
+  readonly scaleRange = input<string, any>('0.5,1.5');
+  readonly rotationRange = input<string, any>('-180,180');
+  readonly keyframes = input<string | undefined, any>('');
+  readonly targetSelector = input<string | undefined, any>('');
+  readonly destinationSelector = input<string | undefined, any>('');
+
+  readonly uibitParticleCreate = output<CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>>();
+}

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

@@ -0,0 +1,10 @@
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import '@uibit/effect-trigger';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-effect-trigger': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/effect-trigger');
+  }
+});

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

@@ -0,0 +1,24 @@
+import type { JSX } from 'preact';
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-effect-trigger': JSX.HTMLAttributes<HTMLElementClass> & {
+      trigger?: EffectTriggerType;
+      behavior?: EffectBehaviorType;
+      density?: number;
+      velocity?: string;
+      randomize?: boolean;
+      stagger?: string;
+      scaleRange?: string;
+      rotationRange?: string;
+      keyframes?: string | undefined;
+      targetSelector?: string | undefined;
+      destinationSelector?: string | undefined;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/effect-trigger';
+
+export const EffectTrigger = component$<any>((props) => {
+  return (
+    <uibit-effect-trigger {...props}>
+      <Slot />
+    </uibit-effect-trigger>
+  );
+});

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

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-effect-trigger': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      trigger?: EffectTriggerType;
+      behavior?: EffectBehaviorType;
+      density?: number;
+      velocity?: string;
+      randomize?: boolean;
+      stagger?: string;
+      scaleRange?: string;
+      rotationRange?: string;
+      keyframes?: string | undefined;
+      targetSelector?: string | undefined;
+      destinationSelector?: string | undefined;
+      onUibitParticleCreate?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { JSX } from 'solid-js';
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-effect-trigger': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              trigger?: EffectTriggerType;
+      behavior?: EffectBehaviorType;
+      density?: number;
+      velocity?: string;
+      randomize?: boolean;
+      stagger?: string;
+      scaleRange?: string;
+      rotationRange?: string;
+      keyframes?: string | undefined;
+      targetSelector?: string | undefined;
+      destinationSelector?: string | undefined;
+      "on:uibit-particle-create"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-effect-trigger': HTMLElementClass & {
+    trigger?: EffectTriggerType;
+    behavior?: EffectBehaviorType;
+    density?: number;
+    velocity?: string;
+    randomize?: boolean;
+    stagger?: string;
+    scaleRange?: string;
+    rotationRange?: string;
+    keyframes?: string | undefined;
+    targetSelector?: string | undefined;
+    destinationSelector?: string | undefined;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import '@uibit/effect-trigger';
+  import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+  import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+  
+  let {
+    trigger = undefined,
+      behavior = undefined,
+      density = undefined,
+      velocity = undefined,
+      randomize = undefined,
+      stagger = undefined,
+      scaleRange = undefined,
+      rotationRange = undefined,
+      keyframes = undefined,
+      targetSelector = undefined,
+      destinationSelector = undefined,
+      children
+  } = $props<{
+    children?: any;
+    trigger?: EffectTriggerType;
+    behavior?: EffectBehaviorType;
+    density?: number;
+    velocity?: string;
+    randomize?: boolean;
+    stagger?: string;
+    scaleRange?: string;
+    rotationRange?: string;
+    keyframes?: string | undefined;
+    targetSelector?: string | undefined;
+    destinationSelector?: string | undefined;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && trigger !== undefined) {
+      elementRef.trigger = trigger;
+    }
+    if (elementRef && behavior !== undefined) {
+      elementRef.behavior = behavior;
+    }
+    if (elementRef && density !== undefined) {
+      elementRef.density = density;
+    }
+    if (elementRef && velocity !== undefined) {
+      elementRef.velocity = velocity;
+    }
+    if (elementRef && randomize !== undefined) {
+      elementRef.randomize = randomize;
+    }
+    if (elementRef && stagger !== undefined) {
+      elementRef.stagger = stagger;
+    }
+    if (elementRef && scaleRange !== undefined) {
+      elementRef.scaleRange = scaleRange;
+    }
+    if (elementRef && rotationRange !== undefined) {
+      elementRef.rotationRange = rotationRange;
+    }
+    if (elementRef && keyframes !== undefined) {
+      elementRef.keyframes = keyframes;
+    }
+    if (elementRef && targetSelector !== undefined) {
+      elementRef.targetSelector = targetSelector;
+    }
+    if (elementRef && destinationSelector !== undefined) {
+      elementRef.destinationSelector = destinationSelector;
+    }
+  });
+  
+</script>
+
+<uibit-effect-trigger bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-effect-trigger>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,35 @@
+import { defineComponent, h } from 'vue';
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+
+export const EffectTrigger = defineComponent({
+  name: 'EffectTrigger',
+  props: {
+    trigger: { type: [String, Number, Boolean, Array, Object] as any },
+    behavior: { type: [String, Number, Boolean, Array, Object] as any },
+    density: { type: [String, Number, Boolean, Array, Object] as any },
+    velocity: { type: [String, Number, Boolean, Array, Object] as any },
+    randomize: { type: [String, Number, Boolean, Array, Object] as any },
+    stagger: { type: [String, Number, Boolean, Array, Object] as any },
+    scaleRange: { type: [String, Number, Boolean, Array, Object] as any },
+    rotationRange: { type: [String, Number, Boolean, Array, Object] as any },
+    keyframes: { type: [String, Number, Boolean, Array, Object] as any },
+    targetSelector: { type: [String, Number, Boolean, Array, Object] as any },
+    destinationSelector: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['uibit-particle-create'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onUibit-particle-create'] = (event: Event) => {
+        emit('uibit-particle-create', event);
+      };
+
+      return h('uibit-effect-trigger', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, EffectTrigger } from './effect-trigger';
+export type { EffectTriggerType, EffectBehaviorType, BehaviorContext, BehaviorFn } 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,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default, EffectTrigger } from './effect-trigger';
+//# 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,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAclB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+
+  ::slotted([slot="trigger"]) {
+    display: inline-block;
+  }
+
+  /* Hide the template asset from standard layout */
+  slot[name="asset"] {
+    display: none !important;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+export type EffectTriggerType = 'click' | 'hover' | 'visible' | 'custom';
+export type EffectBehaviorType = 'traverse-x-right' | 'traverse-x-left' | 'traverse-y-up' | 'traverse-y-down' | 'fountain-burst' | 'vortex-attractor' | 'ambient-drift' | 'focal-pop' | 'orbit-halo' | 'float-displace' | string;
+export interface BehaviorContext {
+    triggerEl: HTMLElement;
+    assetEl: HTMLElement;
+    containerEl: HTMLElement;
+    density: number;
+    velocity: string;
+    randomize: boolean;
+    stagger: string;
+    scaleRange: string;
+    rotationRange: string;
+    destinationSelector?: string;
+}
+export type BehaviorFn = (ctx: BehaviorContext) => void;
+import type { EffectTrigger } from './effect-trigger';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-effect-trigger': EffectTrigger;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAC1B,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GACf,WAAW,GACX,YAAY,GACZ,gBAAgB,GAChB,MAAM,CAAC;AAEX,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,aAAa,CAAC;KACzC;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@uibit/effect-trigger",
+  "version": "0.1.0",
+  "description": "A behavioral engine that intercepts user actions (click, hover, visible) on standard DOM elements to trigger custom particle animations, physics-based viewport crossings, or micro-feedback flows using slotted SVGs or markup templates.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "effect-trigger",
+    "motion",
+    "animation",
+    "web-component",
+    "lit",
+    "particles"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "dependencies": {
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "effect-trigger",
+    "title": "Effect Trigger",
+    "category": "Media",
+    "tagName": "uibit-effect-trigger"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/effect-trigger"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
+  }
+}