@pyreon/kinetic 0.24.4 → 0.24.6

package/src/kinetic/createKineticComponent.tsx

@@ -1,224 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { splitProps } 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',
-])
-
-/**
- * Core factory. Creates a component that delegates to the appropriate
- * renderer based on config.mode, then attaches immutable chain methods
- * via Object.assign.
- */
-const createKineticComponent = <Tag extends string, Mode extends KineticMode = 'transition'>(
-  config: KineticConfig,
-): KineticComponent<Tag, Mode> => {
-  const Component = (props: Record<string, unknown>): VNode | null => {
-    // Separate kinetic-specific props from HTML pass-through props.
-    // MUST use splitProps (descriptor-preserving) — a plain
-    // `htmlProps[key] = props[key]` value-copy fires every getter at
-    // component-setup time. The compiler emits `<KineticDiv class={sig()}>`
-    // as `_rp(() => sig())`, which `makeReactiveProps` turns into a getter
-    // on `props`; reading it here (outside any tracking scope) would
-    // collapse it to a static snapshot and freeze the HTML attr forever.
-    // splitProps copies DESCRIPTORS via Object.getOwnPropertyDescriptor +
-    // Object.defineProperty, so the getter survives to the renderer's
-    // `h(config.tag, htmlProps)` where runtime-dom's applyProps detects
-    // the descriptor and wraps the read in renderEffect.
-    // `props` is `Record<string, unknown>`, so `Omit<…, string>` collapses
-    // to `{}` at the type level — the runtime split is correct (splitProps
-    // copies descriptors for every own key not in the pick set), only the
-    // inferred result types degrade. Cast back to the real shape.
-    const [kineticProps, htmlPropsWithChildren] = splitProps(props, [...KINETIC_KEYS]) as [
-      Record<string, unknown>,
-      Record<string, unknown>,
-    ]
-
-    const {
-      show,
-      appear,
-      unmount,
-      timeout,
-      transition,
-      interval,
-      reverseLeave,
-      onEnter,
-      onAfterEnter,
-      onLeave,
-      onAfterLeave,
-    } = kineticProps as {
-      show?: () => boolean
-      appear?: boolean
-      unmount?: boolean
-      timeout?: number
-      transition?: string
-      interval?: number
-      reverseLeave?: boolean
-    } & Partial<TransitionCallbacks>
-
-    const callbacks: Partial<TransitionCallbacks> = {
-      onEnter: onEnter ?? config.onEnter,
-      onAfterEnter: onAfterEnter ?? config.onAfterEnter,
-      onLeave: onLeave ?? config.onLeave,
-      onAfterLeave: onAfterLeave ?? config.onAfterLeave,
-    }
-
-    // Carve `children` out of the HTML pass-through set — also via
-    // splitProps so the remaining HTML attrs keep their getter
-    // descriptors (`const { children, ...restHtml } = …` is the same
-    // value-copy footgun as the split above).
-    const [childHolder, restHtml] = splitProps(htmlPropsWithChildren, ['children'])
-    const children = childHolder.children
-
-    if (config.mode === 'collapse') {
-      return (
-        <CollapseRenderer
-          config={config}
-          htmlProps={restHtml}
-          show={show as () => boolean}
-          appear={appear}
-          timeout={timeout}
-          transition={transition}
-          callbacks={callbacks}
-        >
-          {children as VNode | VNode[]}
-        </CollapseRenderer>
-      )
-    }
-
-    if (config.mode === 'stagger') {
-      return (
-        <StaggerRenderer
-          config={config}
-          htmlProps={restHtml}
-          show={show as () => boolean}
-          appear={appear}
-          timeout={timeout}
-          interval={interval}
-          reverseLeave={reverseLeave}
-          callbacks={callbacks}
-        >
-          {children as VNode[]}
-        </StaggerRenderer>
-      )
-    }
-
-    if (config.mode === 'group') {
-      return (
-        <GroupRenderer
-          config={config}
-          htmlProps={restHtml}
-          appear={appear}
-          timeout={timeout}
-          callbacks={callbacks}
-        >
-          {children as VNode[]}
-        </GroupRenderer>
-      )
-    }
-
-    // Default: transition mode
-    return (
-      <TransitionRenderer
-        config={config}
-        htmlProps={restHtml}
-        show={show as () => boolean}
-        appear={appear}
-        unmount={unmount}
-        timeout={timeout}
-        callbacks={callbacks}
-      >
-        {children as VNode | VNode[]}
-      </TransitionRenderer>
-    )
-  }
-
-  Component.displayName = `kinetic(${config.tag})`
-
-  // Immutable chain methods — each returns a new component with merged config.
-  return Object.assign(Component, {
-    preset: (preset: Record<string, unknown>) =>
-      createKineticComponent<Tag, Mode>({
-        ...config,
-        ...preset,
-      } as KineticConfig),
-
-    enter: (styles: CSSProperties) =>
-      createKineticComponent<Tag, Mode>({ ...config, enterStyle: styles }),
-
-    enterTo: (styles: CSSProperties) =>
-      createKineticComponent<Tag, Mode>({ ...config, enterToStyle: styles }),
-
-    enterTransition: (value: string) =>
-      createKineticComponent<Tag, Mode>({ ...config, enterTransition: value }),
-
-    leave: (styles: CSSProperties) =>
-      createKineticComponent<Tag, Mode>({ ...config, leaveStyle: styles }),
-
-    leaveTo: (styles: CSSProperties) =>
-      createKineticComponent<Tag, Mode>({ ...config, leaveToStyle: styles }),
-
-    leaveTransition: (value: string) =>
-      createKineticComponent<Tag, Mode>({ ...config, leaveTransition: value }),
-
-    enterClass: ({ active, from, to }: ClassConfig) =>
-      createKineticComponent<Tag, Mode>({
-        ...config,
-        enter: active,
-        enterFrom: from,
-        enterTo: to,
-      }),
-
-    leaveClass: ({ active, from, to }: ClassConfig) =>
-      createKineticComponent<Tag, Mode>({
-        ...config,
-        leave: active,
-        leaveFrom: from,
-        leaveTo: to,
-      }),
-
-    config: (opts: Record<string, unknown>) =>
-      createKineticComponent<Tag, Mode>({
-        ...config,
-        ...opts,
-      } as KineticConfig),
-
-    on: (cbs: Partial<TransitionCallbacks>) =>
-      createKineticComponent<Tag, Mode>({ ...config, ...cbs }),
-
-    collapse: (opts?: { transition?: string }) =>
-      createKineticComponent<Tag, 'collapse'>({
-        ...config,
-        mode: 'collapse',
-        ...opts,
-      }),
-
-    stagger: (opts?: { interval?: number; reverseLeave?: boolean }) =>
-      createKineticComponent<Tag, 'stagger'>({
-        ...config,
-        mode: 'stagger',
-        ...opts,
-      }),
-
-    group: () => createKineticComponent<Tag, 'group'>({ ...config, mode: 'group' }),
-  }) as unknown as KineticComponent<Tag, Mode>
-}
-
-export default createKineticComponent

package/src/kinetic/types.ts

@@ -1,149 +0,0 @@
-import type { ComponentFn, VNodeChild } from '@pyreon/core'
-import type {
-  ClassTransitionProps,
-  CSSProperties,
-  StyleTransitionProps,
-  TransitionCallbacks,
-} from '../types'
-
-// ─── Kinetic Modes ────────────────────────────────────────
-
-export type KineticMode = 'transition' | 'collapse' | 'stagger' | 'group'
-
-// ─── Internal Config (accumulated through chaining) ──────
-
-export type KineticConfig = StyleTransitionProps &
-  ClassTransitionProps &
-  TransitionCallbacks & {
-    tag: string
-    mode: KineticMode
-    appear?: boolean | undefined
-    unmount?: boolean | undefined
-    timeout?: number | undefined
-    /** Collapse: CSS transition for height. */
-    transition?: string | undefined
-    /** Stagger: delay between each child in ms. */
-    interval?: number | undefined
-    /** Stagger: reverse order on leave. */
-    reverseLeave?: boolean | undefined
-  }
-
-// ─── Class Config (for .enterClass / .leaveClass) ────────
-
-export type ClassConfig = {
-  active?: string | undefined
-  from?: string | undefined
-  to?: string | undefined
-}
-
-// ─── Mode-specific config options for .config() ──────────
-
-export type TransitionConfigOpts = {
-  appear?: boolean | undefined
-  unmount?: boolean | undefined
-  timeout?: number | undefined
-}
-
-export type CollapseConfigOpts = {
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  transition?: string | undefined
-}
-
-export type StaggerConfigOpts = {
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  interval?: number | undefined
-  reverseLeave?: boolean | undefined
-}
-
-export type GroupConfigOpts = {
-  appear?: boolean | undefined
-  timeout?: number | undefined
-}
-
-// ─── Mode-specific component props ───────────────────────
-
-export type KineticTransitionProps<_Tag extends string> = Record<string, unknown> & {
-  show: () => boolean
-  appear?: boolean | undefined
-  unmount?: boolean | undefined
-  timeout?: number | undefined
-  children?: VNodeChild | undefined
-} & Partial<TransitionCallbacks>
-
-export type KineticCollapseProps<_Tag extends string> = Record<string, unknown> & {
-  show: () => boolean
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  transition?: string | undefined
-  children?: VNodeChild | undefined
-} & Partial<TransitionCallbacks>
-
-export type KineticStaggerProps<_Tag extends string> = Record<string, unknown> & {
-  show: () => boolean
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  interval?: number | undefined
-  reverseLeave?: boolean | undefined
-  children: VNodeChild
-} & Partial<TransitionCallbacks>
-
-export type KineticGroupProps<_Tag extends string> = Record<string, unknown> & {
-  appear?: boolean | undefined
-  timeout?: number | undefined
-  children: VNodeChild
-} & Partial<TransitionCallbacks>
-
-// ─── Conditional props based on mode ─────────────────────
-
-export 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>
-
-// ─── Conditional config opts based on mode ───────────────
-
-type ConfigOpts<Mode extends KineticMode> = Mode extends 'collapse'
-  ? CollapseConfigOpts
-  : Mode extends 'stagger'
-    ? StaggerConfigOpts
-    : Mode extends 'group'
-      ? GroupConfigOpts
-      : TransitionConfigOpts
-
-// ─── Chain methods ───────────────────────────────────────
-
-export type KineticChain<Tag extends string, Mode extends KineticMode> = {
-  displayName: string
-  preset: (preset: StyleTransitionProps & ClassTransitionProps) => KineticComponent<Tag, Mode>
-  enter: (styles: CSSProperties) => KineticComponent<Tag, Mode>
-  enterTo: (styles: CSSProperties) => KineticComponent<Tag, Mode>
-  enterTransition: (value: string) => KineticComponent<Tag, Mode>
-  leave: (styles: CSSProperties) => KineticComponent<Tag, Mode>
-  leaveTo: (styles: CSSProperties) => KineticComponent<Tag, Mode>
-  leaveTransition: (value: string) => KineticComponent<Tag, Mode>
-  enterClass: (opts: ClassConfig) => KineticComponent<Tag, Mode>
-  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'>
-  stagger: (opts?: {
-    interval?: number | undefined
-    reverseLeave?: boolean | undefined
-  }) => KineticComponent<Tag, 'stagger'>
-  group: () => KineticComponent<Tag, 'group'>
-}
-
-// ─── The full kinetic component: renderable + chainable ───
-
-export type KineticComponent<
-  Tag extends string,
-  Mode extends KineticMode = 'transition',
-> = ComponentFn<KineticComponentProps<Tag, Mode>> & KineticChain<Tag, Mode>

package/src/kinetic.ts

@@ -1,25 +0,0 @@
-import createKineticComponent from './kinetic/createKineticComponent'
-import type { KineticComponent } from './kinetic/types'
-
-/**
- * Creates a reusable animated component via immutable chaining.
- *
- * @example
- * ```tsx
- * // Transition (default)
- * const FadeDiv = kinetic('div').preset(fade)
- *
- * // Collapse
- * const Accordion = kinetic('div').collapse()
- *
- * // Stagger
- * const StaggerList = kinetic('ul').preset(slideUp).stagger({ interval: 50 })
- *
- * // Group (key-based enter/exit)
- * const AnimatedList = kinetic('ul').preset(fade).group()
- * ```
- */
-const kinetic = <Tag extends string>(tag: Tag): KineticComponent<Tag, 'transition'> =>
-  createKineticComponent<Tag, 'transition'>({ tag, mode: 'transition' })
-
-export default kinetic

package/src/presets.ts

@@ -1,66 +0,0 @@
-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',
-  leaveStyle: { opacity: 1 },
-  leaveToStyle: { opacity: 0 },
-  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',
-}
-
-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',
-}
-
-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',
-}
-
-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',
-}
-
-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',
-}
-
-export const presets = {
-  fade,
-  scaleIn,
-  slideUp,
-  slideDown,
-  slideLeft,
-  slideRight,
-} as const

package/src/types.ts

@@ -1,118 +0,0 @@
-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'
-
-/** Class-based transition definition. */
-export type ClassTransitionProps = {
-  /** Classes applied during the entire enter phase */
-  enter?: string | undefined
-  /** Classes applied on first frame of enter, removed on next frame */
-  enterFrom?: string | undefined
-  /** Classes applied on second frame of enter, kept until complete */
-  enterTo?: string | undefined
-  /** Classes applied during the entire leave phase */
-  leave?: string | undefined
-  /** Classes applied on first frame of leave */
-  leaveFrom?: string | undefined
-  /** Classes applied on second frame of leave, kept until complete */
-  leaveTo?: string | undefined
-}
-
-/** Style-object transition definition (zero-CSS option). */
-export type StyleTransitionProps = {
-  /** Inline styles for the start of enter */
-  enterStyle?: CSSProperties | undefined
-  /** Inline styles for the end of enter */
-  enterToStyle?: CSSProperties | undefined
-  /** CSS transition shorthand applied during enter */
-  enterTransition?: string | undefined
-  /** Inline styles for the start of leave */
-  leaveStyle?: CSSProperties | undefined
-  /** Inline styles for the end of leave */
-  leaveToStyle?: CSSProperties | undefined
-  /** CSS transition shorthand applied during leave */
-  leaveTransition?: string | undefined
-}
-
-/** Lifecycle callbacks. */
-export type TransitionCallbacks = {
-  /** Called immediately when entering begins */
-  onEnter?: (() => void) | undefined
-  /** Called when enter animation completes */
-  onAfterEnter?: (() => void) | undefined
-  /** Called immediately when leaving begins */
-  onLeave?: (() => void) | undefined
-  /** Called when leave animation completes */
-  onAfterLeave?: (() => void) | undefined
-}
-
-export type TransitionProps = ClassTransitionProps &
-  StyleTransitionProps &
-  TransitionCallbacks & {
-    /** Reactive accessor controlling visibility. true = enter, false = leave + unmount. */
-    show: () => boolean
-    /** If true, runs enter animation on initial mount. Default: false. */
-    appear?: boolean | undefined
-    /** If true (default), unmounts when hidden. If false, keeps with display:none. */
-    unmount?: boolean | undefined
-    /** Safety timeout in ms. Default: 5000. */
-    timeout?: number | undefined
-    /** Single child element. Must accept ref. */
-    children: VNode
-  }
-
-export type TransitionGroupProps = ClassTransitionProps &
-  StyleTransitionProps &
-  TransitionCallbacks & {
-    /** If true, animates initial children on mount. Default: false. */
-    appear?: boolean | undefined
-    /** Safety timeout in ms. Default: 5000. */
-    timeout?: number | undefined
-    /** Children with unique keys. */
-    children: VNode[]
-  }
-
-export type StaggerProps = ClassTransitionProps &
-  StyleTransitionProps &
-  TransitionCallbacks & {
-    /** Reactive accessor controlling visibility of all children. */
-    show: () => boolean
-    /** Delay between each child's animation start in ms. Default: 50. */
-    interval?: number | undefined
-    /** If true, reverses stagger order on leave. Default: false. */
-    reverseLeave?: boolean | undefined
-    /** If true, animates on initial mount. Default: false. */
-    appear?: boolean | undefined
-    /** Safety timeout in ms. Default: 5000. */
-    timeout?: number | undefined
-    /** Children to stagger. */
-    children: VNode[]
-  }
-
-export type CollapseProps = TransitionCallbacks & {
-  /** Reactive accessor controlling expanded/collapsed state. */
-  show: () => boolean
-  /** CSS transition for height. Default: "height 300ms ease". */
-  transition?: string | undefined
-  /** If true, animates on initial mount. Default: false. */
-  appear?: boolean | undefined
-  /** Safety timeout in ms. Default: 5000. */
-  timeout?: number | undefined
-  /** The content to collapse. */
-  children: VNode
-}
-
-export type TransitionStateResult = {
-  /** Current lifecycle stage (signal) */
-  stage: Signal<TransitionStage>
-  /** Ref callback to attach to the transitioning element */
-  ref: Ref<HTMLElement> | ((node: HTMLElement | null) => void)
-  /** Reactive accessor: whether the element should be rendered */
-  shouldMount: () => boolean
-  /** Call when the current animation finishes */
-  complete: () => void
-}

package/src/useAnimationEnd.ts

@@ -1,59 +0,0 @@
-import type { Ref } from '@pyreon/core'
-import { watch } from '@pyreon/reactivity'
-
-const DEFAULT_TIMEOUT = 5000
-
-export type UseAnimationEnd = (options: {
-  ref: Ref<HTMLElement>
-  onEnd: () => void
-  active: () => boolean
-  timeout?: number | undefined
-}) => void
-
-const useAnimationEnd: UseAnimationEnd = ({ ref, onEnd, active, timeout = DEFAULT_TIMEOUT }) => {
-  let called = false
-
-  watch(
-    active,
-    (isActive) => {
-      if (!isActive) {
-        called = false
-        return
-      }
-
-      const el = ref.current
-      if (!el) return
-
-      called = false
-
-      const done = () => {
-        if (called) return
-        called = true
-        el.removeEventListener('transitionend', handleEnd)
-        el.removeEventListener('animationend', handleEnd)
-        clearTimeout(timer)
-        onEnd()
-      }
-
-      const handleEnd = (e: Event) => {
-        // Ignore bubbled events from children
-        if (e.target !== el) return
-        done()
-      }
-
-      el.addEventListener('transitionend', handleEnd)
-      el.addEventListener('animationend', handleEnd)
-
-      const timer = setTimeout(done, timeout)
-
-      return () => {
-        el.removeEventListener('transitionend', handleEnd)
-        el.removeEventListener('animationend', handleEnd)
-        clearTimeout(timer)
-      }
-    },
-    { immediate: true },
-  )
-}
-
-export default useAnimationEnd

package/src/useReducedMotion.ts

@@ -1,28 +0,0 @@
-import { onMount, onUnmount } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-
-/**
- * Inline reduced-motion check for kinetic package.
- * Avoids depending on @pyreon/hooks for a single media query.
- */
-export function useReducedMotion(): () => boolean {
-  const matches = signal(false)
-  let mql: MediaQueryList | undefined
-
-  const onChange = (e: MediaQueryListEvent) => {
-    matches.set(e.matches)
-  }
-
-  onMount(() => {
-    mql = window.matchMedia('(prefers-reduced-motion: reduce)')
-    matches.set(mql.matches)
-    mql.addEventListener('change', onChange)
-    return undefined
-  })
-
-  onUnmount(() => {
-    mql?.removeEventListener('change', onChange)
-  })
-
-  return matches
-}