@zentauri-ui/zentauri-components 1.7.2 → 1.7.4

package/src/ui/command/animated/animations.ts

@@ -0,0 +1,29 @@
+import type { CommandAnimationPresets } from "./types";
+
+export const commandOverlayAnimationPresets: CommandAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.18 },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.97 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.97 },
+    transition: { type: "spring", stiffness: 440, damping: 34 },
+  },
+  "slide-down": {
+    initial: { opacity: 0, y: -20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -12 },
+    transition: { type: "spring", stiffness: 420, damping: 32 },
+  },
+  "slide-up": {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 12 },
+    transition: { type: "spring", stiffness: 420, damping: 32 },
+  },
+};

package/src/ui/command/animated/command-content-animated.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+
+import { commandOverlayAnimationPresets } from "./animations";
+import type { CommandContentAnimatedProps } from "./types";
+import { CommandContentLayer } from "../command-base";
+
+export function CommandContentAnimated({
+  className,
+  size,
+  appearance,
+  animation = "slide-down",
+  children,
+  ref,
+  id,
+  style,
+}: CommandContentAnimatedProps) {
+  const reduceMotion = useReducedMotion();
+  const overlayMotion = commandOverlayAnimationPresets.fade;
+  const panelMotion =
+    commandOverlayAnimationPresets[reduceMotion ? "fade" : animation];
+
+  return (
+    <CommandContentLayer
+      appearance={appearance}
+      className={className}
+      componentName="CommandContent"
+      id={id}
+      ref={ref}
+      renderOverlay={(overlayProps) => (
+        <motion.div
+          {...overlayProps}
+          initial={overlayMotion.initial}
+          animate={overlayMotion.animate}
+          exit={overlayMotion.exit}
+          transition={overlayMotion.transition}
+        />
+      )}
+      renderPanel={(panelProps) => (
+        <motion.div
+          {...panelProps}
+          initial={animation === "none" ? false : panelMotion.initial}
+          animate={animation === "none" ? undefined : panelMotion.animate}
+          exit={animation === "none" ? undefined : panelMotion.exit}
+          transition={panelMotion.transition}
+        />
+      )}
+      renderPresence={(content) => <AnimatePresence>{content}</AnimatePresence>}
+      size={size}
+      style={style}
+    >
+      {children}
+    </CommandContentLayer>
+  );
+}
+
+CommandContentAnimated.displayName = "CommandContent";

package/src/ui/command/animated/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { CommandContentAnimated } from "./command-content-animated";
+export type {
+  CommandContentAnimatedProps,
+  CommandAnimation,
+  CommandAnimationPresets,
+  CommandPresetMotionProps,
+} from "./types";
+export { commandOverlayAnimationPresets } from "./animations";

package/src/ui/command/animated/types.ts

@@ -0,0 +1,23 @@
+import { HTMLMotionProps } from "framer-motion";
+import type { CommandContentProps } from "../types";
+
+export type CommandAnimation =
+  | "none"
+  | "fade"
+  | "scale"
+  | "slide-down"
+  | "slide-up";
+
+export type CommandContentAnimatedProps = CommandContentProps & {
+  animation?: CommandAnimation;
+};
+
+export type CommandPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "exit" | "transition"
+>;
+
+export type CommandAnimationPresets = Record<
+  CommandAnimation,
+  CommandPresetMotionProps
+>;