"getStrictContext" lacking when importing the Theme Toggler Button

[Rafael-Julio-2242]

Description

I have used the "npx shadcn@latest add @animate-ui/components-buttons-theme-toggler" command in the documentation, and the function "getStrictContext" was lacking.

Code example

"
'use client';

import * as React from 'react';
import { motion, AnimatePresence, type HTMLMotionProps } from 'motion/react';

import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
import {
useIsInView,
type UseIsInViewOptions,
} from '@/hooks/use-is-in-view';
import { getStrictContext } from '@/lib/get-strict-context'; // This function is required on this component, but it was lacking in the lib folder after using the command

type Side = 'top' | 'bottom' | 'left' | 'right';
type Align = 'start' | 'center' | 'end';

type ParticlesContextType = {
animate: boolean;
isInView: boolean;
};

const [ParticlesProvider, useParticles] =
getStrictContext('ParticlesContext');

type ParticlesProps = WithAsChild<
Omit<HTMLMotionProps<'div'>, 'children'> & {
animate?: boolean;
children: React.ReactNode;
} & UseIsInViewOptions

;

function Particles({
ref,
animate = true,
asChild = false,
inView = false,
inViewMargin = '0px',
inViewOnce = true,
children,
style,
...props
}: ParticlesProps) {
const { ref: localRef, isInView } = useIsInView(
ref as React.Ref,
{ inView, inViewOnce, inViewMargin },
);

const Component = asChild ? Slot : motion.div;

return (
<ParticlesProvider value={{ animate, isInView }}>
<Component
ref={localRef}
style={{ position: 'relative', ...style }}
{...props}
>
{children}


);
}

type ParticlesEffectProps = Omit<HTMLMotionProps<'div'>, 'children'> & {
side?: Side;
align?: Align;
count?: number;
radius?: number;
spread?: number;
duration?: number;
holdDelay?: number;
sideOffset?: number;
alignOffset?: number;
delay?: number;
};

function ParticlesEffect({
side = 'top',
align = 'center',
count = 6,
radius = 30,
spread = 360,
duration = 0.8,
holdDelay = 0.05,
sideOffset = 0,
alignOffset = 0,
delay = 0,
transition,
style,
...props
}: ParticlesEffectProps) {
const { animate, isInView } = useParticles();

const isVertical = side === 'top' || side === 'bottom';
const alignPct = align === 'start' ? '0%' : align === 'end' ? '100%' : '50%';

const top = isVertical
? side === 'top'
? calc(0% - ${sideOffset}px)
: calc(100% + ${sideOffset}px)
: calc(${alignPct} + ${alignOffset}px);

const left = isVertical
? calc(${alignPct} + ${alignOffset}px)
: side === 'left'
? calc(0% - ${sideOffset}px)
: calc(100% + ${sideOffset}px);

const containerStyle: React.CSSProperties = {
position: 'absolute',
top,
left,
transform: 'translate(-50%, -50%)',
};

const angleStep = (spread * (Math.PI / 180)) / Math.max(1, count - 1);

return (

{animate &&
isInView &&
[...Array(count)].map((_, i) => {
const angle = i * angleStep;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;

      return (
        <motion.div
          key={i}
          style={{ ...containerStyle, ...style }}
          initial={{ scale: 0, opacity: 0 }}
          animate={{
            x: `${x}px`,
            y: `${y}px`,
            scale: [0, 1, 0],
            opacity: [0, 1, 0],
          }}
          transition={{
            duration,
            delay: delay + i * holdDelay,
            ease: 'easeOut',
            ...transition,
          }}
          {...props}
        />
      );
    })}
</AnimatePresence>

);
}

export {
Particles,
ParticlesEffect,
type ParticlesProps,
type ParticlesEffectProps,
};
"

Concerned component

"Particles.tsx" uses the "getStrictContext" function
The "icon.tsx" component uses the "Particle.tsx" component

Additional context

I solved by just going in the source code in the Github repo and adding in the project, but the function was lacking when i used the command in the docs

Step by Step

run the "npx create-next-app@latest my-app --yes" to create the next js project

run the "npx shadcn@latest init" to start the shadcn ui

run the "npx shadcn@latest add @animate-ui/components-buttons-theme-toggler" in the docs
"https://animate-ui.com/docs/components/buttons/theme-toggler"

add the <ThemeTogglerButton /> in a page and then run "npm run dev" or run the "npm run build"