@juanlaria/lifted 0.1.0 → 0.1.2

package/README.md

@@ -13,11 +13,12 @@ Inspired by [Josh Comeau's "Designing Beautiful Shadows"](https://www.joshwcomea
 - **Color-matched shadows** - automatically derives shadow color from background
 - **Dark mode support** - automatic detection + manual override
 - **Framework agnostic** - works with React, vanilla JS, or any framework
+- **Next.js App Router compatible** - includes "use client" directives
 
 ## Installation
 
 ```bash
-npm install lifted
+npm install @juanlaria/lifted
 ```
 
 ## Quick Start
@@ -25,7 +26,7 @@ npm install lifted
 ### React
 
 ```tsx
-import { LiftedBox } from 'lifted/react';
+import { LiftedBox } from '@juanlaria/lifted/react';
 
 // Raised card
 <LiftedBox elevation={0.5} background="#FDFDFD">
@@ -46,7 +47,7 @@ import { LiftedBox } from 'lifted/react';
 ### Vanilla JavaScript
 
 ```javascript
-import { initLiftedBox } from 'lifted/vanilla';
+import { initLiftedBox } from '@juanlaria/lifted/vanilla';
 
 const instance = initLiftedBox(element, {
   elevation: 0.5,
@@ -57,17 +58,173 @@ instance.setElevation(-0.2); // Inner shadow
 instance.destroy(); // Cleanup
 ```
 
-## Elevation Values
+## API Reference
+
+### LiftedBox Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `elevation` | `number` | `0.3` | Elevation level from `-1` (max inner shadow) to `1` (max drop shadow). Negative = inset, zero = none, positive = raised. |
+| `as` | `keyof JSX.IntrinsicElements` | `'div'` | HTML element to render as (`'div'`, `'section'`, `'button'`, etc.). |
+| `lightSource` | `number \| 'mouse' \| LightSource` | `-45` | Light source configuration. Number = angle in degrees, `'mouse'` = follows cursor. |
+| `background` | `string` | — | Background color (CSS). Used to auto-calculate shadow color. |
+| `shadowColor` | `string` | — | Manual shadow color override (CSS color). |
+| `shadowColorDark` | `string` | — | Shadow color for dark mode when using auto-detect. |
+| `intensity` | `number` | `1` | Shadow intensity multiplier. `0.5` = subtle, `1` = normal, `2` = dramatic. |
+| `animated` | `boolean` | `true` | Whether to animate shadow changes with transitions. |
+| `transitionDuration` | `number` | `150` | Transition duration in milliseconds. |
+| `children` | `React.ReactNode` | — | Content to render inside the component. |
+
+Plus all standard HTML div attributes (`className`, `style`, `onClick`, etc.).
+
+### Light Source Options
+
+```tsx
+// Static angle (degrees, -180 to 180)
+// -45 = top-left, 0 = left, 45 = top-right, 90 = top
+<LiftedBox lightSource={-45} />
+
+// Mouse tracking (follows cursor)
+<LiftedBox lightSource="mouse" />
+
+// Full configuration object
+<LiftedBox
+  lightSource={{
+    type: 'mouse',
+    smoothing: 0.1,      // 0-1, lower = smoother movement
+    maxAngle: 30,        // Maximum angle deviation
+    fallbackAngle: -45,  // Angle when mouse unavailable
+  }}
+/>
+
+// Custom controlled angle
+<LiftedBox
+  lightSource={{
+    type: 'custom',
+    angle: myAngleState,
+  }}
+/>
+```
+
+### Elevation Values
 
 | Value | Effect |
 |-------|--------|
-| `-1` | Maximum inner shadow |
-| `-0.3` | Standard pressed effect |
+| `-1` | Maximum inner shadow (deeply pressed) |
+| `-0.5` | Medium inner shadow |
+| `-0.3` | Subtle pressed effect |
 | `0` | No shadow |
 | `0.3` | Subtle raised card |
 | `0.5` | Medium elevation |
+| `0.75` | High elevation (modals, dropdowns) |
 | `1` | Maximum floating effect |
 
+### Vanilla JS API
+
+#### `initLiftedBox(element, options)`
+
+Initializes shadow on a DOM element.
+
+```typescript
+const instance = initLiftedBox(element, {
+  elevation: 0.5,
+  lightSource: -45,
+  background: '#FFFFFF',
+  shadowColor: undefined,      // Auto-calculated from background
+  shadowColorDark: undefined,  // For dark mode
+  intensity: 1,
+  animated: true,
+  transitionDuration: 150,
+  isDarkMode: false,
+});
+```
+
+#### Instance Methods
+
+| Method | Description |
+|--------|-------------|
+| `setElevation(n)` | Update elevation (`-1` to `1`) |
+| `setLightSource(source)` | Update light source |
+| `update(options)` | Update multiple options at once |
+| `getShadowCSS()` | Get current `box-shadow` CSS string |
+| `destroy()` | Remove shadows and cleanup listeners |
+
+### Utility Functions
+
+```typescript
+import {
+  generateBoxShadow,
+  applyLift,
+  removeLift,
+  getLiftCSS
+} from '@juanlaria/lifted/vanilla';
+
+// Generate CSS string directly
+const css = generateBoxShadow(0.5, { background: '#FFF' });
+// → "0.7px 0.7px 1px hsl(...)..."
+
+// Apply shadow to element (one-time, no instance)
+applyLift(element, 0.5, { background: '#FFF' });
+
+// Remove shadow from element
+removeLift(element);
+
+// Get CSS without applying
+const shadowCSS = getLiftCSS(0.5, { background: '#FFF' });
+```
+
+### Presets
+
+```typescript
+import { ELEVATION_PRESETS } from '@juanlaria/lifted';
+
+// Available presets:
+ELEVATION_PRESETS.deepInset  // -0.75
+ELEVATION_PRESETS.inset      // -0.3
+ELEVATION_PRESETS.none       // 0
+ELEVATION_PRESETS.subtle     // 0.15
+ELEVATION_PRESETS.small      // 0.25
+ELEVATION_PRESETS.medium     // 0.5
+ELEVATION_PRESETS.large      // 0.75
+ELEVATION_PRESETS.xlarge     // 1
+```
+
+### Hooks (React)
+
+```typescript
+import { useElevation, useDarkMode } from '@juanlaria/lifted/react';
+
+// Interactive elevation with hover/active states
+const { elevation, elevationProps } = useElevation({
+  base: 0.3,    // Default state
+  hover: 0.5,   // On hover
+  active: -0.1, // On click (inner shadow!)
+});
+
+<LiftedBox elevation={elevation} {...elevationProps}>
+  Interactive card
+</LiftedBox>
+
+// Dark mode detection (SSR-safe)
+const isDark = useDarkMode();
+```
+
+## TypeScript
+
+Full TypeScript support included. Key types:
+
+```typescript
+import type {
+  LiftedBoxProps,
+  LightSource,
+  LightSourceProp,
+  VanillaLiftedBoxOptions,
+  VanillaLiftedBoxInstance,
+  ShadowOptions,
+  ShadowResult,
+} from '@juanlaria/lifted';
+```
+
 ## License
 
 MIT © Juan Laria

package/dist/core/calculations.d.ts

@@ -3,7 +3,7 @@ import { ShadowLayer, LightSource, LightSourceProp, Position, Bounds } from './t
 export declare const MAX_LAYERS = 5;
 export declare const BASE_OPACITY = 0.075;
 export declare const DEFAULT_LIGHT_ANGLE = -45;
-export declare const DEFAULT_MAX_MOUSE_ANGLE = 30;
+export declare const DEFAULT_MAX_MOUSE_ANGLE = 60;
 export declare function normalizeLightSource(source: LightSourceProp | undefined): LightSource;
 export declare function calculateLightAngle(lightSource: LightSource, elementBounds?: Bounds, mousePosition?: Position | null): number;
 export declare function angleToOffsetRatios(angleDeg: number): {

package/dist/{index-G-GHoQdJ.js → index-C0sp-tDk.js}

@@ -3,7 +3,7 @@ function M(t) {
   return t === void 0 ? { type: "static", angle: -45 } : typeof t == "number" ? { type: "static", angle: t } : t === "mouse" ? {
     type: "mouse",
     smoothing: 0.1,
-    maxAngle: 30,
+    maxAngle: 60,
     fallbackAngle: -45
   } : t;
 }
@@ -17,7 +17,7 @@ function T(t, e, n) {
         return t.fallbackAngle ?? -45;
       const s = e.x + e.width / 2, a = e.y + e.height / 2, i = n.x - s, l = n.y - a;
       let r = Math.atan2(l, i) * (180 / Math.PI) + 180;
-      const c = t.maxAngle ?? 30, h = t.fallbackAngle ?? -45;
+      const c = t.maxAngle ?? 60, h = t.fallbackAngle ?? -45;
       let o = r - h;
       for (; o > 180; ) o -= 360;
       for (; o < -180; ) o += 360;

package/dist/{index-4W01YOTU.cjs → index-D6JJAZ46.cjs}

@@ -1,2 +1,2 @@
-"use strict";function b(t){return t===void 0?{type:"static",angle:-45}:typeof t=="number"?{type:"static",angle:t}:t==="mouse"?{type:"mouse",smoothing:.1,maxAngle:30,fallbackAngle:-45}:t}function p(t,n,e){switch(t.type){case"static":case"custom":return t.angle;case"mouse":{if(!e||!n)return t.fallbackAngle??-45;const a=n.x+n.width/2,o=n.y+n.height/2,i=e.x-a,l=e.y-o;let r=Math.atan2(l,i)*(180/Math.PI)+180;const c=t.maxAngle??30,h=t.fallbackAngle??-45;let s=r-h;for(;s>180;)s-=360;for(;s<-180;)s+=360;return s=Math.max(-c,Math.min(c,s)),h+s}default:return-45}}function m(t){const n=t*(Math.PI/180);return{ratioX:Math.cos(n),ratioY:Math.sin(n)}}function M(t,n=-45,e=1){const a=Math.max(-1,Math.min(1,t));if(a===0)return[];const o=a<0,l=Math.abs(a)*5,{ratioX:f,ratioY:r}=m(n),c=o?-1:1,h=[];for(let s=0;s<5;s++){const A=s+1,u=Math.pow(2,s);if(A<=l)h.push({offsetX:u*f*e*c,offsetY:u*r*e*c,blur:u*e,spread:0,opacity:.075*e,inset:o});else if(A-1<l){const L=l-(A-1);h.push({offsetX:u*f*L*e*c,offsetY:u*r*L*e*c,blur:u*L*e,spread:0,opacity:.075*L*e,inset:o})}}return h}function _(t,n,e){return t+(n-t)*e}function G(t,n,e){return{x:_(t.x,n.x,e),y:_(t.y,n.y,e)}}function g(t){if(t.match(/^#([0-9a-f]{3,8})$/i))return I(t);const e=t.match(/^hsl\(\s*([\d.]+)\s*,?\s*([\d.]+)%?\s*,?\s*([\d.]+)%?\s*\)/i);if(e)return{h:parseFloat(e[1]),s:parseFloat(e[2]),l:parseFloat(e[3])};const a=t.match(/^rgb\(\s*([\d.]+)\s*,?\s*([\d.]+)\s*,?\s*([\d.]+)\s*\)/i);return a?E({r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3])}):null}function I(t){let n=0,e=0,a=0;return t.length===4?(n=parseInt(t[1]+t[1],16),e=parseInt(t[2]+t[2],16),a=parseInt(t[3]+t[3],16)):t.length>=7&&(n=parseInt(t.slice(1,3),16),e=parseInt(t.slice(3,5),16),a=parseInt(t.slice(5,7),16)),E({r:n,g:e,b:a})}function E({r:t,g:n,b:e}){t/=255,n/=255,e/=255;const a=Math.max(t,n,e),o=Math.min(t,n,e);let i=0,l=0;const f=(a+o)/2;if(a!==o){const r=a-o;switch(l=f>.5?r/(2-a-o):r/(a+o),a){case t:i=((n-e)/r+(n<e?6:0))/6;break;case n:i=((e-t)/r+2)/6;break;case e:i=((t-n)/r+4)/6;break}}return{h:Math.round(i*360),s:Math.round(l*100),l:Math.round(f*100)}}function w(t,n=!1){const e=g(t);if(!e)return n?"hsl(0 0% 100% / 0.1)":"hsl(220 3% 15%)";if(n){const a=Math.max(0,e.s-20),o=Math.min(100,e.l+30);return`hsl(${e.h} ${a}% ${o}%)`}else{const a=Math.max(0,e.s*.6),o=Math.max(10,e.l*.5);return`hsl(${e.h} ${a}% ${o}%)`}}function $(t,n){const e=g(t);return e?`hsl(${e.h} ${e.s}% ${e.l}% / ${n})`:`hsl(220 3% 15% / ${n})`}function F(t){const n=g(t);return n?n.l>50:!0}function S(t,n,e){const{elevation:a=.3,lightSource:o,background:i,shadowColor:l,shadowColorDark:f,intensity:r=1,isDarkMode:c=!1}=t,h=b(o),s=p(h,n,e),A=M(a,s,r);let u;l?u=l:c&&f?u=f:i?u=w(i,c):u=c?"hsl(0 0% 100% / 0.1)":"hsl(220 3% 15%)";const L=D(A,u),x=T(L),y=N(L,a,s);return{layers:L,boxShadow:x,cssVariables:y}}function O(t,n={}){return S({elevation:t,...n}).boxShadow}function D(t,n){return t.map(e=>({...e,color:$(n,e.opacity)}))}function T(t){return t.length===0?"none":t.map(n=>{const{offsetX:e,offsetY:a,blur:o,spread:i,color:l,inset:f}=n,r=d(e),c=d(a),h=d(o),s=d(i),A=f?"inset ":"";return i===0?`${A}${r} ${c} ${h} ${l}`:`${A}${r} ${c} ${h} ${s} ${l}`}).join(`,
+"use strict";function b(t){return t===void 0?{type:"static",angle:-45}:typeof t=="number"?{type:"static",angle:t}:t==="mouse"?{type:"mouse",smoothing:.1,maxAngle:60,fallbackAngle:-45}:t}function p(t,n,e){switch(t.type){case"static":case"custom":return t.angle;case"mouse":{if(!e||!n)return t.fallbackAngle??-45;const a=n.x+n.width/2,o=n.y+n.height/2,i=e.x-a,l=e.y-o;let r=Math.atan2(l,i)*(180/Math.PI)+180;const c=t.maxAngle??60,h=t.fallbackAngle??-45;let s=r-h;for(;s>180;)s-=360;for(;s<-180;)s+=360;return s=Math.max(-c,Math.min(c,s)),h+s}default:return-45}}function m(t){const n=t*(Math.PI/180);return{ratioX:Math.cos(n),ratioY:Math.sin(n)}}function M(t,n=-45,e=1){const a=Math.max(-1,Math.min(1,t));if(a===0)return[];const o=a<0,l=Math.abs(a)*5,{ratioX:f,ratioY:r}=m(n),c=o?-1:1,h=[];for(let s=0;s<5;s++){const A=s+1,u=Math.pow(2,s);if(A<=l)h.push({offsetX:u*f*e*c,offsetY:u*r*e*c,blur:u*e,spread:0,opacity:.075*e,inset:o});else if(A-1<l){const L=l-(A-1);h.push({offsetX:u*f*L*e*c,offsetY:u*r*L*e*c,blur:u*L*e,spread:0,opacity:.075*L*e,inset:o})}}return h}function _(t,n,e){return t+(n-t)*e}function G(t,n,e){return{x:_(t.x,n.x,e),y:_(t.y,n.y,e)}}function g(t){if(t.match(/^#([0-9a-f]{3,8})$/i))return I(t);const e=t.match(/^hsl\(\s*([\d.]+)\s*,?\s*([\d.]+)%?\s*,?\s*([\d.]+)%?\s*\)/i);if(e)return{h:parseFloat(e[1]),s:parseFloat(e[2]),l:parseFloat(e[3])};const a=t.match(/^rgb\(\s*([\d.]+)\s*,?\s*([\d.]+)\s*,?\s*([\d.]+)\s*\)/i);return a?E({r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3])}):null}function I(t){let n=0,e=0,a=0;return t.length===4?(n=parseInt(t[1]+t[1],16),e=parseInt(t[2]+t[2],16),a=parseInt(t[3]+t[3],16)):t.length>=7&&(n=parseInt(t.slice(1,3),16),e=parseInt(t.slice(3,5),16),a=parseInt(t.slice(5,7),16)),E({r:n,g:e,b:a})}function E({r:t,g:n,b:e}){t/=255,n/=255,e/=255;const a=Math.max(t,n,e),o=Math.min(t,n,e);let i=0,l=0;const f=(a+o)/2;if(a!==o){const r=a-o;switch(l=f>.5?r/(2-a-o):r/(a+o),a){case t:i=((n-e)/r+(n<e?6:0))/6;break;case n:i=((e-t)/r+2)/6;break;case e:i=((t-n)/r+4)/6;break}}return{h:Math.round(i*360),s:Math.round(l*100),l:Math.round(f*100)}}function w(t,n=!1){const e=g(t);if(!e)return n?"hsl(0 0% 100% / 0.1)":"hsl(220 3% 15%)";if(n){const a=Math.max(0,e.s-20),o=Math.min(100,e.l+30);return`hsl(${e.h} ${a}% ${o}%)`}else{const a=Math.max(0,e.s*.6),o=Math.max(10,e.l*.5);return`hsl(${e.h} ${a}% ${o}%)`}}function $(t,n){const e=g(t);return e?`hsl(${e.h} ${e.s}% ${e.l}% / ${n})`:`hsl(220 3% 15% / ${n})`}function F(t){const n=g(t);return n?n.l>50:!0}function S(t,n,e){const{elevation:a=.3,lightSource:o,background:i,shadowColor:l,shadowColorDark:f,intensity:r=1,isDarkMode:c=!1}=t,h=b(o),s=p(h,n,e),A=M(a,s,r);let u;l?u=l:c&&f?u=f:i?u=w(i,c):u=c?"hsl(0 0% 100% / 0.1)":"hsl(220 3% 15%)";const L=D(A,u),x=T(L),y=N(L,a,s);return{layers:L,boxShadow:x,cssVariables:y}}function O(t,n={}){return S({elevation:t,...n}).boxShadow}function D(t,n){return t.map(e=>({...e,color:$(n,e.opacity)}))}function T(t){return t.length===0?"none":t.map(n=>{const{offsetX:e,offsetY:a,blur:o,spread:i,color:l,inset:f}=n,r=d(e),c=d(a),h=d(o),s=d(i),A=f?"inset ":"";return i===0?`${A}${r} ${c} ${h} ${l}`:`${A}${r} ${c} ${h} ${s} ${l}`}).join(`,
     `)}function d(t){return t===0?"0":`${Math.round(t*100)/100}px`}function N(t,n,e){return{"--lifted-elevation":n.toString(),"--lifted-light-angle":`${e}deg`,"--lifted-layers":t.length.toString(),"--lifted-shadow":T(t)}}const C={deepInset:-.75,inset:-.3,none:0,subtle:.15,small:.25,medium:.5,large:.75,xlarge:1};function U(t){return typeof t=="number"?t:C[t]}function Y(t,n,e){const o={boxShadow:S(t,n,e).boxShadow};return t.background&&(o.backgroundColor=t.background),o}const H="box-shadow 150ms cubic-bezier(0.2, 0.6, 0.3, 1)";function X(t=150,n=!1){const e="cubic-bezier(0.2, 0.6, 0.3, 1)",a=[`box-shadow ${t}ms ${e}`];return n&&a.push(`transform ${t}ms ${e}`),a.join(", ")}exports.BASE_OPACITY=.075;exports.DEFAULT_LIGHT_ANGLE=-45;exports.DEFAULT_SHADOW_TRANSITION=H;exports.ELEVATION_PRESETS=C;exports.MAX_LAYERS=5;exports.angleToOffsetRatios=m;exports.calculateLightAngle=p;exports.calculateShadowColor=w;exports.calculateShadowLayers=M;exports.generateBoxShadow=O;exports.generateLayerColor=$;exports.generateShadow=S;exports.generateStyleObject=Y;exports.generateTransition=X;exports.hexToHSL=I;exports.isLightColor=F;exports.layersToCSS=T;exports.normalizeLightSource=b;exports.parseColor=g;exports.resolveElevation=U;exports.rgbToHSL=E;exports.smoothPosition=G;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { B as s, D as o, f as r, E as l, M as t, h as S, c as L, b as T, d as g, e as n, j as A, g as E, k as i, a as c, m as h, i as _, l as C, n as O, p as d, r as I, o as f } from "./index-G-GHoQdJ.js";
+import { B as s, D as o, f as r, E as l, M as t, h as S, c as L, b as T, d as g, e as n, j as A, g as E, k as i, a as c, m as h, i as _, l as C, n as O, p as d, r as I, o as f } from "./index-C0sp-tDk.js";
 export {
   s as BASE_OPACITY,
   o as DEFAULT_LIGHT_ANGLE,

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-4W01YOTU.cjs");exports.BASE_OPACITY=e.BASE_OPACITY;exports.DEFAULT_LIGHT_ANGLE=e.DEFAULT_LIGHT_ANGLE;exports.DEFAULT_SHADOW_TRANSITION=e.DEFAULT_SHADOW_TRANSITION;exports.ELEVATION_PRESETS=e.ELEVATION_PRESETS;exports.MAX_LAYERS=e.MAX_LAYERS;exports.angleToOffsetRatios=e.angleToOffsetRatios;exports.calculateLightAngle=e.calculateLightAngle;exports.calculateShadowColor=e.calculateShadowColor;exports.calculateShadowLayers=e.calculateShadowLayers;exports.generateBoxShadow=e.generateBoxShadow;exports.generateLayerColor=e.generateLayerColor;exports.generateShadow=e.generateShadow;exports.generateStyleObject=e.generateStyleObject;exports.generateTransition=e.generateTransition;exports.hexToHSL=e.hexToHSL;exports.isLightColor=e.isLightColor;exports.layersToCSS=e.layersToCSS;exports.normalizeLightSource=e.normalizeLightSource;exports.parseColor=e.parseColor;exports.resolveElevation=e.resolveElevation;exports.rgbToHSL=e.rgbToHSL;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D6JJAZ46.cjs");exports.BASE_OPACITY=e.BASE_OPACITY;exports.DEFAULT_LIGHT_ANGLE=e.DEFAULT_LIGHT_ANGLE;exports.DEFAULT_SHADOW_TRANSITION=e.DEFAULT_SHADOW_TRANSITION;exports.ELEVATION_PRESETS=e.ELEVATION_PRESETS;exports.MAX_LAYERS=e.MAX_LAYERS;exports.angleToOffsetRatios=e.angleToOffsetRatios;exports.calculateLightAngle=e.calculateLightAngle;exports.calculateShadowColor=e.calculateShadowColor;exports.calculateShadowLayers=e.calculateShadowLayers;exports.generateBoxShadow=e.generateBoxShadow;exports.generateLayerColor=e.generateLayerColor;exports.generateShadow=e.generateShadow;exports.generateStyleObject=e.generateStyleObject;exports.generateTransition=e.generateTransition;exports.hexToHSL=e.hexToHSL;exports.isLightColor=e.isLightColor;exports.layersToCSS=e.layersToCSS;exports.normalizeLightSource=e.normalizeLightSource;exports.parseColor=e.parseColor;exports.resolveElevation=e.resolveElevation;exports.rgbToHSL=e.rgbToHSL;

package/dist/react/LiftedBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiftedBox.d.ts","sourceRoot":"","sources":["../../src/react/LiftedBox.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA2D,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,eAAe,CAAC;AAStE,eAAO,MAAM,SAAS,oFAwHrB,CAAC;AAQF,eAAO,MAAM,UAAU,uGAEtB,CAAC;AAGF,eAAO,MAAM,YAAY,gGAIxB,CAAC;AAGF,eAAO,MAAM,WAAW,uGAEvB,CAAC;AAGF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LiftedBox.d.ts","sourceRoot":"","sources":["../../src/react/LiftedBox.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAA2D,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,eAAe,CAAC;AAStE,eAAO,MAAM,SAAS,oFA0HrB,CAAC;AAQF,eAAO,MAAM,UAAU,uGAEtB,CAAC;AAGF,eAAO,MAAM,YAAY,gGAIxB,CAAC;AAGF,eAAO,MAAM,WAAW,uGAEvB,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/dist/react/LiftedProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiftedProvider.d.ts","sourceRoot":"","sources":["../../src/react/LiftedProvider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAY,MAAM,eAAe,CAAC;AAShF,wBAAgB,gBAAgB,IAAI,kBAAkB,GAAG,IAAI,CAE5D;AAED,wBAAgB,SAAS,IAAI,kBAAkB,CAW9C;AAMD,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,kBAAyB,EACzB,gBAAsB,EACtB,kBAAwB,EACxB,WAAoB,EACpB,kBAA0B,EAC1B,kBAAkB,GACnB,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAgD1C;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LiftedProvider.d.ts","sourceRoot":"","sources":["../../src/react/LiftedProvider.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAY,MAAM,eAAe,CAAC;AAShF,wBAAgB,gBAAgB,IAAI,kBAAkB,GAAG,IAAI,CAE5D;AAED,wBAAgB,SAAS,IAAI,kBAAkB,CAW9C;AAMD,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,kBAAyB,EACzB,gBAAsB,EACtB,kBAAwB,EACxB,WAAoB,EACpB,kBAA0B,EAC1B,kBAAkB,GACnB,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAgD1C;AAED,eAAe,cAAc,CAAC"}

package/dist/react/hooks/useDarkMode.d.ts

@@ -1,8 +1,3 @@
-/**
- * Lifted - useDarkMode Hook
- *
- * SSR-safe hook for detecting system dark mode preference.
- */
 export interface UseDarkModeOptions {
     defaultValue?: boolean;
 }

package/dist/react/hooks/useDarkMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDarkMode.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useDarkMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,OAAO,CAoBrE;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"useDarkMode.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useDarkMode.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,OAAO,CAoBrE;AAED,eAAe,WAAW,CAAC"}

package/dist/react/hooks/useElevation.d.ts

@@ -1,8 +1,3 @@
-/**
- * Lifted - useElevation Hook
- *
- * Hook for managing interactive elevation states.
- */
 export interface UseElevationOptions {
     base?: number;
     hover?: number;

package/dist/react/hooks/useElevation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useElevation.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useElevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE;QACd,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,SAAS,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACH;AAED,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CA+BlF;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useElevation.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useElevation.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE;QACd,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,SAAS,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACH;AAED,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CA+BlF;AAED,eAAe,YAAY,CAAC"}

package/dist/react.esm.js

@@ -1,8 +1,8 @@
 import { jsx as x } from "react/jsx-runtime";
-import A, { useState as m, useEffect as M, forwardRef as E, useRef as H, useMemo as L, createContext as X, useContext as N, useCallback as y } from "react";
-import { g as Y, a as j, n as Q } from "./index-G-GHoQdJ.js";
-function S(e = {}) {
-  const { defaultValue: t = !1 } = e, [o, s] = m(t);
+import V, { useState as w, useEffect as M, forwardRef as E, useRef as H, useMemo as h, createContext as X, useContext as A, useCallback as y } from "react";
+import { g as Y, a as j, n as Q } from "./index-C0sp-tDk.js";
+function N(e = {}) {
+  const { defaultValue: t = !1 } = e, [o, s] = w(t);
   return M(() => {
     if (typeof window > "u") return;
     const n = window.matchMedia("(prefers-color-scheme: dark)");
@@ -25,34 +25,34 @@ const g = E(
     animated: d = !0,
     transitionDuration: c = 150,
     children: l,
-    style: a,
-    ...w
+    style: f,
+    ...L
   }, v) => {
-    const h = H(null), B = v || h, [R, z] = m(null), [C, I] = m(null), b = S(), p = Q(o);
+    const p = H(null), B = v || p, [R, S] = w(null), [C, z] = w(null), b = N(), m = Q(o);
     M(() => {
-      if (p.type !== "mouse") return;
+      if (m.type !== "mouse") return;
       const r = () => {
         if (B.current) {
-          const f = B.current.getBoundingClientRect();
-          I({
-            x: f.left,
-            y: f.top,
-            width: f.width,
-            height: f.height
+          const a = B.current.getBoundingClientRect();
+          z({
+            x: a.left,
+            y: a.top,
+            width: a.width,
+            height: a.height
           });
         }
       };
       return r(), window.addEventListener("scroll", r, { passive: !0 }), window.addEventListener("resize", r, { passive: !0 }), () => {
         window.removeEventListener("scroll", r), window.removeEventListener("resize", r);
       };
-    }, [p.type]), M(() => {
-      if (p.type !== "mouse") return;
-      const r = (f) => {
-        z({ x: f.clientX, y: f.clientY });
+    }, [m.type]), M(() => {
+      if (m.type !== "mouse") return;
+      const r = (a) => {
+        S({ x: a.clientX, y: a.clientY });
       };
       return window.addEventListener("mousemove", r, { passive: !0 }), () => window.removeEventListener("mousemove", r);
-    }, [p.type]);
-    const k = L(() => Y(
+    }, [m.type]);
+    const k = h(() => Y(
       {
         elevation: e,
         lightSource: o,
@@ -74,19 +74,19 @@ const g = E(
       b,
       C,
       R
-    ]), V = L(() => {
+    ]), I = h(() => {
       const r = {
         boxShadow: k.boxShadow,
-        ...a
+        ...f
       };
-      return s && (r.backgroundColor = s), d && (r.transition = j(c)), r;
-    }, [k.boxShadow, s, d, c, a]);
-    return A.createElement(
+      return s && (r.backgroundColor = s), d && m.type !== "mouse" && (r.transition = j(c)), r;
+    }, [k.boxShadow, s, d, c, f, m.type]);
+    return V.createElement(
       t,
       {
         ref: B,
-        style: V,
-        ...w
+        style: I,
+        ...L
       },
       l
     );
@@ -107,10 +107,10 @@ const q = E(
 q.displayName = "LiftedModal";
 const P = X(null);
 function J() {
-  return N(P);
+  return A(P);
 }
 function K() {
-  const e = N(P);
+  const e = A(P);
   if (!e)
     throw new Error(
       "useLifted must be used within a LiftedProvider. Wrap your app with <LiftedProvider> to use this hook."
@@ -126,21 +126,21 @@ function O({
   disableTransitions: i = !1,
   customColorMapping: u
 }) {
-  const [d, c] = m(null), l = S({ defaultValue: !1 }), a = L(() => n === "light" ? !1 : n === "dark" ? !0 : t ? l : !1, [n, t, l]);
+  const [d, c] = w(null), l = N({ defaultValue: !1 }), f = h(() => n === "light" ? !1 : n === "dark" ? !0 : t ? l : !1, [n, t, l]);
   M(() => {
-    const v = (h) => {
-      c({ x: h.clientX, y: h.clientY });
+    const v = (p) => {
+      c({ x: p.clientX, y: p.clientY });
     };
     return window.addEventListener("mousemove", v, { passive: !0 }), () => window.removeEventListener("mousemove", v);
   }, []);
-  const w = L(
+  const L = h(
     () => ({
       autoDetectDarkMode: t,
       defaultElevation: o,
       defaultLightSource: s,
       colorScheme: n,
       disableTransitions: i,
-      isDarkMode: a,
+      isDarkMode: f,
       mousePosition: d,
       customColorMapping: u
     }),
@@ -150,25 +150,25 @@ function O({
       s,
       n,
       i,
-      a,
+      f,
       d,
       u
     ]
   );
-  return /* @__PURE__ */ x(P.Provider, { value: w, children: e });
+  return /* @__PURE__ */ x(P.Provider, { value: L, children: e });
 }
 function T(e = {}) {
-  const { base: t = 0.3, hover: o = 0.5, active: s = 0.15 } = e, [n, i] = m(!1), [u, d] = m(!1), c = L(() => u ? s : n ? o : t, [n, u, t, o, s]), l = y(() => i(!0), []), a = y(() => {
+  const { base: t = 0.3, hover: o = 0.5, active: s = 0.15 } = e, [n, i] = w(!1), [u, d] = w(!1), c = h(() => u ? s : n ? o : t, [n, u, t, o, s]), l = y(() => i(!0), []), f = y(() => {
     i(!1), d(!1);
-  }, []), w = y(() => d(!0), []), v = y(() => d(!1), []);
+  }, []), L = y(() => d(!0), []), v = y(() => d(!1), []);
   return {
     elevation: c,
     isHovered: n,
     isActive: u,
     elevationProps: {
       onMouseEnter: l,
-      onMouseLeave: a,
-      onMouseDown: w,
+      onMouseLeave: f,
+      onMouseDown: L,
       onMouseUp: v
     }
   };
@@ -179,7 +179,7 @@ export {
   U as LiftedCard,
   q as LiftedModal,
   O as LiftedProvider,
-  S as useDarkMode,
+  N as useDarkMode,
   T as useElevation,
   K as useLifted,
   J as useLiftedContext

package/dist/react.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),e=require("react"),y=require("./index-4W01YOTU.cjs");function E(t={}){const{defaultValue:s=!1}=t,[r,o]=e.useState(s);return e.useEffect(()=>{if(typeof window>"u")return;const n=window.matchMedia("(prefers-color-scheme: dark)");o(n.matches);const u=d=>{o(d.matches)};return n.addEventListener("change",u),()=>n.removeEventListener("change",u)},[]),r}const L=e.forwardRef(({elevation:t=.3,as:s="div",lightSource:r=-45,background:o,shadowColor:n,shadowColorDark:u,intensity:d=1,animated:a=!0,transitionDuration:l=150,children:v,style:f,...w},m)=>{const M=e.useRef(null),p=m||M,[R,j]=e.useState(null),[S,N]=e.useState(null),b=E(),x=y.normalizeLightSource(r);e.useEffect(()=>{if(x.type!=="mouse")return;const i=()=>{if(p.current){const c=p.current.getBoundingClientRect();N({x:c.left,y:c.top,width:c.width,height:c.height})}};return i(),window.addEventListener("scroll",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}},[x.type]),e.useEffect(()=>{if(x.type!=="mouse")return;const i=c=>{j({x:c.clientX,y:c.clientY})};return window.addEventListener("mousemove",i,{passive:!0}),()=>window.removeEventListener("mousemove",i)},[x.type]);const B=e.useMemo(()=>y.generateShadow({elevation:t,lightSource:r,background:o,shadowColor:n,shadowColorDark:u,intensity:d,isDarkMode:b},S??void 0,R),[t,r,o,n,u,d,b,S,R]),q=e.useMemo(()=>{const i={boxShadow:B.boxShadow,...f};return o&&(i.backgroundColor=o),a&&(i.transition=y.generateTransition(l)),i},[B.boxShadow,o,a,l,f]);return e.createElement(s,{ref:p,style:q,...w},v)});L.displayName="LiftedBox";const P=e.forwardRef((t,s)=>h.jsx(L,{ref:s,elevation:.3,...t}));P.displayName="LiftedCard";const g=e.forwardRef(({elevation:t=.25,...s},r)=>h.jsx(L,{ref:r,as:"button",elevation:t,...s}));g.displayName="LiftedButton";const k=e.forwardRef((t,s)=>h.jsx(L,{ref:s,elevation:.8,...t}));k.displayName="LiftedModal";const C=e.createContext(null);function z(){return e.useContext(C)}function I(){const t=e.useContext(C);if(!t)throw new Error("useLifted must be used within a LiftedProvider. Wrap your app with <LiftedProvider> to use this hook.");return t}function V({children:t,autoDetectDarkMode:s=!0,defaultElevation:r=.3,defaultLightSource:o=-45,colorScheme:n="auto",disableTransitions:u=!1,customColorMapping:d}){const[a,l]=e.useState(null),v=E({defaultValue:!1}),f=e.useMemo(()=>n==="light"?!1:n==="dark"?!0:s?v:!1,[n,s,v]);e.useEffect(()=>{const m=M=>{l({x:M.clientX,y:M.clientY})};return window.addEventListener("mousemove",m,{passive:!0}),()=>window.removeEventListener("mousemove",m)},[]);const w=e.useMemo(()=>({autoDetectDarkMode:s,defaultElevation:r,defaultLightSource:o,colorScheme:n,disableTransitions:u,isDarkMode:f,mousePosition:a,customColorMapping:d}),[s,r,o,n,u,f,a,d]);return h.jsx(C.Provider,{value:w,children:t})}function A(t={}){const{base:s=.3,hover:r=.5,active:o=.15}=t,[n,u]=e.useState(!1),[d,a]=e.useState(!1),l=e.useMemo(()=>d?o:n?r:s,[n,d,s,r,o]),v=e.useCallback(()=>u(!0),[]),f=e.useCallback(()=>{u(!1),a(!1)},[]),w=e.useCallback(()=>a(!0),[]),m=e.useCallback(()=>a(!1),[]);return{elevation:l,isHovered:n,isActive:d,elevationProps:{onMouseEnter:v,onMouseLeave:f,onMouseDown:w,onMouseUp:m}}}exports.LiftedBox=L;exports.LiftedButton=g;exports.LiftedCard=P;exports.LiftedModal=k;exports.LiftedProvider=V;exports.useDarkMode=E;exports.useElevation=A;exports.useLifted=I;exports.useLiftedContext=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),e=require("react"),y=require("./index-D6JJAZ46.cjs");function E(t={}){const{defaultValue:s=!1}=t,[r,o]=e.useState(s);return e.useEffect(()=>{if(typeof window>"u")return;const n=window.matchMedia("(prefers-color-scheme: dark)");o(n.matches);const u=d=>{o(d.matches)};return n.addEventListener("change",u),()=>n.removeEventListener("change",u)},[]),r}const h=e.forwardRef(({elevation:t=.3,as:s="div",lightSource:r=-45,background:o,shadowColor:n,shadowColorDark:u,intensity:d=1,animated:a=!0,transitionDuration:l=150,children:v,style:c,...L},m)=>{const M=e.useRef(null),p=m||M,[R,j]=e.useState(null),[S,A]=e.useState(null),b=E(),w=y.normalizeLightSource(r);e.useEffect(()=>{if(w.type!=="mouse")return;const i=()=>{if(p.current){const f=p.current.getBoundingClientRect();A({x:f.left,y:f.top,width:f.width,height:f.height})}};return i(),window.addEventListener("scroll",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}},[w.type]),e.useEffect(()=>{if(w.type!=="mouse")return;const i=f=>{j({x:f.clientX,y:f.clientY})};return window.addEventListener("mousemove",i,{passive:!0}),()=>window.removeEventListener("mousemove",i)},[w.type]);const B=e.useMemo(()=>y.generateShadow({elevation:t,lightSource:r,background:o,shadowColor:n,shadowColorDark:u,intensity:d,isDarkMode:b},S??void 0,R),[t,r,o,n,u,d,b,S,R]),N=e.useMemo(()=>{const i={boxShadow:B.boxShadow,...c};return o&&(i.backgroundColor=o),a&&w.type!=="mouse"&&(i.transition=y.generateTransition(l)),i},[B.boxShadow,o,a,l,c,w.type]);return e.createElement(s,{ref:p,style:N,...L},v)});h.displayName="LiftedBox";const P=e.forwardRef((t,s)=>x.jsx(h,{ref:s,elevation:.3,...t}));P.displayName="LiftedCard";const g=e.forwardRef(({elevation:t=.25,...s},r)=>x.jsx(h,{ref:r,as:"button",elevation:t,...s}));g.displayName="LiftedButton";const k=e.forwardRef((t,s)=>x.jsx(h,{ref:s,elevation:.8,...t}));k.displayName="LiftedModal";const C=e.createContext(null);function q(){return e.useContext(C)}function z(){const t=e.useContext(C);if(!t)throw new Error("useLifted must be used within a LiftedProvider. Wrap your app with <LiftedProvider> to use this hook.");return t}function I({children:t,autoDetectDarkMode:s=!0,defaultElevation:r=.3,defaultLightSource:o=-45,colorScheme:n="auto",disableTransitions:u=!1,customColorMapping:d}){const[a,l]=e.useState(null),v=E({defaultValue:!1}),c=e.useMemo(()=>n==="light"?!1:n==="dark"?!0:s?v:!1,[n,s,v]);e.useEffect(()=>{const m=M=>{l({x:M.clientX,y:M.clientY})};return window.addEventListener("mousemove",m,{passive:!0}),()=>window.removeEventListener("mousemove",m)},[]);const L=e.useMemo(()=>({autoDetectDarkMode:s,defaultElevation:r,defaultLightSource:o,colorScheme:n,disableTransitions:u,isDarkMode:c,mousePosition:a,customColorMapping:d}),[s,r,o,n,u,c,a,d]);return x.jsx(C.Provider,{value:L,children:t})}function V(t={}){const{base:s=.3,hover:r=.5,active:o=.15}=t,[n,u]=e.useState(!1),[d,a]=e.useState(!1),l=e.useMemo(()=>d?o:n?r:s,[n,d,s,r,o]),v=e.useCallback(()=>u(!0),[]),c=e.useCallback(()=>{u(!1),a(!1)},[]),L=e.useCallback(()=>a(!0),[]),m=e.useCallback(()=>a(!1),[]);return{elevation:l,isHovered:n,isActive:d,elevationProps:{onMouseEnter:v,onMouseLeave:c,onMouseDown:L,onMouseUp:m}}}exports.LiftedBox=h;exports.LiftedButton=g;exports.LiftedCard=P;exports.LiftedModal=k;exports.LiftedProvider=I;exports.useDarkMode=E;exports.useElevation=V;exports.useLifted=z;exports.useLiftedContext=q;

package/dist/vanilla.esm.js

@@ -1,5 +1,5 @@
-import { g as u, a as f, n as S, s as m } from "./index-G-GHoQdJ.js";
-import { E as k, c as E, b as A, d as D, e as B, i as F, l as M, p as P, r as T } from "./index-G-GHoQdJ.js";
+import { g as u, a as f, n as S, s as m } from "./index-C0sp-tDk.js";
+import { E as k, c as E, b as A, d as D, e as B, i as F, l as M, p as P, r as T } from "./index-C0sp-tDk.js";
 function w(e, a = {}) {
   let o = { ...a }, i = null, n = null, r = null, d = !1;
   const l = S(o.lightSource);

package/dist/vanilla.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-4W01YOTU.cjs");function h(a,i={}){let o={...i},n=null,r=null,l=null,d=!1;const u=t.normalizeLightSource(o.lightSource);function S(){const e=a.getBoundingClientRect();return{x:e.left,y:e.top,width:e.width,height:e.height}}function s(){if(d)return;const e=t.generateShadow({elevation:o.elevation??.3,lightSource:o.lightSource,background:o.background,shadowColor:o.shadowColor,shadowColorDark:o.shadowColorDark,intensity:o.intensity??1,isDarkMode:o.isDarkMode??!1},S(),r);a.style.boxShadow=e.boxShadow}function c(e){if(n={x:e.clientX,y:e.clientY},u.type==="mouse"){const g=u.smoothing??.1;r?r=t.smoothPosition(r,n,g):r=n,l&&cancelAnimationFrame(l),l=requestAnimationFrame(s)}}return o.background&&(a.style.backgroundColor=o.background),o.animated!==!1&&(a.style.transition=t.generateTransition(o.transitionDuration??150)),s(),u.type==="mouse"&&window.addEventListener("mousemove",c,{passive:!0}),{setElevation(e){o.elevation=e,s()},setLightSource(e){o.lightSource=e,s()},update(e){o={...o,...e},e.background&&(a.style.backgroundColor=e.background),s()},getShadowCSS(){return a.style.boxShadow},destroy(){d=!0,l&&cancelAnimationFrame(l),window.removeEventListener("mousemove",c),a.style.boxShadow="",a.style.transition=""}}}function f(a="[data-lifted]",i={}){const o=document.querySelectorAll(a);return Array.from(o).map(n=>{const r=n.dataset.liftedElevation,l={...i,elevation:r?parseFloat(r):i.elevation};return h(n,l)})}function w(a,i,o={}){const n=t.generateShadow({elevation:i,...o});a.style.boxShadow=n.boxShadow}function y(a){a.style.boxShadow=""}function m(a,i={}){return t.generateShadow({elevation:a,...i}).boxShadow}exports.ELEVATION_PRESETS=t.ELEVATION_PRESETS;exports.calculateLightAngle=t.calculateLightAngle;exports.calculateShadowColor=t.calculateShadowColor;exports.calculateShadowLayers=t.calculateShadowLayers;exports.generateBoxShadow=t.generateBoxShadow;exports.generateShadow=t.generateShadow;exports.isLightColor=t.isLightColor;exports.layersToCSS=t.layersToCSS;exports.normalizeLightSource=t.normalizeLightSource;exports.parseColor=t.parseColor;exports.resolveElevation=t.resolveElevation;exports.applyLift=w;exports.getLiftCSS=m;exports.initAllLiftedBoxes=f;exports.initLiftedBox=h;exports.removeLift=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-D6JJAZ46.cjs");function h(a,i={}){let o={...i},n=null,r=null,l=null,d=!1;const u=t.normalizeLightSource(o.lightSource);function S(){const e=a.getBoundingClientRect();return{x:e.left,y:e.top,width:e.width,height:e.height}}function s(){if(d)return;const e=t.generateShadow({elevation:o.elevation??.3,lightSource:o.lightSource,background:o.background,shadowColor:o.shadowColor,shadowColorDark:o.shadowColorDark,intensity:o.intensity??1,isDarkMode:o.isDarkMode??!1},S(),r);a.style.boxShadow=e.boxShadow}function c(e){if(n={x:e.clientX,y:e.clientY},u.type==="mouse"){const g=u.smoothing??.1;r?r=t.smoothPosition(r,n,g):r=n,l&&cancelAnimationFrame(l),l=requestAnimationFrame(s)}}return o.background&&(a.style.backgroundColor=o.background),o.animated!==!1&&(a.style.transition=t.generateTransition(o.transitionDuration??150)),s(),u.type==="mouse"&&window.addEventListener("mousemove",c,{passive:!0}),{setElevation(e){o.elevation=e,s()},setLightSource(e){o.lightSource=e,s()},update(e){o={...o,...e},e.background&&(a.style.backgroundColor=e.background),s()},getShadowCSS(){return a.style.boxShadow},destroy(){d=!0,l&&cancelAnimationFrame(l),window.removeEventListener("mousemove",c),a.style.boxShadow="",a.style.transition=""}}}function f(a="[data-lifted]",i={}){const o=document.querySelectorAll(a);return Array.from(o).map(n=>{const r=n.dataset.liftedElevation,l={...i,elevation:r?parseFloat(r):i.elevation};return h(n,l)})}function w(a,i,o={}){const n=t.generateShadow({elevation:i,...o});a.style.boxShadow=n.boxShadow}function y(a){a.style.boxShadow=""}function m(a,i={}){return t.generateShadow({elevation:a,...i}).boxShadow}exports.ELEVATION_PRESETS=t.ELEVATION_PRESETS;exports.calculateLightAngle=t.calculateLightAngle;exports.calculateShadowColor=t.calculateShadowColor;exports.calculateShadowLayers=t.calculateShadowLayers;exports.generateBoxShadow=t.generateBoxShadow;exports.generateShadow=t.generateShadow;exports.isLightColor=t.isLightColor;exports.layersToCSS=t.layersToCSS;exports.normalizeLightSource=t.normalizeLightSource;exports.parseColor=t.parseColor;exports.resolveElevation=t.resolveElevation;exports.applyLift=w;exports.getLiftCSS=m;exports.initAllLiftedBoxes=f;exports.initLiftedBox=h;exports.removeLift=y;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juanlaria/lifted",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Beautiful, realistic CSS shadows with layered depth - inspired by Josh Comeau & Tobias Ahlin",
   "keywords": [
     "css",