@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

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

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ElementType,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  CardBaseProps,
+  CardDescriptionProps,
+  CardSectionProps,
+  CardSize,
+  CardTitleProps,
+} from "./types";
+import {
+  cardDescriptionVariants,
+  cardFooterVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardVariants,
+} from "./variants";
+
+const CardSizeContext = createContext<CardSize>("md");
+
+function useCardSize(): CardSize {
+  return useContext(CardSizeContext);
+}
+
+export function CardBase({
+  className,
+  appearance,
+  size = "md",
+  rounded,
+  children,
+  ref,
+  as: Wrapper = "article",
+  ...rest
+}: CardBaseProps) {
+  const ctx = useMemo(() => size ?? "md", [size]);
+
+  return (
+    <CardSizeContext.Provider value={ctx}>
+      <Wrapper
+        ref={ref}
+        data-slot="card"
+        className={cn(cardVariants({ appearance, size, rounded }), className)}
+        {...rest}
+      >
+        {children}
+      </Wrapper>
+    </CardSizeContext.Provider>
+  );
+}
+
+CardBase.displayName = "Card";
+
+export function CardHeader({ className, children }: CardSectionProps) {
+  const size = useCardSize();
+  return (
+    <header
+      data-slot="card-header"
+      className={cn(cardHeaderVariants({ size }), className)}
+    >
+      {children}
+    </header>
+  );
+}
+
+CardHeader.displayName = "CardHeader";
+
+export function CardBody({ className, children }: CardSectionProps) {
+  return (
+    <div
+      data-slot="card-body"
+      className={cn("flex flex-1 flex-col gap-2", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+CardBody.displayName = "CardBody";
+
+export function CardFooter({ className, children }: CardSectionProps) {
+  const size = useCardSize();
+  return (
+    <footer
+      data-slot="card-footer"
+      className={cn(cardFooterVariants({ size }), className)}
+    >
+      {children}
+    </footer>
+  );
+}
+
+CardFooter.displayName = "CardFooter";
+
+export function CardTitle({
+  className,
+  children,
+  as = "h3",
+  ref,
+  ...rest
+}: CardTitleProps) {
+  const size = useCardSize();
+  const Tag = as as ElementType;
+  return (
+    <Tag
+      ref={ref as never}
+      data-slot="card-title"
+      className={cn(cardTitleVariants({ size }), className)}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+CardTitle.displayName = "CardTitle";
+
+export function CardDescription({
+  className,
+  children,
+  as = "p",
+  ref,
+  ...rest
+}: CardDescriptionProps) {
+  const size = useCardSize();
+  const Tag = as as ElementType;
+  return (
+    <Tag
+      ref={ref as never}
+      data-slot="card-description"
+      className={cn(cardDescriptionVariants({ size }), className)}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+CardDescription.displayName = "CardDescription";

package/src/ui/card/card.test.tsx

@@ -0,0 +1,79 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Card,
+} from "./card";
+import { CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card-base";
+
+const CARD_SLOT = '[data-slot="card"]';
+
+function getCardRoot(container: HTMLElement = document.body) {
+  const elements = container.querySelectorAll(CARD_SLOT);
+  expect(elements.length).toBe(1);
+  return elements[0] as HTMLElement;
+}
+
+describe("Card", () => {
+  it("should set displayName on compound parts", () => {
+    expect(Card.displayName).toBe("Card");
+    expect(CardHeader.displayName).toBe("CardHeader");
+    expect(CardBody.displayName).toBe("CardBody");
+    expect(CardFooter.displayName).toBe("CardFooter");
+    expect(CardTitle.displayName).toBe("CardTitle");
+    expect(CardDescription.displayName).toBe("CardDescription");
+  });
+
+  it("should stamp data-slot on the root article", () => {
+    render(
+      <Card>
+        <CardBody>Content</CardBody>
+      </Card>,
+    );
+    const root = getCardRoot();
+    expect(root.tagName).toBe("ARTICLE");
+    expect(root.getAttribute("data-slot")).toBe("card");
+  });
+
+  it("should apply default appearance classes", () => {
+    render(<Card>Inner</Card>);
+    expect(getCardRoot().className).toMatch(/border-white\/10/);
+  });
+
+  it("should apply glass appearance when requested", () => {
+    render(<Card appearance="glass">Inner</Card>);
+    expect(getCardRoot().className).toMatch(/backdrop-blur-md/);
+  });
+
+  it("should forward ref to the article element", () => {
+    const ref = createRef<HTMLElement>();
+    render(<Card ref={ref}>R</Card>);
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+    expect(ref.current?.getAttribute("data-slot")).toBe("card");
+  });
+
+  it("should render semantic heading for CardTitle", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title text</CardTitle>
+        </CardHeader>
+      </Card>,
+    );
+    expect(
+      screen.getByRole("heading", { level: 3, name: "Title text" }),
+    ).toBeInTheDocument();
+  });
+
+  it("should allow CardTitle as h2", () => {
+    render(
+      <Card>
+        <CardTitle as="h2">Primary</CardTitle>
+      </Card>,
+    );
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Primary" }),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/card/card.tsx

@@ -0,0 +1,11 @@
+// card.tsx — default static entry (no framer-motion)
+import {
+  CardBase,
+} from "./card-base";
+import type { CardProps } from "./types";
+
+export function Card(props: CardProps) {
+  return <CardBase {...props} />;
+}
+
+Card.displayName = "Card";

package/src/ui/card/index.ts

@@ -0,0 +1,21 @@
+"use client";
+
+export {
+  Card,
+} from "./card";
+export { CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card-base";
+export type {
+  CardBaseProps,
+  CardVariantProps,
+  CardDescriptionProps,
+  CardProps,
+  CardSectionProps,
+  CardTitleProps,
+} from "./types";
+export {
+  cardVariants,
+  cardHeaderVariants,
+  cardFooterVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+} from "./variants";

package/src/ui/card/types.ts

@@ -0,0 +1,42 @@
+import type { VariantProps } from "class-variance-authority";
+import type {
+  ComponentPropsWithRef,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+} from "react";
+
+import type { cardVariants } from "./variants";
+
+export type CardVariantProps = VariantProps<typeof cardVariants>;
+
+export interface CardBaseProps extends ComponentPropsWithRef<"article"> {
+  appearance?: CardVariantProps["appearance"];
+  size?: CardVariantProps["size"];
+  rounded?: CardVariantProps["rounded"];
+  as?: ElementType;
+}
+
+export type CardProps = Omit<CardBaseProps, "as">;
+
+export type CardSectionProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export type CardTitleProps = {
+  as?: "h2" | "h3" | "h4" | "h5" | "h6";
+  className?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLHeadingElement>;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, "className" | "children">;
+
+export type CardDescriptionProps = {
+  as?: "p" | "span" | "div";
+  className?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLElement>, "className" | "children">;
+
+export type CardSize = NonNullable<CardProps["size"]>;

package/src/ui/card/variants.ts

@@ -0,0 +1,122 @@
+import { cva } from "class-variance-authority";
+
+export const cardVariants = cva(
+  [
+    "relative flex w-full flex-col overflow-hidden text-slate-50",
+    "ring-offset-slate-950 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+  ],
+  {
+    variants: {
+      appearance: {
+        default:
+          "border border-white/10 bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+        glass:
+          "border border-white/15 bg-white/10 backdrop-blur-md shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
+        outline: "border border-white/15 bg-transparent",
+        ghost: "border border-transparent bg-transparent",
+        elevated:
+          "border border-white/10 bg-slate-900/80 shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
+        sky: "border border-sky-600 bg-sky-950/70 backdrop-blur-xl",
+        rose: "border border-rose-600 bg-rose-950/70 backdrop-blur-xl",
+        purple: "border border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue":
+          "border 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 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 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 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 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 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 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 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 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: "gap-2 p-3 text-sm",
+        md: "gap-3 p-4 text-sm",
+        lg: "gap-4 p-6 text-base",
+      },
+      rounded: {
+        sm: "rounded-lg",
+        md: "rounded-xl",
+        lg: "rounded-2xl",
+        full: "rounded-3xl",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      rounded: "md",
+    },
+  },
+);
+
+export const cardHeaderVariants = cva(
+  "flex flex-col gap-1 border-b border-white/10 pb-3",
+  {
+    variants: {
+      size: {
+        sm: "pb-2",
+        md: "pb-3",
+        lg: "pb-4",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+export const cardFooterVariants = cva(
+  "flex flex-col gap-2 border-t border-white/10 pt-3",
+  {
+    variants: {
+      size: {
+        sm: "pt-2",
+        md: "pt-3",
+        lg: "pt-4",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+export const cardTitleVariants = cva(
+  "font-semibold tracking-tight text-slate-50",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+export const cardDescriptionVariants = cva("text-slate-400", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: { size: "md" },
+});

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

@@ -0,0 +1,27 @@
+import type { HTMLMotionProps } from "framer-motion";
+
+import type { DividerAnimation } from "./types";
+
+export type DividerPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "transition" | "whileHover"
+>;
+
+export type DividerAnimationPresets = Record<
+  DividerAnimation,
+  DividerPresetMotionProps
+>;
+
+export const dividerAnimationPresets: DividerAnimationPresets = {
+  none: {},
+  expand: {
+    initial: { scaleX: 0.6, opacity: 0.4 },
+    animate: { scaleX: 1, opacity: 1 },
+    transition: { duration: 0.35, ease: "easeOut" },
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.25 },
+  },
+};

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { dividerAnimationPresets } from "./animations";
+import type { DividerAnimatedProps } from "./types";
+import { DividerBase } from "../divider-base";
+
+export const DividerAnimated = (props: DividerAnimatedProps) => {
+  const { animation = "none", ...rest } = props;
+  const motionProps = dividerAnimationPresets[animation];
+
+  return (
+    <DividerBase
+      {...props}
+      as={motion.div}
+      initial={animation === "none" ? false : undefined}
+      {...motionProps}
+      {...(rest as Record<string, unknown>)}
+    />
+  );
+};
+
+DividerAnimated.displayName = "DividerAnimated";

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

@@ -0,0 +1,4 @@
+"use client";
+
+export { DividerAnimated } from "./divider-animated";
+export type { DividerAnimatedProps, DividerAnimation, DividerDomDragProps } from "./types";

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

@@ -0,0 +1,18 @@
+import type { DividerBaseProps } from "../types";
+
+export type DividerAnimation = "none" | "expand" | "fade";
+
+/** Motion `div` uses different handler types than React DOM drag/drop events. */
+export type DividerDomDragProps =
+  | "onDrag"
+  | "onDragEnd"
+  | "onDragEnter"
+  | "onDragLeave"
+  | "onDragOver"
+  | "onDragStart"
+  | "onDrop";
+
+export type DividerAnimatedProps = Omit<DividerBaseProps, "as" | DividerDomDragProps> & {
+  animation?: DividerAnimation;
+};
+

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

@@ -0,0 +1,80 @@
+"use client";
+
+import { cn } from "../../lib/utils";
+
+import type { DividerBaseProps } from "./types";
+import {
+  dividerLabelVariants,
+  dividerLineVariants,
+  dividerToneVariants,
+  dividerVariants,
+} from "./variants";
+
+
+export function DividerBase({
+  className,
+  appearance,
+  orientation,
+  size,
+  label,
+  children,
+  ref,
+  as: Wrapper = "div",
+  ...rest
+}: DividerBaseProps) {
+  const slot = label ?? children;
+
+  if (!slot) {
+    return (
+      <Wrapper
+        ref={ref}
+        data-slot="divider"
+        role="separator"
+        aria-orientation={
+          orientation === "vertical" ? "vertical" : "horizontal"
+        }
+        className={cn(
+          dividerToneVariants({ appearance }),
+          orientation === "horizontal"
+            ? "flex w-full min-h-px flex-row items-stretch"
+            : "flex h-full min-h-8 w-auto min-w-0 flex-col items-stretch self-stretch",
+          className,
+        )}
+        {...rest}
+      >
+        <span
+          className={cn(dividerLineVariants({ orientation, size }))}
+          aria-hidden
+        />
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper
+      ref={ref}
+      data-slot="divider"
+      role="separator"
+      aria-orientation={orientation === "vertical" ? "vertical" : "horizontal"}
+      className={cn(
+        dividerVariants({ appearance, orientation, size }),
+        className,
+      )}
+      {...rest}
+    >
+      <span
+        className={cn(dividerLineVariants({ orientation, size }))}
+        aria-hidden
+      />
+      <span data-slot="divider-label" className={dividerLabelVariants()}>
+        {slot}
+      </span>
+      <span
+        className={cn(dividerLineVariants({ orientation, size }))}
+        aria-hidden
+      />
+    </Wrapper>
+  );
+}
+
+DividerBase.displayName = "Divider";

package/src/ui/divider/divider.tsx

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

package/src/ui/divider/index.ts

@@ -0,0 +1,14 @@
+"use client";
+
+export { Divider } from "./divider";
+export type {
+  DividerBaseProps,
+  DividerProps,
+  DividerVariantProps,
+} from "./types";
+export {
+  dividerVariants,
+  dividerToneVariants,
+  dividerLineVariants,
+  dividerLabelVariants,
+} from "./variants";

package/src/ui/divider/types.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+
+import type { dividerVariants } from "./variants";
+
+export type DividerVariantProps = VariantProps<typeof dividerVariants>;
+
+export interface DividerBaseProps extends ComponentPropsWithRef<"div"> {
+  appearance?: DividerVariantProps["appearance"];
+  orientation?: DividerVariantProps["orientation"];
+  size?: DividerVariantProps["size"];
+  /** Optional label between divider lines. */
+  label?: ReactNode;
+  children?: ReactNode;
+  as?: ElementType;
+}
+
+export type DividerProps = Omit<DividerBaseProps, "as">;