Add hidden prop to layout components for declarative conditional rendering

apps/widget-builder/src/components/widget-components/badge.tsx

@@ -32,9 +32,15 @@ const Base = cva(
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof Base> {
   children: React.ReactNode;
+  hidden?: boolean;
 }
 
-const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({ className, variant, size, ...props }, ref) => {
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({ className, variant, size, hidden, ...props }, ref) => {
+  // Return null if hidden is true
+  if (hidden) {
+    return null;
+  }
+
   return <div className={cn(Base({ variant, size, className }))} ref={ref} {...props} />;
 });
 Badge.displayName = "Badge";
@@ -60,6 +66,12 @@ const BadgeDefinition: ComponentDefinition = {
       type: "React.ReactNode",
       description: "Content to display inside the badge.",
     },
+    {
+      name: "hidden",
+      type: "boolean",
+      required: false,
+      description: "When true, hides the component by returning null.",
+    },
   ],
   category: "Display",
   usage: `<Badge variant="success" size="lg">New</Badge>`,

apps/widget-builder/src/components/widget-components/box.tsx

@@ -17,6 +17,7 @@ import {
   Shrink,
   Margin,
   Gap,
+  Hidden,
 } from "./variants";
 
 const Variants = variants({
@@ -31,6 +32,7 @@ const Variants = variants({
   grow: Grow,
   shrink: Shrink,
   gap: Gap,
+  hidden: Hidden,
 });
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, VariantsProps<typeof Variants> {
@@ -55,10 +57,16 @@ const Box = React.forwardRef<HTMLDivElement, BoxProps>(
       grow,
       shrink,
       gap,
+      hidden,
       ...props
     },
     ref
   ) => {
+    // Return null if hidden is true
+    if (hidden) {
+      return null;
+    }
+
     // Merge with existing style prop
     const [variantClasses, variantStyles] = Variants.format({
       size,

apps/widget-builder/src/components/widget-components/col.tsx

@@ -18,6 +18,7 @@ import {
   Grow,
   Shrink,
   Gap,
+  Hidden,
 } from "./variants";
 
 const Base = cva("flex flex-col", {
@@ -37,6 +38,7 @@ const Variants = variants({
   gap: Gap,
   minWidth: MinWidth,
   minHeight: MinHeight,
+  hidden: Hidden,
 });
 
 export interface ColProps extends React.HTMLAttributes<HTMLDivElement>, VariantsProps<typeof Variants> {
@@ -60,10 +62,16 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>(
       gap,
       minWidth,
       minHeight,
+      hidden,
       ...props
     },
     ref
   ) => {
+    // Return null if hidden is true
+    if (hidden) {
+      return null;
+    }
+
     const [variantClasses, variantStyles] = Variants.format({
       align,
       padding,

apps/widget-builder/src/components/widget-components/image.tsx

@@ -4,7 +4,7 @@ import React from "react";
 
 import { cn } from "@/lib/utils";
 
-import { variants, Margin, Radius, Size, VariantsProps } from "./variants";
+import { variants, Margin, Radius, Size, VariantsProps, Hidden } from "./variants";
 
 
 const Base = cva("object-cover", {
@@ -41,6 +41,7 @@ const Variants = variants({
   radius: Radius,
   margin: Margin,
   size: Size,
+  hidden: Hidden,
 });
 
 export interface ImageProps
@@ -51,9 +52,14 @@ export interface ImageProps
 }
 
 const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({ className, style, fit, aspect, position, fallback, radius, margin, size, onError, ...props }, ref) => {
+  ({ className, style, fit, aspect, position, fallback, radius, margin, size, hidden, onError, ...props }, ref) => {
     const [imageError, setImageError] = React.useState(false);
 
+    // Return null if hidden is true
+    if (hidden) {
+      return null;
+    }
+
     const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
       setImageError(true);
       onError?.(e);

apps/widget-builder/src/components/widget-components/row.tsx

@@ -21,6 +21,7 @@ import {
   Grow,
   Shrink,
   Margin,
+  Hidden,
 } from "./variants";
 
 const Base = cva("flex flex-row", {
@@ -43,6 +44,7 @@ const Variants = variants({
   width: Width,
   height: Height,
   size: Size,
+  hidden: Hidden,
 });
 
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement>, VariantsProps<typeof Variants> {
@@ -69,10 +71,16 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>(
       width,
       height,
       size,
+      hidden,
       ...props
     },
     ref
   ) => {
+    // Return null if hidden is true
+    if (hidden) {
+      return null;
+    }
+
     const [variantClasses, variantStyles] = Variants.format({
       align,
       justify,

apps/widget-builder/src/components/widget-components/variants/hidden.ts

@@ -0,0 +1,22 @@
+import { Variant } from "./types";
+
+export interface HiddenProps {
+  hidden?: boolean;
+}
+
+// Hidden variant
+export const Hidden: Variant = {
+  variant: {},
+
+  definition: {
+    name: "hidden",
+    type: "boolean",
+    required: false,
+    description: "When true, hides the component by returning null.",
+  },
+
+  format: (): string | [string, React.CSSProperties] => {
+    // Hidden is handled in the component logic, not through CSS
+    return "";
+  },
+};

apps/widget-builder/src/components/widget-components/variants/index.ts

@@ -11,6 +11,7 @@ export * from "./radius";
 export * from "./background";
 export * from "./border";
 export * from "./flex";
+export * from "./hidden";
 
 /**
  * Utility to combine multiple variant to a single object

apps/widget-builder/src/pages/gallery/widgets/email-preview.ts

@@ -12,7 +12,7 @@ export const emailPreview: Omit<Widget, "id"> = {
     />
     <Col gap={0} minWidth="auto">
       <Text weight="medium">{data.sender.name}</Text>
-      {data.unread && <Badge variant="default" size="sm">New</Badge>}
+      <Badge variant="default" size="sm" hidden={!data.unread}>New</Badge>
       <Text color="muted" size="sm">{data.sender.email}</Text>
     </Col>
     <Spacer />

apps/widget-builder/src/pages/gallery/widgets/social-media-post.ts

@@ -22,12 +22,13 @@ export const socialMediaPost: Omit<Widget, "id"> = {
     <Text>{data.content}</Text>
   </Box>
 
-  {data.image && <Image 
+  <Image 
     src={data.image}
     aspect="video"
     radius="md"
     margin="sm"
-  />}
+    hidden={!data.image}
+  />
 
   <Divider margin="sm" />