feat: add empty state and expand overlay qa

2026-03-19 19:00:36 +08:00
parent f318f94c9a
commit 132bb6961d
20 changed files with 1094 additions and 6 deletions
@@ -0,0 +1,123 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import {
+  emptyStateActionsVariants,
+  emptyStateDescriptionVariants,
+  emptyStateEyebrowVariants,
+  emptyStateHeaderVariants,
+  emptyStateMediaVariants,
+  emptyStateTitleVariants,
+  emptyStateVariants
+} from "./empty-state.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export type EmptyStateProps = ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof emptyStateVariants>;
+
+export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(
+  { className, tone, ...props },
+  ref
+) {
+  return (
+    <div
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({ tone })}
+      className={cn(emptyStateVariants({ tone }), className)}
+      ref={ref}
+    />
+  );
+});
+
+export type EmptyStateMediaProps = ComponentPropsWithoutRef<"div">;
+
+export const EmptyStateMedia = forwardRef<HTMLDivElement, EmptyStateMediaProps>(
+  function EmptyStateMedia({ className, ...props }, ref) {
+    return (
+      <div
+        {...props}
+        {...createSlot("media")}
+        className={cn(emptyStateMediaVariants(), className)}
+        ref={ref}
+      />
+    );
+  }
+);
+
+export type EmptyStateHeaderProps = ComponentPropsWithoutRef<"div">;
+
+export const EmptyStateHeader = forwardRef<HTMLDivElement, EmptyStateHeaderProps>(
+  function EmptyStateHeader({ className, ...props }, ref) {
+    return (
+      <div
+        {...props}
+        {...createSlot("header")}
+        className={cn(emptyStateHeaderVariants(), className)}
+        ref={ref}
+      />
+    );
+  }
+);
+
+export type EmptyStateEyebrowProps = ComponentPropsWithoutRef<"p">;
+
+export const EmptyStateEyebrow = forwardRef<HTMLParagraphElement, EmptyStateEyebrowProps>(
+  function EmptyStateEyebrow({ className, ...props }, ref) {
+    return (
+      <p
+        {...props}
+        {...createSlot("eyebrow")}
+        className={cn(emptyStateEyebrowVariants(), className)}
+        ref={ref}
+      />
+    );
+  }
+);
+
+export type EmptyStateTitleProps = ComponentPropsWithoutRef<"h3">;
+
+export const EmptyStateTitle = forwardRef<HTMLHeadingElement, EmptyStateTitleProps>(
+  function EmptyStateTitle({ className, ...props }, ref) {
+    return (
+      <h3
+        {...props}
+        {...createSlot("label")}
+        className={cn(emptyStateTitleVariants(), className)}
+        ref={ref}
+      />
+    );
+  }
+);
+
+export type EmptyStateDescriptionProps = ComponentPropsWithoutRef<"p">;
+
+export const EmptyStateDescription = forwardRef<
+  HTMLParagraphElement,
+  EmptyStateDescriptionProps
+>(function EmptyStateDescription({ className, ...props }, ref) {
+  return (
+    <p
+      {...props}
+      {...createSlot("description")}
+      className={cn(emptyStateDescriptionVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export type EmptyStateActionsProps = ComponentPropsWithoutRef<"div">;
+
+export const EmptyStateActions = forwardRef<HTMLDivElement, EmptyStateActionsProps>(
+  function EmptyStateActions({ className, ...props }, ref) {
+    return (
+      <div
+        {...props}
+        {...createSlot("actions")}
+        className={cn(emptyStateActionsVariants(), className)}
+        ref={ref}
+      />
+    );
+  }
+);