docs: clarify implementation of slot demo components

Author: chrisvxd

apps/demo/config/blocks/Flex/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentConfig, Content } from "@/core/types";
+import { ComponentConfig, Slot } from "@/core/types";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import { Section } from "../../components/Section";
@@ -12,7 +12,7 @@ export type FlexProps = WithLayout<{
   direction: "row" | "column";
   gap: number;
   wrap: "wrap" | "nowrap";
-  children: Content;
+  items: Slot;
 }>;
 
 const FlexInternal: ComponentConfig<FlexProps> = {
@@ -47,7 +47,7 @@ const FlexInternal: ComponentConfig<FlexProps> = {
         { label: "false", value: "nowrap" },
       ],
     },
-    children: {
+    items: {
       type: "slot",
     },
   },
@@ -59,12 +59,12 @@ const FlexInternal: ComponentConfig<FlexProps> = {
     layout: {
       grow: true,
     },
-    children: [],
+    items: [],
   },
-  render: ({ justifyContent, direction, gap, wrap, children: Children }) => {
+  render: ({ justifyContent, direction, gap, wrap, items: Items }) => {
     return (
       <Section style={{ height: "100%" }}>
-        <Children
+        <Items
           className={getClassName()}
           style={{
             justifyContent,

apps/demo/config/blocks/Grid/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentConfig, Content } from "@/core/types";
+import { ComponentConfig, Slot } from "@/core/types";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import { Section } from "../../components/Section";
@@ -10,7 +10,7 @@ const getClassName = getClassNameFactory("Grid", styles);
 export type GridProps = {
   numColumns: number;
   gap: number;
-  children: Content;
+  items: Slot;
 };
 
 export const GridInternal: ComponentConfig<GridProps> = {
@@ -26,19 +26,19 @@ export const GridInternal: ComponentConfig<GridProps> = {
       type: "number",
       min: 0,
     },
-    children: {
+    items: {
       type: "slot",
     },
   },
   defaultProps: {
     numColumns: 4,
     gap: 24,
-    children: [],
+    items: [],
   },
-  render: ({ gap, numColumns, children: Children }) => {
+  render: ({ gap, numColumns, items: Items }) => {
     return (
       <Section>
-        <Children
+        <Items
           disallow={["Hero", "Stats"]}
           className={getClassName()}
           style={{

apps/demo/config/index.tsx

@@ -149,7 +149,7 @@ export const initialData: Record<string, UserData> = {
           id: "Grid-c4cd99ae-8c5e-4cdb-87d2-35a639f5163e",
           gap: 24,
           numColumns: 3,
-          children: [
+          items: [
             {
               type: "Card",
               props: {
@@ -309,7 +309,7 @@ export const initialData: Record<string, UserData> = {
           gap: 24,
           numColumns: 3,
           id: "Grid-2da28e88-7b7b-4152-9da0-9f93f41213b6",
-          children: [
+          items: [
             {
               type: "Card",
               props: {
@@ -437,7 +437,7 @@ export const initialData: Record<string, UserData> = {
           wrap: "wrap",
           layout: { spanCol: 1, spanRow: 1, padding: "0px" },
           id: "Flex-7d63d5ff-bd42-4354-b05d-681b16436fd6",
-          children: [
+          items: [
             {
               type: "Button",
               props: {