@zentauri-ui/zentauri-components 1.3.1 → 1.4.1

package/src/ui/alert/alert-base.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+import {
+  HiExclamationTriangle,
+  HiInformationCircle,
+  HiXMark,
+} from "react-icons/hi2";
+
+import { cn } from "../../lib/utils";
+
+import type { AlertBaseProps, AlertProps, AlertSectionProps, AlertSize } from "./types";
+import {
+  alertDescriptionVariants,
+  alertTitleVariants,
+  alertVariants,
+} from "./variants";
+
+const AlertSizeContext = createContext<AlertSize>("md");
+
+function useAlertSize(): AlertSize {
+  const ctx = useContext(AlertSizeContext);
+  if (!ctx) {
+    throw new Error("useAlertSize must be used within an Alert");
+  }
+  return ctx;
+}
+
+export function AlertBase(props: AlertBaseProps) {
+  const {
+    className,
+    triggerClassName,
+    appearance = "default",
+    size = "md",
+    closable = false,
+    onClose,
+    closeLabel = "Dismiss alert",
+    children,
+    ref,
+    as: Wrapper = "div",
+    ...rest
+  } = props;
+
+  const live = appearance === "error" ? "assertive" : "polite";
+  const ctx = useMemo(() => size ?? "md", [size]);
+
+  return (
+    <AlertSizeContext.Provider value={ctx}>
+      <Wrapper
+        ref={ref}
+        data-slot="alert"
+        role="alert"
+        aria-live={live}
+        className={cn(
+          alertVariants({ appearance, size }),
+          closable ? "pr-12" : "",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+        {closable ? (
+          <button
+            type="button"
+            data-slot="alert-close"
+            aria-label={closeLabel}
+            onClick={onClose}
+            className={cn(
+              "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
+              triggerClassName,
+            )}
+          >
+            <HiXMark className="size-4" aria-hidden />
+          </button>
+        ) : null}
+      </Wrapper>
+    </AlertSizeContext.Provider>
+  );
+}
+
+AlertBase.displayName = "AlertBase";
+
+export function AlertIcon({ className, children }: AlertSectionProps) {
+  return (
+    <span
+      data-slot="alert-icon"
+      className={cn("mt-0.5 shrink-0 text-current", className)}
+    >
+      {children}
+    </span>
+  );
+}
+
+AlertIcon.displayName = "AlertIcon";
+
+export function AlertTitle({ className, children }: AlertSectionProps) {
+  const size = useAlertSize();
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(alertTitleVariants({ size }), className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+AlertTitle.displayName = "AlertTitle";
+
+export function AlertDescription({ className, children }: AlertSectionProps) {
+  const size = useAlertSize();
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(alertDescriptionVariants({ size }), className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+AlertDescription.displayName = "AlertDescription";
+
+export function AlertClose({
+  className,
+  children,
+  "aria-label": ariaLabel = "Dismiss alert",
+  onClick,
+}: AlertSectionProps & { onClick?: () => void; "aria-label"?: string }) {
+  return (
+    <button
+      type="button"
+      data-slot="alert-close"
+      aria-label={ariaLabel}
+      onClick={onClick}
+      className={cn(
+        "inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
+        className,
+      )}
+    >
+      {children ?? <HiXMark className="size-4" aria-hidden />}
+    </button>
+  );
+}
+
+AlertClose.displayName = "AlertClose";
+
+export function AlertDefaultIcon({
+  appearance,
+}: {
+  appearance?: AlertProps["appearance"];
+}) {
+  if (appearance === "error") {
+    return <HiExclamationTriangle className="size-5" aria-hidden />;
+  }
+  return <HiInformationCircle className="size-5" aria-hidden />;
+}

package/src/ui/alert/alert.test.tsx

@@ -0,0 +1,150 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  AlertClose,
+  AlertDefaultIcon,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+} from "./alert-base";
+import { Alert } from "./alert";
+
+describe("Alert", () => {
+  describe("public contract and metadata", () => {
+    it("should expose displayName on compound parts", () => {
+      expect(Alert.displayName).toBe("Alert");
+      expect(AlertIcon.displayName).toBe("AlertIcon");
+      expect(AlertTitle.displayName).toBe("AlertTitle");
+      expect(AlertDescription.displayName).toBe("AlertDescription");
+      expect(AlertClose.displayName).toBe("AlertClose");
+    });
+
+    it("should stamp data-slot on the root element", () => {
+      render(
+        <Alert>
+          <AlertTitle>Heads up</AlertTitle>
+        </Alert>,
+      );
+      const root = document.querySelector('[data-slot="alert"]');
+      expect(root).toBeTruthy();
+      expect(root?.getAttribute("data-slot")).toBe("alert");
+    });
+  });
+
+  describe("semantics and live region", () => {
+    it("should use role alert and polite live region for non-error appearances", () => {
+      render(
+        <Alert appearance="info">
+          <AlertTitle>Info</AlertTitle>
+        </Alert>,
+      );
+      const live = screen.getByRole("alert");
+      expect(live.getAttribute("aria-live")).toBe("polite");
+    });
+
+    it("should use assertive live region for error appearance", () => {
+      render(
+        <Alert appearance="error">
+          <AlertTitle>Error</AlertTitle>
+        </Alert>,
+      );
+      expect(screen.getByRole("alert").getAttribute("aria-live")).toBe(
+        "assertive",
+      );
+    });
+  });
+
+  describe("closable behavior", () => {
+    it("should render a dismiss control when closable is true", () => {
+      render(
+        <Alert closable closeLabel="Remove warning">
+          <AlertTitle>Warning</AlertTitle>
+        </Alert>,
+      );
+      expect(
+        screen.getByRole("button", { name: "Remove warning" }),
+      ).toHaveAttribute("data-slot", "alert-close");
+    });
+
+    it("should invoke onClose when the built-in dismiss button is activated", async () => {
+      const user = userEvent.setup();
+      const handleClose = vi.fn();
+      render(
+        <Alert closable onClose={handleClose}>
+          <AlertTitle>Dismissible</AlertTitle>
+        </Alert>,
+      );
+      await user.click(screen.getByRole("button", { name: /dismiss alert/i }));
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+
+    it("should allow AlertClose to run a custom handler", async () => {
+      const user = userEvent.setup();
+      const handleClose = vi.fn();
+      render(
+        <Alert>
+          <AlertTitle>Manual close</AlertTitle>
+          <AlertClose aria-label="Close" onClick={handleClose}>
+            ×
+          </AlertClose>
+        </Alert>,
+      );
+      await user.click(screen.getByRole("button", { name: "Close" }));
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("composition", () => {
+    it("should render compound slots for icon, title, and description", () => {
+      render(
+        <Alert>
+          <AlertIcon>
+            <span data-testid="custom-icon">!</span>
+          </AlertIcon>
+          <AlertTitle>Title</AlertTitle>
+          <AlertDescription>Description body</AlertDescription>
+        </Alert>,
+      );
+      expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+      expect(
+        document.querySelector('[data-slot="alert-title"]'),
+      ).toHaveTextContent("Title");
+      expect(
+        document.querySelector('[data-slot="alert-description"]'),
+      ).toHaveTextContent("Description body");
+    });
+
+    it("should apply appearance classes from the variant recipe", () => {
+      render(
+        <Alert appearance="success">
+          <AlertTitle>Done</AlertTitle>
+        </Alert>,
+      );
+      const root = document.querySelector('[data-slot="alert"]') as HTMLElement;
+      expect(root.className).toMatch(/border-emerald-500/);
+    });
+  });
+
+  describe("ref forwarding", () => {
+    it("should forward ref to the motion root", () => {
+      const ref = createRef<HTMLDivElement>();
+      render(
+        <Alert ref={ref}>
+          <AlertTitle>Ref</AlertTitle>
+        </Alert>,
+      );
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current?.getAttribute("data-slot")).toBe("alert");
+    });
+  });
+
+  describe("AlertDefaultIcon", () => {
+    it("should render error icon markup when appearance is error", () => {
+      const { container } = render(<AlertDefaultIcon appearance="error" />);
+      expect(container.querySelector("svg")).toBeTruthy();
+    });
+  });
+});

package/src/ui/alert/alert.tsx

@@ -0,0 +1,9 @@
+// alert.tsx  ← users import this by default
+import { AlertBase } from "./alert-base";
+import type { AlertProps } from "./types";
+
+export const Alert = (props: AlertProps) => {
+  return <AlertBase {...props} />;
+}
+
+Alert.displayName = "Alert";

package/src/ui/alert/animated/alert-animated.tsx

@@ -0,0 +1,20 @@
+import { motion } from "framer-motion";
+import { AlertBase } from "../alert-base";
+import { alertAnimationPresets } from "./animations";
+import type { AlertAnimatedProps } from "./types";
+
+export const AlertAnimated = ({
+  animation = "none",
+  ...props
+}: AlertAnimatedProps) => {
+  const motionProps = alertAnimationPresets[animation];
+
+  return (
+    <AlertBase
+      as={motion.div}
+      initial={animation === "none" ? false : undefined}
+      {...motionProps}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,20 @@
+import { AlertAnimationPresets } from "./types";
+
+export const alertAnimationPresets: AlertAnimationPresets = {
+  none: {},
+  "slide-down": {
+    initial: { y: -8, opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    transition: { type: "spring", stiffness: 420, damping: 30 },
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.2 },
+  },
+  pop: {
+    initial: { scale: 0.96, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 28 },
+  },
+};

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

@@ -0,0 +1,3 @@
+export { AlertAnimated } from "./alert-animated";
+export type { AlertAnimatedProps} from "./types";
+export { alertAnimationPresets } from "./animations";

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

@@ -0,0 +1,16 @@
+import { HTMLMotionProps } from "framer-motion";
+import type { AlertBaseProps, AlertAnimation } from "../types";
+
+export type AlertAnimatedProps = Omit<AlertBaseProps, "as"> & {
+  animation?: AlertAnimation;
+};
+
+export type AlertPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "transition"
+>;
+
+export type AlertAnimationPresets = Record<
+  AlertAnimation,
+  AlertPresetMotionProps
+>;

package/src/ui/alert/index.ts

@@ -0,0 +1,22 @@
+"use client";
+
+export {
+  AlertClose,
+  AlertDefaultIcon,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+} from "./alert-base";
+export { Alert } from "./alert";
+
+export type {
+  AlertAnimation,
+  AlertProps,
+  AlertSectionProps,
+  AlertSize,
+} from "./types";
+export {
+  alertVariants,
+  alertTitleVariants,
+  alertDescriptionVariants,
+} from "./variants";

package/{dist/ui/alert/types.d.ts → src/ui/alert/types.ts}

@@ -1,21 +1,28 @@
 import type { VariantProps } from "class-variance-authority";
 import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+
 import type { alertVariants } from "./variants";
+
 export type AlertAnimation = "none" | "slide-down" | "fade" | "pop";
-export type AlertAppearance = VariantProps<typeof alertVariants>["appearance"];
+export type AlertAppearance = VariantProps<typeof alertVariants>["appearance"]; 
 export type AlertSize = VariantProps<typeof alertVariants>["size"];
+
 export interface AlertBaseProps extends ComponentPropsWithRef<"div"> {
-    appearance?: AlertAppearance;
-    size?: AlertSize;
-    closable?: boolean;
-    onClose?: () => void;
-    closeLabel?: string;
-    triggerClassName?: string;
-    as?: ElementType;
+  appearance?: AlertAppearance;
+  size?: AlertSize;
+  closable?: boolean;
+  onClose?: () => void;
+  closeLabel?: string;
+  triggerClassName?: string;
+  // Accept the wrapper element/component as a prop — defaults to "div"
+  as?: ElementType;
 }
+
+
 export type AlertSectionProps = {
-    className?: string;
-    children?: ReactNode;
+  className?: string;
+  children?: ReactNode;
 };
+
 export type AlertProps = Omit<AlertBaseProps, "as">;
-//# sourceMappingURL=types.d.ts.map
+

package/src/ui/alert/variants.ts

@@ -0,0 +1,74 @@
+import { cva } from "class-variance-authority";
+
+export const alertVariants = cva(
+  "relative flex w-full gap-3 border text-sm ring-offset-slate-950 transition-colors",
+  {
+    variants: {
+      appearance: {
+        default: "border-white/10 bg-white/5 text-slate-50",
+        success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
+        warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
+        error: "border-rose-500/50 bg-rose-500/10 text-rose-50",
+        info: "border-sky-500/40 bg-sky-500/10 text-sky-50",
+        ghost: "border-transparent bg-transparent text-slate-200",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue":
+          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green":
+          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red":
+          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow":
+          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple":
+          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal":
+          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo":
+          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink":
+          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange":
+          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+      },
+      size: {
+        sm: "rounded-lg p-3",
+        md: "rounded-xl p-4",
+        lg: "rounded-2xl p-5 text-base",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+    },
+  },
+);
+
+export const alertTitleVariants = cva("font-semibold leading-tight", {
+  variants: {
+    size: {
+      sm: "text-xs md:text-sm",
+      md: "text-xs md:text-sm",
+      lg: "text-xs md:text-sm",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+export const alertDescriptionVariants = cva("text-slate-300", {
+  variants: {
+    size: {
+      sm: "text-xs md:text-sm",
+      md: "text-xs md:text-sm",
+      lg: "text-xs md:text-sm",
+    },
+  },
+  defaultVariants: { size: "md" },
+});

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

@@ -0,0 +1,11 @@
+import { AvatarAnimationPresets } from "./types";
+
+export const avatarAnimationPresets: AvatarAnimationPresets = {
+  none: { initial: false },
+  subtle: {
+    initial: false,
+    whileHover: { scale: 1.03 },
+    whileTap: { scale: 0.98 },
+    transition: { type: "spring", stiffness: 420, damping: 28 },
+  },
+};

package/src/ui/avatar/animated/avatar-animated.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { avatarAnimationPresets } from "./animations";
+import { AvatarBase } from "../avatar-base";
+import type { AvatarAnimatedProps } from "./types";
+
+export function AvatarAnimated({
+  animation = "none",
+  ...props
+}: AvatarAnimatedProps) {
+  const motionProps = avatarAnimationPresets[animation];
+
+  return (
+    <AvatarBase
+      as={motion.span}
+      initial={animation === "none" ? false : undefined}
+      {...motionProps}
+      {...props}
+    />
+  );
+}
+
+AvatarAnimated.displayName = "AvatarAnimated";

package/{dist/ui/avatar/animated/index.d.ts → src/ui/avatar/animated/index.ts}

@@ -1,5 +1,6 @@
+"use client";
+
 export { AvatarAnimated } from "./avatar-animated";
 export { AvatarFallback, AvatarGroup, AvatarImage } from "../avatar-base";
 export type { AvatarAnimatedProps, AvatarAnimation, AvatarAnimationPresets } from "./types";
-export { avatarAnimationPresets } from "./animations";
-//# sourceMappingURL=index.d.ts.map
+export { avatarAnimationPresets } from "./animations";

package/{dist/ui/avatar/animated/types.d.ts → src/ui/avatar/animated/types.ts}

@@ -1,8 +1,16 @@
 import type { AvatarBaseProps } from "../types";
 import { HTMLMotionProps } from "framer-motion";
+
 export type AvatarAnimatedProps = Omit<AvatarBaseProps, "as"> & {
-    animation?: AvatarAnimation;
+  animation?: AvatarAnimation;
 };
-export type AvatarAnimationPresets = Record<AvatarAnimation, Pick<HTMLMotionProps<"span">, "whileHover" | "whileTap" | "transition" | "initial">>;
+
+export type AvatarAnimationPresets = Record<
+  AvatarAnimation,
+  Pick<
+    HTMLMotionProps<"span">,
+    "whileHover" | "whileTap" | "transition" | "initial"
+  >
+>;
+
 export type AvatarAnimation = "none" | "subtle";
-//# sourceMappingURL=types.d.ts.map