@pyreon/kinetic 0.11.4 → 0.11.6

package/README.md

@@ -10,15 +10,16 @@ The result: GPU-composited 60/120 FPS animations with a 3.2KB footprint.
 
 ### How It Compares
 
-| Library | Gzipped | Engine | Enter/Exit | Stagger | List Recon. | Collapse | Reduced Motion |
-| ------- | ------- | ------ | ---------- | ------- | ----------- | -------- | -------------- |
-| **@pyreon/kinetic** | **3.2 KB** | CSS transitions | Yes | Yes | Yes | Yes | Yes |
-| Motion (framer-motion) | ~34 KB | JS (rAF + WAAPI) | Yes | Yes | Yes | Quirky | Yes |
-| @react-spring/web | ~16-24 KB | JS (spring physics) | Yes | Partial | Yes | Manual | Yes |
-| react-transition-group | ~5 KB | CSS classes | Yes | No | Yes | No | No |
-| AutoAnimate | ~2.5 KB | JS (FLIP) | Yes | No | Yes | No | Yes |
+| Library                | Gzipped    | Engine              | Enter/Exit | Stagger | List Recon. | Collapse | Reduced Motion |
+| ---------------------- | ---------- | ------------------- | ---------- | ------- | ----------- | -------- | -------------- |
+| **@pyreon/kinetic**    | **3.2 KB** | CSS transitions     | Yes        | Yes     | Yes         | Yes      | Yes            |
+| Motion (framer-motion) | ~34 KB     | JS (rAF + WAAPI)    | Yes        | Yes     | Yes         | Quirky   | Yes            |
+| @react-spring/web      | ~16-24 KB  | JS (spring physics) | Yes        | Partial | Yes         | Manual   | Yes            |
+| react-transition-group | ~5 KB      | CSS classes         | Yes        | No      | Yes         | No       | No             |
+| AutoAnimate            | ~2.5 KB    | JS (FLIP)           | Yes        | No      | Yes         | No       | Yes            |
 
 **Key advantages:**
+
 - **10x smaller than Motion** for CSS-transition use cases
 - **CSS-first**: `transform`/`opacity` run on GPU compositor thread, not main thread
 - **Only library** combining CSS transitions + stagger + collapse + list reconciliation
@@ -53,9 +54,9 @@ FadeDiv({ show: show(), children: 'Hello, world!' })
 Creates an animated component. `tag` can be any HTML element string or Pyreon component.
 
 ```ts
-kinetic('div')        // HTML element
-kinetic('section')    // Any HTML tag
-kinetic(MyComponent)  // Pyreon component
+kinetic('div') // HTML element
+kinetic('section') // Any HTML tag
+kinetic(MyComponent) // Pyreon component
 ```
 
 Returns a renderable Pyreon component with chain methods attached. Default mode: **transition**.
@@ -109,7 +110,7 @@ Height animation with `overflow: hidden`. Measures `scrollHeight` automatically.
 ```ts
 const Accordion = kinetic('div').collapse()
 const FancyAccordion = kinetic('section').collapse({
-  transition: 'height 400ms cubic-bezier(0.4, 0, 0.2, 1)'
+  transition: 'height 400ms cubic-bezier(0.4, 0, 0.2, 1)',
 })
 
 Accordion({ show: isExpanded, children: 'Expandable content' })
@@ -122,11 +123,14 @@ Staggered entrance/exit for child elements.
 ```ts
 const StaggerList = kinetic('ul').preset(slideUp).stagger({ interval: 75 })
 
-StaggerList({ show: isVisible, children: [
-  h('li', { key: '1' }, 'Item 1'),
-  h('li', { key: '2' }, 'Item 2'),
-  h('li', { key: '3' }, 'Item 3'),
-]})
+StaggerList({
+  show: isVisible,
+  children: [
+    h('li', { key: '1' }, 'Item 1'),
+    h('li', { key: '2' }, 'Item 2'),
+    h('li', { key: '3' }, 'Item 3'),
+  ],
+})
 ```
 
 #### Group
@@ -136,9 +140,7 @@ Key-based enter/exit — adding a child triggers enter animation, removing trigg
 ```ts
 const AnimatedList = kinetic('ul').preset(fade).group()
 
-AnimatedList({ children: items.map(item =>
-  h('li', { key: item.id }, item.text)
-)})
+AnimatedList({ children: items.map((item) => h('li', { key: item.id }, item.text)) })
 ```
 
 ### Inline Configuration
@@ -199,8 +201,9 @@ Kinetic and rocketstyle compose naturally:
 ```ts
 import rocketstyle from '@pyreon/rocketstyle'
 
-const Button = rocketstyle()({ component: 'button', name: 'Button' })
-  .theme({ primaryColor: 'blue' })
+const Button = rocketstyle()({ component: 'button', name: 'Button' }).theme({
+  primaryColor: 'blue',
+})
 
 const AnimatedButton = kinetic(Button).preset(fade)
 
@@ -210,9 +213,9 @@ AnimatedButton({ show: isVisible, primary: true, size: 'large', children: 'Click
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | >= 0.0.1 |
+| Package            | Version  |
+| ------------------ | -------- |
+| @pyreon/core       | >= 0.0.1 |
 | @pyreon/reactivity | >= 0.0.1 |
 
 ## License

package/lib/index.d.ts

@@ -4,7 +4,7 @@ import { Signal } from "@pyreon/reactivity";
 //#region src/types.d.ts
 type CSSProperties = Record<string, string | number | undefined>;
 /** Internal lifecycle stages of a transition. */
-type TransitionStage = "hidden" | "entering" | "entered" | "leaving";
+type TransitionStage = 'hidden' | 'entering' | 'entered' | 'leaving';
 /** Class-based transition definition. */
 type ClassTransitionProps = {
   /** Classes applied during the entire enter phase */enter?: string | undefined; /** Classes applied on first frame of enter, removed on next frame */
@@ -38,7 +38,7 @@ type TransitionStateResult = {
 };
 //#endregion
 //#region src/kinetic/types.d.ts
-type KineticMode = "transition" | "collapse" | "stagger" | "group";
+type KineticMode = 'transition' | 'collapse' | 'stagger' | 'group';
 type ClassConfig = {
   active?: string | undefined;
   from?: string | undefined;
@@ -91,8 +91,8 @@ type KineticGroupProps<_Tag extends string> = Record<string, unknown> & {
   timeout?: number | undefined;
   children: VNodeChild;
 } & Partial<TransitionCallbacks>;
-type KineticComponentProps<Tag extends string, Mode extends KineticMode> = Mode extends "collapse" ? KineticCollapseProps<Tag> : Mode extends "stagger" ? KineticStaggerProps<Tag> : Mode extends "group" ? KineticGroupProps<Tag> : KineticTransitionProps<Tag>;
-type ConfigOpts<Mode extends KineticMode> = Mode extends "collapse" ? CollapseConfigOpts : Mode extends "stagger" ? StaggerConfigOpts : Mode extends "group" ? GroupConfigOpts : TransitionConfigOpts;
+type KineticComponentProps<Tag extends string, Mode extends KineticMode> = Mode extends 'collapse' ? KineticCollapseProps<Tag> : Mode extends 'stagger' ? KineticStaggerProps<Tag> : Mode extends 'group' ? KineticGroupProps<Tag> : KineticTransitionProps<Tag>;
+type ConfigOpts<Mode extends KineticMode> = Mode extends 'collapse' ? CollapseConfigOpts : Mode extends 'stagger' ? StaggerConfigOpts : Mode extends 'group' ? GroupConfigOpts : TransitionConfigOpts;
 type KineticChain<Tag extends string, Mode extends KineticMode> = {
   displayName: string;
   preset: (preset: StyleTransitionProps & ClassTransitionProps) => KineticComponent<Tag, Mode>;
@@ -106,14 +106,14 @@ type KineticChain<Tag extends string, Mode extends KineticMode> = {
   leaveClass: (opts: ClassConfig) => KineticComponent<Tag, Mode>;
   config: (opts: ConfigOpts<Mode>) => KineticComponent<Tag, Mode>;
   on: (callbacks: Partial<TransitionCallbacks>) => KineticComponent<Tag, Mode>;
-  collapse: (opts?: CollapseConfigOpts) => KineticComponent<Tag, "collapse">;
+  collapse: (opts?: CollapseConfigOpts) => KineticComponent<Tag, 'collapse'>;
   stagger: (opts?: {
     interval?: number | undefined;
     reverseLeave?: boolean | undefined;
-  }) => KineticComponent<Tag, "stagger">;
-  group: () => KineticComponent<Tag, "group">;
+  }) => KineticComponent<Tag, 'stagger'>;
+  group: () => KineticComponent<Tag, 'group'>;
 };
-type KineticComponent<Tag extends string, Mode extends KineticMode = "transition"> = ComponentFn<KineticComponentProps<Tag, Mode>> & KineticChain<Tag, Mode>;
+type KineticComponent<Tag extends string, Mode extends KineticMode = 'transition'> = ComponentFn<KineticComponentProps<Tag, Mode>> & KineticChain<Tag, Mode>;
 //#endregion
 //#region src/kinetic.d.ts
 /**

package/lib/index.js

@@ -415,55 +415,64 @@ const getKeyedChildren = (children) => {
 * Children that appear (new key) animate in. Children that disappear
 * (removed key) stay in DOM during leave animation, then unmount.
 * config.tag wraps all children as a container element.
+*
+* In Pyreon, components run once. Pass children as a reactive accessor
+* `() => VNode[]` for the group to detect changes and animate entries/exits.
 */
 const GroupRenderer = ({ config, htmlProps, appear, timeout, callbacks, children }) => {
 	const effectiveAppear = appear ?? config.appear ?? false;
 	const effectiveTimeout = timeout ?? config.timeout ?? 5e3;
 	const prevMap = /* @__PURE__ */ new Map();
 	const leavingMap = /* @__PURE__ */ new Map();
-	const forceUpdateSignal = signal(0);
-	const currentKeyed = getKeyedChildren(children);
-	const currentMap = /* @__PURE__ */ new Map();
-	for (const { key, element } of currentKeyed) currentMap.set(key, element);
-	const initialKeys = new Set(currentMap.keys());
-	for (const [key, child] of prevMap) if (!currentMap.has(key)) leavingMap.set(key, child);
-	for (const key of currentMap.keys()) leavingMap.delete(key);
-	prevMap.clear();
-	for (const [key, element] of currentMap) prevMap.set(key, element);
+	const forceUpdate = signal(0);
+	const getChildren = typeof children === "function" ? children : () => children;
+	const initialKeyed = getKeyedChildren(getChildren());
+	const initialKeys = new Set(initialKeyed.map((c) => c.key));
+	for (const { key, element } of initialKeyed) prevMap.set(key, element);
 	const handleAfterLeave = (key) => {
 		leavingMap.delete(key);
 		callbacks.onAfterLeave?.();
-		forceUpdateSignal.update((c) => c + 1);
+		forceUpdate.update((c) => c + 1);
 	};
-	const allEntries = [...currentKeyed];
-	for (const [key, element] of leavingMap) allEntries.push({
-		key,
-		element
-	});
-	const groupedChildren = allEntries.map(({ key, element }) => {
-		const isInitial = initialKeys.has(key);
-		const isShowing = currentMap.has(key);
-		return /* @__PURE__ */ jsx(TransitionItem, {
-			show: () => isShowing,
-			appear: isInitial ? effectiveAppear : true,
-			timeout: effectiveTimeout,
-			enterStyle: config.enterStyle,
-			enterToStyle: config.enterToStyle,
-			enterTransition: config.enterTransition,
-			leaveStyle: config.leaveStyle,
-			leaveToStyle: config.leaveToStyle,
-			leaveTransition: config.leaveTransition,
-			enter: config.enter,
-			enterFrom: config.enterFrom,
-			enterTo: config.enterTo,
-			leave: config.leave,
-			leaveFrom: config.leaveFrom,
-			leaveTo: config.leaveTo,
-			onAfterLeave: () => handleAfterLeave(key),
-			children: element
+	return (() => {
+		forceUpdate();
+		const currentKeyed = getKeyedChildren(getChildren());
+		const currentMap = /* @__PURE__ */ new Map();
+		for (const { key, element } of currentKeyed) currentMap.set(key, element);
+		for (const [key, child] of prevMap) if (!currentMap.has(key) && !leavingMap.has(key)) leavingMap.set(key, child);
+		for (const key of currentMap.keys()) leavingMap.delete(key);
+		prevMap.clear();
+		for (const [key, element] of currentMap) prevMap.set(key, element);
+		const allEntries = [...currentKeyed];
+		for (const [key, element] of leavingMap) allEntries.push({
+			key,
+			element
+		});
+		const groupedChildren = allEntries.map(({ key, element }) => {
+			const isInitial = initialKeys.has(key);
+			const isShowing = currentMap.has(key);
+			return /* @__PURE__ */ jsx(TransitionItem, {
+				show: () => isShowing,
+				appear: isInitial ? effectiveAppear : true,
+				timeout: effectiveTimeout,
+				enterStyle: config.enterStyle,
+				enterToStyle: config.enterToStyle,
+				enterTransition: config.enterTransition,
+				leaveStyle: config.leaveStyle,
+				leaveToStyle: config.leaveToStyle,
+				leaveTransition: config.leaveTransition,
+				enter: config.enter,
+				enterFrom: config.enterFrom,
+				enterTo: config.enterTo,
+				leave: config.leave,
+				leaveFrom: config.leaveFrom,
+				leaveTo: config.leaveTo,
+				onAfterLeave: () => handleAfterLeave(key),
+				children: element
+			});
 		});
+		return h(config.tag, { ...htmlProps }, ...groupedChildren);
 	});
-	return h(config.tag, { ...htmlProps }, ...groupedChildren);
 };
 
 //#endregion

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/kinetic",
-  "version": "0.11.4",
+  "version": "0.11.6",
+  "description": "CSS-transition-based animation components for Pyreon",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/kinetic"
   },
-  "description": "CSS-transition-based animation components for Pyreon",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,18 +34,21 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/typescript": "^0.11.6",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.4",
-    "@pyreon/reactivity": "^0.11.4"
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.4"
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/Collapse.tsx

@@ -1,13 +1,13 @@
-import type { VNode } from "@pyreon/core"
-import { createRef, Show } from "@pyreon/core"
-import { runUntracked, signal, watch } from "@pyreon/reactivity"
-import type { CollapseProps, TransitionStage } from "./types"
-import useAnimationEnd from "./useAnimationEnd"
-import { useReducedMotion } from "./useReducedMotion"
+import type { VNode } from '@pyreon/core'
+import { createRef, Show } from '@pyreon/core'
+import { runUntracked, signal, watch } from '@pyreon/reactivity'
+import type { CollapseProps, TransitionStage } from './types'
+import useAnimationEnd from './useAnimationEnd'
+import { useReducedMotion } from './useReducedMotion'
 
 const Collapse = ({
   show,
-  transition = "height 300ms ease",
+  transition = 'height 300ms ease',
   appear = false,
   timeout = 5000,
   onEnter,
@@ -30,7 +30,7 @@ const Collapse = ({
   const initialShow = show()
   // When appear=true and show starts true, mount but defer animation until ref is wired
   const needsAppear = appear && initialShow
-  const stage = signal<TransitionStage>(initialShow ? "entered" : "hidden")
+  const stage = signal<TransitionStage>(initialShow ? 'entered' : 'hidden')
   let isInitialMount = true
   let appearTriggered = false
 
@@ -39,7 +39,7 @@ const Collapse = ({
   if (needsAppear) {
     const orig = wrapperRef
     const proxy = { current: null as HTMLDivElement | null }
-    Object.defineProperty(proxy, "current", {
+    Object.defineProperty(proxy, 'current', {
       get() {
         return orig.current
       },
@@ -47,7 +47,7 @@ const Collapse = ({
         orig.current = node
         if (node && !appearTriggered) {
           appearTriggered = true
-          queueMicrotask(() => stage.set("entering"))
+          queueMicrotask(() => stage.set('entering'))
         }
       },
     })
@@ -65,10 +65,10 @@ const Collapse = ({
       }
 
       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 },
@@ -83,44 +83,44 @@ const Collapse = ({
       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 so the browser registers height: 0
         void wrapper.offsetHeight
         wrapper.style.transition = transition
         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 = transition
-        wrapper.style.height = "0px"
+        wrapper.style.height = '0px'
       }
     },
     { immediate: true },
@@ -129,36 +129,36 @@ const Collapse = ({
   // Listen for animation end
   useAnimationEnd({
     ref: wrapperRef,
-    active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+    active: () => (stage() === 'entering' || stage() === 'leaving') && !reducedMotion(),
     timeout,
     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'
 
   return (
     <div
       ref={wrapperRef}
       style={{
-        ...(stage() !== "entered" ? { overflow: "hidden" } : {}),
-        ...(stage() === "hidden"
-          ? { height: "0px" }
-          : stage() === "entered"
-            ? { height: "auto" }
+        ...(stage() !== 'entered' ? { overflow: 'hidden' } : {}),
+        ...(stage() === 'hidden'
+          ? { height: '0px' }
+          : stage() === 'entered'
+            ? { height: 'auto' }
             : {}),
       }}
     >

package/src/Stagger.tsx

@@ -1,10 +1,10 @@
-import type { VNode } from "@pyreon/core"
-import Transition from "./Transition"
-import type { CSSProperties, StaggerProps } from "./types"
-import { cloneVNode } from "./utils"
+import type { VNode } from '@pyreon/core'
+import Transition from './Transition'
+import type { CSSProperties, StaggerProps } from './types'
+import { cloneVNode } from './utils'
 
 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 Stagger = ({
   show,
@@ -37,8 +37,8 @@ const Stagger = ({
             {cloneVNode(child, {
               style: {
                 ...((child.props as Record<string, unknown>)?.style as CSSProperties | undefined),
-                "--stagger-index": staggerIndex,
-                "--stagger-interval": `${interval}ms`,
+                '--stagger-index': staggerIndex,
+                '--stagger-interval': `${interval}ms`,
                 transitionDelay: `${delay}ms`,
               } as CSSProperties,
             })}

package/src/Transition.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, TransitionProps } 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, TransitionProps } from './types'
+import useAnimationEnd from './useAnimationEnd'
+import { useReducedMotion } from './useReducedMotion'
+import useTransitionState from './useTransitionState'
+import { addClasses, cloneVNode, mergeRefs, mergeStyles, nextFrame, removeClasses } from './utils'
 
 const applyEnter = (
   el: HTMLElement,
@@ -68,11 +68,11 @@ const applyReducedMotion = (
   },
   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()
@@ -114,12 +114,11 @@ const Transition = ({
   })
 
   const elementRef = createRef<HTMLElement>()
+  const childProps = (children.props ?? {}) as Record<string, unknown>
   const mergedRef = mergeRefs(
     elementRef,
     stateRef,
-    (children.props as Record<string, unknown>)?.ref as
-      | ((el: HTMLElement | null) => void)
-      | undefined,
+    childProps.ref as ((el: HTMLElement | null) => void) | undefined,
   )
 
   const callbacks = {
@@ -146,12 +145,12 @@ const Transition = ({
 
   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()
@@ -169,21 +168,21 @@ const Transition = ({
         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 },
@@ -198,10 +197,8 @@ const Transition = ({
           : cloneVNode(children, {
               ref: mergedRef,
               style: mergeStyles(
-                (children.props as Record<string, unknown>)?.style as
-                  | Record<string, string | number | undefined>
-                  | undefined,
-                { display: "none" },
+                childProps.style as Record<string, string | number | undefined> | undefined,
+                { display: 'none' },
               ),
             })
       }