130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
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(
|
|
{ align, className, layout, tone, ...props },
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
{...createSlot("root")}
|
|
{...createDataAttributes({ align, layout, tone })}
|
|
className={cn(emptyStateVariants({ align, layout, tone }), className)}
|
|
ref={ref}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export type EmptyStateMediaProps = ComponentPropsWithoutRef<"div"> &
|
|
VariantProps<typeof emptyStateMediaVariants>;
|
|
|
|
export const EmptyStateMedia = forwardRef<HTMLDivElement, EmptyStateMediaProps>(
|
|
function EmptyStateMedia({ className, size, ...props }, ref) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
{...createSlot("media")}
|
|
{...createDataAttributes({ size })}
|
|
className={cn(emptyStateMediaVariants({ size }), className)}
|
|
ref={ref}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
export type EmptyStateHeaderProps = ComponentPropsWithoutRef<"div"> &
|
|
VariantProps<typeof emptyStateHeaderVariants>;
|
|
|
|
export const EmptyStateHeader = forwardRef<HTMLDivElement, EmptyStateHeaderProps>(
|
|
function EmptyStateHeader({ align, className, ...props }, ref) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
{...createSlot("header")}
|
|
{...createDataAttributes({ align })}
|
|
className={cn(emptyStateHeaderVariants({ align }), 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"> &
|
|
VariantProps<typeof emptyStateActionsVariants>;
|
|
|
|
export const EmptyStateActions = forwardRef<HTMLDivElement, EmptyStateActionsProps>(
|
|
function EmptyStateActions({ className, layout, ...props }, ref) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
{...createSlot("actions")}
|
|
{...createDataAttributes({ layout })}
|
|
className={cn(emptyStateActionsVariants({ layout }), className)}
|
|
ref={ref}
|
|
/>
|
|
);
|
|
}
|
|
);
|