@mhmo91/schmancy 0.10.31 → 0.10.32

package/src/directives/magnetic.ts

@@ -1,7 +1,7 @@
 import { directive, type ElementPart, PartType } from 'lit/directive.js'
 import { AsyncDirective } from 'lit/async-directive.js'
 import { animationFrameScheduler, fromEvent, merge, Subject } from 'rxjs'
-import { auditTime, map, takeUntil } from 'rxjs/operators'
+import { auditTime, filter, map, takeUntil } from 'rxjs/operators'
 import { SPRING_SNAPPY } from '../utils/animation'
 import { reducedMotion$ } from './reduced-motion'
 
@@ -77,6 +77,13 @@ class MagneticDirective extends AsyncDirective {
 
 		const move$ = fromEvent<MouseEvent>(target, 'mousemove').pipe(
 			auditTime(0, animationFrameScheduler),
+			filter(() =>
+				this.element.checkVisibility?.({
+					contentVisibilityAuto: true,
+					checkOpacity: true,
+					checkVisibilityCSS: true,
+				} as CheckVisibilityOptions) ?? true,
+			),
 			map(e => {
 				const rect = this.cachedRect ?? this.element.getBoundingClientRect()
 				const centerX = rect.left + rect.width / 2

package/dist/magnetic-B2VKNfDu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"magnetic-B2VKNfDu.js","names":[],"sources":["../src/directives/magnetic.ts"],"sourcesContent":["import { directive, type ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { animationFrameScheduler, fromEvent, merge, Subject } from 'rxjs'\nimport { auditTime, map, takeUntil } from 'rxjs/operators'\nimport { SPRING_SNAPPY } from '../utils/animation'\nimport { reducedMotion$ } from './reduced-motion'\n\nexport interface MagneticOptions {\n\t/** Max displacement in pixels (default: 4) */\n\tstrength?: number\n\t/** Activation radius in pixels (default: 100) */\n\tradius?: number\n}\n\n/**\n * Magnetic directive — elements lean toward the cursor with spring physics.\n *\n * Uses `style.translate` (CSS individual transform) so it composes\n * with existing transforms on the element.\n *\n * @example\n * ```html\n * <schmancy-button ${magnetic()}>Submit</schmancy-button>\n * <schmancy-icon-button ${magnetic({ strength: 6, radius: 120 })}>add</schmancy-icon-button>\n * ```\n */\nclass MagneticDirective extends AsyncDirective {\n\tprivate element!: HTMLElement\n\tprivate readonly teardown$ = new Subject<void>()\n\tprivate strength = 4\n\tprivate radius = 100\n\tprivate prevKey?: string\n\tprivate cachedRect?: DOMRect\n\n\trender(_options?: MagneticOptions) {\n\t\treturn undefined\n\t}\n\n\toverride update(part: ElementPart, [options]: [MagneticOptions?]) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('magnetic directive must be used on an element')\n\t\t}\n\n\t\tconst key = JSON.stringify(options ?? {})\n\t\tif (this.element && key === this.prevKey) return undefined\n\t\tthis.prevKey = key\n\n\t\tthis.element = part.element as HTMLElement\n\t\tthis.strength = options?.strength ?? 4\n\t\tthis.radius = options?.radius ?? 100\n\n\t\tthis.element.style.transition = `translate ${SPRING_SNAPPY.duration}ms ${SPRING_SNAPPY.easingFallback}`\n\n\t\tthis.teardown$.next()\n\t\tthis.setupMagnetic()\n\n\t\treturn undefined\n\t}\n\n\toverride reconnected() {\n\t\tthis.teardown$.next()\n\t\tthis.setupMagnetic()\n\t}\n\n\tprivate setupMagnetic() {\n\t\tif (reducedMotion$.value) return\n\n\t\tconst target = this.element.parentElement ?? document\n\n\t\tconst enter$ = fromEvent(this.element, 'mouseenter').pipe(\n\t\t\tmap(() => {\n\t\t\t\tthis.element.style.willChange = 'translate'\n\t\t\t\tthis.cachedRect = this.element.getBoundingClientRect()\n\t\t\t\treturn null\n\t\t\t}),\n\t\t)\n\n\t\tconst move$ = fromEvent<MouseEvent>(target, 'mousemove').pipe(\n\t\t\tauditTime(0, animationFrameScheduler),\n\t\t\tmap(e => {\n\t\t\t\tconst rect = this.cachedRect ?? this.element.getBoundingClientRect()\n\t\t\t\tconst centerX = rect.left + rect.width / 2\n\t\t\t\tconst centerY = rect.top + rect.height / 2\n\t\t\t\tconst dx = e.clientX - centerX\n\t\t\t\tconst dy = e.clientY - centerY\n\t\t\t\tconst distance = Math.sqrt(dx * dx + dy * dy)\n\n\t\t\t\tif (distance < this.radius && distance > 0) {\n\t\t\t\t\tconst pull = (1 - distance / this.radius) * this.strength\n\t\t\t\t\treturn { x: (dx / distance) * pull, y: (dy / distance) * pull }\n\t\t\t\t}\n\t\t\t\treturn { x: 0, y: 0 }\n\t\t\t}),\n\t\t)\n\n\t\tconst leave$ = fromEvent(target, 'mouseleave').pipe(\n\t\t\tmap(() => {\n\t\t\t\tthis.element.style.willChange = ''\n\t\t\t\tthis.cachedRect = undefined\n\t\t\t\treturn { x: 0, y: 0 }\n\t\t\t}),\n\t\t)\n\n\t\t// Also tear down if user enables reduced motion\n\t\tconst motionChange$ = reducedMotion$.pipe(\n\t\t\tmap(reduced => {\n\t\t\t\tif (reduced) {\n\t\t\t\t\tthis.element.style.translate = ''\n\t\t\t\t\tthis.element.style.willChange = ''\n\t\t\t\t}\n\t\t\t\treturn null\n\t\t\t}),\n\t\t)\n\n\t\tmerge(enter$, move$, leave$, motionChange$)\n\t\t\t.pipe(takeUntil(this.teardown$))\n\t\t\t.subscribe(pos => {\n\t\t\t\tif (pos) {\n\t\t\t\t\tthis.element.style.translate = `${pos.x}px ${pos.y}px`\n\t\t\t\t}\n\t\t\t})\n\t}\n\n\toverride disconnected() {\n\t\tthis.teardown$.next()\n\t\tif (this.element) {\n\t\t\tthis.element.style.translate = ''\n\t\t\tthis.element.style.willChange = ''\n\t\t}\n\t}\n}\n\nexport const magnetic = directive(MagneticDirective)\n"],"mappings":";;;;;;AA0BA,IA0Ga,IAAW,EA1GxB,cAAgC,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,YAEF,IAAI,KAAA,KAAA,WACd,GAAA,KAAA,SACF;CAAA;CAIjB,OAAO,GAAA,CAEP;CAEA,OAAgB,GAAA,CAAoB,IAAA;EACnC,IAAI,EAAK,SAAS,EAAS,SAC1B,MAAU,MAAM,+CAAA;EAGjB,IAAM,IAAM,KAAK,UAAU,KAAW,CAAC,CAAA;EACnC,KAAK,WAAW,MAAQ,KAAK,YACjC,KAAK,UAAU,GAEf,KAAK,UAAU,EAAK,SACpB,KAAK,WAAW,GAAS,YAAY,GACrC,KAAK,SAAS,GAAS,UAAU,KAEjC,KAAK,QAAQ,MAAM,aAAa,aAAa,EAAc,SAAA,KAAc,EAAc,kBAEvF,KAAK,UAAU,KAAA,GACf,KAAK,cAAA;CAGN;CAEA,cAAA;EACC,KAAK,UAAU,KAAA,GACf,KAAK,cAAA;CACN;CAEA,gBAAA;EACC,IAAI,EAAe,OAAO;EAE1B,IAAM,IAAS,KAAK,QAAQ,iBAAiB;EA+C7C,EA7Ce,EAAU,KAAK,SAAS,YAAA,EAAc,KACpD,SACC,KAAK,QAAQ,MAAM,aAAa,aAChC,KAAK,aAAa,KAAK,QAAQ,sBAAA,GACxB,KAAA,CAAA,GAIK,EAAsB,GAAQ,WAAA,EAAa,KACxD,EAAU,GAAG,CAAA,GACb,GAAI,MAAA;GACH,IAAM,IAAO,KAAK,cAAc,KAAK,QAAQ,sBAAA,GACvC,IAAU,EAAK,OAAO,EAAK,QAAQ,GACnC,IAAU,EAAK,MAAM,EAAK,SAAS,GACnC,IAAK,EAAE,UAAU,GACjB,IAAK,EAAE,UAAU,GACjB,IAAW,KAAK,KAAK,IAAK,IAAK,IAAK,CAAA;GAE1C,IAAI,IAAW,KAAK,UAAU,IAAW,GAAG;IAC3C,IAAM,KAAQ,IAAI,IAAW,KAAK,UAAU,KAAK;IACjD,OAAO;KAAE,GAAI,IAAK,IAAY;KAAM,GAAI,IAAK,IAAY;IAAA;GAC1D;GACA,OAAO;IAAE,GAAG;IAAG,GAAG;GAAA;EAAA,CAAA,CAAA,GAIL,EAAU,GAAQ,YAAA,EAAc,KAC9C,SACC,KAAK,QAAQ,MAAM,aAAa,IAChC,KAAK,aAAA,KAAa,GACX;GAAE,GAAG;GAAG,GAAG;EAAA,EAAA,CAAA,GAKE,EAAe,KACpC,GAAI,OACC,MACH,KAAK,QAAQ,MAAM,YAAY,IAC/B,KAAK,QAAQ,MAAM,aAAa,KAE1B,KAAA,CAAA,CAAA,EAKP,KAAK,EAAU,KAAK,SAAA,CAAA,EACpB,WAAU,MAAA;GACN,MACH,KAAK,QAAQ,MAAM,YAAY,GAAG,EAAI,EAAA,KAAO,EAAI,EAAA;EAAA,CAAA;CAGrD;CAEA,eAAA;EACC,KAAK,UAAU,KAAA,GACX,KAAK,YACR,KAAK,QAAQ,MAAM,YAAY,IAC/B,KAAK,QAAQ,MAAM,aAAa;CAElC;AAAA,CAAA;AAAA,SAAA,KAAA"}

package/dist/magnetic-MQ3HMHJi.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"magnetic-MQ3HMHJi.cjs","names":[],"sources":["../src/directives/magnetic.ts"],"sourcesContent":["import { directive, type ElementPart, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { animationFrameScheduler, fromEvent, merge, Subject } from 'rxjs'\nimport { auditTime, map, takeUntil } from 'rxjs/operators'\nimport { SPRING_SNAPPY } from '../utils/animation'\nimport { reducedMotion$ } from './reduced-motion'\n\nexport interface MagneticOptions {\n\t/** Max displacement in pixels (default: 4) */\n\tstrength?: number\n\t/** Activation radius in pixels (default: 100) */\n\tradius?: number\n}\n\n/**\n * Magnetic directive — elements lean toward the cursor with spring physics.\n *\n * Uses `style.translate` (CSS individual transform) so it composes\n * with existing transforms on the element.\n *\n * @example\n * ```html\n * <schmancy-button ${magnetic()}>Submit</schmancy-button>\n * <schmancy-icon-button ${magnetic({ strength: 6, radius: 120 })}>add</schmancy-icon-button>\n * ```\n */\nclass MagneticDirective extends AsyncDirective {\n\tprivate element!: HTMLElement\n\tprivate readonly teardown$ = new Subject<void>()\n\tprivate strength = 4\n\tprivate radius = 100\n\tprivate prevKey?: string\n\tprivate cachedRect?: DOMRect\n\n\trender(_options?: MagneticOptions) {\n\t\treturn undefined\n\t}\n\n\toverride update(part: ElementPart, [options]: [MagneticOptions?]) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('magnetic directive must be used on an element')\n\t\t}\n\n\t\tconst key = JSON.stringify(options ?? {})\n\t\tif (this.element && key === this.prevKey) return undefined\n\t\tthis.prevKey = key\n\n\t\tthis.element = part.element as HTMLElement\n\t\tthis.strength = options?.strength ?? 4\n\t\tthis.radius = options?.radius ?? 100\n\n\t\tthis.element.style.transition = `translate ${SPRING_SNAPPY.duration}ms ${SPRING_SNAPPY.easingFallback}`\n\n\t\tthis.teardown$.next()\n\t\tthis.setupMagnetic()\n\n\t\treturn undefined\n\t}\n\n\toverride reconnected() {\n\t\tthis.teardown$.next()\n\t\tthis.setupMagnetic()\n\t}\n\n\tprivate setupMagnetic() {\n\t\tif (reducedMotion$.value) return\n\n\t\tconst target = this.element.parentElement ?? document\n\n\t\tconst enter$ = fromEvent(this.element, 'mouseenter').pipe(\n\t\t\tmap(() => {\n\t\t\t\tthis.element.style.willChange = 'translate'\n\t\t\t\tthis.cachedRect = this.element.getBoundingClientRect()\n\t\t\t\treturn null\n\t\t\t}),\n\t\t)\n\n\t\tconst move$ = fromEvent<MouseEvent>(target, 'mousemove').pipe(\n\t\t\tauditTime(0, animationFrameScheduler),\n\t\t\tmap(e => {\n\t\t\t\tconst rect = this.cachedRect ?? this.element.getBoundingClientRect()\n\t\t\t\tconst centerX = rect.left + rect.width / 2\n\t\t\t\tconst centerY = rect.top + rect.height / 2\n\t\t\t\tconst dx = e.clientX - centerX\n\t\t\t\tconst dy = e.clientY - centerY\n\t\t\t\tconst distance = Math.sqrt(dx * dx + dy * dy)\n\n\t\t\t\tif (distance < this.radius && distance > 0) {\n\t\t\t\t\tconst pull = (1 - distance / this.radius) * this.strength\n\t\t\t\t\treturn { x: (dx / distance) * pull, y: (dy / distance) * pull }\n\t\t\t\t}\n\t\t\t\treturn { x: 0, y: 0 }\n\t\t\t}),\n\t\t)\n\n\t\tconst leave$ = fromEvent(target, 'mouseleave').pipe(\n\t\t\tmap(() => {\n\t\t\t\tthis.element.style.willChange = ''\n\t\t\t\tthis.cachedRect = undefined\n\t\t\t\treturn { x: 0, y: 0 }\n\t\t\t}),\n\t\t)\n\n\t\t// Also tear down if user enables reduced motion\n\t\tconst motionChange$ = reducedMotion$.pipe(\n\t\t\tmap(reduced => {\n\t\t\t\tif (reduced) {\n\t\t\t\t\tthis.element.style.translate = ''\n\t\t\t\t\tthis.element.style.willChange = ''\n\t\t\t\t}\n\t\t\t\treturn null\n\t\t\t}),\n\t\t)\n\n\t\tmerge(enter$, move$, leave$, motionChange$)\n\t\t\t.pipe(takeUntil(this.teardown$))\n\t\t\t.subscribe(pos => {\n\t\t\t\tif (pos) {\n\t\t\t\t\tthis.element.style.translate = `${pos.x}px ${pos.y}px`\n\t\t\t\t}\n\t\t\t})\n\t}\n\n\toverride disconnected() {\n\t\tthis.teardown$.next()\n\t\tif (this.element) {\n\t\t\tthis.element.style.translate = ''\n\t\t\tthis.element.style.willChange = ''\n\t\t}\n\t}\n}\n\nexport const magnetic = directive(MagneticDirective)\n"],"mappings":"2OA0BA,IAAM,EAAN,cAAgC,EAAA,cAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,CAAA,EAAA,KAAA,UAEF,IAAI,EAAA,QAAA,KAAA,SACd,EAAA,KAAA,OACF,GAAA,CAIjB,OAAO,EAAA,CAEP,CAEA,OAAgB,EAAA,CAAoB,GAAA,CACnC,GAAI,EAAK,OAAS,EAAA,SAAS,QAC1B,MAAU,MAAM,+CAAA,EAGjB,IAAM,EAAM,KAAK,UAAU,GAAW,CAAC,CAAA,EACnC,KAAK,SAAW,IAAQ,KAAK,UACjC,KAAK,QAAU,EAEf,KAAK,QAAU,EAAK,QACpB,KAAK,SAAW,GAAS,UAAY,EACrC,KAAK,OAAS,GAAS,QAAU,IAEjC,KAAK,QAAQ,MAAM,WAAa,aAAa,EAAA,EAAc,SAAA,KAAc,EAAA,EAAc,iBAEvF,KAAK,UAAU,KAAA,EACf,KAAK,cAAA,EAGN,CAEA,aAAA,CACC,KAAK,UAAU,KAAA,EACf,KAAK,cAAA,CACN,CAEA,eAAA,CACC,GAAI,EAAA,EAAe,MAAO,OAE1B,IAAM,EAAS,KAAK,QAAQ,eAAiB,UA+C7C,EAAA,EAAA,QAAA,EAAA,EAAA,WA7CyB,KAAK,QAAS,YAAA,EAAc,MAAA,EAAA,EAAA,UAEnD,KAAK,QAAQ,MAAM,WAAa,YAChC,KAAK,WAAa,KAAK,QAAQ,sBAAA,EACxB,KAAA,CAAA,GAyCH,EAAA,EAAA,WArC8B,EAAQ,WAAA,EAAa,MAAA,EAAA,EAAA,WAC9C,EAAG,EAAA,uBAAA,GAAuB,EAAA,EAAA,KAChC,GAAA,CACH,IAAM,EAAO,KAAK,YAAc,KAAK,QAAQ,sBAAA,EACvC,EAAU,EAAK,KAAO,EAAK,MAAQ,EACnC,EAAU,EAAK,IAAM,EAAK,OAAS,EACnC,EAAK,EAAE,QAAU,EACjB,EAAK,EAAE,QAAU,EACjB,EAAW,KAAK,KAAK,EAAK,EAAK,EAAK,CAAA,EAE1C,GAAI,EAAW,KAAK,QAAU,EAAW,EAAG,CAC3C,IAAM,GAAQ,EAAI,EAAW,KAAK,QAAU,KAAK,SACjD,MAAO,CAAE,EAAI,EAAK,EAAY,EAAM,EAAI,EAAK,EAAY,CAAA,CAC1D,CACA,MAAO,CAAE,EAAG,EAAG,EAAG,CAAA,CAAA,CAAA,CAAA,GAuBN,EAAA,EAAA,WAnBW,EAAQ,YAAA,EAAc,MAAA,EAAA,EAAA,UAE7C,KAAK,QAAQ,MAAM,WAAa,GAChC,KAAK,WAAA,IAAa,GACX,CAAE,EAAG,EAAG,EAAG,CAAA,EAAA,CAAA,EAKE,EAAA,EAAe,MAAA,EAAA,EAAA,KAChC,IACC,IACH,KAAK,QAAQ,MAAM,UAAY,GAC/B,KAAK,QAAQ,MAAM,WAAa,IAE1B,KAAA,CAAA,CAAA,EAKP,MAAA,EAAA,EAAA,WAAe,KAAK,SAAA,CAAA,EACpB,UAAU,GAAA,CACN,IACH,KAAK,QAAQ,MAAM,UAAY,GAAG,EAAI,EAAA,KAAO,EAAI,EAAA,IAAA,CAAA,CAGrD,CAEA,cAAA,CACC,KAAK,UAAU,KAAA,EACX,KAAK,UACR,KAAK,QAAQ,MAAM,UAAY,GAC/B,KAAK,QAAQ,MAAM,WAAa,GAElC,CAAA,EAGY,GAAA,EAAA,EAAA,WAAqB,CAAA,EAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}