@kurocado-studio/systemhaus-motion-react 1.0.0-develop.1 → 1.0.0-develop.10

package/dist/exports.js

@@ -1 +1 @@
-import{get as z}from"lodash-es";var B=Symbol("ThemeProvider");var p="@kurocado:color-scheme",w="ph ph-moon-stars",x="ph ph-sun";var s=(function(r){return r.DARK="dark",r.LIGHT="light",r.SYSTEM="system",r})(s||{});function h(){return globalThis.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function T(){var r;return(r=localStorage.getItem(p))!==null&&r!==void 0?r:void 0}function _(r){var o=document.documentElement,e=s.DARK;r===e?o.classList.add(e):o.classList.remove(e)}function y(){var r=T();return r==="system"||!r?h():r}function k(r){localStorage.setItem(p,r),_(r==="system"?h():r)}function V(){var r=y(),o=r==="dark"?"light":"dark";return k(o),o}function A(){return y()==="dark"}var c={getStoredTheme:T,getSystemTheme:h,resolveEffectiveTheme:y,applyTheme:_,setTheme:k,toggleTheme:V,isDarkMode:A};import{useEffect as D,useState as I}from"react";function Y(){let[r,o]=I(()=>globalThis.window===void 0?s.LIGHT:c.resolveEffectiveTheme());D(()=>{if(globalThis.window===void 0)return;c.applyTheme(r);let n=globalThis.matchMedia("(prefers-color-scheme: dark)"),l=()=>{let i=c.getStoredTheme();if(i===s.SYSTEM||!i){let v=c.getSystemTheme();c.applyTheme(v),o(v)}};return n.addEventListener("change",l),()=>{n.removeEventListener("change",l)}},[r]);let e=()=>{let n=c.toggleTheme();o(n)},t=n=>{c.setTheme(n),o(c.resolveEffectiveTheme())},a=r===s.DARK?w:x;return{isDark:r===s.DARK,theme:r,toggle:e,iconSettings:a,setTheme:t}}import{get as M}from"lodash-es";function G(r,o,e,t){var a=r.getBoundingClientRect(),m=a.left+a.width/2,n=a.top+a.height/2,l=o-m,i=e-n,v=t.magneticModeActivationRadius,d=M(t,["maxDistance"],3e3),u=M(t,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof v=="number"){var f=Math.hypot(Math.pow(l,2)+Math.pow(i,2));if(f>d)return{x:0,y:0};var g=0;return f<v&&(g=1-f/v),{x:l*g*u,y:i*g*u}}if(Math.abs(l)<d&&Math.abs(i)<d){var b=1-Math.max(Math.abs(l),Math.abs(i))/d;return{x:l*b*u,y:i*b*u}}return{x:0,y:0}}import{useMotionValue as E,useSpring as S}from"framer-motion";import{get as C}from"lodash-es";import{useEffect as O,useState as R}from"react";function $(r){let o=C(r,["damping"],100),e=C(r,["stiffness"],600),t=E(0),a=E(0),[m,n]=R(),l=S(t,{damping:o,stiffness:e}),i=S(a,{damping:o,stiffness:e});return O(()=>{let v=d=>{if(!m)return;let{x:u,y:f}=G(m,d.clientX,d.clientY,r);t.set(u),a.set(f)};return document.addEventListener("mousemove",v),()=>document.removeEventListener("mousemove",v)},[m,r,t,a]),{ref:n,x:l,y:i}}export{s as ThemeEnum,$ as useCursorFollow,Y as useDarkMode};
+import{get as A}from"lodash-es";function R(t,i,e,a){var n=t.getBoundingClientRect(),o=n.left+n.width/2,p=n.top+n.height/2,r=i-o,m=e-p,s=a.magneticModeActivationRadius,c=A(a,["maxDistance"],3e3),f=A(a,["intensity"],.1);if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof s=="number"){var l=Math.hypot(Math.pow(r,2)+Math.pow(m,2));if(l>c)return{x:0,y:0};var P=0;return l<s&&(P=1-l/s),{x:r*P*f,y:m*P*f}}if(Math.abs(r)<c&&Math.abs(m)<c){var I=1-Math.max(Math.abs(r),Math.abs(m))/c;return{x:r*I*f,y:m*I*f}}return{x:0,y:0}}var U=.4;var w="easeInOut",y=12;var G=12,T={isStatic:!1,fadeInSpeed:G,fadeDistance:y,transition:{duration:U,ease:w},reducedMotion:"user"};import{get as C}from"lodash-es";import g,{createContext as k,useContext as B,useMemo as X}from"react";var x=(o=>(o.TOP="TOP",o.BOTTOM="BOTTOM",o.LEFT="LEFT",o.RIGHT="RIGHT",o.DEFAULT="DEFAULT",o))(x||{});import{useMotionValue as D,useSpring as E,MotionConfig as b,AnimatePresence as S,motion as h}from"framer-motion";var d={...T,fadeInDirection:"TOP",fadeInDistance:y,viewport:{once:!1,amount:.2}},F=k(d),pt=({children:t,motionOverrides:i})=>{let e=X(()=>({...T,...i,viewport:C(i,["viewport"],d.viewport),fadeInDistance:C(i,["fadeInDistance"],d.fadeInDistance),fadeInDirection:C(i,["fadeInDirection"],d.fadeInDirection)}),[i]);return g.createElement(F.Provider,{value:e},g.createElement(b,{...e},t))},u=()=>B(F);import{get as O}from"lodash-es";import{useEffect as Y,useState as $}from"react";function xt(t){let i=O(t,["damping"],100),e=O(t,["stiffness"],600),a=D(0),n=D(0),[o,p]=$(),r=E(a,{damping:i,stiffness:e}),m=E(n,{damping:i,stiffness:e});return Y(()=>{let s=c=>{if(!o)return;let{x:f,y:l}=R(o,c.clientX,c.clientY,t);a.set(f),n.set(l)};return document.addEventListener("mousemove",s),()=>document.removeEventListener("mousemove",s)},[o,t,a,n]),{ref:p,x:r,y:m}}import{get as V}from"lodash-es";import H from"react";var Et=({onEnterDirection:t,onExitDirection:i}={})=>{let{viewport:e,transition:a,fadeInDistance:n=y}=u(),o=Math.abs(n),r=H.useCallback(s=>({DEFAULT:{hidden:{opacity:0,y:0},visible:{opacity:1,y:0},exit:{opacity:0,y:0}},TOP:{hidden:{opacity:0,y:-s},visible:{opacity:1,y:0},exit:{opacity:0,y:-s}},BOTTOM:{hidden:{opacity:0,y:s},visible:{opacity:1,y:0},exit:{opacity:0,y:s}},LEFT:{hidden:{opacity:0,x:-s},visible:{opacity:1,x:0},exit:{opacity:0,x:-s}},RIGHT:{hidden:{opacity:0,x:s},visible:{opacity:1,x:0},exit:{opacity:0,x:s}}}),[])(o),m=V(r,[i??"BOTTOM","exit"],r.BOTTOM.exit);return H.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...V(r,[t??"TOP"],r.TOP),exit:m},transition:a,viewport:e}),[r,m,t,a,e])};import{cloneDeep as q,merge as W}from"lodash-es";import J from"react";function At(...t){return J.useMemo(()=>{let i=t.map(e=>q(e));return W({},...i)},t)}import{get as M}from"lodash-es";import _ from"react";function Ft(t={}){let{transition:e}=u(),n=_.useCallback(()=>({default:{hidden:{opacity:0,scale:M(t,["initialScale"],1.1)},visible:{opacity:1,scale:1},exit:{opacity:0,scale:M(t,["exitScale"],1.1)}}}),[])(),o=M(n,["default","exit"],n.default.exit);return _.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...n.default,exit:o},transition:{duration:M(e,["duration"],1.2),...e}}),[n,o,e])}import{get as L}from"lodash-es";import N from"react";function Nt({onEnterDirection:t="RIGHT",onExitDirection:i="RIGHT",distance:e="100%"}={}){let{transition:a}=u(),o=N.useCallback(r=>({DEFAULT:{hidden:{opacity:0},visible:{opacity:1},exit:{opacity:0}},TOP:{hidden:{opacity:0,y:`-${r}`},visible:{opacity:1,y:0},exit:{opacity:0,y:`-${r}`}},BOTTOM:{hidden:{opacity:0,y:r},visible:{opacity:1,y:0},exit:{opacity:0,y:r}},LEFT:{hidden:{opacity:0,x:`-${r}`},visible:{opacity:1,x:0},exit:{opacity:0,x:`-${r}`}},RIGHT:{hidden:{opacity:0,x:r},visible:{opacity:1,x:0},exit:{opacity:0,x:r}}}),[])(e),p=L(o,[i,"exit"],o.RIGHT.exit);return N.useMemo(()=>({initial:"hidden",animate:"visible",exit:"exit",variants:{...L(o,[t],o.RIGHT),exit:p},transition:{...a}}),[o,p,t,a])}import{get as j}from"lodash-es";import z from"react";function Bt(t){let{as:i,...e}=t,a=j(h,[i??"div"],h.div);return z.createElement(a,{...e})}import v from"react";function qt({children:t,isVisible:i,mode:e,initial:a}){return v.createElement(S,{mode:e,initial:a},i&&v.Children.toArray(t).map((n,o)=>v.isValidElement(n)?v.cloneElement(n,{key:n.key??`motion-child-${o}`}):n))}import{cloneDeep as K,merge as Q}from"lodash-es";function jt(...t){let i=t.map(e=>K(e));return Q({},...i)}export{qt as AnimateMotionPresence,x as DirectionEnum,pt as MotionProvider,Bt as PolymorphicMotionElement,jt as mergeMotionProperties,d as systemHausMotionConfiguration,xt as useCursorFollow,At as useDeepMergeMotionProperties,Et as useFadeIn,Ft as useScale,Nt as useSlideOut,u as useSystemHausMotionProvider};

package/dist/index.d.ts

@@ -1,5 +1,26 @@
-import * as framer_motion from 'framer-motion';
-import * as react from 'react';
+import { AnimatePresence } from 'framer-motion';
+import * as Motion from 'framer-motion';
+import { motion } from 'framer-motion';
+import { MotionConfig } from 'framer-motion';
+import { MotionProps } from 'framer-motion';
+import * as React_2 from 'react';
+import React__default from 'react';
+import { useMotionValue } from 'framer-motion';
+import { useSpring } from 'framer-motion';
+import { Variant } from 'framer-motion';
+import { Variants } from 'framer-motion';
+import { ViewportOptions } from 'framer-motion';
+
+export declare function AnimateMotionPresence({ children, isVisible, mode, initial, }: React__default.PropsWithChildren<AnimateMotionPresenceProperties>): React__default.ReactNode;
+
+export declare interface AnimateMotionPresenceProperties {
+    isVisible?: boolean;
+    initial?: boolean;
+    children?: React__default.ReactNode;
+    mode?: 'wait' | 'sync' | 'popLayout';
+}
+
+export { AnimatePresence }
 
 declare type CalculateCursorOffsetController = CursorFollowSettings;
 
@@ -11,26 +32,97 @@ declare interface CursorFollowSettings {
     magneticModeActivationRadius?: number;
 }
 
-export declare interface DarkModeController {
-    isDark: boolean;
-    theme: ThemeEnum;
-    toggle: () => void;
-    iconSettings: string;
-    setTheme: (newTheme: ThemeEnum) => void;
+export declare enum DirectionEnum {
+    TOP = "TOP",
+    BOTTOM = "BOTTOM",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT",
+    DEFAULT = "DEFAULT"
+}
+
+export declare function mergeMotionProperties(...motionProperties: MotionProps[]): MotionProps;
+
+export { motion }
+
+export { MotionConfig }
+
+export { MotionProps }
+
+export declare const MotionProvider: React__default.FC<SystemHausMotionProviderProperties>;
+
+export declare function PolymorphicMotionElement<T extends keyof React__default.JSX.IntrinsicElements = 'div'>(properties: React__default.PropsWithChildren<PolymorphicMotionProperties<T>>): React__default.ReactNode;
+
+export declare type PolymorphicMotionProperties<T extends keyof React__default.JSX.IntrinsicElements = 'div'> = Omit<React__default.JSX.IntrinsicElements[T], keyof MotionProps | 'ref'> & MotionProps & {
+    as?: T;
+    isVisible?: boolean;
+};
+
+declare type ProvidedConfig = {
+    fadeInSpeed: number;
+    fadeDistance: number;
+};
+
+export declare const systemHausMotionConfiguration: SystemHausMotionProvider;
+
+export declare interface SystemHausMotionProvider extends SystemHausMotionProviderConfig {
+    fadeInDistance: number;
+    fadeInDirection: DirectionEnum;
+    viewport: ViewportOptions;
 }
 
-export declare enum ThemeEnum {
-    DARK = "dark",
-    LIGHT = "light",
-    SYSTEM = "system"
+declare type SystemHausMotionProviderConfig = ProvidedConfig & {
+    [K in keyof Motion.MotionConfigProps as Motion.MotionConfigProps[K] extends (...unknowns: unknown[]) => unknown ? never : K]: Motion.MotionConfigProps[K];
+};
+
+declare interface SystemHausMotionProviderProperties {
+    children?: React__default.ReactNode;
+    motionOverrides?: Partial<SystemHausMotionProvider>;
 }
 
 export declare function useCursorFollow(settings: CalculateCursorOffsetController): {
-    ref: react.Dispatch<react.SetStateAction<HTMLDivElement | undefined>>;
-    x: framer_motion.MotionValue<number>;
-    y: framer_motion.MotionValue<number>;
+    ref: React_2.Dispatch<React_2.SetStateAction<HTMLDivElement | undefined>>;
+    x: Motion.MotionValue<number>;
+    y: Motion.MotionValue<number>;
 };
 
-export declare function useDarkMode(): DarkModeController;
+export declare function useDeepMergeMotionProperties(...motionProperties: MotionProps[]): MotionProps;
+
+export declare const useFadeIn: ({ onEnterDirection, onExitDirection, }?: UseFadeInProperties) => PolymorphicMotionProperties;
+
+export declare interface UseFadeInProperties {
+    onEnterDirection?: DirectionEnum;
+    onExitDirection?: DirectionEnum;
+}
+
+export { useMotionValue }
+
+/**
+ * Scale motion hook — animates an element scaling in/out.
+ * Default scale range: visible = 1, hidden = 1.2 (slightly zoomed in).
+ */
+export declare function useScale(payload?: {
+    initialScale?: number;
+    exitScale?: number;
+}): PolymorphicMotionProperties;
+
+/**
+ * Slide-out motion hook — animates an element in/out based on direction.
+ * Default distance: "100%" (full travel).
+ */
+export declare function useSlideOut({ onEnterDirection, onExitDirection, distance, }?: {
+    onEnterDirection?: DirectionEnum;
+    onExitDirection?: DirectionEnum;
+    distance?: string | number;
+}): PolymorphicMotionProperties;
+
+export { useSpring }
+
+export declare const useSystemHausMotionProvider: () => SystemHausMotionProvider;
+
+export { Variant }
+
+export { Variants }
+
+export { ViewportOptions }
 
 export { }

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.53.1"
+      "packageVersion": "7.55.0"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kurocado-studio/systemhaus-motion-react",
-  "version": "1.0.0-develop.1",
+  "version": "1.0.0-develop.10",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,6 @@
       "import": "./dist/exports.js",
       "types": "./dist/index.d.ts",
       "default": "./dist/exports.js"
-    },
-    "./tailwind.css": {
-      "import": "./dist/exports.css",
-      "default": "./dist/exports.css"
     }
   },
   "files": [
@@ -28,13 +24,10 @@
   ],
   "scripts": {
     "build:typings": "api-extractor run --local",
-    "build": "rm -rf dist && tsup && pnpm build:typings && rm -rf dist/exports.d.ts",
+    "build": "tsup && pnpm build:typings && rm -rf dist/exports.d.ts",
     "prepublishOnly": "node ../../scripts/strip-workspaces.js .",
     "clean": "rm -rf .turbo node_modules dist",
     "dev": "tsup --watch",
-    "dev:vite": "vite build --watch --mode development",
-    "vite:watch": "vite build --watch --mode development",
-    "build:vite": "rm -rf dist && vite build --mode production",
     "lint": "eslint --max-warnings=0  --no-warn-ignored",
     "lint:fix": "eslint --max-warnings=0  --fix --no-warn-ignored",
     "prettier:fix": "prettier --write . --ignore-path ../../.prettierignore",
@@ -42,10 +35,8 @@
     "typecheck": "tsc --noEmit --pretty"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.1",
-    "framer-motion": "^12.23.6",
+    "framer-motion": "^12.23.24",
     "lodash-es": "^4.17.21",
-    "motion": "^12.11.0",
     "react": "19"
   },
   "devDependencies": {
@@ -57,17 +48,11 @@
     "@types/node": "^22.15.19",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.4",
-    "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "^3.1.3",
-    "copyfiles": "^2.4.1",
     "eslint": "^9.28.0",
     "prettier": "3.5.3",
     "tsup": "^8.5.0",
     "typescript": "5.8.3",
-    "vite": "^5.2.8",
-    "vite-node": "3.2.4",
-    "vite-plugin-dts": "^4.5.3",
-    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.1.3"
   }
 }