@pyreon/kinetic 0.11.5 → 0.11.7

package/src/__tests__/utils.test.ts

@@ -1,116 +1,116 @@
-import { describe, expect, it } from "vitest"
-import type { CSSProperties } from "../types"
-import { addClasses, mergeClassNames, mergeStyles, nextFrame, removeClasses } from "../utils"
+import { describe, expect, it } from 'vitest'
+import type { CSSProperties } from '../types'
+import { addClasses, mergeClassNames, mergeStyles, nextFrame, removeClasses } from '../utils'
 
-describe("mergeClassNames", () => {
-  it("merges two class strings", () => {
-    expect(mergeClassNames("a", "b")).toBe("a b")
+describe('mergeClassNames', () => {
+  it('merges two class strings', () => {
+    expect(mergeClassNames('a', 'b')).toBe('a b')
   })
 
-  it("returns existing when additional is undefined", () => {
-    expect(mergeClassNames("a", undefined)).toBe("a")
+  it('returns existing when additional is undefined', () => {
+    expect(mergeClassNames('a', undefined)).toBe('a')
   })
 
-  it("returns additional when existing is undefined", () => {
-    expect(mergeClassNames(undefined, "b")).toBe("b")
+  it('returns additional when existing is undefined', () => {
+    expect(mergeClassNames(undefined, 'b')).toBe('b')
   })
 
-  it("returns undefined when both are undefined", () => {
+  it('returns undefined when both are undefined', () => {
     expect(mergeClassNames(undefined, undefined)).toBeUndefined()
   })
 
-  it("returns undefined when both are empty strings", () => {
-    expect(mergeClassNames("", "")).toBeUndefined()
+  it('returns undefined when both are empty strings', () => {
+    expect(mergeClassNames('', '')).toBeUndefined()
   })
 
-  it("filters out empty strings", () => {
-    expect(mergeClassNames("a", "")).toBe("a")
+  it('filters out empty strings', () => {
+    expect(mergeClassNames('a', '')).toBe('a')
   })
 })
 
-describe("mergeStyles", () => {
-  it("merges two style objects with b taking precedence", () => {
-    const a = { color: "red", fontSize: "12px" } as CSSProperties
-    const b = { color: "blue" } as CSSProperties
-    expect(mergeStyles(a, b)).toEqual({ color: "blue", fontSize: "12px" })
+describe('mergeStyles', () => {
+  it('merges two style objects with b taking precedence', () => {
+    const a = { color: 'red', fontSize: '12px' } as CSSProperties
+    const b = { color: 'blue' } as CSSProperties
+    expect(mergeStyles(a, b)).toEqual({ color: 'blue', fontSize: '12px' })
   })
 
-  it("returns undefined when both are undefined", () => {
+  it('returns undefined when both are undefined', () => {
     expect(mergeStyles(undefined, undefined)).toBeUndefined()
   })
 
-  it("returns b when a is undefined", () => {
-    const b = { color: "blue" } as CSSProperties
+  it('returns b when a is undefined', () => {
+    const b = { color: 'blue' } as CSSProperties
     expect(mergeStyles(undefined, b)).toBe(b)
   })
 
-  it("returns a when b is undefined", () => {
-    const a = { color: "red" } as CSSProperties
+  it('returns a when b is undefined', () => {
+    const a = { color: 'red' } as CSSProperties
     expect(mergeStyles(a, undefined)).toBe(a)
   })
 })
 
-describe("addClasses", () => {
-  it("adds space-separated classes to an element", () => {
-    const el = document.createElement("div")
-    addClasses(el, "foo bar")
-    expect(el.classList.contains("foo")).toBe(true)
-    expect(el.classList.contains("bar")).toBe(true)
+describe('addClasses', () => {
+  it('adds space-separated classes to an element', () => {
+    const el = document.createElement('div')
+    addClasses(el, 'foo bar')
+    expect(el.classList.contains('foo')).toBe(true)
+    expect(el.classList.contains('bar')).toBe(true)
   })
 
-  it("does nothing when classes is undefined", () => {
-    const el = document.createElement("div")
+  it('does nothing when classes is undefined', () => {
+    const el = document.createElement('div')
     addClasses(el, undefined)
     expect(el.classList.length).toBe(0)
   })
 
-  it("does nothing when classes is empty string", () => {
-    const el = document.createElement("div")
-    addClasses(el, "")
+  it('does nothing when classes is empty string', () => {
+    const el = document.createElement('div')
+    addClasses(el, '')
     expect(el.classList.length).toBe(0)
   })
 
-  it("does nothing when classes is whitespace-only", () => {
-    const el = document.createElement("div")
-    addClasses(el, "   ")
+  it('does nothing when classes is whitespace-only', () => {
+    const el = document.createElement('div')
+    addClasses(el, '   ')
     expect(el.classList.length).toBe(0)
   })
 })
 
-describe("removeClasses", () => {
-  it("removes space-separated classes from an element", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo", "bar", "baz")
-    removeClasses(el, "foo bar")
-    expect(el.classList.contains("foo")).toBe(false)
-    expect(el.classList.contains("bar")).toBe(false)
-    expect(el.classList.contains("baz")).toBe(true)
+describe('removeClasses', () => {
+  it('removes space-separated classes from an element', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo', 'bar', 'baz')
+    removeClasses(el, 'foo bar')
+    expect(el.classList.contains('foo')).toBe(false)
+    expect(el.classList.contains('bar')).toBe(false)
+    expect(el.classList.contains('baz')).toBe(true)
   })
 
-  it("does nothing when classes is undefined", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo")
+  it('does nothing when classes is undefined', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo')
     removeClasses(el, undefined)
-    expect(el.classList.contains("foo")).toBe(true)
+    expect(el.classList.contains('foo')).toBe(true)
   })
 
-  it("does nothing when classes is empty string", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo")
-    removeClasses(el, "")
-    expect(el.classList.contains("foo")).toBe(true)
+  it('does nothing when classes is empty string', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo')
+    removeClasses(el, '')
+    expect(el.classList.contains('foo')).toBe(true)
   })
 
-  it("does nothing when classes is whitespace-only", () => {
-    const el = document.createElement("div")
-    el.classList.add("foo")
-    removeClasses(el, "   ")
-    expect(el.classList.contains("foo")).toBe(true)
+  it('does nothing when classes is whitespace-only', () => {
+    const el = document.createElement('div')
+    el.classList.add('foo')
+    removeClasses(el, '   ')
+    expect(el.classList.contains('foo')).toBe(true)
   })
 })
 
-describe("nextFrame", () => {
-  it("calls callback after double rAF", () => {
+describe('nextFrame', () => {
+  it('calls callback after double rAF', () => {
     const callbacks: (() => void)[] = []
     const originalRaf = globalThis.requestAnimationFrame
     globalThis.requestAnimationFrame = ((cb: () => void) => {

package/src/index.ts

@@ -1,23 +1,15 @@
-export { default as kinetic } from "./kinetic"
-export type { KineticComponent } from "./kinetic/types"
-export type { Preset } from "./presets"
-export {
-  fade,
-  presets,
-  scaleIn,
-  slideDown,
-  slideLeft,
-  slideRight,
-  slideUp,
-} from "./presets"
+export { default as kinetic } from './kinetic'
+export type { KineticComponent } from './kinetic/types'
+export type { Preset } from './presets'
+export { fade, presets, scaleIn, slideDown, slideLeft, slideRight, slideUp } from './presets'
 export type {
   ClassTransitionProps,
   StyleTransitionProps,
   TransitionCallbacks,
   TransitionStage,
   TransitionStateResult,
-} from "./types"
-export type { UseAnimationEnd } from "./useAnimationEnd"
-export { default as useAnimationEnd } from "./useAnimationEnd"
-export type { UseTransitionState } from "./useTransitionState"
-export { default as useTransitionState } from "./useTransitionState"
+} from './types'
+export type { UseAnimationEnd } from './useAnimationEnd'
+export { default as useAnimationEnd } from './useAnimationEnd'
+export type { UseTransitionState } from './useTransitionState'
+export { default as useTransitionState } from './useTransitionState'

package/src/kinetic/CollapseRenderer.tsx

@@ -1,10 +1,10 @@
-import type { VNode } from "@pyreon/core"
-import { createRef, h, Show } from "@pyreon/core"
-import { runUntracked, signal, watch } from "@pyreon/reactivity"
-import type { CSSProperties, TransitionCallbacks, TransitionStage } from "../types"
-import useAnimationEnd from "../useAnimationEnd"
-import { useReducedMotion } from "../useReducedMotion"
-import type { KineticConfig } from "./types"
+import type { VNode } from '@pyreon/core'
+import { createRef, h, Show } from '@pyreon/core'
+import { runUntracked, signal, watch } from '@pyreon/reactivity'
+import type { CSSProperties, TransitionCallbacks, TransitionStage } from '../types'
+import useAnimationEnd from '../useAnimationEnd'
+import { useReducedMotion } from '../useReducedMotion'
+import type { KineticConfig } from './types'
 
 type CollapseRendererProps = {
   config: KineticConfig
@@ -38,11 +38,11 @@ const CollapseRenderer = ({
 
   const effectiveAppear = appear ?? config.appear ?? false
   const effectiveTimeout = timeout ?? config.timeout ?? 5000
-  const effectiveTransition = transition ?? config.transition ?? "height 300ms ease"
+  const effectiveTransition = transition ?? config.transition ?? 'height 300ms ease'
 
   const initialShow = show()
   const needsAppear = effectiveAppear && initialShow
-  const stage = signal<TransitionStage>(initialShow ? "entered" : "hidden")
+  const stage = signal<TransitionStage>(initialShow ? 'entered' : 'hidden')
   let isInitialMount = true
   let appearTriggered = false
 
@@ -50,7 +50,7 @@ const CollapseRenderer = ({
   if (needsAppear) {
     const orig = wrapperRef
     const proxy = { current: null as HTMLElement | null }
-    Object.defineProperty(proxy, "current", {
+    Object.defineProperty(proxy, 'current', {
       get() {
         return orig.current
       },
@@ -58,7 +58,7 @@ const CollapseRenderer = ({
         orig.current = node
         if (node && !appearTriggered) {
           appearTriggered = true
-          queueMicrotask(() => stage.set("entering"))
+          queueMicrotask(() => stage.set('entering'))
         }
       },
     })
@@ -76,10 +76,10 @@ const CollapseRenderer = ({
       }
 
       const currentStage = runUntracked(() => stage())
-      if (showVal && (currentStage === "hidden" || currentStage === "leaving")) {
-        stage.set("entering")
-      } else if (!showVal && (currentStage === "entered" || currentStage === "entering")) {
-        stage.set("leaving")
+      if (showVal && (currentStage === 'hidden' || currentStage === 'leaving')) {
+        stage.set('entering')
+      } else if (!showVal && (currentStage === 'entered' || currentStage === 'entering')) {
+        stage.set('leaving')
       }
     },
     { immediate: true },
@@ -94,44 +94,44 @@ const CollapseRenderer = ({
       if (!wrapper || !content) return
 
       if (reducedMotion()) {
-        if (currentStage === "entering") {
+        if (currentStage === 'entering') {
           callbacks.onEnter?.()
-          wrapper.style.height = "auto"
-          wrapper.style.overflow = ""
+          wrapper.style.height = 'auto'
+          wrapper.style.overflow = ''
           callbacks.onAfterEnter?.()
-          stage.set("entered")
-        } else if (currentStage === "leaving") {
+          stage.set('entered')
+        } else if (currentStage === 'leaving') {
           callbacks.onLeave?.()
-          wrapper.style.height = "0px"
-          wrapper.style.overflow = "hidden"
+          wrapper.style.height = '0px'
+          wrapper.style.overflow = 'hidden'
           callbacks.onAfterLeave?.()
-          stage.set("hidden")
+          stage.set('hidden')
         }
         return
       }
 
-      if (currentStage === "entering") {
+      if (currentStage === 'entering') {
         callbacks.onEnter?.()
         const height = content.scrollHeight
-        wrapper.style.transition = "none"
-        wrapper.style.height = "0px"
-        wrapper.style.overflow = "hidden"
+        wrapper.style.transition = 'none'
+        wrapper.style.height = '0px'
+        wrapper.style.overflow = 'hidden'
         // Force reflow
         void wrapper.offsetHeight
         wrapper.style.transition = effectiveTransition
         wrapper.style.height = `${height}px`
       }
 
-      if (currentStage === "leaving") {
+      if (currentStage === 'leaving') {
         callbacks.onLeave?.()
         const height = content.scrollHeight
-        wrapper.style.transition = "none"
+        wrapper.style.transition = 'none'
         wrapper.style.height = `${height}px`
-        wrapper.style.overflow = "hidden"
+        wrapper.style.overflow = 'hidden'
         // Force reflow
         void wrapper.offsetHeight
         wrapper.style.transition = effectiveTransition
-        wrapper.style.height = "0px"
+        wrapper.style.height = '0px'
       }
     },
     { immediate: true },
@@ -139,31 +139,31 @@ const CollapseRenderer = ({
 
   useAnimationEnd({
     ref: wrapperRef,
-    active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
     timeout: effectiveTimeout,
     onEnd: () => {
       const wrapper = wrapperRef.current
-      if (stage() === "entering") {
+      if (stage() === 'entering') {
         if (wrapper) {
-          wrapper.style.height = "auto"
-          wrapper.style.overflow = ""
-          wrapper.style.transition = ""
+          wrapper.style.height = 'auto'
+          wrapper.style.overflow = ''
+          wrapper.style.transition = ''
         }
         callbacks.onAfterEnter?.()
-        stage.set("entered")
-      } else if (stage() === "leaving") {
+        stage.set('entered')
+      } else if (stage() === 'leaving') {
         callbacks.onAfterLeave?.()
-        stage.set("hidden")
+        stage.set('hidden')
       }
     },
   })
 
-  const shouldRender = () => stage() !== "hidden"
+  const shouldRender = () => stage() !== 'hidden'
 
   const wrapperStyle: CSSProperties = {
     ...((htmlProps.style as CSSProperties) ?? {}),
-    ...(stage() !== "entered" ? { overflow: "hidden" } : {}),
-    ...(stage() === "hidden" ? { height: "0px" } : stage() === "entered" ? { height: "auto" } : {}),
+    ...(stage() !== 'entered' ? { overflow: 'hidden' } : {}),
+    ...(stage() === 'hidden' ? { height: '0px' } : stage() === 'entered' ? { height: 'auto' } : {}),
   }
 
   return h(

package/src/kinetic/GroupRenderer.tsx

@@ -1,9 +1,9 @@
-import type { VNode } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
-import type { TransitionCallbacks } from "../types"
-import TransitionItem from "./TransitionItem"
-import type { KineticConfig } from "./types"
+import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import type { TransitionCallbacks } from '../types'
+import TransitionItem from './TransitionItem'
+import type { KineticConfig } from './types'
 
 type GroupRendererProps = {
   config: KineticConfig
@@ -22,7 +22,7 @@ type GroupRendererProps = {
 type KeyedChild = { key: string | number; element: VNode }
 
 const isVNode = (child: unknown): child is VNode =>
-  child != null && typeof child === "object" && "type" in (child as object)
+  child != null && typeof child === 'object' && 'type' in (child as object)
 
 const getKeyedChildren = (children: VNode[]): KeyedChild[] => {
   const result: KeyedChild[] = []
@@ -62,7 +62,7 @@ const GroupRenderer = ({
   const forceUpdate = signal(0)
 
   // Normalize children to an accessor
-  const getChildren = typeof children === "function" ? (children as () => VNode[]) : () => children
+  const getChildren = typeof children === 'function' ? (children as () => VNode[]) : () => children
 
   // Track initial keys for appear animation logic
   const initialKeyed = getKeyedChildren(getChildren())

package/src/kinetic/StaggerRenderer.tsx

@@ -1,9 +1,9 @@
-import type { VNode } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import type { CSSProperties, TransitionCallbacks } from "../types"
-import { cloneVNode } from "../utils"
-import TransitionItem from "./TransitionItem"
-import type { KineticConfig } from "./types"
+import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import type { CSSProperties, TransitionCallbacks } from '../types'
+import { cloneVNode } from '../utils'
+import TransitionItem from './TransitionItem'
+import type { KineticConfig } from './types'
 
 type StaggerRendererProps = {
   config: KineticConfig
@@ -18,7 +18,7 @@ type StaggerRendererProps = {
 }
 
 const isVNode = (child: unknown): child is VNode =>
-  child != null && typeof child === "object" && "type" in (child as object)
+  child != null && typeof child === 'object' && 'type' in (child as object)
 
 /**
  * Renders children with staggered enter/exit animation.
@@ -73,8 +73,8 @@ const StaggerRenderer = ({
         {cloneVNode(child, {
           style: {
             ...((child.props as Record<string, unknown>)?.style as CSSProperties | undefined),
-            "--stagger-index": staggerIndex,
-            "--stagger-interval": `${effectiveInterval}ms`,
+            '--stagger-index': staggerIndex,
+            '--stagger-interval': `${effectiveInterval}ms`,
             transitionDelay: `${delay}ms`,
           } as CSSProperties,
         })}

package/src/kinetic/TransitionItem.tsx

@@ -1,11 +1,11 @@
-import type { VNode } from "@pyreon/core"
-import { createRef, Show } from "@pyreon/core"
-import { watch } from "@pyreon/reactivity"
-import type { ClassTransitionProps, StyleTransitionProps, TransitionCallbacks } from "../types"
-import useAnimationEnd from "../useAnimationEnd"
-import { useReducedMotion } from "../useReducedMotion"
-import useTransitionState from "../useTransitionState"
-import { addClasses, cloneVNode, mergeRefs, mergeStyles, nextFrame, removeClasses } from "../utils"
+import type { VNode } from '@pyreon/core'
+import { createRef, Show } from '@pyreon/core'
+import { watch } from '@pyreon/reactivity'
+import type { ClassTransitionProps, StyleTransitionProps, TransitionCallbacks } from '../types'
+import useAnimationEnd from '../useAnimationEnd'
+import { useReducedMotion } from '../useReducedMotion'
+import useTransitionState from '../useTransitionState'
+import { addClasses, cloneVNode, mergeRefs, mergeStyles, nextFrame, removeClasses } from '../utils'
 
 type TransitionItemProps = ClassTransitionProps &
   StyleTransitionProps &
@@ -52,11 +52,11 @@ const applyReducedMotion = (
   callbacks: Partial<TransitionCallbacks>,
   complete: () => void,
 ) => {
-  if (stage === "entering") {
+  if (stage === 'entering') {
     callbacks.onEnter?.()
     callbacks.onAfterEnter?.()
     complete()
-  } else if (stage === "leaving") {
+  } else if (stage === 'leaving') {
     callbacks.onLeave?.()
     callbacks.onAfterLeave?.()
     complete()
@@ -128,12 +128,12 @@ const TransitionItem = ({
 
   useAnimationEnd({
     ref: elementRef,
-    active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
     timeout,
     onEnd: () => {
-      if (stage() === "entering") {
+      if (stage() === 'entering') {
         callbacks.onAfterEnter?.()
-      } else if (stage() === "leaving") {
+      } else if (stage() === 'leaving') {
         callbacks.onAfterLeave?.()
       }
       complete()
@@ -151,21 +151,21 @@ const TransitionItem = ({
         return
       }
 
-      if (currentStage === "entering") {
+      if (currentStage === 'entering') {
         callbacks.onEnter?.()
         const frameId = applyEnter(el, transitionConfig)
         return () => cancelAnimationFrame(frameId)
       }
 
-      if (currentStage === "leaving") {
+      if (currentStage === 'leaving') {
         callbacks.onLeave?.()
         const frameId = applyLeave(el, transitionConfig)
         return () => cancelAnimationFrame(frameId)
       }
 
-      if (currentStage === "entered") {
+      if (currentStage === 'entered') {
         removeClasses(el, enter)
-        el.style.transition = ""
+        el.style.transition = ''
       }
     },
     { immediate: true },
@@ -183,7 +183,7 @@ const TransitionItem = ({
                 (children.props as Record<string, unknown>)?.style as
                   | Record<string, string | number | undefined>
                   | undefined,
-                { display: "none" },
+                { display: 'none' },
               ),
             })
       }

package/src/kinetic/TransitionRenderer.tsx

@@ -1,12 +1,12 @@
-import type { VNode } from "@pyreon/core"
-import { createRef, h, Show } from "@pyreon/core"
-import { watch } from "@pyreon/reactivity"
-import type { CSSProperties, TransitionCallbacks } from "../types"
-import useAnimationEnd from "../useAnimationEnd"
-import { useReducedMotion } from "../useReducedMotion"
-import useTransitionState from "../useTransitionState"
-import { addClasses, mergeRefs, nextFrame, removeClasses } from "../utils"
-import type { KineticConfig } from "./types"
+import type { VNode } from '@pyreon/core'
+import { createRef, h, Show } from '@pyreon/core'
+import { watch } from '@pyreon/reactivity'
+import type { CSSProperties, TransitionCallbacks } from '../types'
+import useAnimationEnd from '../useAnimationEnd'
+import { useReducedMotion } from '../useReducedMotion'
+import useTransitionState from '../useTransitionState'
+import { addClasses, mergeRefs, nextFrame, removeClasses } from '../utils'
+import type { KineticConfig } from './types'
 
 type TransitionRendererProps = {
   config: KineticConfig
@@ -53,11 +53,11 @@ const applyReducedMotion = (
   cbs: Partial<TransitionCallbacks>,
   complete: () => void,
 ) => {
-  if (stage === "entering") {
+  if (stage === 'entering') {
     cbs.onEnter?.()
     cbs.onAfterEnter?.()
     complete()
-  } else if (stage === "leaving") {
+  } else if (stage === 'leaving') {
     cbs.onLeave?.()
     cbs.onAfterLeave?.()
     complete()
@@ -97,12 +97,12 @@ const TransitionRenderer = ({
 
   useAnimationEnd({
     ref: elementRef,
-    active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
     timeout: effectiveTimeout,
     onEnd: () => {
-      if (stage() === "entering") {
+      if (stage() === 'entering') {
         callbacks.onAfterEnter?.()
-      } else if (stage() === "leaving") {
+      } else if (stage() === 'leaving') {
         callbacks.onAfterLeave?.()
       }
       complete()
@@ -120,21 +120,21 @@ const TransitionRenderer = ({
         return
       }
 
-      if (currentStage === "entering") {
+      if (currentStage === 'entering') {
         callbacks.onEnter?.()
         const frameId = applyEnter(el, config)
         return () => cancelAnimationFrame(frameId)
       }
 
-      if (currentStage === "leaving") {
+      if (currentStage === 'leaving') {
         callbacks.onLeave?.()
         const frameId = applyLeave(el, config)
         return () => cancelAnimationFrame(frameId)
       }
 
-      if (currentStage === "entered") {
+      if (currentStage === 'entered') {
         removeClasses(el, config.enter)
-        el.style.transition = ""
+        el.style.transition = ''
       }
     },
     { immediate: true },
@@ -153,7 +153,7 @@ const TransitionRenderer = ({
                 ...htmlProps,
                 style: {
                   ...((htmlProps.style as CSSProperties) ?? {}),
-                  display: "none",
+                  display: 'none',
                 },
               },
               children,