@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/breadcrumb/variants.ts

@@ -0,0 +1,53 @@
+import { cva } from "class-variance-authority";
+
+export const breadcrumbNavVariants = cva(
+  "text-sm",
+  {
+    variants: {
+      appearance: {
+        default: "text-slate-300",
+        muted: "text-slate-400",
+        sky: "text-sky-600",
+        rose: "text-rose-600",
+        purple: "text-purple-600",
+        pink: "text-pink-600",
+        orange: "text-orange-600",
+        yellow: "text-yellow-600",
+        teal: "text-teal-600",
+        indigo: "text-indigo-600",
+        emerald: "text-emerald-600",
+        gray: "text-gray-600",
+        amber: "text-amber-600",
+        violet: "text-violet-600",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+    },
+  }
+);
+
+export const breadcrumbListVariants = cva("flex flex-wrap items-center gap-1.5");
+
+export const breadcrumbItemVariants = cva("inline-flex items-center gap-1.5");
+
+export const breadcrumbLinkVariants = cva(
+  "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+);
+
+export const breadcrumbPageVariants = cva("font-medium text-slate-100");
+
+export const breadcrumbSeparatorVariants = cva(
+  "select-none text-slate-600",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);

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

@@ -0,0 +1,34 @@
+import type { AnimationPresets } from "./types";
+
+export const buttonAnimationPresets: AnimationPresets = {
+  none: {},
+  lift: {
+    whileHover: { y: -2, scale: 1.02 },
+    whileTap: { y: 0, scale: 0.98 },
+    transition: { type: "spring", stiffness: 420, damping: 28 },
+  },
+  press: {
+    whileTap: { scale: 0.96 },
+    transition: { type: "spring", stiffness: 520, damping: 30 },
+  },
+  glow: {
+    whileHover: {
+      boxShadow:
+        "0 0 0 1px rgba(255,255,255,0.25), 0 18px 42px rgba(15,23,42,0.35)",
+      scale: 1.01,
+    },
+    whileTap: { scale: 0.98 },
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+  tilt: {
+    whileHover: { rotateX: 6, rotateY: -6, scale: 1.01 },
+    whileTap: { scale: 0.98, rotateX: 0, rotateY: 0 },
+    transition: { type: "spring", stiffness: 300, damping: 20 },
+    style: { transformStyle: "preserve-3d" },
+  },
+  bounce: {
+    whileHover: { y: -4, scale: 1.03 },
+    whileTap: { y: 0, scale: 0.97 },
+    transition: { type: "spring", bounce: 0.45, duration: 0.45 },
+  },
+};

package/src/ui/buttons/animated/button-animated.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import { buttonAnimationPresets } from "./animations";
+import type { ButtonAnimatedProps } from "./types";
+import { buttonVariants } from "../variants";
+
+export const ButtonAnimated = (props: ButtonAnimatedProps) => {
+  if (props.as === "link") {
+    const {
+      className,
+      appearance,
+      size,
+      children,
+      ref,
+      href,
+      target,
+      animation = "none",
+      ...rest
+    } = props;
+    const motionProps = buttonAnimationPresets[animation];
+
+    return (
+      <motion.a
+        ref={ref}
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noopener noreferrer" : undefined}
+        data-slot="button"
+        className={cn(buttonVariants({ appearance, size }), className)}
+        initial={false}
+        {...motionProps}
+        {...rest}
+      >
+        {children}
+      </motion.a>
+    );
+  }
+
+  const {
+    className,
+    appearance,
+    size,
+    type = "button",
+    children,
+    ref,
+    animation = "none",
+    ...rest
+  } = props;
+  const motionProps = buttonAnimationPresets[animation];
+
+  return (
+    <motion.button
+      ref={ref}
+      type={type}
+      data-slot="button"
+      className={cn(buttonVariants({ appearance, size }), className)}
+      initial={false}
+      {...motionProps}
+      {...rest}
+    >
+      {children}
+    </motion.button>
+  );
+};
+
+ButtonAnimated.displayName = "ButtonAnimated";

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { ButtonAnimated } from "./button-animated";
+export type { ButtonAnimatedProps, ButtonSharedAnimated, ButtonPresetMotionProps, AnimationPresets, ButtonAnimation } from "./types";
+export { buttonAnimationPresets } from "./animations";

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

@@ -0,0 +1,29 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLMotionProps } from "framer-motion";
+
+import type { buttonVariants } from "../variants";
+
+export type ButtonAnimation =
+  | "none"
+  | "lift"
+  | "press"
+  | "glow"
+  | "tilt"
+  | "bounce";
+
+export type ButtonSharedAnimated = VariantProps<typeof buttonVariants> & {
+  animation?: ButtonAnimation;
+};
+
+export type ButtonAnimatedProps =
+  | (ButtonSharedAnimated & HTMLMotionProps<"button"> & { as?: "button" })
+  | (ButtonSharedAnimated & HTMLMotionProps<"a"> & { as: "link" });
+
+/** Motion props applied by presets; valid on both `motion.button` and `motion.a`. */
+export type ButtonPresetMotionProps = Pick<
+  HTMLMotionProps<"button">,
+  "style" | "transition" | "whileHover" | "whileTap"
+>;
+
+
+export type AnimationPresets = Record<ButtonAnimation, ButtonPresetMotionProps>;

package/src/ui/buttons/button-base.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+
+import type { ButtonProps } from "./types";
+import { buttonVariants } from "./variants";
+
+export const ButtonBase = (props: ButtonProps) => {
+  if (props.as === "link") {
+    const {
+      className,
+      appearance,
+      size,
+      children,
+      ref,
+      href,
+      target,
+      ...rest
+    } = props;
+
+    return (
+      <a
+        ref={ref}
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noopener noreferrer" : undefined}
+        data-slot="button"
+        className={cn(buttonVariants({ appearance, size }), className)}
+        {...rest}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  const {
+    className,
+    appearance,
+    size,
+    type = "button",
+    children,
+    ref,
+    ...rest
+  } = props;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      data-slot="button"
+      className={cn(buttonVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+ButtonBase.displayName = "Button";