@pyreon/kinetic 0.11.5 → 0.11.7

package/src/kinetic/createKineticComponent.tsx

@@ -1,24 +1,24 @@
-import type { VNode } from "@pyreon/core"
-import type { CSSProperties, TransitionCallbacks } from "../types"
-import CollapseRenderer from "./CollapseRenderer"
-import GroupRenderer from "./GroupRenderer"
-import StaggerRenderer from "./StaggerRenderer"
-import TransitionRenderer from "./TransitionRenderer"
-import type { ClassConfig, KineticComponent, KineticConfig, KineticMode } from "./types"
+import type { VNode } from '@pyreon/core'
+import type { CSSProperties, TransitionCallbacks } from '../types'
+import CollapseRenderer from './CollapseRenderer'
+import GroupRenderer from './GroupRenderer'
+import StaggerRenderer from './StaggerRenderer'
+import TransitionRenderer from './TransitionRenderer'
+import type { ClassConfig, KineticComponent, KineticConfig, KineticMode } from './types'
 
 /** Keys that are kinetic-specific and should not be forwarded as HTML attrs. */
 const KINETIC_KEYS = new Set([
-  "show",
-  "appear",
-  "unmount",
-  "timeout",
-  "transition",
-  "interval",
-  "reverseLeave",
-  "onEnter",
-  "onAfterEnter",
-  "onLeave",
-  "onAfterLeave",
+  'show',
+  'appear',
+  'unmount',
+  'timeout',
+  'transition',
+  'interval',
+  'reverseLeave',
+  'onEnter',
+  'onAfterEnter',
+  'onLeave',
+  'onAfterLeave',
 ])
 
 /**
@@ -26,7 +26,7 @@ const KINETIC_KEYS = new Set([
  * renderer based on config.mode, then attaches immutable chain methods
  * via Object.assign.
  */
-const createKineticComponent = <Tag extends string, Mode extends KineticMode = "transition">(
+const createKineticComponent = <Tag extends string, Mode extends KineticMode = 'transition'>(
   config: KineticConfig,
 ): KineticComponent<Tag, Mode> => {
   const Component = (props: Record<string, unknown>): VNode | null => {
@@ -74,7 +74,7 @@ const createKineticComponent = <Tag extends string, Mode extends KineticMode = "
     // Extract children from htmlProps (it's not an HTML attribute)
     const { children, ...restHtml } = htmlProps
 
-    if (config.mode === "collapse") {
+    if (config.mode === 'collapse') {
       return (
         <CollapseRenderer
           config={config}
@@ -90,7 +90,7 @@ const createKineticComponent = <Tag extends string, Mode extends KineticMode = "
       )
     }
 
-    if (config.mode === "stagger") {
+    if (config.mode === 'stagger') {
       return (
         <StaggerRenderer
           config={config}
@@ -107,7 +107,7 @@ const createKineticComponent = <Tag extends string, Mode extends KineticMode = "
       )
     }
 
-    if (config.mode === "group") {
+    if (config.mode === 'group') {
       return (
         <GroupRenderer
           config={config}
@@ -191,20 +191,20 @@ const createKineticComponent = <Tag extends string, Mode extends KineticMode = "
       createKineticComponent<Tag, Mode>({ ...config, ...cbs }),
 
     collapse: (opts?: { transition?: string }) =>
-      createKineticComponent<Tag, "collapse">({
+      createKineticComponent<Tag, 'collapse'>({
         ...config,
-        mode: "collapse",
+        mode: 'collapse',
         ...opts,
       }),
 
     stagger: (opts?: { interval?: number; reverseLeave?: boolean }) =>
-      createKineticComponent<Tag, "stagger">({
+      createKineticComponent<Tag, 'stagger'>({
         ...config,
-        mode: "stagger",
+        mode: 'stagger',
         ...opts,
       }),
 
-    group: () => createKineticComponent<Tag, "group">({ ...config, mode: "group" }),
+    group: () => createKineticComponent<Tag, 'group'>({ ...config, mode: 'group' }),
   }) as unknown as KineticComponent<Tag, Mode>
 }
 

package/src/kinetic/types.ts

@@ -1,14 +1,14 @@
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
 import type {
   ClassTransitionProps,
   CSSProperties,
   StyleTransitionProps,
   TransitionCallbacks,
-} from "../types"
+} from '../types'
 
 // ─── Kinetic Modes ────────────────────────────────────────
 
-export type KineticMode = "transition" | "collapse" | "stagger" | "group"
+export type KineticMode = 'transition' | 'collapse' | 'stagger' | 'group'
 
 // ─── Internal Config (accumulated through chaining) ──────
 
@@ -100,21 +100,21 @@ export type KineticGroupProps<_Tag extends string> = Record<string, unknown> & {
 export type KineticComponentProps<
   Tag extends string,
   Mode extends KineticMode,
-> = Mode extends "collapse"
+> = Mode extends 'collapse'
   ? KineticCollapseProps<Tag>
-  : Mode extends "stagger"
+  : Mode extends 'stagger'
     ? KineticStaggerProps<Tag>
-    : Mode extends "group"
+    : Mode extends 'group'
       ? KineticGroupProps<Tag>
       : KineticTransitionProps<Tag>
 
 // ─── Conditional config opts based on mode ───────────────
 
-type ConfigOpts<Mode extends KineticMode> = Mode extends "collapse"
+type ConfigOpts<Mode extends KineticMode> = Mode extends 'collapse'
   ? CollapseConfigOpts
-  : Mode extends "stagger"
+  : Mode extends 'stagger'
     ? StaggerConfigOpts
-    : Mode extends "group"
+    : Mode extends 'group'
       ? GroupConfigOpts
       : TransitionConfigOpts
 
@@ -133,17 +133,17 @@ export 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'>
 }
 
 // ─── The full kinetic component: renderable + chainable ───
 
 export type KineticComponent<
   Tag extends string,
-  Mode extends KineticMode = "transition",
+  Mode extends KineticMode = 'transition',
 > = ComponentFn<KineticComponentProps<Tag, Mode>> & KineticChain<Tag, Mode>

package/src/kinetic.ts

@@ -1,5 +1,5 @@
-import createKineticComponent from "./kinetic/createKineticComponent"
-import type { KineticComponent } from "./kinetic/types"
+import createKineticComponent from './kinetic/createKineticComponent'
+import type { KineticComponent } from './kinetic/types'
 
 /**
  * Creates a reusable animated component via immutable chaining.
@@ -19,7 +19,7 @@ import type { KineticComponent } from "./kinetic/types"
  * const AnimatedList = kinetic('ul').preset(fade).group()
  * ```
  */
-const kinetic = <Tag extends string>(tag: Tag): KineticComponent<Tag, "transition"> =>
-  createKineticComponent<Tag, "transition">({ tag, mode: "transition" })
+const kinetic = <Tag extends string>(tag: Tag): KineticComponent<Tag, 'transition'> =>
+  createKineticComponent<Tag, 'transition'>({ tag, mode: 'transition' })
 
 export default kinetic

package/src/presets.ts

@@ -1,59 +1,59 @@
-import type { ClassTransitionProps, StyleTransitionProps } from "./types"
+import type { ClassTransitionProps, StyleTransitionProps } from './types'
 
 export type Preset = StyleTransitionProps & ClassTransitionProps
 
 export const fade: Preset = {
   enterStyle: { opacity: 0 },
   enterToStyle: { opacity: 1 },
-  enterTransition: "opacity 300ms ease-out",
+  enterTransition: 'opacity 300ms ease-out',
   leaveStyle: { opacity: 1 },
   leaveToStyle: { opacity: 0 },
-  leaveTransition: "opacity 200ms ease-in",
+  leaveTransition: 'opacity 200ms ease-in',
 }
 
 export const scaleIn: Preset = {
-  enterStyle: { opacity: 0, transform: "scale(0.95)" },
-  enterToStyle: { opacity: 1, transform: "scale(1)" },
-  enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
-  leaveStyle: { opacity: 1, transform: "scale(1)" },
-  leaveToStyle: { opacity: 0, transform: "scale(0.95)" },
-  leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in",
+  enterStyle: { opacity: 0, transform: 'scale(0.95)' },
+  enterToStyle: { opacity: 1, transform: 'scale(1)' },
+  enterTransition: 'opacity 300ms ease-out, transform 300ms ease-out',
+  leaveStyle: { opacity: 1, transform: 'scale(1)' },
+  leaveToStyle: { opacity: 0, transform: 'scale(0.95)' },
+  leaveTransition: 'opacity 200ms ease-in, transform 200ms ease-in',
 }
 
 export const slideUp: Preset = {
-  enterStyle: { opacity: 0, transform: "translateY(16px)" },
-  enterToStyle: { opacity: 1, transform: "translateY(0)" },
-  enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
-  leaveStyle: { opacity: 1, transform: "translateY(0)" },
-  leaveToStyle: { opacity: 0, transform: "translateY(16px)" },
-  leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in",
+  enterStyle: { opacity: 0, transform: 'translateY(16px)' },
+  enterToStyle: { opacity: 1, transform: 'translateY(0)' },
+  enterTransition: 'opacity 300ms ease-out, transform 300ms ease-out',
+  leaveStyle: { opacity: 1, transform: 'translateY(0)' },
+  leaveToStyle: { opacity: 0, transform: 'translateY(16px)' },
+  leaveTransition: 'opacity 200ms ease-in, transform 200ms ease-in',
 }
 
 export const slideDown: Preset = {
-  enterStyle: { opacity: 0, transform: "translateY(-16px)" },
-  enterToStyle: { opacity: 1, transform: "translateY(0)" },
-  enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
-  leaveStyle: { opacity: 1, transform: "translateY(0)" },
-  leaveToStyle: { opacity: 0, transform: "translateY(-16px)" },
-  leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in",
+  enterStyle: { opacity: 0, transform: 'translateY(-16px)' },
+  enterToStyle: { opacity: 1, transform: 'translateY(0)' },
+  enterTransition: 'opacity 300ms ease-out, transform 300ms ease-out',
+  leaveStyle: { opacity: 1, transform: 'translateY(0)' },
+  leaveToStyle: { opacity: 0, transform: 'translateY(-16px)' },
+  leaveTransition: 'opacity 200ms ease-in, transform 200ms ease-in',
 }
 
 export const slideLeft: Preset = {
-  enterStyle: { opacity: 0, transform: "translateX(16px)" },
-  enterToStyle: { opacity: 1, transform: "translateX(0)" },
-  enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
-  leaveStyle: { opacity: 1, transform: "translateX(0)" },
-  leaveToStyle: { opacity: 0, transform: "translateX(16px)" },
-  leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in",
+  enterStyle: { opacity: 0, transform: 'translateX(16px)' },
+  enterToStyle: { opacity: 1, transform: 'translateX(0)' },
+  enterTransition: 'opacity 300ms ease-out, transform 300ms ease-out',
+  leaveStyle: { opacity: 1, transform: 'translateX(0)' },
+  leaveToStyle: { opacity: 0, transform: 'translateX(16px)' },
+  leaveTransition: 'opacity 200ms ease-in, transform 200ms ease-in',
 }
 
 export const slideRight: Preset = {
-  enterStyle: { opacity: 0, transform: "translateX(-16px)" },
-  enterToStyle: { opacity: 1, transform: "translateX(0)" },
-  enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
-  leaveStyle: { opacity: 1, transform: "translateX(0)" },
-  leaveToStyle: { opacity: 0, transform: "translateX(-16px)" },
-  leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in",
+  enterStyle: { opacity: 0, transform: 'translateX(-16px)' },
+  enterToStyle: { opacity: 1, transform: 'translateX(0)' },
+  enterTransition: 'opacity 300ms ease-out, transform 300ms ease-out',
+  leaveStyle: { opacity: 1, transform: 'translateX(0)' },
+  leaveToStyle: { opacity: 0, transform: 'translateX(-16px)' },
+  leaveTransition: 'opacity 200ms ease-in, transform 200ms ease-in',
 }
 
 export const presets = {

package/src/types.ts

@@ -1,10 +1,10 @@
-import type { Ref, VNode } from "@pyreon/core"
-import type { Signal } from "@pyreon/reactivity"
+import type { Ref, VNode } from '@pyreon/core'
+import type { Signal } from '@pyreon/reactivity'
 
 export type CSSProperties = Record<string, string | number | undefined>
 
 /** Internal lifecycle stages of a transition. */
-export type TransitionStage = "hidden" | "entering" | "entered" | "leaving"
+export type TransitionStage = 'hidden' | 'entering' | 'entered' | 'leaving'
 
 /** Class-based transition definition. */
 export type ClassTransitionProps = {

package/src/useAnimationEnd.ts

@@ -1,5 +1,5 @@
-import type { Ref } from "@pyreon/core"
-import { watch } from "@pyreon/reactivity"
+import type { Ref } from '@pyreon/core'
+import { watch } from '@pyreon/reactivity'
 
 const DEFAULT_TIMEOUT = 5000
 
@@ -29,8 +29,8 @@ const useAnimationEnd: UseAnimationEnd = ({ ref, onEnd, active, timeout = DEFAUL
       const done = () => {
         if (called) return
         called = true
-        el.removeEventListener("transitionend", handleEnd)
-        el.removeEventListener("animationend", handleEnd)
+        el.removeEventListener('transitionend', handleEnd)
+        el.removeEventListener('animationend', handleEnd)
         clearTimeout(timer)
         onEnd()
       }
@@ -41,14 +41,14 @@ const useAnimationEnd: UseAnimationEnd = ({ ref, onEnd, active, timeout = DEFAUL
         done()
       }
 
-      el.addEventListener("transitionend", handleEnd)
-      el.addEventListener("animationend", handleEnd)
+      el.addEventListener('transitionend', handleEnd)
+      el.addEventListener('animationend', handleEnd)
 
       const timer = setTimeout(done, timeout)
 
       return () => {
-        el.removeEventListener("transitionend", handleEnd)
-        el.removeEventListener("animationend", handleEnd)
+        el.removeEventListener('transitionend', handleEnd)
+        el.removeEventListener('animationend', handleEnd)
         clearTimeout(timer)
       }
     },

package/src/useReducedMotion.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 /**
  * Inline reduced-motion check for kinetic package.
@@ -14,14 +14,14 @@ export function useReducedMotion(): () => boolean {
   }
 
   onMount(() => {
-    mql = window.matchMedia("(prefers-reduced-motion: reduce)")
+    mql = window.matchMedia('(prefers-reduced-motion: reduce)')
     matches.set(mql.matches)
-    mql.addEventListener("change", onChange)
+    mql.addEventListener('change', onChange)
     return undefined
   })
 
   onUnmount(() => {
-    mql?.removeEventListener("change", onChange)
+    mql?.removeEventListener('change', onChange)
   })
 
   return matches

package/src/useTransitionState.ts

@@ -1,6 +1,6 @@
-import { createRef } from "@pyreon/core"
-import { runUntracked, signal, watch } from "@pyreon/reactivity"
-import type { TransitionStage, TransitionStateResult } from "./types"
+import { createRef } from '@pyreon/core'
+import { runUntracked, signal, watch } from '@pyreon/reactivity'
+import type { TransitionStage, TransitionStateResult } from './types'
 
 export type UseTransitionState = (options: {
   show: () => boolean
@@ -12,7 +12,7 @@ const useTransitionState: UseTransitionState = ({ show, appear = false }) => {
   // When appear=true and show starts true, mount the element (stage='entered')
   // but defer the enter animation until the ref is connected.
   const needsAppear = appear && initialShow
-  const stage = signal<TransitionStage>(initialShow ? "entered" : "hidden")
+  const stage = signal<TransitionStage>(initialShow ? 'entered' : 'hidden')
   const elementRef = createRef<HTMLElement>()
   let isInitialMount = true
   let appearTriggered = false
@@ -22,7 +22,7 @@ const useTransitionState: UseTransitionState = ({ show, appear = false }) => {
     elementRef.current = node
     if (node && needsAppear && !appearTriggered) {
       appearTriggered = true
-      stage.set("entering")
+      stage.set('entering')
     }
   }
 
@@ -36,10 +36,10 @@ const useTransitionState: UseTransitionState = ({ show, appear = false }) => {
       }
 
       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 },
@@ -47,14 +47,14 @@ const useTransitionState: UseTransitionState = ({ show, appear = false }) => {
 
   const complete = () => {
     const current = stage()
-    if (current === "entering") stage.set("entered")
-    if (current === "leaving") stage.set("hidden")
+    if (current === 'entering') stage.set('entered')
+    if (current === 'leaving') stage.set('hidden')
   }
 
   return {
     stage,
     ref: refCallback,
-    shouldMount: () => stage() !== "hidden",
+    shouldMount: () => stage() !== 'hidden',
     complete,
   }
 }

package/src/utils.ts

@@ -1,5 +1,5 @@
-import type { Ref, VNode } from "@pyreon/core"
-import type { CSSProperties } from "./types"
+import type { Ref, VNode } from '@pyreon/core'
+import type { CSSProperties } from './types'
 
 const splitCache = new Map<string, string[]>()
 const splitClasses = (classes: string): string[] => {
@@ -41,7 +41,7 @@ export const mergeClassNames = (
   additional: string | undefined,
 ): string | undefined => {
   const parts = [existing, additional].filter(Boolean)
-  return parts.length > 0 ? parts.join(" ") : undefined
+  return parts.length > 0 ? parts.join(' ') : undefined
 }
 
 /** Merges two CSSProperties objects, with `b` taking precedence. */
@@ -65,7 +65,7 @@ export const mergeRefs = <T>(...refs: (RefLike<T> | undefined)[]): ((node: T | n
   return (node: T | null) => {
     for (const ref of refs) {
       if (!ref) continue
-      if (typeof ref === "function") {
+      if (typeof ref === 'function') {
         ref(node)
       } else {
         ;(ref as { current: unknown }).current = node