feat: add min and max params to number field

Closes #270

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

@@ -39,6 +39,8 @@ export const Columns: ComponentConfig<ColumnsProps> = {
         span: {
           label: "Span (1-12)",
           type: "number",
+          min: 0,
+          max: 12,
         },
       },
     },

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

@@ -20,13 +20,15 @@ export const Flex: ComponentConfig<FlexProps> = {
         minItemWidth: {
           label: "Minimum Item Width",
           type: "number",
+          min: 0,
         },
       },
       getItemSummary: (_, id) => `Item ${id + 1}`,
     },
     minItemWidth: {
       label: "Minimum Item Width",
       type: "number",
+      min: 0,
     },
   },
   defaultProps: {

apps/docs/pages/docs/api-reference/configuration/fields/number.mdx

@@ -41,6 +41,8 @@ const config = {
 | Param           | Example          | Type     | Status   |
 | --------------- | ---------------- | -------- | -------- |
 | [`type`](#type) | `type: "number"` | "number" | Required |
+| [`min`](#min)   | `min: 0`         | number   | -        |
+| [`max`](#max)   | `max: 10`        | number   | -        |
 
 ## Required params
 
@@ -62,3 +64,77 @@ const config = {
   },
 };
 ```
+
+## Optional params
+
+### `min`
+
+Set the minimum numeric value to accept for the input field.
+
+```tsx {7} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        items: {
+          type: "number",
+          min: 0,
+        },
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      myNumber: {
+        type: "number",
+        min: 0,
+      },
+    },
+    defaultProps: { myNumber: 5 },
+    render: ({ myNumber }) => {
+      return <div>{myNumber}</div>;
+    },
+  }}
+/>
+
+### `max`
+
+Set the maximum numeric value to accept for the input field.
+
+```tsx {7} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        items: {
+          type: "number",
+          max: 10,
+        },
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      myNumber: {
+        type: "number",
+        max: 10,
+      },
+    },
+    defaultProps: { myNumber: 5 },
+    render: ({ myNumber }) => {
+      return <div>{myNumber}</div>;
+    },
+  }}
+/>

apps/docs/pages/docs/integrating-puck/categories.mdx

@@ -33,14 +33,14 @@ const config = {
 };
 ```
 
-You can also change the label, collapse and hide categories:
+You can also change the title, collapse and hide categories:
 
 ```tsx {5,6,10} copy showLineNumbers
 const config = {
   categories: {
     typography: {
       components: ["HeadingBlock", "ParagraphBlock"],
-      label: "Text",
+      title: "Text",
       defaultExpanded: false, // Collapse this category by default
     },
     foundational: {
@@ -63,7 +63,7 @@ const config = {
       components: ["HeadingBlock", "ParagraphBlock"],
     },
     other: {
-      label: "Other components",
+      title: "Other components",
     },
   },
   // ...

packages/core/components/InputOrGroup/fields/DefaultField/index.tsx

@@ -40,6 +40,8 @@ export const DefaultField = ({
         }}
         readOnly={readOnly}
         id={id}
+        min={field.type === "number" ? field.min : undefined}
+        max={field.type === "number" ? field.max : undefined}
       />
     </FieldLabelInternal>
   );

packages/core/types/Config.tsx

@@ -16,6 +16,8 @@ export type TextField = BaseField & {
 };
 export type NumberField = BaseField & {
   type: "number";
+  min?: number;
+  max?: number;
 };
 
 export type TextareaField = BaseField & {