feat(ui): expand workflow-ready components

packages/ui/src/components/empty-state.tsx

@@ -17,44 +17,48 @@ export type EmptyStateProps = ComponentPropsWithoutRef<"div"> &
   VariantProps<typeof emptyStateVariants>;
 
 export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(
-  { className, tone, ...props },
+  { align, className, layout, tone, ...props },
   ref
 ) {
   return (
     <div
       {...props}
       {...createSlot("root")}
-      {...createDataAttributes({ tone })}
-      className={cn(emptyStateVariants({ tone }), className)}
+      {...createDataAttributes({ align, layout, tone })}
+      className={cn(emptyStateVariants({ align, layout, tone }), className)}
       ref={ref}
     />
   );
 });
 
-export type EmptyStateMediaProps = ComponentPropsWithoutRef<"div">;
+export type EmptyStateMediaProps = ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof emptyStateMediaVariants>;
 
 export const EmptyStateMedia = forwardRef<HTMLDivElement, EmptyStateMediaProps>(
-  function EmptyStateMedia({ className, ...props }, ref) {
+  function EmptyStateMedia({ className, size, ...props }, ref) {
     return (
       <div
         {...props}
         {...createSlot("media")}
-        className={cn(emptyStateMediaVariants(), className)}
+        {...createDataAttributes({ size })}
+        className={cn(emptyStateMediaVariants({ size }), className)}
         ref={ref}
       />
     );
   }
 );
 
-export type EmptyStateHeaderProps = ComponentPropsWithoutRef<"div">;
+export type EmptyStateHeaderProps = ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof emptyStateHeaderVariants>;
 
 export const EmptyStateHeader = forwardRef<HTMLDivElement, EmptyStateHeaderProps>(
-  function EmptyStateHeader({ className, ...props }, ref) {
+  function EmptyStateHeader({ align, className, ...props }, ref) {
     return (
       <div
         {...props}
         {...createSlot("header")}
-        className={cn(emptyStateHeaderVariants(), className)}
+        {...createDataAttributes({ align })}
+        className={cn(emptyStateHeaderVariants({ align }), className)}
         ref={ref}
       />
     );
@@ -107,15 +111,17 @@ export const EmptyStateDescription = forwardRef<
   );
 });
 
-export type EmptyStateActionsProps = ComponentPropsWithoutRef<"div">;
+export type EmptyStateActionsProps = ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof emptyStateActionsVariants>;
 
 export const EmptyStateActions = forwardRef<HTMLDivElement, EmptyStateActionsProps>(
-  function EmptyStateActions({ className, ...props }, ref) {
+  function EmptyStateActions({ className, layout, ...props }, ref) {
     return (
       <div
         {...props}
         {...createSlot("actions")}
-        className={cn(emptyStateActionsVariants(), className)}
+        {...createDataAttributes({ layout })}
+        className={cn(emptyStateActionsVariants({ layout }), className)}
         ref={ref}
       />
     );