@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/table/variants.ts

@@ -0,0 +1,105 @@
+import { cva } from "class-variance-authority";
+
+export const tableVariants = cva(
+  "w-full table-auto border-collapse caption-bottom text-sm text-slate-200 md:table-fixed",
+  {
+    variants: {
+      appearance: {
+        default: "",
+        striped: "",
+        bordered: "border border-white/10",
+        ghost: "",
+        sky: "border border-sky-600",
+        rose: "border border-rose-600",
+        purple: "border border-purple-600",
+        pink: "border border-pink-600",
+        orange: "border border-orange-600",
+        yellow: "border border-yellow-600",
+        teal: "border border-teal-600",
+        indigo: "border border-indigo-600",
+        emerald: "border border-emerald-600",
+        gray: "border border-gray-600",
+        amber: "border border-amber-600",
+        violet: "border border-violet-600",
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+      stickyHeader: {
+        true: "",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      stickyHeader: false,
+    },
+  },
+);
+
+export const tableRowVariants = cva(
+  "border-b border-white/5 transition-colors data-[state=selected]:bg-white/[0.06]",
+  {
+    variants: {
+      appearance: {
+        default: "",
+        striped: "odd:bg-white/[0.03]",
+        bordered: "",
+        ghost: "border-transparent hover:bg-white/[0.03]",
+        sky: "border-sky-600 hover:bg-sky-600",
+        rose: "border-rose-600 hover:bg-rose-900",
+        purple: "border-purple-600 hover:bg-purple-900",
+        pink: "border-pink-600 hover:bg-pink-900",
+        orange: "border-orange-600 hover:bg-orange-900",
+        yellow: "border-yellow-600 hover:bg-yellow-900",
+        teal: "border-teal-600 hover:bg-teal-900",
+        indigo: "border-indigo-600 hover:bg-indigo-900",
+        emerald: "border-emerald-600 hover:bg-emerald-900",
+        gray: "border-gray-600 hover:bg-gray-900",
+        amber: "border-amber-600 hover:bg-amber-900",
+        violet: "border-violet-600 hover:bg-violet-900",
+      },
+    },
+    defaultVariants: { appearance: "default" },
+  },
+);
+
+export const tableCellVariants = cva(
+  "min-w-0 border p-3 align-middle break-words",
+  {
+    variants: {
+      appearance: {
+        default: "border-white/10",
+        striped: "border-white/10",
+        bordered: "border-white/10",
+        ghost: "border-white/10",
+        sky: "border-sky-600",
+        rose: "border-rose-600",
+        purple: "border-purple-600",
+        pink: "border-pink-600",
+        orange: "border-orange-600",
+        yellow: "border-yellow-600",
+        teal: "border-teal-600",
+        indigo: "border-indigo-600",
+        emerald: "border-emerald-600",
+        gray: "border-gray-600",
+        amber: "border-amber-600",
+        violet: "border-violet-600",
+      },
+      size: {
+        sm: "p-2",
+        md: "p-3",
+        lg: "p-4",
+      },
+      textAlign: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+      },
+    },
+    defaultVariants: { appearance: "default", size: "md" },
+  },
+);

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

@@ -0,0 +1,48 @@
+import type { TabsAnimationPresets, TabsOrientation, TabsPresetMotionProps } from "./types";
+import type { TabsAnimation } from "./types";
+
+const easeOutExpo: [number, number, number, number] = [0.16, 1, 0.3, 1];
+
+export const tabsContentAnimationPresets: TabsAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0, y: 6 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.2, ease: easeOutExpo },
+  },
+  slide: {
+    initial: { opacity: 0, y: 8 },
+    animate: { opacity: 1, y: 0 },
+    transition: {
+      type: "spring",
+      stiffness: 420,
+      damping: 34,
+      mass: 0.82,
+    },
+  },
+};
+
+export function getTabsContentMotionProps(
+  animation: TabsAnimation,
+  orientation: TabsOrientation,
+  reducedMotion: boolean,
+): TabsPresetMotionProps {
+  if (reducedMotion || animation === "none") {
+    return {};
+  }
+  if (animation === "fade") {
+    return tabsContentAnimationPresets.fade;
+  }
+  if (animation === "slide") {
+    const offset = 12;
+    return {
+      initial:
+        orientation === "horizontal"
+          ? { opacity: 0, x: offset, y: 0 }
+          : { opacity: 0, x: 0, y: offset },
+      animate: { opacity: 1, x: 0, y: 0 },
+      transition: { duration: 0.22, ease: easeOutExpo },
+    };
+  }
+  return {};
+}

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

@@ -0,0 +1,8 @@
+"use client";
+
+export { TabsContentAnimated } from "./tabs-content-animated";
+export type { TabsContentAnimatedProps, TabsAnimation, TabsAnimationPresets, TabsOrientation, TabsPresetMotionProps } from "./types";
+export {
+  getTabsContentMotionProps,
+  tabsContentAnimationPresets,
+} from "./animations";

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

@@ -0,0 +1,46 @@
+"use client";
+
+import { motion, prefersReducedMotion, useReducedMotion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import { getTabsContentMotionProps } from "./animations";
+import type { TabsContentAnimatedProps } from "./types";
+import { useTabs } from "../tabs-base";
+
+export function TabsContentAnimated({
+  value,
+  children,
+  className,
+  animation = "fade",
+}: TabsContentAnimatedProps) {
+  const {
+    value: activeValue,
+    orientation,
+    tabTriggerId,
+    tabPanelId,
+  } = useTabs();
+  const prefersReducedMotion = useReducedMotion();
+
+  if (activeValue !== value) return null;
+
+  const motionProps = getTabsContentMotionProps(
+    animation,
+    orientation,
+    Boolean(prefersReducedMotion),
+  );
+
+  return (
+    <motion.div
+      id={tabPanelId(value)}
+      role="tabpanel"
+      aria-labelledby={tabTriggerId(value)}
+      {...motionProps}
+      className={cn("mt-2", className)}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+TabsContentAnimated.displayName = "TabsContent";

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

@@ -0,0 +1,24 @@
+import type { HTMLMotionProps } from "framer-motion";
+import type { ReactNode } from "react";
+import type { TabsValue } from "../types";
+
+export type TabsAnimation = "none" | "fade" | "slide";
+
+export type TabsPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+    "initial" | "animate" | "transition"
+  >;
+
+  export type TabsAnimationPresets = Record<TabsAnimation, TabsPresetMotionProps>;
+
+export type TabsOrientation = "horizontal" | "vertical";
+
+export type TabsContentAnimatedProps = {
+  value: TabsValue;
+  children: ReactNode;
+  className?: string;
+  animation?: TabsAnimation;
+} & Omit<
+  HTMLMotionProps<"div">,
+  "children" | "className" | "role" | "id" | "aria-labelledby"
+>;

package/src/ui/tabs/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, TabsContext, useTabs } from "./tabs";
+export type {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsTriggerProps,
+} from "./types";
+export { tabsListVariants, tabsTriggerVariants } from "./variants";

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

@@ -0,0 +1,185 @@
+"use client";
+
+import {
+  createContext,
+  KeyboardEvent,
+  useContext,
+  useId,
+  useState,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+import {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsTriggerProps,
+  TabsValue,
+  TabsContextType,
+} from "./types";
+import { tabsListVariants, tabsTriggerVariants } from "./variants";
+
+export const TabsContext = createContext<TabsContextType | null>(null);
+
+export const useTabs = () => {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs components must be used within Tabs");
+  return ctx;
+};
+
+export function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  variant,
+  size,
+  appearance,
+  children,
+  className,
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const idPrefix = useId();
+
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+
+  const setValue = (val: string) => {
+    if (!isControlled) setInternalValue(val);
+    onValueChange?.(val);
+  };
+
+  const tabTriggerId = (tabValue: TabsValue) =>
+    `${idPrefix}zentauri-tab-${tabValue}`;
+  const tabPanelId = (tabValue: TabsValue) =>
+    `${idPrefix}zentauri-panel-${tabValue}`;
+
+  return (
+    <TabsContext.Provider
+      value={{
+        value: currentValue,
+        setValue,
+        orientation,
+        size,
+        variant,
+        appearance,
+        tabTriggerId,
+        tabPanelId,
+      }}
+    >
+      <div data-slot="tabs" className={cn("w-full", className)}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ children, className, ...props }: TabsListProps) {
+  const { orientation, size } = useTabs();
+
+  return (
+    <div
+      role="tablist"
+      aria-orientation={orientation}
+      className={cn(tabsListVariants({ orientation, size }), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({
+  value,
+  children,
+  disabled,
+  className,
+  ...props
+}: TabsTriggerProps) {
+  const {
+    value: activeValue,
+    setValue,
+    tabTriggerId,
+    tabPanelId,
+    size,
+    appearance,
+    variant,
+  } = useTabs();
+
+  const isActive = activeValue === value;
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    const triggers = Array.from(
+      document.querySelectorAll('[role="tab"]'),
+    ) as HTMLElement[];
+
+    const index = triggers.findIndex((el) => el === e.currentTarget);
+
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      triggers[index + 1]?.focus();
+    }
+
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      triggers[index - 1]?.focus();
+    }
+
+    if (e.key === "Home") {
+      e.preventDefault();
+      triggers[0]?.focus();
+    }
+
+    if (e.key === "End") {
+      e.preventDefault();
+      triggers[triggers.length - 1]?.focus();
+    }
+  };
+
+  return (
+    <button
+      id={tabTriggerId(value)}
+      type="button"
+      role="tab"
+      data-state={isActive ? "active" : "inactive"}
+      aria-selected={isActive}
+      aria-controls={tabPanelId(value)}
+      disabled={disabled}
+      onClick={() => setValue(value)}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        tabsTriggerVariants({ size, appearance, variant }),
+        className,
+        "cursor-pointer",
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({
+  value,
+  children,
+  className,
+  as: Wrapper = "div",
+  ...props
+}: TabsContentProps) {
+  const { value: activeValue, tabTriggerId, tabPanelId } = useTabs();
+
+  if (activeValue !== value) return null;
+
+  return (
+    <Wrapper
+      id={tabPanelId(value)}
+      role="tabpanel"
+      aria-labelledby={tabTriggerId(value)}
+      className={cn("mt-2", className)}
+      {...props}
+    >
+      {children}
+    </Wrapper>
+  );
+}

package/src/ui/tabs/tabs.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("Tabs", () => {
+  it("should stamp data-slot on root", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs"]')).toBeTruthy();
+  });
+
+  it("should show matching tab panel", () => {
+    render(
+      <Tabs defaultValue="b">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+        <TabsContent value="b">Panel B</TabsContent>
+      </Tabs>,
+    );
+    expect(screen.getByRole("tabpanel", { name: "B" })).toHaveTextContent(
+      "Panel B",
+    );
+  });
+
+  it("should switch tab on trigger click", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+        <TabsContent value="b">Panel B</TabsContent>
+      </Tabs>,
+    );
+    await user.click(screen.getByRole("tab", { name: "B" }));
+    await waitFor(() => {
+      expect(screen.getByText("Panel B")).toBeInTheDocument();
+    });
+  });
+});

package/src/ui/tabs/tabs.tsx

@@ -0,0 +1,2 @@
+// tabs.tsx — default static entry (no framer-motion on content)
+export { Tabs, TabsContent, TabsList, TabsTrigger, TabsContext, useTabs } from "./tabs-base";

package/src/ui/tabs/types.ts

@@ -0,0 +1,88 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+export type TabsValue = string;
+
+export type TabsProps = {
+  value?: TabsValue;
+  defaultValue?: TabsValue;
+  onValueChange?: (value: TabsValue) => void;
+  orientation?: "horizontal" | "vertical";
+  variant?: "default" | "underline" | "pills";
+  size?: "sm" | "md" | "lg";
+  appearance?:
+    | "default"
+    | "sky"
+    | "rose"
+    | "purple"
+    | "pink"
+    | "orange"
+    | "yellow"
+    | "teal"
+    | "indigo"
+    | "emerald"
+    | "gray"
+    | "gradient-blue"
+    | "gradient-green"
+    | "gradient-red"
+    | "gradient-yellow"
+    | "gradient-purple"
+    | "gradient-teal"
+    | "gradient-indigo"
+    | "gradient-pink"
+    | "gradient-orange";
+  children: ReactNode;
+  className?: string;
+};
+
+export type TabsListProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type TabsTriggerProps = {
+  value: TabsValue;
+  children: ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+
+export type TabsContentProps = {
+  as?: ElementType;
+  value: TabsValue;
+  children: ReactNode;
+  className?: string;
+} & Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children" | "className" | "role" | "id" | "aria-labelledby"
+>;
+
+export type TabsContextType = {
+  value: TabsValue | undefined;
+  setValue: (value: TabsValue) => void;
+  orientation: "horizontal" | "vertical";
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "underline" | "pills";
+  appearance?:
+    | "default"
+    | "sky"
+    | "rose"
+    | "purple"
+    | "pink"
+    | "orange"
+    | "yellow"
+    | "teal"
+    | "indigo"
+    | "emerald"
+    | "gray"
+    | "gradient-blue"
+    | "gradient-green"
+    | "gradient-red"
+    | "gradient-yellow"
+    | "gradient-purple"
+    | "gradient-teal"
+    | "gradient-indigo"
+    | "gradient-pink"
+    | "gradient-orange";
+  tabTriggerId: (value: TabsValue) => string;
+  tabPanelId: (value: TabsValue) => string;
+};

package/src/ui/tabs/variants.ts

@@ -0,0 +1,70 @@
+import { cva } from "class-variance-authority";
+
+export const tabsListVariants = cva("flex items-center gap-1", {
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      underline: "border-b-2 border-transparent",
+      pills: "rounded-md",
+    },
+    size: {
+      sm: "text-sm p-1",
+      md: "text-base p-1.5",
+      lg: "text-lg p-2",
+    },
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    orientation: "horizontal",
+  },
+});
+
+export const tabsTriggerVariants = cva(
+  "px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring",
+  {
+    variants: {
+      appearance: {
+        default: "bg-transparent",
+        sky: "bg-sky-500/75",
+        rose: "bg-rose-500/75",
+        purple: "bg-purple-500/75",
+        pink: "bg-pink-500/75",
+        orange: "bg-orange-500/75",
+        yellow: "bg-yellow-500/75",
+        teal: "bg-teal-500/75",
+        indigo: "bg-indigo-500/75",
+        emerald: "bg-emerald-500/75",
+        gray: "bg-gray-500/75",
+        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600",
+      },
+      variant: {
+        default: "data-[state=active]:bg-background",
+        underline:
+          "border-b-2 border-transparent data-[state=active]:border-primary rounded-none",
+        pills: "data-[state=active]:bg-primary data-[state=active]:text-white",
+      },
+      size: {
+        sm: "px-2 py-1",
+        md: "px-3 py-1.5",
+        lg: "px-4 py-2",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      variant: "default",
+      size: "md",
+    },
+  },
+);

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

@@ -0,0 +1,17 @@
+import type { ToastAnimationPresets } from "./types";
+
+export const toastAnimationPresets: ToastAnimationPresets = {
+  none: {},
+  slide: {
+    initial: { opacity: 0, x: 24 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 16 },
+    transition: { type: "spring", stiffness: 380, damping: 28 },
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.18 },
+  },
+};

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

@@ -0,0 +1,9 @@
+"use client";
+
+export { ToastViewportAnimated, ToastAnimated } from "./toast-animated";
+export { toastAnimationPresets } from "./animations";
+export type {
+  ToastAnimation,
+  ToastAnimationPresets,
+  ToastPresetMotionProps,
+} from "./types";