create-bunspace 0.4.0 → 0.5.1

package/templates/react-starter/src/components/animate-ui/primitives/effects/particles.tsx

@@ -0,0 +1,155 @@
+'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 IUseIsInViewOptions,
+  getStrictContext,
+} from '@mks2508/mks-ui/react';
+
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+
+type ParticlesContextType = {
+  animate: boolean;
+  isInView: boolean;
+};
+
+const [ParticlesProvider, useParticles] =
+  getStrictContext<ParticlesContextType>('ParticlesContext');
+
+type ParticlesProps = WithAsChild<
+  Omit<HTMLMotionProps<'div'>, 'children'> & {
+    animate?: boolean;
+    children: React.ReactNode;
+  } & IUseIsInViewOptions
+>;
+
+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<HTMLDivElement>,
+    { inView, inViewOnce, inViewMargin },
+  );
+
+  const Component = asChild ? Slot : motion.div;
+
+  return (
+    <ParticlesProvider value={{ animate, isInView }}>
+      <Component
+        ref={localRef}
+        style={{ position: 'relative', ...style }}
+        {...props}
+      >
+        {children}
+      </Component>
+    </ParticlesProvider>
+  );
+}
+
+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 (
+    <AnimatePresence>
+      {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,
+};

package/templates/react-starter/src/components/animate-ui/primitives/effects/theme-toggler.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+
+type ThemeSelection = 'light' | 'dark' | 'system';
+type Resolved = 'light' | 'dark';
+type Direction = 'btt' | 'ttb' | 'ltr' | 'rtl';
+
+type ChildrenRender =
+  | React.ReactNode
+  | ((state: {
+      resolved: Resolved;
+      effective: ThemeSelection;
+      toggleTheme: (theme: ThemeSelection) => void;
+    }) => React.ReactNode);
+
+function getSystemEffective(): Resolved {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+}
+
+function getClipKeyframes(direction: Direction): [string, string] {
+  switch (direction) {
+    case 'ltr':
+      return ['inset(0 100% 0 0)', 'inset(0 0 0 0)'];
+    case 'rtl':
+      return ['inset(0 0 0 100%)', 'inset(0 0 0 0)'];
+    case 'ttb':
+      return ['inset(0 0 100% 0)', 'inset(0 0 0 0)'];
+    case 'btt':
+      return ['inset(100% 0 0 0)', 'inset(0 0 0 0)'];
+    default:
+      return ['inset(0 100% 0 0)', 'inset(0 0 0 0)'];
+  }
+}
+
+type ThemeTogglerProps = {
+  theme: ThemeSelection;
+  resolvedTheme: Resolved;
+  setTheme: (theme: ThemeSelection) => void;
+  direction?: Direction;
+  onImmediateChange?: (theme: ThemeSelection) => void;
+  children?: ChildrenRender;
+};
+
+function ThemeToggler({
+  theme,
+  resolvedTheme,
+  setTheme,
+  onImmediateChange,
+  direction = 'ltr',
+  children,
+  ...props
+}: ThemeTogglerProps) {
+  const [preview, setPreview] = React.useState<null | {
+    effective: ThemeSelection;
+    resolved: Resolved;
+  }>(null);
+  const [current, setCurrent] = React.useState<{
+    effective: ThemeSelection;
+    resolved: Resolved;
+  }>({
+    effective: theme,
+    resolved: resolvedTheme,
+  });
+
+  React.useEffect(() => {
+    if (
+      preview &&
+      theme === preview.effective &&
+      resolvedTheme === preview.resolved
+    ) {
+      setPreview(null);
+    }
+  }, [theme, resolvedTheme, preview]);
+
+  const [fromClip, toClip] = getClipKeyframes(direction);
+
+  const toggleTheme = React.useCallback(
+    async (theme: ThemeSelection) => {
+      const resolved = theme === 'system' ? getSystemEffective() : theme;
+
+      setCurrent({ effective: theme, resolved });
+      onImmediateChange?.(theme);
+
+      if (theme === 'system' && resolved === resolvedTheme) {
+        setTheme(theme);
+        return;
+      }
+
+      if (!document.startViewTransition) {
+        flushSync(() => {
+          setPreview({ effective: theme, resolved });
+        });
+        setTheme(theme);
+        return;
+      }
+
+      await document.startViewTransition(() => {
+        flushSync(() => {
+          setPreview({ effective: theme, resolved });
+          document.documentElement.classList.toggle(
+            'dark',
+            resolved === 'dark',
+          );
+        });
+      }).ready;
+
+      document.documentElement
+        .animate(
+          { clipPath: [fromClip, toClip] },
+          {
+            duration: 700,
+            easing: 'ease-in-out',
+            pseudoElement: '::view-transition-new(root)',
+          },
+        )
+        .finished.finally(() => {
+          setTheme(theme);
+        });
+    },
+    [onImmediateChange, resolvedTheme, fromClip, toClip, setTheme],
+  );
+
+  return (
+    <React.Fragment {...props}>
+      {typeof children === 'function'
+        ? children({
+            effective: current.effective,
+            resolved: current.resolved,
+            toggleTheme,
+          })
+        : children}
+      <style>{`::view-transition-old(root), ::view-transition-new(root){animation:none;mix-blend-mode:normal;}`}</style>
+    </React.Fragment>
+  );
+}
+
+export {
+  ThemeToggler,
+  type ThemeTogglerProps,
+  type ThemeSelection,
+  type Resolved,
+  type Direction,
+};