ripple & deps

src/packages/components/lazy-motion/.gitignore

@@ -0,0 +1,42 @@
+
+# dependencies
+node_modules
+
+# build
+dist
+dist-ssr
+build
+out
+*.tsbuildinfo
+
+# testing & coverage
+coverage
+coverage-ts
+
+# env
+.env
+
+# Editor directories and files
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.local
+*.pem
+.idea
+.todo
+.DS_Store
+
+# vendors
+.turbo
+.vercel
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

src/packages/components/lazy-motion/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @renderui/lazy-motion
+
+## 1.0.0
+
+### Patch changes
+
+- Added abstraction providers for framer-motion dom animationa and dom max features
+- Added provider compount component

src/packages/components/lazy-motion/package.json

@@ -0,0 +1,48 @@
+{
+  "author": {
+    "email": "[email protected]",
+    "name": "Lovro Žagar"
+  },
+  "devDependencies": {
+    "bunchee": "^5.5.1",
+    "framer-motion": "^11.11.10",
+    "react": "19.0.0-rc-a960b92c-20240819",
+    "react-dom": "19.0.0-rc-a960b92c-20240819",
+    "types-react": "^19.0.0-rc.1",
+    "types-react-dom": "^19.0.0-rc.1",
+    "typescript": "^5.5.4"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "default": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    }
+  },
+  "files": ["dist"],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "name": "@renderui/lazy-motion",
+  "peerDependencies": {
+    "framer-motion": "^11.11.10",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lovrozagar/renderui.git"
+  },
+  "scripts": {
+    "build": "bunchee -m"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "version": "1.0.0"
+}

src/packages/components/lazy-motion/src/components/lazy-motion-dom-animation-provider.tsx

@@ -0,0 +1,17 @@
+import { LazyMotion } from "framer-motion"
+import type { LazyMotionProviderProps } from "../types/lazy-motion-provider"
+
+const LazyMotionDomAnimationProvider = (props: LazyMotionProviderProps) => {
+  const { children, strict = true } = props
+
+  return (
+    <LazyMotion
+      features={async () => import("../lib/dom-animation").then((res) => res.default)}
+      strict={strict}
+    >
+      {children}
+    </LazyMotion>
+  )
+}
+
+export { LazyMotionDomAnimationProvider }

src/packages/components/lazy-motion/src/components/lazy-motion-dom-max-provider.tsx

@@ -0,0 +1,17 @@
+import { LazyMotion } from "framer-motion"
+import type { LazyMotionProviderProps } from "../types/lazy-motion-provider"
+
+const LazyMotionDomMaxProvider = (props: LazyMotionProviderProps) => {
+  const { children, strict = true } = props
+
+  return (
+    <LazyMotion
+      features={async () => import("../lib/dom-max").then((res) => res.default)}
+      strict={strict}
+    >
+      {children}
+    </LazyMotion>
+  )
+}
+
+export { LazyMotionDomMaxProvider }

src/packages/components/lazy-motion/src/components/lazy-motion-provider.tsx

@@ -0,0 +1,15 @@
+import { LazyMotionDomAnimationProvider } from "./lazy-motion-dom-animation-provider"
+import { LazyMotionDomMaxProvider } from "./lazy-motion-dom-max-provider"
+
+type LazyMotionProviderCompoundComponent = JSX.Element & {
+  DomAnimation: typeof LazyMotionDomAnimationProvider
+  DomMax: typeof LazyMotionDomMaxProvider
+}
+
+/* biome-ignore lint/complexity/noUselessFragments: <explanation> */
+const LazyMotionProvider = (<></>) as LazyMotionProviderCompoundComponent
+
+LazyMotionProvider.DomAnimation = LazyMotionDomAnimationProvider
+LazyMotionProvider.DomMax = LazyMotionDomMaxProvider
+
+export { LazyMotionProvider }

src/packages/components/lazy-motion/src/index.ts

@@ -0,0 +1,4 @@
+export { LazyMotionDomAnimationProvider } from "./components/lazy-motion-dom-animation-provider"
+export { LazyMotionDomMaxProvider } from "./components/lazy-motion-dom-max-provider"
+export { LazyMotionProvider } from "./components/lazy-motion-provider"
+export type { LazyMotionProviderProps } from "./types/lazy-motion-provider"

src/packages/components/lazy-motion/src/lib/dom-animation.ts

@@ -0,0 +1 @@
+export { domAnimation as default } from 'framer-motion'

src/packages/components/lazy-motion/src/lib/dom-max.ts

@@ -0,0 +1 @@
+export { domMax as default } from "framer-motion"

src/packages/components/lazy-motion/src/types/lazy-motion-provider.ts

@@ -0,0 +1,6 @@
+import type { LazyMotion } from "framer-motion"
+import type { ComponentPropsWithRef } from "react"
+
+type LazyMotionProviderProps = Omit<ComponentPropsWithRef<typeof LazyMotion>, "features">
+
+export type { LazyMotionProviderProps }

src/packages/components/lazy-motion/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "include": ["src"]
+}

src/packages/components/ripple/.gitignore

@@ -0,0 +1,42 @@
+
+# dependencies
+node_modules
+
+# build
+dist
+dist-ssr
+build
+out
+*.tsbuildinfo
+
+# testing & coverage
+coverage
+coverage-ts
+
+# env
+.env
+
+# Editor directories and files
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.local
+*.pem
+.idea
+.todo
+.DS_Store
+
+# vendors
+.turbo
+.vercel
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

src/packages/components/ripple/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @renderui/ripple
+
+## 1.0.0
+
+### Patch changes
+
+- Added ripple component

src/packages/components/ripple/package.json

@@ -0,0 +1,56 @@
+{
+  "author": {
+    "email": "[email protected]",
+    "name": "Lovro Žagar"
+  },
+  "devDependencies": {
+		"@renderui/lazy-motion": ">=1.0.0",
+		"@renderui/sub-layer": ">=1.0.0",
+		"@renderui/utils": ">=0.2.6",
+		"@renderui/hooks": ">=1.0.0",
+		"bunchee": "^5.5.1",
+		"framer-motion": "^11.11.10",
+    "react": "19.0.0-rc-a960b92c-20240819",
+    "react-dom": "19.0.0-rc-a960b92c-20240819",
+    "types-react": "^19.0.0-rc.1",
+    "types-react-dom": "^19.0.0-rc.1",
+    "typescript": "^5.5.4"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "default": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    }
+  },
+  "files": ["dist"],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "name": "@renderui/ripple",
+  "peerDependencies": {
+		"@renderui/lazy-motion": ">=1.0.0",
+		"@renderui/sub-layer": ">=1.0.0",
+		"@renderui/utils": ">=0.2.6",
+		"@renderui/hooks": ">=1.0.0",
+		"framer-motion": "^11.11.10",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lovrozagar/renderui.git"
+  },
+  "scripts": {
+    "build": "bunchee -m"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "version": "1.0.0"
+}

src/packages/components/ripple/src/components/ripple.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { LazyMotionDomAnimationProvider } from "@renderui/lazy-motion"
+import { SubLayer } from "@renderui/sub-layer"
+import { getOptionalObject } from "@renderui/utils"
+import { AnimatePresence, m } from "framer-motion"
+import { useRipple } from "../hooks/use-ripple"
+import type { RippleProps } from "../types/ripple"
+
+const Ripple = (props: RippleProps) => {
+  const { subLayerProps, ...otherProps } = getOptionalObject(props)
+
+  const { ripples, internalSubLayerRef, addRippleOnPress, getRippleRipplesProps } =
+    useRipple(otherProps)
+
+  return (
+    <SubLayer ref={internalSubLayerRef} {...subLayerProps} onClick={addRippleOnPress}>
+      {ripples.map((ripple) => (
+        <LazyMotionDomAnimationProvider key={ripple.key}>
+          <AnimatePresence mode="popLayout">
+            <m.span {...getRippleRipplesProps(ripple)} />
+          </AnimatePresence>
+        </LazyMotionDomAnimationProvider>
+      ))}
+    </SubLayer>
+  )
+}
+
+export { Ripple }

src/packages/components/ripple/src/constants/constants.ts

@@ -0,0 +1,49 @@
+const DEFAULT_RIPPLE_CLASSNAME = "_ripple bg-current"
+
+const RIPPLE_ANIMATION_END_OPACITY = 0
+const RIPPLE_ANIMATION_START_SCALE = 0
+const RIPPLE_ANIMATION_END_DEFAULT_SCALE = 2
+
+const RIPPLE_DEFAULT_OPACITY = 0.25
+const RIPPLE_DEFAULT_DURATION_MULTIPLIER = 1
+const RIPPLE_DEFAULT_SCALE_MULTIPLIER = 1
+
+const RIPPLE_BASE_MULTIPLIER = 0.01
+const RIPPLE_MIDDLE_DURATION = 0.25
+const RIPPLE_SIZE_100 = 100
+const RIPPLE_OVER_100_DURATION = 0.75
+const RIPPLE_UNDER_100_DURATION = 0.675
+
+const RIPPLE_RIPPLE_BASE_STYLE = {
+  backgroundColor: "current",
+  position: "absolute",
+  borderRadius: "100%",
+  transformOrigin: "center",
+  pointerEvents: "none",
+  zIndex: "0",
+} as const
+
+const KEYBOARD_RIPPLE_DATASET_ATTRIBUTE = "data-keyboard-pressed"
+
+const KEYBOARD_RIPPLE_MUTATION_OBSERVER_OPTIONS = {
+  attributes: true,
+  attributeFilter: [KEYBOARD_RIPPLE_DATASET_ATTRIBUTE],
+}
+
+export {
+  DEFAULT_RIPPLE_CLASSNAME,
+  KEYBOARD_RIPPLE_MUTATION_OBSERVER_OPTIONS,
+  RIPPLE_ANIMATION_END_DEFAULT_SCALE,
+  RIPPLE_ANIMATION_END_OPACITY,
+  RIPPLE_ANIMATION_START_SCALE,
+  RIPPLE_BASE_MULTIPLIER,
+  RIPPLE_DEFAULT_DURATION_MULTIPLIER,
+  RIPPLE_DEFAULT_OPACITY,
+  RIPPLE_DEFAULT_SCALE_MULTIPLIER,
+  RIPPLE_MIDDLE_DURATION,
+  RIPPLE_OVER_100_DURATION,
+  RIPPLE_RIPPLE_BASE_STYLE,
+  RIPPLE_SIZE_100,
+  RIPPLE_UNDER_100_DURATION,
+  KEYBOARD_RIPPLE_DATASET_ATTRIBUTE,
+}