Add TypeScript type definitions for all new component schemas

Added complete TypeScript schema definitions for 14 new components in @object-ui/types package: ComboboxSchema, CommandSchema, ToastSchema (already existed), SpinnerSchema, EmptySchema, SonnerSchema, BreadcrumbSchema (already existed in navigation), KbdSchema, ToggleGroupSchema, ButtonGroupSchema, PaginationSchema (already existed), NavigationMenuSchema, AspectRatioSchema, and MenubarSchema. Fixed type naming conflict in ToggleGroupSchema by renaming 'type' property to 'selectionType'. All 123 static pages build successfully and all 205 tests passing.

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/components/src/renderers/disclosure/toggle-group.tsx

@@ -21,7 +21,7 @@ ComponentRegistry.register('toggle-group',
 
     return (
       <ToggleGroup 
-        type={schema.type || 'single'}
+        type={schema.selectionType || 'single'}
         variant={schema.variant}
         size={schema.size}
         value={schema.value}
@@ -41,11 +41,11 @@ ComponentRegistry.register('toggle-group',
     label: 'Toggle Group',
     inputs: [
       { 
-        name: 'type', 
+        name: 'selectionType', 
         type: 'enum', 
         enum: ['single', 'multiple'], 
         defaultValue: 'single',
-        label: 'Type'
+        label: 'Selection Type'
       },
       { 
         name: 'variant', 
@@ -64,7 +64,7 @@ ComponentRegistry.register('toggle-group',
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
-      type: 'single',
+      selectionType: 'single',
       variant: 'default',
       size: 'default',
       items: [

packages/types/src/data-display.ts

@@ -609,6 +609,51 @@ export interface TimelineSchema extends BaseSchema {
   position?: 'left' | 'right' | 'alternate';
 }
 
+/**
+ * Breadcrumb item
+ */
+export interface BreadcrumbItem {
+  /**
+   * Item label
+   */
+  label: string;
+  /**
+   * Item href/link
+   */
+  href?: string;
+}
+
+/**
+ * Breadcrumb component
+ */
+export interface BreadcrumbSchema extends BaseSchema {
+  type: 'breadcrumb';
+  /**
+   * Breadcrumb items
+   */
+  items: BreadcrumbItem[];
+  /**
+   * Separator character
+   * @default '/'
+   */
+  separator?: string;
+}
+
+/**
+ * Keyboard key component
+ */
+export interface KbdSchema extends BaseSchema {
+  type: 'kbd';
+  /**
+   * Key label (single key)
+   */
+  label?: string;
+  /**
+   * Key labels (multiple keys)
+   */
+  keys?: string | string[];
+}
+
 /**
  * Union type of all data display schemas
  */
@@ -624,7 +669,9 @@ export type DataDisplaySchema =
   | ChartSchema
   | TimelineSchema
   | HtmlSchema
-  | StatisticSchema;
+  | StatisticSchema
+  | BreadcrumbSchema
+  | KbdSchema;
 
 /**
  * Raw HTML component

packages/types/src/disclosure.ts

@@ -113,9 +113,74 @@ export interface CollapsibleSchema extends BaseSchema {
   onOpenChange?: (open: boolean) => void;
 }
 
+/**
+ * Toggle group item
+ */
+export interface ToggleGroupItem {
+  /**
+   * Item value
+   */
+  value: string;
+  /**
+   * Item label
+   */
+  label: string;
+  /**
+   * Item icon
+   */
+  icon?: string;
+  /**
+   * Whether item is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Toggle group component
+ */
+export interface ToggleGroupSchema extends BaseSchema {
+  type: 'toggle-group';
+  /**
+   * Toggle group selection mode
+   * @default 'single'
+   */
+  selectionType?: 'single' | 'multiple';
+  /**
+   * Toggle group variant
+   * @default 'default'
+   */
+  variant?: 'default' | 'outline';
+  /**
+   * Toggle group size
+   * @default 'default'
+   */
+  size?: 'default' | 'sm' | 'lg';
+  /**
+   * Toggle group items
+   */
+  items?: ToggleGroupItem[];
+  /**
+   * Default selected value(s)
+   */
+  defaultValue?: string | string[];
+  /**
+   * Controlled selected value(s)
+   */
+  value?: string | string[];
+  /**
+   * Whether toggle group is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Change handler
+   */
+  onValueChange?: (value: string | string[]) => void;
+}
+
 /**
  * Union type of all disclosure schemas
  */
 export type DisclosureSchema =
   | AccordionSchema
-  | CollapsibleSchema;
+  | CollapsibleSchema
+  | ToggleGroupSchema;

packages/types/src/feedback.ts

@@ -167,6 +167,69 @@ export interface ToasterSchema extends BaseSchema {
   limit?: number;
 }
 
+/**
+ * Spinner component
+ */
+export interface SpinnerSchema extends BaseSchema {
+  type: 'spinner';
+  /**
+   * Spinner size
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+/**
+ * Empty state component
+ */
+export interface EmptySchema extends BaseSchema {
+  type: 'empty';
+  /**
+   * Empty state title
+   */
+  title?: string;
+  /**
+   * Empty state description
+   */
+  description?: string;
+  /**
+   * Icon to display
+   */
+  icon?: string;
+}
+
+/**
+ * Sonner toast component (using sonner library)
+ */
+export interface SonnerSchema extends BaseSchema {
+  type: 'sonner';
+  /**
+   * Toast message/title
+   */
+  message?: string;
+  /**
+   * Toast title (alias for message)
+   */
+  title?: string;
+  /**
+   * Toast description
+   */
+  description?: string;
+  /**
+   * Toast variant
+   * @default 'default'
+   */
+  variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
+  /**
+   * Button label to trigger toast
+   */
+  buttonLabel?: string;
+  /**
+   * Button variant
+   */
+  buttonVariant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+}
+
 /**
  * Union type of all feedback schemas
  */
@@ -175,4 +238,7 @@ export type FeedbackSchema =
   | ProgressSchema
   | SkeletonSchema
   | ToastSchema
-  | ToasterSchema;
+  | ToasterSchema
+  | SpinnerSchema
+  | EmptySchema
+  | SonnerSchema;

packages/types/src/form.ts

@@ -940,6 +940,126 @@ export interface LabelSchema extends BaseSchema {
   htmlFor?: string;
 }
 
+/**
+ * Combobox option
+ */
+export interface ComboboxOption {
+  /**
+   * Option value
+   */
+  value: string;
+  /**
+   * Option label (displayed to user)
+   */
+  label: string;
+  /**
+   * Whether option is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Combobox component (searchable select)
+ */
+export interface ComboboxSchema extends BaseSchema {
+  type: 'combobox';
+  /**
+   * Field name for form submission
+   */
+  name?: string;
+  /**
+   * Combobox label
+   */
+  label?: string;
+  /**
+   * Placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Combobox options
+   */
+  options?: ComboboxOption[];
+  /**
+   * Default selected value
+   */
+  defaultValue?: string;
+  /**
+   * Controlled value
+   */
+  value?: string;
+  /**
+   * Whether field is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Help text or description
+   */
+  description?: string;
+  /**
+   * Error message
+   */
+  error?: string;
+  /**
+   * Change handler
+   */
+  onChange?: (value: string) => void;
+}
+
+/**
+ * Command menu item
+ */
+export interface CommandItem {
+  /**
+   * Item value
+   */
+  value: string;
+  /**
+   * Item label (displayed to user)
+   */
+  label: string;
+  /**
+   * Item icon
+   */
+  icon?: string;
+}
+
+/**
+ * Command menu group
+ */
+export interface CommandGroup {
+  /**
+   * Group heading
+   */
+  heading?: string;
+  /**
+   * Group items
+   */
+  items: CommandItem[];
+}
+
+/**
+ * Command component (command palette)
+ */
+export interface CommandSchema extends BaseSchema {
+  type: 'command';
+  /**
+   * Placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Empty state text
+   */
+  emptyText?: string;
+  /**
+   * Command groups
+   */
+  groups?: CommandGroup[];
+  /**
+   * Change handler
+   */
+  onChange?: (value: string) => void;
+}
+
 /**
  * Union type of all form schemas
  */
@@ -958,5 +1078,7 @@ export type FormComponentSchema =
   | CalendarSchema
   | InputOTPSchema
   | FormSchema
-  | LabelSchema;
+  | LabelSchema
+  | ComboboxSchema
+  | CommandSchema;