@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

package/src/ui/stepper/stepper.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useMemo,
+  type Ref,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  StepperCtx,
+  StepperDescriptionProps,
+  StepperIndicatorProps,
+  StepperItemProps,
+  StepperProps,
+  StepperTitleProps,
+} from "./types";
+import {
+  stepperIndicatorVariants,
+  stepperItemVariants,
+  stepperVariants,
+} from "./variants";
+
+
+const StepperContext = createContext<StepperCtx | null>(null);
+
+function useStepper(component: string): StepperCtx {
+  const ctx = useContext(StepperContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Stepper>`);
+  }
+  return ctx;
+}
+
+const StepperIndexContext = createContext<number | null>(null);
+
+function useStepperIndex(component: string): number {
+  const index = useContext(StepperIndexContext);
+  if (index === null) {
+    throw new Error(`${component} must be used within <StepperItem>`);
+  }
+  return index;
+}
+
+
+export function Stepper({
+  className,
+  orientation = "horizontal",
+  size = "md",
+  children,
+  ref,
+  ...rest
+}: StepperProps & { ref?: Ref<HTMLDivElement> }) {
+  const items = useMemo(
+    () => Children.toArray(children).filter(isValidElement),
+    [children],
+  );
+  const ctx = useMemo(
+    () => ({
+      orientation: orientation ?? "horizontal",
+      size: size ?? "md",
+      total: items.length,
+    }),
+    [items.length, orientation, size],
+  );
+
+  return (
+    <StepperContext.Provider value={ctx}>
+      <div
+        ref={ref}
+        data-slot="stepper"
+        role="list"
+        className={cn(stepperVariants({ orientation }), className)}
+        {...rest}
+      >
+        {items.map((child, index) => (
+          <StepperIndexContext.Provider key={index} value={index}>
+            {child}
+          </StepperIndexContext.Provider>
+        ))}
+      </div>
+    </StepperContext.Provider>
+  );
+}
+
+Stepper.displayName = "Stepper";
+
+export function StepperItem({
+  className,
+  ref,
+  children,
+  ...rest
+}: StepperItemProps & { ref?: React.Ref<HTMLDivElement> }) {
+  const { orientation } = useStepper("StepperItem");
+  return (
+    <div
+      ref={ref}
+      data-slot="stepper-item"
+      role="listitem"
+      className={cn(stepperItemVariants({ orientation }), className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+StepperItem.displayName = "StepperItem";
+
+export function StepperIndicator({
+  className,
+  ref,
+  children,
+  appearance,
+  ...rest
+}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {
+  const { size } = useStepper("StepperIndicator");
+  const index = useStepperIndex("StepperIndicator");
+  return (
+    <div
+      ref={ref}
+      data-slot="stepper-indicator"
+      className={cn(stepperIndicatorVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      {children ?? index + 1}
+    </div>
+  );
+}
+
+StepperIndicator.displayName = "StepperIndicator";
+
+export function StepperTitle({
+  className,
+  ref,
+  ...rest
+}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      data-slot="stepper-title"
+      className={cn(
+        "mt-3 text-sm font-semibold",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+StepperTitle.displayName = "StepperTitle";
+
+export function StepperDescription({
+  className,
+  ref,
+  ...rest
+}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {
+  return (
+    <p
+      ref={ref}
+      data-slot="stepper-description"
+      className={cn("mt-1 text-xs text-slate-400", className)}
+      {...rest}
+    />
+  );
+}
+
+StepperDescription.displayName = "StepperDescription";

package/src/ui/stepper/types.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import type { stepperIndicatorVariants, stepperVariants } from "./variants";
+
+type StepperVariantProps = VariantProps<typeof stepperVariants>;
+
+export type StepperProps = StepperVariantProps & {
+  size?: VariantProps<typeof stepperIndicatorVariants>["size"];
+  children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+
+export type StepperItemProps = ComponentPropsWithoutRef<"div"> & {
+  children?: ReactNode;
+};
+
+export type StepperIndicatorProps = ComponentPropsWithoutRef<"div"> & {
+  children?: ReactNode;
+  appearance?: StepperAppearance;
+};
+
+export type StepperTitleProps = ComponentPropsWithoutRef<"div">;
+
+export type StepperDescriptionProps = ComponentPropsWithoutRef<"p">;
+
+export type StepperAppearance = VariantProps<typeof stepperIndicatorVariants>["appearance"];
+
+export type StepperCtx = {
+  orientation: NonNullable<StepperProps["orientation"]>;
+  size: NonNullable<StepperProps["size"]>;
+  total: number;
+};

package/src/ui/stepper/variants.ts

@@ -0,0 +1,69 @@
+import { cva } from "class-variance-authority";
+
+export const stepperVariants = cva("flex w-full", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row flex-wrap items-start gap-4",
+      vertical: "flex-col gap-6",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export const stepperItemVariants = cva("relative flex gap-3", {
+  variants: {
+    orientation: {
+      horizontal: "min-w-0 flex-col items-center text-center",
+      vertical: "flex-row items-start text-left",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export const stepperIndicatorVariants = cva(
+  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
+  {
+    variants: {
+      appearance: {
+        complete:
+          "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        current:
+          "border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50",
+        upcoming: "border-white/15 bg-white/5 text-slate-400",
+        sky: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
+        rose: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
+        purple: "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        pink: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        orange: "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+        yellow: "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        teal: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        indigo: "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        emerald: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
+        gray: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
+        violet: "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
+        "gradient-blue": "border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30",
+        "gradient-green": "border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30",
+        "gradient-red": "border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30",
+        "gradient-yellow": "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
+        "gradient-purple": "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
+        "gradient-teal": "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
+        "gradient-indigo": "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
+        "gradient-pink": "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
+        "gradient-orange": "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
+      },
+      size: {
+        sm: "size-8 text-xs",
+        md: "size-9 text-sm",
+        lg: "size-10 text-base",
+      },
+    },
+    defaultVariants: {
+      appearance: "upcoming",
+      size: "md",
+    },
+  },
+);

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

@@ -0,0 +1,9 @@
+import type { TableRowAnimationPresets } from "./types";
+
+export const tableAnimationPresets: TableRowAnimationPresets = {
+  none: {},
+  hover: {
+    whileHover: { backgroundColor: "rgba(255,255,255,0.05)" },
+    transition: { duration: 0.15 },
+  },
+};

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

@@ -0,0 +1,15 @@
+"use client";
+
+export {
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+} from "../table-base";
+export { TableRowAnimated } from "./table-animated";
+export type { TableAnimatedProps, TableRowAnimationPresets, TableRowPresetMotionProps } from "./types";
+export {
+  tableAnimationPresets,
+} from "./animations";

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

@@ -0,0 +1,15 @@
+"use client";
+import { tableAnimationPresets } from "./animations";
+import type { TableSectionProps } from "../types";
+import { motion } from "framer-motion";
+import { TableRow } from "../table-base";
+
+export const TableRowAnimated = (
+  props: TableSectionProps & { ref?: React.Ref<HTMLTableRowElement> },
+) => {
+  const { rowAnimation = "hover" } = props;
+  const motionProps = tableAnimationPresets[rowAnimation];
+  return (
+    <TableRow {...props} as={motion.tr} initial={false} {...motionProps} />
+  );
+};

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

@@ -0,0 +1,16 @@
+import type { TableAnimation, TableProps } from "../types";
+import type { HTMLMotionProps } from "framer-motion";
+
+export type TableAnimatedProps = TableProps & {
+  rowAnimation?: TableAnimation;
+};
+
+export type TableRowPresetMotionProps = Pick<
+  HTMLMotionProps<"tr">,
+  "initial" | "animate" | "whileHover" | "transition"
+>;
+
+export type TableRowAnimationPresets = Record<
+  TableAnimation,
+  TableRowPresetMotionProps
+>;

package/src/ui/table/index.ts

@@ -0,0 +1,22 @@
+"use client";
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableContext,
+  useTableContext,
+} from "./table";
+export type {
+  TableAnimation,
+  TableCellProps,
+  TableHeadCellProps,
+  TableProps,
+  TableSectionProps,
+} from "./types";
+export { tableVariants, tableRowVariants, tableCellVariants } from "./variants";

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

@@ -0,0 +1,197 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  TableCtx,
+  TableCellProps,
+  TableHeadCellProps,
+  TableProps,
+  TableSectionProps,
+} from "./types";
+import { tableCellVariants, tableRowVariants, tableVariants } from "./variants";
+
+export const TableContext = createContext<TableCtx | null>(null);
+
+export function useTableContext(component: string): TableCtx {
+  const ctx = useContext(TableContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Table>`);
+  }
+  return ctx;
+}
+
+export function TableBase(props: TableProps) {
+  const {
+    className,
+    appearance = "default",
+    size = "md",
+    textAlign = "left",
+    stickyHeader = false,
+    children,
+    ref,
+    ...rest
+  } = props;
+  const ctx = useMemo(
+    () => ({
+      appearance: appearance ?? "default",
+      size: size ?? "md",
+      stickyHeader: Boolean(stickyHeader),
+      rowAnimation: "none" as const,
+      textAlign,
+    }),
+    [appearance, size, stickyHeader, textAlign],
+  );
+
+  return (
+    <TableContext.Provider value={ctx}>
+      <div data-slot="table-scroll" className="relative w-full overflow-auto">
+        <table
+          ref={ref}
+          data-slot="table"
+          role="table"
+          className={cn(
+            tableVariants({ appearance, size, stickyHeader }),
+            "w-full min-w-0 table",
+            className,
+          )}
+          {...rest}
+        >
+          {children}
+        </table>
+      </div>
+    </TableContext.Provider>
+  );
+}
+
+TableBase.displayName = "Table";
+
+export function TableHeader({ className, children }: TableSectionProps) {
+  const { stickyHeader } = useTableContext("TableHeader");
+  const stickyClass = stickyHeader
+    ? "sticky top-0 z-10 bg-slate-950/95 backdrop-blur"
+    : "";
+  return (
+    <thead data-slot="table-header" className={cn(stickyClass, className)}>
+      {children}
+    </thead>
+  );
+}
+
+TableHeader.displayName = "TableHeader";
+
+export function TableBody({ className, children }: TableSectionProps) {
+  return (
+    <tbody data-slot="table-body" className={cn(className)}>
+      {children}
+    </tbody>
+  );
+}
+
+TableBody.displayName = "TableBody";
+
+export function TableFooter({ className, children }: TableSectionProps) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-white/10 bg-white/3 font-medium",
+        className,
+      )}
+    >
+      {children}
+    </tfoot>
+  );
+}
+
+TableFooter.displayName = "TableFooter";
+
+export function TableRow({
+  className,
+  children,
+  ref,
+  as: Wrapper = "tr",
+  ...rest
+}: TableSectionProps & { ref?: React.Ref<HTMLTableRowElement> }) {
+  const { appearance } = useTableContext("TableRow");
+
+  return (
+    <tr
+      ref={ref}
+      data-slot="table-row"
+      className={cn(tableRowVariants({ appearance }), className)}
+      {...rest}
+    >
+      {children}
+    </tr>
+  );
+}
+
+TableRow.displayName = "TableRow";
+
+export function TableHead({
+  className,
+  children,
+  scope = "col",
+  sortDirection,
+  ref,
+  ...rest
+}: TableHeadCellProps) {
+  const { appearance, size, textAlign } = useTableContext("TableHead");
+  return (
+    <th
+      ref={ref}
+      data-slot="table-head"
+      scope={scope}
+      aria-sort={sortDirection}
+      className={cn(
+        tableCellVariants({ appearance, size, textAlign }),
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </th>
+  );
+}
+
+TableHead.displayName = "TableHead";
+
+export function TableCell({
+  className,
+  children,
+  ref,
+  ...rest
+}: TableCellProps) {
+  const { appearance, size, textAlign } = useTableContext("TableCell");
+  return (
+    <td
+      ref={ref}
+      data-slot="table-cell"
+      className={cn(
+        tableCellVariants({ appearance, size, textAlign }),
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </td>
+  );
+}
+
+TableCell.displayName = "TableCell";
+
+export function TableCaption({ className, children }: TableSectionProps) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-3 text-left text-xs text-slate-500", className)}
+    >
+      {children}
+    </caption>
+  );
+}
+
+TableCaption.displayName = "TableCaption";

package/src/ui/table/table.tsx

@@ -0,0 +1,13 @@
+// table.tsx — default static entry (no framer-motion)
+export {
+  TableBase as Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableContext,
+  useTableContext,
+} from "./table-base";

package/src/ui/table/types.ts

@@ -0,0 +1,47 @@
+import type { VariantProps } from "class-variance-authority";
+import type {
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from "react";
+
+import type { tableVariants } from "./variants";
+
+export type TableAnimation = "none" | "hover";
+
+type TableVariantProps = VariantProps<typeof tableVariants>;
+
+export type TableProps = TableVariantProps &
+  Omit<HTMLAttributes<HTMLTableElement>, "children"> & {
+    children?: ReactNode;
+    ref?: Ref<HTMLTableElement>;
+    textAlign?: "left" | "center" | "right";
+  };
+
+export type TableSectionProps = {
+  as?: ElementType;
+  className?: string;
+  children?: ReactNode;
+  rowAnimation?: TableAnimation;
+};
+
+export type TableHeadCellProps = ThHTMLAttributes<HTMLTableCellElement> & {
+  sortDirection?: "ascending" | "descending" | "none";
+  ref?: Ref<HTMLTableCellElement>;
+};
+
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+  ref?: Ref<HTMLTableCellElement>;
+  textAlign?: "left" | "center" | "right";
+};
+
+export type TableCtx = {
+  appearance: NonNullable<TableProps["appearance"]>;
+  size: NonNullable<TableProps["size"]>;
+  stickyHeader: boolean;
+  rowAnimation: TableAnimation;
+  textAlign: NonNullable<TableCellProps["textAlign"]>;
+};