fix: update atoms/index.ts to export TabIcon and TipsCard from JSON components

src/components/atoms/index.ts

@@ -1,6 +1,5 @@
 // Auto-generated exports - DO NOT EDIT MANUALLY
 // JSON-based atom imports
-export { InfoBox, KeyValue, Label, List, ListItem, LiveIndicator, LoadingSpinner, LoadingState, MetricDisplay, Modal, Notification, NumberInput } from '@/lib/json-ui/json-components'
 
 export { ActionButton } from './ActionButton'
 export { ActionCard } from './ActionCard'
@@ -83,7 +82,6 @@ export { StatusIcon } from './StatusIcon'
 export { StepIndicator } from './StepIndicator'
 export { Stepper } from './Stepper'
 export { Switch } from './Switch'
-export { TabIcon } from './TabIcon'
 export { Table } from './Table'
 export { Tabs } from './Tabs'
 export { Tag } from './Tag'
@@ -93,7 +91,6 @@ export { TextGradient } from './TextGradient'
 export { TextHighlight } from './TextHighlight'
 export { Timeline } from './Timeline'
 export { Timestamp } from './Timestamp'
-export { TipsCard } from './TipsCard'
 export { Toggle } from './Toggle'
 export { Tooltip } from './Tooltip'
 export { TreeIcon } from './TreeIcon'

src/components/json-definitions/data-table.json

@@ -0,0 +1,143 @@
+{
+  "id": "data-table-root",
+  "type": "div",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "(() => { return 'rounded-md border ' + (data || ''); })()"
+    }
+  },
+  "children": [
+    {
+      "id": "data-table-wrapper",
+      "type": "Table",
+      "children": [
+        {
+          "id": "data-table-header",
+          "type": "TableHeader",
+          "children": [
+            {
+              "id": "data-table-header-row",
+              "type": "TableRow",
+              "children": [
+                {
+                  "id": "data-table-header-columns",
+                  "type": "forEach",
+                  "bindings": {
+                    "items": "columns",
+                    "children": {
+                      "id": "data-table-header-cell",
+                      "type": "TableHead",
+                      "bindings": {
+                        "style": {
+                          "transform": "(() => { return { width: data.width || 'auto' }; })()"
+                        },
+                        "className": {
+                          "transform": "(() => { return data.sortable ? 'cursor-pointer select-none' : ''; })()"
+                        }
+                      },
+                      "children": [
+                        {
+                          "id": "data-table-header-cell-content",
+                          "bindings": {
+                            "children": "header"
+                          }
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "data-table-body",
+          "type": "TableBody",
+          "children": [
+            {
+              "id": "data-table-rows",
+              "type": "conditional",
+              "conditional": {
+                "if": {
+                  "source": "data",
+                  "transform": "data.length === 0"
+                }
+              },
+              "children": [
+                {
+                  "id": "data-table-empty-row",
+                  "type": "TableRow",
+                  "children": [
+                    {
+                      "id": "data-table-empty-cell",
+                      "type": "TableCell",
+                      "bindings": {
+                        "colSpan": {
+                          "transform": "$props.columns.length"
+                        }
+                      },
+                      "props": {
+                        "className": "text-center py-8 text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "id": "data-table-empty-message",
+                          "bindings": {
+                            "children": "emptyMessage"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": "data-table-data-rows",
+              "type": "forEach",
+              "bindings": {
+                "items": "data"
+              },
+              "children": {
+                "id": "data-table-data-row",
+                "type": "TableRow",
+                "bindings": {
+                  "onClick": {
+                    "transform": "(() => { return () => $props.onRowClick?.(data); })()"
+                  },
+                  "className": {
+                    "transform": "$props.onRowClick ? 'cursor-pointer' : ''"
+                  }
+                },
+                "children": [
+                  {
+                    "id": "data-table-data-cells",
+                    "type": "forEach",
+                    "bindings": {
+                      "items": "columns"
+                    },
+                    "children": {
+                      "id": "data-table-data-cell",
+                      "type": "TableCell",
+                      "children": [
+                        {
+                          "id": "data-table-data-cell-content",
+                          "bindings": {
+                            "children": {
+                              "transform": "(() => { const column = data; const rowData = $root.data; const cellValue = rowData[column.key]; return column.cell ? column.cell(rowData) : cellValue; })()"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/lib/json-ui/interfaces/index.ts

@@ -1,3 +1,14 @@
+export * from './binding-indicator'
+export * from './button-group'
+export * from './chip'
+export * from './circular-progress'
+export * from './code'
+export * from './command-palette'
+export * from './completion-card'
+export * from './component-palette-item'
+export * from './confirm-button'
+export * from './data-source-badge'
+export * from './data-table'
 export * from './loading-fallback'
 export * from './navigation-item'
 export * from './page-header-content'

src/lib/json-ui/json-components.ts

@@ -6,6 +6,17 @@
 import { createJsonComponent } from './create-json-component'
 import { createJsonComponentWithHooks } from './create-json-component-with-hooks'
 import type {
+  BindingIndicatorProps,
+  ButtonGroupProps,
+  ChipProps,
+  CircularProgressProps,
+  CodeProps,
+  CommandPaletteProps,
+  CompletionCardProps,
+  ComponentPaletteItemProps,
+  ConfirmButtonProps,
+  DataSourceBadgeProps,
+  DataTableProps,
   LoadingFallbackProps,
   NavigationItemProps,
   PageHeaderContentProps,
@@ -52,12 +63,20 @@ import type {
   CardProps,
   CheckboxProps,
   ContextMenuProps,
+  DatePickerProps,
+  DetailRowProps,
   DialogProps,
+  DividerProps,
   DrawerProps,
   DropdownMenuProps,
+  EmptyMessageProps,
+  ErrorBadgeProps,
+  FileIconProps,
   FormProps,
   FormFieldProps,
+  GlowCardProps,
   HeadingProps,
+  HelperTextProps,
   HoverCardProps,
   IconProps,
   InputOTPProps,
@@ -110,6 +129,17 @@ import type {
 } from './interfaces'
 
 // Import JSON definitions
+import bindingIndicatorDef from '@/components/json-definitions/binding-indicator.json'
+import buttonGroupDef from '@/components/json-definitions/button-group.json'
+import chipDef from '@/components/json-definitions/chip.json'
+import circularProgressDef from '@/components/json-definitions/circular-progress.json'
+import codeDef from '@/components/json-definitions/code.json'
+import commandPaletteDef from '@/components/json-definitions/command-palette.json'
+import completionCardDef from '@/components/json-definitions/completion-card.json'
+import componentPaletteItemDef from '@/components/json-definitions/component-palette-item.json'
+import confirmButtonDef from '@/components/json-definitions/confirm-button.json'
+import dataSourceBadgeDef from '@/components/json-definitions/data-source-badge.json'
+import dataTableDef from '@/components/json-definitions/data-table.json'
 import loadingFallbackDef from '@/components/json-definitions/loading-fallback.json'
 import navigationItemDef from '@/components/json-definitions/navigation-item.json'
 import pageHeaderContentDef from '@/components/json-definitions/page-header-content.json'
@@ -156,6 +186,15 @@ import checkboxDef from '@/components/json-definitions/checkbox.json'
 import contextMenuDef from '@/components/json-definitions/context-menu.json'
 import dialogDef from '@/components/json-definitions/dialog.json'
 import drawerDef from '@/components/json-definitions/drawer.json'
+import datePickerDef from '@/components/json-definitions/date-picker.json'
+import detailRowDef from '@/components/json-definitions/detail-row.json'
+import dividerDef from '@/components/json-definitions/divider.json'
+import emptyMessageDef from '@/components/json-definitions/empty-message.json'
+import errorBadgeDef from '@/components/json-definitions/error-badge.json'
+import fileIconDef from '@/components/json-definitions/file-icon.json'
+import formDef from '@/components/json-definitions/form.json'
+import glowCardDef from '@/components/json-definitions/glow-card.json'
+import helperTextDef from '@/components/json-definitions/helper-text.json'
 import dropdownMenuDef from '@/components/json-definitions/dropdown-menu.json'
 import formDef from '@/components/json-definitions/form.json'
 import formFieldDef from '@/components/json-definitions/form-field.json'
@@ -211,9 +250,21 @@ import notificationDef from '@/components/json-definitions/notification.json'
 import numberInputDef from '@/components/json-definitions/number-input.json'
 
 // Create pure JSON components (no hooks)
+export const BindingIndicator = createJsonComponent<BindingIndicatorProps>(bindingIndicatorDef)
+export const ButtonGroup = createJsonComponent<ButtonGroupProps>(buttonGroupDef)
+export const Chip = createJsonComponent<ChipProps>(chipDef)
+export const CircularProgress = createJsonComponent<CircularProgressProps>(circularProgressDef)
+export const Code = createJsonComponent<CodeProps>(codeDef)
+export const CommandPalette = createJsonComponent<CommandPaletteProps>(commandPaletteDef)
+export const CompletionCard = createJsonComponent<CompletionCardProps>(completionCardDef)
+export const ComponentPaletteItem = createJsonComponent<ComponentPaletteItemProps>(componentPaletteItemDef)
+export const ConfirmButton = createJsonComponent<ConfirmButtonProps>(confirmButtonDef)
+export const DataSourceBadge = createJsonComponent<DataSourceBadgeProps>(dataSourceBadgeDef)
+export const DataTable = createJsonComponent<DataTableProps<any>>(dataTableDef)
 export const LoadingFallback = createJsonComponent<LoadingFallbackProps>(loadingFallbackDef)
 export const NavigationItem = createJsonComponent<NavigationItemProps>(navigationItemDef)
 export const PageHeaderContent = createJsonComponent<PageHeaderContentProps>(pageHeaderContentDef)
+export const PageHeader = createJsonComponent<PageHeaderProps>(pageHeaderDef)
 export const ComponentBindingDialog = createJsonComponent<ComponentBindingDialogProps>(componentBindingDialogDef)
 export const DataSourceEditorDialog = createJsonComponent<DataSourceEditorDialogProps>(dataSourceEditorDialogDef)
 export const GitHubBuildStatus = createJsonComponent<GitHubBuildStatusProps>(githubBuildStatusDef)
@@ -234,23 +285,34 @@ export const Calendar = createJsonComponent<CalendarProps>(calendarDef)
 export const Card = createJsonComponent<CardProps>(cardDef)
 export const Checkbox = createJsonComponent<CheckboxProps>(checkboxDef)
 export const ContextMenu = createJsonComponent<ContextMenuProps>(contextMenuDef)
+export const DatePicker = createJsonComponent<DatePickerProps>(datePickerDef)
+export const DetailRow = createJsonComponent<DetailRowProps>(detailRowDef)
 export const Dialog = createJsonComponent<DialogProps>(dialogDef)
 export const Drawer = createJsonComponent<DrawerProps>(drawerDef)
+export const Divider = createJsonComponent<DividerProps>(dividerDef)
 export const DropdownMenu = createJsonComponent<DropdownMenuProps>(dropdownMenuDef)
 export const Form = createJsonComponent<FormProps>(formDef)
 export const FormField = createJsonComponent<FormFieldProps>(formFieldDef)
+export const GlowCard = createJsonComponent<GlowCardProps>(glowCardDef)
 export const Heading = createJsonComponent<HeadingProps>(headingDef)
+export const HelperText = createJsonComponent<HelperTextProps>(helperTextDef)
 export const HoverCard = createJsonComponent<HoverCardProps>(hoverCardDef)
 export const Icon = createJsonComponent<IconProps>(iconDef)
 export const InputOTP = createJsonComponent<InputOTPProps>(inputOtpDef)
 export const Label = createJsonComponent<LabelProps>(labelDef)
 export const Pagination = createJsonComponent<PaginationProps>(paginationDef)
 export const Progress = createJsonComponent<ProgressProps>(progressDef)
+export const ProgressBar = createJsonComponent<ProgressBarProps>(progressBarDef)
+export const Pulse = createJsonComponent<PulseProps>(pulseDef)
+export const QuickActionButton = createJsonComponent<QuickActionButtonProps>(quickActionButtonDef)
 export const RadioGroup = createJsonComponent<RadioGroupProps>(radioGroupDef)
+export const Sparkle = createJsonComponent<SparkleProps>(sparkleDef)
 export const RangeSlider = createJsonComponent<RangeSliderProps>(rangeSliderDef)
 export const Rating = createJsonComponent<RatingProps>(ratingDef)
 export const ScrollArea = createJsonComponent<ScrollAreaProps>(scrollAreaDef)
 export const ScrollAreaThumb = createJsonComponent<ScrollAreaThumbProps>(scrollAreaThumbDef)
+export const SearchInput = createJsonComponent<SearchInputProps>(searchInputDef)
+export const SeedDataStatus = createJsonComponent<SeedDataStatusProps>(seedDataStatusDef)
 export const Select = createJsonComponent<SelectProps>(selectDef)
 export const Separator = createJsonComponent<SeparatorProps>(separatorDef)
 export const Skeleton = createJsonComponent<SkeletonProps>(skeletonDef)