fysk-hooks

1"use client";
2import {
3  useFyskConfig,
4  defaultAnimationConfig,
5  type FyskAnimationConfig,
6} from "@/components/fysk-provider";
7import React from "react";
8
9/**
10 * Hook to access animation configuration and utilities.
11 * Provides pre-computed transition objects for consistent animations across components.
12 */
13export function useFyskAnimation() {
14  const { animations } = useFyskConfig();
15
16  // Merge user config with defaults
17  const config: FyskAnimationConfig = React.useMemo(
18    () => ({
19      ...defaultAnimationConfig,
20      ...animations,
21      durations: {
22        ...defaultAnimationConfig.durations,
23        ...animations?.durations,
24      },
25      easings: { ...defaultAnimationConfig.easings, ...animations?.easings },
26      effects: { ...defaultAnimationConfig.effects, ...animations?.effects },
27    }),
28    [animations],
29  );
30
31  // Check if animations are enabled and motion is available
32  const isEnabled = config.enabled && !!config.motion;
33
34  // Pre-computed transition objects based on config
35  const transitions = React.useMemo(() => {
36    if (!isEnabled) return null;
37
38    const { durations, easings } = config;
39
40    return {
41      layout: {
42        duration: durations.layout,
43        ease: easings.layout,
44      },
45      enter: {
46        duration: durations.normal,
47        ease: easings.enter,
48      },
49      exit: {
50        duration: durations.fast,
51        ease: easings.exit,
52      },
53      hover: {
54        duration: durations.instant,
55        ease: easings.hover,
56      },
57      content: {
58        duration: durations.normal,
59        ease: easings.enter,
60        layout: {
61          duration: durations.slow,
62          ease: easings.layout,
63        },
64      },
65      linear: {
66        duration: durations.normal,
67        ease: easings.linear,
68        repeat: Infinity,
69      },
70      layoutEnter: {
71        layout: { duration: durations.layout, ease: easings.layout },
72        opacity: { duration: durations.normal, ease: easings.enter },
73      },
74    };
75  }, [isEnabled, config]);
76
77  // Pre-computed animation variants based on config
78  const variants = React.useMemo(() => {
79    if (!isEnabled) return null;
80
81    const { effects, durations, easings } = config;
82
83    const buildHiddenState = () => {
84      const state: Record<string, any> = { opacity: 0 };
85      if (effects.blur) state.filter = `blur(${effects.blurAmount}px)`;
86// … truncated