@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/empty-state/animated/animations.ts

@@ -0,0 +1,19 @@
+import { EmptyStateAnimationPresets } from "./types";
+
+export const emptyStateAnimationPresets: EmptyStateAnimationPresets = {
+  none: {},
+  float: {
+    whileHover: { y: -4 },
+    transition: { type: "spring", stiffness: 260, damping: 22 },
+  },
+  fade: {
+    initial: { opacity: 0, y: 8 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.25, ease: "easeOut" },
+  },
+  "slide-up": {
+    initial: { opacity: 0, y: 16 },
+    animate: { opacity: 1, y: 0 },
+    transition: { type: "spring", stiffness: 380, damping: 28 },
+  },
+};

package/src/ui/empty-state/animated/empty-state-animated.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { emptyStateAnimationPresets } from "./animations";
+import type { EmptyStateAnimatedProps } from "./types";
+import {
+  EmptyStateBase,
+} from "../empty-state-base";
+
+export function EmptyStateAnimated(props: EmptyStateAnimatedProps) {
+  const { animation = "none" } = props;
+  const motionProps = emptyStateAnimationPresets[animation];
+  return (
+    <EmptyStateBase
+      as={motion.section}
+      initial={animation === "none" ? false : undefined}
+      {...motionProps}
+      {...props}
+    />
+  );
+}
+
+EmptyStateAnimated.displayName = "EmptyState";

package/src/ui/empty-state/animated/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+export {
+  EmptyStateAnimated,
+} from "./empty-state-animated";
+export type { EmptyStateAnimatedProps, EmptyStateAnimation, EmptyStateVariantProps, EmptyStateAnimationPresets } from "./types";
+export { emptyStateAnimationPresets } from "./animations";

package/src/ui/empty-state/animated/types.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLMotionProps } from "framer-motion";
+import type { ReactNode } from "react";
+
+import type { emptyStateVariants } from "../variants";
+import { EmptyStateProps } from "../types";
+
+export type EmptyStateAnimation = "none" | "float" | "fade" | "slide-up";
+
+export type EmptyStateVariantProps = VariantProps<typeof emptyStateVariants>;
+
+export type EmptyStateAnimatedProps = EmptyStateVariantProps &
+  Omit<EmptyStateProps, "children"> & {
+    animation?: EmptyStateAnimation;
+    children?: ReactNode;
+  };
+
+export type EmptyStatePresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "transition" | "whileHover"
+>;
+
+export type EmptyStateAnimationPresets = Record<
+  EmptyStateAnimation,
+  EmptyStatePresetMotionProps
+>;

package/src/ui/empty-state/empty-state-base.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { EmptyStateProps, EmptyStateSectionProps, EmptyStateSize } from "./types";
+import {
+  emptyStateDescriptionVariants,
+  emptyStateTitleVariants,
+  emptyStateVariants,
+} from "./variants";
+
+export const EmptyStateSizeContext = createContext<EmptyStateSize>("md");
+
+function useEmptyStateSize(): EmptyStateSize {
+  return useContext(EmptyStateSizeContext);
+}
+
+export function EmptyStateBase(props: EmptyStateProps) {
+  const {
+    className,
+    size = "md",
+    appearance,
+    align,
+    children,
+    ref,
+    as: Wrapper = "section",
+    ...rest
+  } = props;
+  const ctx = useMemo(() => size ?? "md", [size]);
+
+  return (
+    <EmptyStateSizeContext.Provider value={ctx}>
+      <Wrapper
+        ref={ref}
+        data-slot="empty-state"
+        aria-live="polite"
+        className={cn(
+          emptyStateVariants({ size, appearance, align }),
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </Wrapper>
+    </EmptyStateSizeContext.Provider>
+  );
+}
+
+EmptyStateBase.displayName = "EmptyState";
+
+export function EmptyStateIcon({
+  className,
+  children,
+}: EmptyStateSectionProps) {
+  return (
+    <div
+      data-slot="empty-state-icon"
+      className={cn("text-slate-300", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+EmptyStateIcon.displayName = "EmptyStateIcon";
+
+export function EmptyStateTitle({
+  className,
+  children,
+}: EmptyStateSectionProps) {
+  const size = useEmptyStateSize();
+  return (
+    <h2
+      data-slot="empty-state-title"
+      className={cn(emptyStateTitleVariants({ size }), className)}
+    >
+      {children}
+    </h2>
+  );
+}
+
+EmptyStateTitle.displayName = "EmptyStateTitle";
+
+export function EmptyStateDescription({
+  className,
+  children,
+}: EmptyStateSectionProps) {
+  const size = useEmptyStateSize();
+  return (
+    <p
+      data-slot="empty-state-description"
+      className={cn(emptyStateDescriptionVariants({ size }), className)}
+    >
+      {children}
+    </p>
+  );
+}
+
+EmptyStateDescription.displayName = "EmptyStateDescription";
+
+export function EmptyStateAction({
+  className,
+  children,
+}: EmptyStateSectionProps) {
+  return (
+    <div data-slot="empty-state-action" className={cn("mt-2", className)}>
+      {children}
+    </div>
+  );
+}
+
+EmptyStateAction.displayName = "EmptyStateAction";

package/src/ui/empty-state/empty-state.tsx

@@ -0,0 +1,9 @@
+// empty-state.tsx — default static entry (no framer-motion)
+import { EmptyStateBase } from "./empty-state-base";
+import type { EmptyStateProps } from "./types";
+
+export function EmptyState(props: EmptyStateProps) {
+  return <EmptyStateBase {...props} />;
+}
+
+EmptyState.displayName = "EmptyState";

package/src/ui/empty-state/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { EmptyState } from "./empty-state";
+export { EmptyStateAction, EmptyStateBase, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "./empty-state-base";
+export type { EmptyStateProps, EmptyStateSectionProps } from "./types";
+export {
+  emptyStateVariants,
+  emptyStateTitleVariants,
+  emptyStateDescriptionVariants,
+} from "./variants";

package/src/ui/empty-state/types.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+
+import type { emptyStateVariants } from "./variants";
+
+type EmptyStateVariantProps = VariantProps<typeof emptyStateVariants>;
+
+export type EmptyStateProps = EmptyStateVariantProps &
+  (Omit<ComponentPropsWithRef<"section">, "children"> & {
+    children?: ReactNode;
+    as?: ElementType;
+  });
+
+export type EmptyStateSectionProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export type EmptyStateSize = NonNullable<EmptyStateProps["size"]>;

package/src/ui/empty-state/variants.ts

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+
+export const emptyStateVariants = cva(
+  "flex w-full flex-col items-center text-center",
+  {
+    variants: {
+      size: {
+        sm: "gap-2 p-4 text-sm",
+        md: "gap-3 p-6 text-sm",
+        lg: "gap-4 p-8 text-base",
+      },
+      appearance: {
+        default: "text-slate-50",
+        ghost: "text-slate-200",
+        card: "rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
+      },
+      align: {
+        start: "items-start text-left",
+        center: "items-center text-center",
+        end: "items-end text-right",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      appearance: "default",
+      align: "center",
+    },
+  },
+);
+
+export const emptyStateTitleVariants = cva("font-semibold tracking-tight", {
+  variants: {
+    size: {
+      sm: "text-base",
+      md: "text-lg",
+      lg: "text-xl",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+export const emptyStateDescriptionVariants = cva("max-w-md text-slate-400", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: { size: "md" },
+});

package/src/ui/file-upload/file-upload.test.tsx

@@ -0,0 +1,36 @@
+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 { FileUpload } from "./file-upload";
+
+describe("FileUpload", () => {
+  it("should expose displayName", () => {
+    expect(FileUpload.displayName).toBe("FileUpload");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<FileUpload />);
+    expect(document.querySelector('[data-slot="file-upload"]')).toBeTruthy();
+  });
+
+  it("should call onFiles when user selects a file", async () => {
+    const user = userEvent.setup();
+    const onFiles = vi.fn();
+    render(<FileUpload onFiles={onFiles} />);
+    const input = document.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    const file = new File(["hello"], "notes.txt", { type: "text/plain" });
+    await user.upload(input, file);
+    expect(onFiles).toHaveBeenCalledTimes(1);
+    expect(onFiles.mock.calls[0]?.[0]?.[0]?.name).toBe("notes.txt");
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<FileUpload ref={ref} />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("file-upload");
+  });
+});

package/src/ui/file-upload/file-upload.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { FileUploadProps } from "./types";
+import { fileUploadVariants } from "./variants";
+
+export function FileUpload({
+  className,
+  onFiles,
+  accept,
+  multiple = false,
+  disabled = false,
+  name,
+  children,
+  onChange,
+  ref,
+  appearance = "idle",
+  ...rest
+}: FileUploadProps & { ref?: React.Ref<HTMLDivElement> }) {
+  const inputId = useId();
+  const [dragOver, setDragOver] = useState(false);
+
+  const emitFiles = useCallback(
+    (fileList: FileList | null) => {
+      if (!fileList?.length) {
+        return;
+      }
+      onFiles?.(Array.from(fileList));
+    },
+    [onFiles],
+  );
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event);
+      emitFiles(event.target.files);
+      event.target.value = "";
+    },
+    [emitFiles, onChange],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent<HTMLLabelElement>) => {
+      event.preventDefault();
+      setDragOver(false);
+      if (disabled) {
+        return;
+      }
+      emitFiles(event.dataTransfer.files);
+    },
+    [disabled, emitFiles],
+  );
+
+  return (
+    <div
+      ref={ref}
+      data-slot="file-upload"
+      className={cn(fileUploadVariants({ appearance }), className)}
+      {...rest}
+    >
+      <input
+        id={inputId}
+        name={name}
+        type="file"
+        className="sr-only"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        onChange={handleChange}
+        aria-hidden
+        tabIndex={-1}
+      />
+      <label
+        htmlFor={inputId}
+        className={cn(
+          "flex w-full cursor-pointer flex-col items-center gap-2",
+          disabled && "cursor-not-allowed",
+        )}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          if (!disabled) {
+            setDragOver(true);
+          }
+        }}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (!disabled) {
+            setDragOver(true);
+          }
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={handleDrop}
+      >
+        {children ?? (
+          <>
+            <span className="text-base font-semibold text-slate-100">
+              Drop files here
+            </span>
+            <span className="text-xs text-slate-400">
+              or click to browse from your device
+            </span>
+          </>
+        )}
+        {
+          dragOver && (
+            <span className="text-xs text-slate-400">
+              Drop files here
+            </span>
+          )
+        }
+      </label>
+    </div>
+  );
+}
+
+FileUpload.displayName = "FileUpload";

package/src/ui/file-upload/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FileUpload } from "./file-upload";
+export type { FileUploadProps, FileUploadVariantProps } from "./types";
+export { fileUploadVariants } from "./variants";

package/src/ui/file-upload/types.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
+
+import type { fileUploadVariants } from "./variants";
+
+export type FileUploadVariantProps = VariantProps<typeof fileUploadVariants>;
+
+export type FileUploadProps = FileUploadVariantProps &
+  Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> & {
+    /** Called when the user selects or drops files */
+    onFiles?: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Visually hidden input `name` for forms */
+    name?: string;
+    /** Optional controlled file list (not enforced; mainly for forms) */
+    children?: ReactNode;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    appearance?: FileUploadVariantProps["appearance"];
+  };

package/src/ui/file-upload/variants.ts

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+
+export const fileUploadVariants = cva(
+  "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-10 text-center text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+  {
+    variants: {
+      appearance: {
+        idle: "border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]",
+        active: "border-violet-400/70 bg-violet-500/10 text-white",
+        disabled: "cursor-not-allowed opacity-50",
+        error: "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
+        success: "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
+        warning: "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
+        info: "border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
+        neutral: "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
+        purple: "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
+        indigo: "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
+        emerald: "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
+        amber: "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
+        pink: "border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
+        orange: "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
+        teal: "border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15",
+      },
+    },
+    defaultVariants: {
+      appearance: "idle",
+    },
+  },
+);

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

@@ -0,0 +1,36 @@
+import type { InputAnimationPresets } from "./types";
+
+export const inputAnimationPresets: InputAnimationPresets = {
+  none: {},
+  lift: {
+    whileHover: { y: -1 },
+    whileFocus: { y: -1 },
+    transition: { type: "spring", stiffness: 480, damping: 32 },
+  },
+  press: {
+    whileTap: { scale: 0.99 },
+    transition: { type: "spring", stiffness: 520, damping: 30 },
+  },
+  glow: {
+    whileFocus: {
+      boxShadow:
+        "0 0 0 1px rgba(255,255,255,0.2), 0 12px 28px rgba(15,23,42,0.35)",
+    },
+    whileHover: {
+      boxShadow:
+        "0 0 0 1px rgba(255,255,255,0.12), 0 8px 20px rgba(15,23,42,0.25)",
+    },
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+  tilt: {
+    whileHover: { scale: 1.005 },
+    whileFocus: { scale: 1.008 },
+    whileTap: { scale: 0.995 },
+    transition: { type: "spring", stiffness: 380, damping: 24 },
+  },
+  bounce: {
+    whileFocus: { y: -2, scale: 1.01 },
+    whileHover: { y: -1, scale: 1.005 },
+    transition: { type: "spring", bounce: 0.35, duration: 0.4 },
+  },
+};

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { InputAnimated } from "./input-animated";
+export type { InputAnimatedProps, InputAnimation, InputAnimationPresets, InputPresetMotionProps, InputSharedAnimatedProps } from "./types";
+export { inputAnimationPresets } from "./animations";

package/src/ui/inputs/animated/input-animated.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useId } from "react";
+import { motion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import { inputAnimationPresets } from "./animations";
+import type { InputAnimatedProps } from "./types";
+import { inputVariants } from "../variants";
+
+export const InputAnimated = (props: InputAnimatedProps) => {
+  const generatedId = useId();
+
+  if (props.as === "textarea") {
+    const {
+      className,
+      appearance,
+      size,
+      animation = "none",
+      ring = true,
+      ref,
+      "aria-invalid": ariaInvalidProp,
+      errorMessage,
+      id,
+      as,
+      ...rest
+    } = props;
+
+    const controlId = id ?? generatedId;
+    const errorId = `${controlId}-error`;
+    const motionProps = inputAnimationPresets[animation];
+    const ariaInvalid =
+      ariaInvalidProp !== undefined
+        ? ariaInvalidProp
+        : appearance === "error"
+          ? true
+          : undefined;
+
+    return (
+      <>
+        <motion.textarea
+          ref={ref}
+          id={controlId}
+          data-slot="input"
+          className={cn(
+            inputVariants({ appearance, size, ring, as }),
+            className,
+          )}
+          initial={false}
+          aria-invalid={ariaInvalid}
+          aria-describedby={
+            errorMessage && appearance === "error" ? errorId : undefined
+          }
+          {...motionProps}
+          {...rest}
+        />
+        {errorMessage && appearance === "error" && (
+          <p
+            id={errorId}
+            className="mt-2 pl-4 text-sm text-rose-500 wrap-break-word"
+          >
+            {errorMessage}
+          </p>
+        )}
+      </>
+    );
+  }
+
+  const {
+    className,
+    appearance,
+    size,
+    animation = "none",
+    ring = true,
+    ref,
+    "aria-invalid": ariaInvalidProp,
+    errorMessage,
+    id,
+    as,
+    ...rest
+  } = props;
+
+  const controlId = id ?? generatedId;
+  const errorId = `${controlId}-error`;
+  const motionProps = inputAnimationPresets[animation];
+  const ariaInvalid =
+    ariaInvalidProp !== undefined
+      ? ariaInvalidProp
+      : appearance === "error"
+        ? true
+        : undefined;
+
+  return (
+    <>
+      <motion.input
+        ref={ref}
+        id={controlId}
+        data-slot="input"
+        className={cn(
+          inputVariants({ appearance, size, ring, as: as ?? "input" }),
+          className,
+        )}
+        initial={false}
+        aria-invalid={ariaInvalid}
+        aria-describedby={
+          errorMessage && appearance === "error" ? errorId : undefined
+        }
+        {...motionProps}
+        {...rest}
+      />
+      {errorMessage && appearance === "error" && (
+        <p
+          id={errorId}
+          className="mt-2 pl-4 text-sm text-rose-500 wrap-break-word"
+        >
+          {errorMessage}
+        </p>
+      )}
+    </>
+  );
+};
+
+InputAnimated.displayName = "Input";