Add comprehensive UI component system (81 components) with mobile-first design

content/docs/references/data/field.mdx

@@ -12,8 +12,8 @@ description: Field protocol schemas
 ## TypeScript Usage
 
 ```typescript
-import { AddressSchema, ComputedFieldCacheSchema, CurrencyConfigSchema, CurrencyValueSchema, DataQualityRulesSchema, FieldSchema, FieldTypeSchema, FileAttachmentConfigSchema, LocationCoordinatesSchema, SelectOptionSchema, VectorConfigSchema } from '@objectstack/spec/data';
-import type { Address, ComputedFieldCache, CurrencyConfig, CurrencyValue, DataQualityRules, Field, FieldType, FileAttachmentConfig, LocationCoordinates, SelectOption, VectorConfig } from '@objectstack/spec/data';
+import { AddressSchema, ComputedFieldCacheSchema, CurrencyConfigSchema, CurrencyValueSchema, DataQualityRulesSchema, FieldSchema, FieldTypeSchema, FileAttachmentConfigSchema, LocationCoordinatesSchema, VectorConfigSchema } from '@objectstack/spec/data';
+import type { Address, ComputedFieldCache, CurrencyConfig, CurrencyValue, DataQualityRules, Field, FieldType, FileAttachmentConfig, LocationCoordinates, VectorConfig } from '@objectstack/spec/data';
 
 // Validate data
 const result = AddressSchema.parse(data);
@@ -57,9 +57,5 @@ const result = AddressSchema.parse(data);
 
 ---
 
-## SelectOption
-
----
-
 ## VectorConfig
 

content/docs/references/ui/component.mdx

@@ -12,15 +12,39 @@ description: Component protocol schemas
 ## TypeScript Usage
 
 ```typescript
-import { PageCardPropsSchema, PageHeaderPropsSchema, PageTabsPropsSchema, RecordDetailsPropsSchema, RecordHighlightsPropsSchema, RecordRelatedListPropsSchema } from '@objectstack/spec/ui';
-import type { PageCardProps, PageHeaderProps, PageTabsProps, RecordDetailsProps, RecordHighlightsProps, RecordRelatedListProps } from '@objectstack/spec/ui';
+import { AlertPropsSchema, BottomNavigationPropsSchema, DataTablePropsSchema, EmptyStatePropsSchema, FloatingActionButtonPropsSchema, KanbanBoardPropsSchema, PageCardPropsSchema, PageHeaderPropsSchema, PageTabsPropsSchema, PullToRefreshPropsSchema, RecordDetailsPropsSchema, RecordHighlightsPropsSchema, RecordRelatedListPropsSchema, TreeViewPropsSchema } from '@objectstack/spec/ui';
+import type { AlertProps, BottomNavigationProps, DataTableProps, EmptyStateProps, FloatingActionButtonProps, KanbanBoardProps, PageCardProps, PageHeaderProps, PageTabsProps, PullToRefreshProps, RecordDetailsProps, RecordHighlightsProps, RecordRelatedListProps, TreeViewProps } from '@objectstack/spec/ui';
 
 // Validate data
-const result = PageCardPropsSchema.parse(data);
+const result = AlertPropsSchema.parse(data);
 ```
 
 ---
 
+## AlertProps
+
+---
+
+## BottomNavigationProps
+
+---
+
+## DataTableProps
+
+---
+
+## EmptyStateProps
+
+---
+
+## FloatingActionButtonProps
+
+---
+
+## KanbanBoardProps
+
+---
+
 ## PageCardProps
 
 ---
@@ -33,6 +57,10 @@ const result = PageCardPropsSchema.parse(data);
 
 ---
 
+## PullToRefreshProps
+
+---
+
 ## RecordDetailsProps
 
 ---
@@ -43,3 +71,7 @@ const result = PageCardPropsSchema.parse(data);
 
 ## RecordRelatedListProps
 
+---
+
+## TreeViewProps
+

content/docs/references/ui/index.mdx

@@ -13,6 +13,9 @@ This section contains all protocol schemas for the ui layer of ObjectStack.
   <Card href="./chart" title="Chart" description="Source: packages/spec/src/ui/chart.zod.ts" />
   <Card href="./component" title="Component" description="Source: packages/spec/src/ui/component.zod.ts" />
   <Card href="./dashboard" title="Dashboard" description="Source: packages/spec/src/ui/dashboard.zod.ts" />
+  <Card href="./display" title="Display" description="Source: packages/spec/src/ui/display.zod.ts" />
+  <Card href="./input" title="Input" description="Source: packages/spec/src/ui/input.zod.ts" />
+  <Card href="./layout" title="Layout" description="Source: packages/spec/src/ui/layout.zod.ts" />
   <Card href="./page" title="Page" description="Source: packages/spec/src/ui/page.zod.ts" />
   <Card href="./report" title="Report" description="Source: packages/spec/src/ui/report.zod.ts" />
   <Card href="./theme" title="Theme" description="Source: packages/spec/src/ui/theme.zod.ts" />

content/docs/references/ui/meta.json

@@ -6,6 +6,9 @@
     "chart",
     "component",
     "dashboard",
+    "display",
+    "input",
+    "layout",
     "page",
     "report",
     "theme",

packages/spec/json-schema/ui/AccordionProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AccordionProps",
+  "definitions": {
+    "AccordionProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AlertProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AlertProps",
+  "definitions": {
+    "AlertProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AutocompleteProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AutocompleteProps",
+  "definitions": {
+    "AutocompleteProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AvatarGroupProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AvatarGroupProps",
+  "definitions": {
+    "AvatarGroupProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/AvatarProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/AvatarProps",
+  "definitions": {
+    "AvatarProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/BadgeProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/BadgeProps",
+  "definitions": {
+    "BadgeProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/BottomNavigationProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/BottomNavigationProps",
+  "definitions": {
+    "BottomNavigationProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/BreadcrumbProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/BreadcrumbProps",
+  "definitions": {
+    "BreadcrumbProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CardProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CardProps",
+  "definitions": {
+    "CardProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CascaderOption.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CascaderOption",
+  "definitions": {
+    "CascaderOption": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CascaderProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CascaderProps",
+  "definitions": {
+    "CascaderProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CheckboxGroupProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CheckboxGroupProps",
+  "definitions": {
+    "CheckboxGroupProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CheckboxProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CheckboxProps",
+  "definitions": {
+    "CheckboxProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CodeBlockProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CodeBlockProps",
+  "definitions": {
+    "CodeBlockProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CodeEditorProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CodeEditorProps",
+  "definitions": {
+    "CodeEditorProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/ColorPickerProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/ColorPickerProps",
+  "definitions": {
+    "ColorPickerProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/ContainerProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/ContainerProps",
+  "definitions": {
+    "ContainerProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/CurrencyInputProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/CurrencyInputProps",
+  "definitions": {
+    "CurrencyInputProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DataTableProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DataTableProps",
+  "definitions": {
+    "DataTableProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DatePickerProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DatePickerProps",
+  "definitions": {
+    "DatePickerProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DateRangePickerProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DateRangePickerProps",
+  "definitions": {
+    "DateRangePickerProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DateTimePickerProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DateTimePickerProps",
+  "definitions": {
+    "DateTimePickerProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DescriptionListProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DescriptionListProps",
+  "definitions": {
+    "DescriptionListProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DividerProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DividerProps",
+  "definitions": {
+    "DividerProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DrawerProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DrawerProps",
+  "definitions": {
+    "DrawerProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/DropdownProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/DropdownProps",
+  "definitions": {
+    "DropdownProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/EmptyStateProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/EmptyStateProps",
+  "definitions": {
+    "EmptyStateProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/FileUploadProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/FileUploadProps",
+  "definitions": {
+    "FileUploadProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/FlexProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/FlexProps",
+  "definitions": {
+    "FlexProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/FloatingActionButtonProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/FloatingActionButtonProps",
+  "definitions": {
+    "FloatingActionButtonProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/GaugeProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/GaugeProps",
+  "definitions": {
+    "GaugeProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/GridItemProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/GridItemProps",
+  "definitions": {
+    "GridItemProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/spec/json-schema/ui/GridProps.json

@@ -0,0 +1,7 @@
+{
+  "$ref": "#/definitions/GridProps",
+  "definitions": {
+    "GridProps": {}
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}