@mhmo91/schmancy 0.9.4 → 0.9.6

package/dist/list-d1mHar5p.js

@@ -0,0 +1,106 @@
+import { a as e, o as t, t as n } from "./tailwind.mixin-DufHBjmb.js";
+import { t as r } from "./provide-jn1Fj1vv.js";
+import { t as i } from "./decorate-D_utPUsC.js";
+import "./mixins.js";
+import { customElement as a, property as o, queryAssignedElements as s } from "lit/decorators.js";
+import { css as c, html as l } from "lit";
+var u = t(void 0), d = t("surface"), f = class extends n(c`
+	:host {
+		display: block;
+		border-radius: 0.5rem;
+		transition:
+			background 200ms ease,
+			box-shadow 300ms ease,
+			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	:host(:hover:not([readonly])) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-surface-on) 8%, transparent);
+		box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
+	}
+	:host(:active:not([readonly])) {
+		transform: scale(0.98);
+		transition-duration: 100ms;
+	}
+	:host([selected]) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-secondary-container) 30%, transparent);
+		box-shadow: 0 0 10px -3px color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:host { transition: background 200ms ease; }
+		:host(:active:not([readonly])) { transform: none; }
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.selected = !1;
+	}
+	get imgClasses() {
+		return [
+			"h-4",
+			"w-4",
+			"sm:h-5",
+			"sm:w-5",
+			"object-contain"
+		];
+	}
+	firstUpdated() {
+		this.leading?.forEach((e) => {
+			e.classList.add(...this.imgClasses);
+		}), this.trailing?.forEach((e) => {
+			e.classList.add(...this.imgClasses);
+		});
+	}
+	render() {
+		let e = {
+			"w-full flex items-center min-h-[36px] sm:min-h-[40px] py-1 px-2 sm:px-3 text-sm": !0,
+			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden": !0,
+			"cursor-pointer": !this.readonly
+		};
+		return l`<li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(e)}>
+			<slot></slot>
+		</li>`;
+	}
+};
+i([e({
+	context: d,
+	subscribe: !0
+}), o()], f.prototype, "variant", void 0), i([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "rounded", void 0), i([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "readonly", void 0), i([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "selected", void 0), i([s({
+	slot: "leading",
+	flatten: !0
+})], f.prototype, "leading", void 0), i([s({
+	slot: "trailing",
+	flatten: !0
+})], f.prototype, "trailing", void 0), f = i([a("schmancy-list-item")], f);
+var p = class extends n(c`
+	:host {
+		display: block;
+		padding-top: 8px;
+		padding-bottom: 8px;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.fill = "auto", this.elevation = 0;
+	}
+	render() {
+		return l`
+			<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>
+				<ul>
+					<slot></slot>
+				</ul>
+			</schmancy-surface>
+		`;
+	}
+};
+i([r({ context: u }), o()], p.prototype, "surface", void 0), i([o({
+	type: String,
+	reflect: !0
+})], p.prototype, "fill", void 0), i([o({ type: Number })], p.prototype, "elevation", void 0), p = i([a("schmancy-list")], p);
+export { f as n, u as r, p as t };

package/dist/list-d1mHar5p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-d1mHar5p.js","names":[],"sources":["../src/list/context.ts","../src/surface/context.ts","../src/list/list-item.ts","../src/list/list.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancyListTypeContext = createContext<TSurfaceColor>(undefined)\n","import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceTypeContext } from '@schmancy/surface/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\n\n/**\n * @element schmancy-list-item\n * @slot leading - leading content\n * @slot trailing - trailing content\n * @slot - default content\n */\n@customElement('schmancy-list-item')\nexport class SchmancyListItem extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tborder-radius: 0.5rem;\n\t\ttransition:\n\t\t\tbackground 200ms ease,\n\t\t\tbox-shadow 300ms ease,\n\t\t\ttransform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t}\n\t:host(:hover:not([readonly])) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-surface-on) 8%, transparent);\n\t\tbox-shadow: 0 2px 8px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);\n\t}\n\t:host(:active:not([readonly])) {\n\t\ttransform: scale(0.98);\n\t\ttransition-duration: 100ms;\n\t}\n\t:host([selected]) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-secondary-container) 30%, transparent);\n\t\tbox-shadow: 0 0 10px -3px color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host { transition: background 200ms ease; }\n\t\t:host(:active:not([readonly])) { transform: none; }\n\t}\n`) {\n\t@consume({ context: SchmancySurfaceTypeContext, subscribe: true })\n\t@property()\n\tvariant: TSurfaceColor\n\n\t@property({ type: Boolean, reflect: true })\n\trounded: boolean\n\n\t@property({ type: Boolean, reflect: true }) readonly: boolean\n\n\t@property({ type: Boolean, reflect: true }) selected: boolean = false\n\n\t@queryAssignedElements({\n\t\tslot: 'leading',\n\t\tflatten: true,\n\t})\n\tprivate leading!: HTMLElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'trailing',\n\t\tflatten: true,\n\t})\n\tprivate trailing!: HTMLElement[]\n\n\tprotected get imgClasses(): string[] {\n\t\treturn ['h-4', 'w-4', 'sm:h-5', 'sm:w-5', 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\tthis.leading?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t\tthis.trailing?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'w-full flex items-center min-h-[36px] sm:min-h-[40px] py-1 px-2 sm:px-3 text-sm': true,\n\t\t\t'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden': true,\n\t\t\t'cursor-pointer': !this.readonly,\n\t\t}\n\n\t\treturn html`<li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(classes)}>\n\t\t\t<slot></slot>\n\t\t</li>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list-item': SchmancyListItem\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceFill } from '@schmancy/surface'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SchmancyListTypeContext } from './context'\n\n/**\n * `<schmancy-list>` component.\n *\n * A list component that wraps its content within a customizable surface.\n * It allows you to set the surface type and fill style, and can optionally\n * enable scrolling behavior by delegating the scroller attribute to the surface.\n *\n * @element schmancy-list\n * @slot - The default slot for list items.\n *\n * @example\n * <schmancy-list surface=\"container\" scroller>\n *   <schmancy-list-item>List Item 1</schmancy-list-item>\n * </schmancy-list>\n */\n@customElement('schmancy-list')\nexport class List extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n`) {\n\t/**\n\t * Defines the type or color of the surface used by the component.\n\t * This value is provided to descendant components via context.\n\t *\n\t * @attr surface\n\t * @type {TSurfaceColor}\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancyListTypeContext })\n\t@property()\n\tsurface: TSurfaceColor\n\n\t/**\n\t * Determines the fill style of the underlying surface.\n\t *\n\t * @attr fill\n\t * @type {SchmancySurfaceFill}\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * Defines the elevation level of the surface.\n\t *\n\t * @attr elevation\n\t * @type {number}\n\t * @default 0\n\t */\n\t@property({ type: Number })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t * The list content is wrapped inside a `<schmancy-surface>` element.\n\t * The scroller property is delegated to the surface so that it controls\n\t * the scrollable behavior.\n\t *\n\t * @returns The HTML template for the component.\n\t */\n\trender() {\n\t\treturn html`\n\t\t\t<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>\n\t\t\t\t<ul>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</schmancy-surface>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list': List\n\t}\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAA0B,EAAA,KAA6B,EAAA,ECAvD,IAA6B,EAA6B,UAAA,ECYhE,IAAA,cAA+B,EAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAmCQ;;CAchE,IAAA,aAAc;AACb,SAAO;GAAC;GAAO;GAAO;GAAU;GAAU;GAAA;;CAG3C,eAAA;AACC,OAAK,SAAS,SAAQ,MAAA;AACrB,KAAI,UAAU,IAAA,GAAO,KAAK,WAAA;IAAA,EAE3B,KAAK,UAAU,SAAQ,MAAA;AACtB,KAAI,UAAU,IAAA,GAAO,KAAK,WAAA;IAAA;;CAI5B,SAAA;EACC,IAAM,IAAU;GACf,mFAAA,CAAmF;GACnF,iJAAA,CAAiJ;GACjJ,kBAAA,CAAmB,KAAK;GAAA;AAGzB,SAAO,CAAI,iBAAiB,KAAK,WAAA,KAAgB,EAAA,SAAW,KAAK,SAAS,EAAA,CAAA;;;;;GA3C1E,EAAQ;CAAE,SAAS;CAA4B,WAAA,CAAW;CAAA,CAAA,EAC1D,GAAA,CAAA,EAAU,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAGV,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAG1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAE1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAE1C,EAAsB;CACtB,MAAM;CACN,SAAA,CAAS;CAAA,CAAA,CAAA,EACR,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAGD,EAAsB;CACtB,MAAM;CACN,SAAA,CAAS;CAAA,CAAA,CAAA,EACR,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CA/CF,EAAc,qBAAA,CAAA,EAAqB,EAAA;ACW7B,IAAA,IAAA,cAAmB,EAAgB,CAAG;;;;;;;;2BA2BhB,QAAA,KAAA,YAUO;;CAUnC,SAAA;AACC,SAAO,CAAI;kCACqB,KAAK,UAAA,SAAmB,KAAK,KAAA,QAAa,KAAK,QAAA;;;;;;;;GAlC/E,EAAQ,EAAE,SAAS,GAAA,CAAA,EACnB,GAAA,CAAA,EAAU,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAUV,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAUzC,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,aAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CArC3B,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA,GAAA,KAAA,GAAA,KAAA"}

package/dist/list.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./list-swIL9VDv.cjs`);Object.defineProperty(exports,`List`,{enumerable:!0,get:function(){return e.t}}),Object.defineProperty(exports,`SchmancyListItem`,{enumerable:!0,get:function(){return e.n}}),exports.SchmancyListTypeContext=e.r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./list-CmJ5h35b.cjs`);Object.defineProperty(exports,`List`,{enumerable:!0,get:function(){return e.t}}),Object.defineProperty(exports,`SchmancyListItem`,{enumerable:!0,get:function(){return e.n}}),exports.SchmancyListTypeContext=e.r;

package/dist/list.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./list-Cm-jjXxM.js";
+import { n as e, r as t, t as n } from "./list-d1mHar5p.js";
 export { n as List, e as SchmancyListItem, t as SchmancyListTypeContext };

package/dist/litElement.mixin-Bj2q1yPw.cjs

@@ -0,0 +1 @@
+const e=require(`./tailwind.mixin-Cpa-VnnX.cjs`);var t=t=>{class n extends e.r(e.t(t)){constructor(...e){super(...e),this.disconnectedCallback=()=>{super.disconnectedCallback()}}}return n};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return t}});

package/dist/litElement.mixin-Bj2q1yPw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"litElement.mixin-Bj2q1yPw.cjs","names":[],"sources":["../mixins/litElement.mixin.ts"],"sourcesContent":["import { CSSResult, LitElement } from 'lit'\nimport { TailwindElement } from './tailwind.mixin'\nimport { BaseElement, IBaseMixin } from './baseElement'\nimport { Constructor } from './constructor'\n\nexport const $LitElement = <T extends CSSResult>(componentStyle?: T) => {\n\tclass TailwindMixinClass extends BaseElement(TailwindElement(componentStyle)) {\n\t\tdisconnectedCallback = () => {\n\t\t\tsuper.disconnectedCallback()\n\t\t}\n\t}\n\treturn TailwindMixinClass as CustomElementConstructor &\n\t\tConstructor<LitElement> &\n\t\tConstructor<IBaseMixin> /* see \"typing the subclass\" below */\n}\n"],"mappings":"iDAKA,IAAa,EAAoC,GAAA,CAChD,MAAM,UAA2B,EAAA,EAAY,EAAA,EAAgB,EAAA,CAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,yBAAA,CAE3D,MAAM,sBAAA,GAGR,OAAO,GAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/litElement.mixin-CncaUoxz.js

@@ -0,0 +1,12 @@
+import { r as e, t } from "./tailwind.mixin-DufHBjmb.js";
+var n = (n) => {
+	class r extends e(t(n)) {
+		constructor(...e) {
+			super(...e), this.disconnectedCallback = () => {
+				super.disconnectedCallback();
+			};
+		}
+	}
+	return r;
+};
+export { n as t };

package/dist/litElement.mixin-CncaUoxz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"litElement.mixin-CncaUoxz.js","names":[],"sources":["../mixins/litElement.mixin.ts"],"sourcesContent":["import { CSSResult, LitElement } from 'lit'\nimport { TailwindElement } from './tailwind.mixin'\nimport { BaseElement, IBaseMixin } from './baseElement'\nimport { Constructor } from './constructor'\n\nexport const $LitElement = <T extends CSSResult>(componentStyle?: T) => {\n\tclass TailwindMixinClass extends BaseElement(TailwindElement(componentStyle)) {\n\t\tdisconnectedCallback = () => {\n\t\t\tsuper.disconnectedCallback()\n\t\t}\n\t}\n\treturn TailwindMixinClass as CustomElementConstructor &\n\t\tConstructor<LitElement> &\n\t\tConstructor<IBaseMixin> /* see \"typing the subclass\" below */\n}\n"],"mappings":";AAKA,IAAa,KAAoC,MAAA;CAChD,MAAM,UAA2B,EAAY,EAAgB,EAAA,CAAA,CAAA;EAAA,YAAA,GAAA,GAAA;AAAA,SAAA,GAAA,EAAA,EAAA,KAAA,6BAAA;AAE3D,UAAM,sBAAA;;;;AAGR,QAAO;;AAAA,SAAA"}

package/dist/magnetic-Dj52WplI.js

@@ -0,0 +1,47 @@
+import { f as e } from "./animation-CXKSuUoE.js";
+import { t } from "./reduced-motion-B83yZbcO.js";
+import { Subject as n, animationFrameScheduler as r, fromEvent as i, merge as a } from "rxjs";
+import { auditTime as o, map as s, takeUntil as c } from "rxjs/operators";
+import { AsyncDirective as l } from "lit/async-directive.js";
+import { PartType as u, directive as d } from "lit/directive.js";
+var f = d(class extends l {
+	constructor(...e) {
+		super(...e), this.teardown$ = new n(), this.strength = 4, this.radius = 100;
+	}
+	render(e) {}
+	update(t, [n]) {
+		if (t.type !== u.ELEMENT) throw Error("magnetic directive must be used on an element");
+		let r = JSON.stringify(n ?? {});
+		this.element && r === this.prevKey || (this.prevKey = r, this.element = t.element, this.strength = n?.strength ?? 4, this.radius = n?.radius ?? 100, this.element.style.transition = `translate ${e.duration}ms ${e.easingFallback}`, this.teardown$.next(), this.setupMagnetic());
+	}
+	reconnected() {
+		this.teardown$.next(), this.setupMagnetic();
+	}
+	setupMagnetic() {
+		if (t.value) return;
+		let e = this.element.parentElement ?? document;
+		a(i(this.element, "mouseenter").pipe(s(() => (this.element.style.willChange = "translate", this.cachedRect = this.element.getBoundingClientRect(), null))), i(e, "mousemove").pipe(o(0, r), s((e) => {
+			let t = this.cachedRect ?? this.element.getBoundingClientRect(), n = t.left + t.width / 2, r = t.top + t.height / 2, i = e.clientX - n, a = e.clientY - r, o = Math.sqrt(i * i + a * a);
+			if (o < this.radius && o > 0) {
+				let e = (1 - o / this.radius) * this.strength;
+				return {
+					x: i / o * e,
+					y: a / o * e
+				};
+			}
+			return {
+				x: 0,
+				y: 0
+			};
+		})), i(e, "mouseleave").pipe(s(() => (this.element.style.willChange = "", this.cachedRect = void 0, {
+			x: 0,
+			y: 0
+		}))), t.pipe(s((e) => (e && (this.element.style.translate = "", this.element.style.willChange = ""), null)))).pipe(c(this.teardown$)).subscribe((e) => {
+			e && (this.element.style.translate = `${e.x}px ${e.y}px`);
+		});
+	}
+	disconnected() {
+		this.teardown$.next(), this.element && (this.element.style.translate = "", this.element.style.willChange = "");
+	}
+});
+export { f as t };

package/dist/magnetic-Dj52WplI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic-Dj52WplI.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;AAAA,QAAA,GAAA,EAAA,EAAA,KAAA,YAEF,IAAI,GAAA,EAAA,KAAA,WACd,GAAA,KAAA,SACF;;CAIjB,OAAO,GAAA;CAIP,OAAgB,GAAA,CAAoB,IAAA;AACnC,MAAI,EAAK,SAAS,EAAS,QAC1B,OAAU,MAAM,gDAAA;EAGjB,IAAM,IAAM,KAAK,UAAU,KAAW,EAAA,CAAA;AAClC,OAAK,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,MAAA,EACf,KAAK,eAAA;;CAKN,cAAA;AACC,OAAK,UAAU,MAAA,EACf,KAAK,eAAA;;CAGN,gBAAA;AACC,MAAI,EAAe,MAAO;EAE1B,IAAM,IAAS,KAAK,QAAQ,iBAAiB;AA+C7C,IA7Ce,EAAU,KAAK,SAAS,aAAA,CAAc,KACpD,SACC,KAAK,QAAQ,MAAM,aAAa,aAChC,KAAK,aAAa,KAAK,QAAQ,uBAAA,EACxB,MAAA,CAAA,EAIK,EAAsB,GAAQ,YAAA,CAAa,KACxD,EAAU,GAAG,EAAA,EACb,GAAI,MAAA;GACH,IAAM,IAAO,KAAK,cAAc,KAAK,QAAQ,uBAAA,EACvC,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,EAAA;AAE1C,OAAI,IAAW,KAAK,UAAU,IAAW,GAAG;IAC3C,IAAM,KAAQ,IAAI,IAAW,KAAK,UAAU,KAAK;AACjD,WAAO;KAAE,GAAI,IAAK,IAAY;KAAM,GAAI,IAAK,IAAY;KAAA;;AAE1D,UAAO;IAAE,GAAG;IAAG,GAAG;IAAA;IAAA,CAAA,EAIL,EAAU,GAAQ,aAAA,CAAc,KAC9C,SACC,KAAK,QAAQ,MAAM,aAAa,IAChC,KAAK,aAAA,KAAa,GACX;GAAE,GAAG;GAAG,GAAG;GAAA,EAAA,CAAA,EAKE,EAAe,KACpC,GAAI,OACC,MACH,KAAK,QAAQ,MAAM,YAAY,IAC/B,KAAK,QAAQ,MAAM,aAAa,KAE1B,MAAA,CAAA,CAAA,CAKP,KAAK,EAAU,KAAK,UAAA,CAAA,CACpB,WAAU,MAAA;AACN,SACH,KAAK,QAAQ,MAAM,YAAY,GAAG,EAAI,EAAA,KAAO,EAAI,EAAA;IAAA;;CAKrD,eAAA;AACC,OAAK,UAAU,MAAA,EACX,KAAK,YACR,KAAK,QAAQ,MAAM,YAAY,IAC/B,KAAK,QAAQ,MAAM,aAAa;;EAAA;AAAA,SAAA,KAAA"}

package/dist/magnetic-aBBnj_vk.cjs

@@ -0,0 +1 @@
+require(`./chunk-BCfY8kxB.cjs`);const e=require(`./animation-Bcwh107v.cjs`),t=require(`./reduced-motion-DR32yKEO.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/async-directive.js`),a=require(`lit/directive.js`);var o=class extends i.AsyncDirective{constructor(...e){super(...e),this.teardown$=new n.Subject,this.strength=4,this.radius=100}render(e){}update(t,[n]){if(t.type!==a.PartType.ELEMENT)throw Error(`magnetic directive must be used on an element`);let r=JSON.stringify(n??{});this.element&&r===this.prevKey||(this.prevKey=r,this.element=t.element,this.strength=n?.strength??4,this.radius=n?.radius??100,this.element.style.transition=`translate ${e.f.duration}ms ${e.f.easingFallback}`,this.teardown$.next(),this.setupMagnetic())}reconnected(){this.teardown$.next(),this.setupMagnetic()}setupMagnetic(){if(t.t.value)return;let e=this.element.parentElement??document;(0,n.merge)((0,n.fromEvent)(this.element,`mouseenter`).pipe((0,r.map)(()=>(this.element.style.willChange=`translate`,this.cachedRect=this.element.getBoundingClientRect(),null))),(0,n.fromEvent)(e,`mousemove`).pipe((0,r.auditTime)(0,n.animationFrameScheduler),(0,r.map)(e=>{let t=this.cachedRect??this.element.getBoundingClientRect(),n=t.left+t.width/2,r=t.top+t.height/2,i=e.clientX-n,a=e.clientY-r,o=Math.sqrt(i*i+a*a);if(o<this.radius&&o>0){let e=(1-o/this.radius)*this.strength;return{x:i/o*e,y:a/o*e}}return{x:0,y:0}})),(0,n.fromEvent)(e,`mouseleave`).pipe((0,r.map)(()=>(this.element.style.willChange=``,this.cachedRect=void 0,{x:0,y:0}))),t.t.pipe((0,r.map)(e=>(e&&(this.element.style.translate=``,this.element.style.willChange=``),null)))).pipe((0,r.takeUntil)(this.teardown$)).subscribe(e=>{e&&(this.element.style.translate=`${e.x}px ${e.y}px`)})}disconnected(){this.teardown$.next(),this.element&&(this.element.style.translate=``,this.element.style.willChange=``)}},s=(0,a.directive)(o);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/dist/magnetic-aBBnj_vk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic-aBBnj_vk.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,EAAA,CAAA,KAAA,UAEF,IAAI,EAAA,QAAA,KAAA,SACd,EAAA,KAAA,OACF,IAIjB,OAAO,EAAA,EAIP,OAAgB,EAAA,CAAoB,GAAA,CACnC,GAAI,EAAK,OAAS,EAAA,SAAS,QAC1B,MAAU,MAAM,gDAAA,CAGjB,IAAM,EAAM,KAAK,UAAU,GAAW,EAAA,CAAA,CAClC,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,MAAA,CACf,KAAK,eAAA,EAKN,aAAA,CACC,KAAK,UAAU,MAAA,CACf,KAAK,eAAA,CAGN,eAAA,CACC,GAAI,EAAA,EAAe,MAAO,OAE1B,IAAM,EAAS,KAAK,QAAQ,eAAiB,UA+C7C,EAAA,EAAA,QAAA,EAAA,EAAA,WA7CyB,KAAK,QAAS,aAAA,CAAc,MAAA,EAAA,EAAA,UAEnD,KAAK,QAAQ,MAAM,WAAa,YAChC,KAAK,WAAa,KAAK,QAAQ,uBAAA,CACxB,MAAA,CAAA,EAER,EAAA,EAAA,WAEmC,EAAQ,YAAA,CAAa,MAAA,EAAA,EAAA,WAC9C,EAAG,EAAA,wBAAA,EAAwB,EAAA,EAAA,KACjC,GAAA,CACH,IAAM,EAAO,KAAK,YAAc,KAAK,QAAQ,uBAAA,CACvC,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,EAAA,CAE1C,GAAI,EAAW,KAAK,QAAU,EAAW,EAAG,CAC3C,IAAM,GAAQ,EAAI,EAAW,KAAK,QAAU,KAAK,SACjD,MAAO,CAAE,EAAI,EAAK,EAAY,EAAM,EAAI,EAAK,EAAY,EAAA,CAE1D,MAAO,CAAE,EAAG,EAAG,EAAG,EAAA,EAAA,CAAA,EAEnB,EAAA,EAAA,WAEwB,EAAQ,aAAA,CAAc,MAAA,EAAA,EAAA,UAE7C,KAAK,QAAQ,MAAM,WAAa,GAChC,KAAK,WAAA,IAAa,GACX,CAAE,EAAG,EAAG,EAAG,EAAA,EAAA,CAAA,CAKE,EAAA,EAAe,MAAA,EAAA,EAAA,KAChC,IACC,IACH,KAAK,QAAQ,MAAM,UAAY,GAC/B,KAAK,QAAQ,MAAM,WAAa,IAE1B,MAAA,CAAA,CAAA,CAKP,MAAA,EAAA,EAAA,WAAe,KAAK,UAAA,CAAA,CACpB,UAAU,GAAA,CACN,IACH,KAAK,QAAQ,MAAM,UAAY,GAAG,EAAI,EAAA,KAAO,EAAI,EAAA,MAAA,CAKrD,cAAA,CACC,KAAK,UAAU,MAAA,CACX,KAAK,UACR,KAAK,QAAQ,MAAM,UAAY,GAC/B,KAAK,QAAQ,MAAM,WAAa,MAKtB,GAAA,EAAA,EAAA,WAAqB,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}