@object-ui/types 0.3.0 → 0.3.1

package/src/zod/index.zod.ts

@@ -0,0 +1,277 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @object-ui/types/zod - Zod Validation Schemas
+ * 
+ * Complete Zod validation schemas for all ObjectUI components.
+ * Following @objectstack/spec UI specification format.
+ * 
+ * ## Usage
+ * 
+ * ```typescript
+ * import { ButtonSchema, InputSchema, FormSchema } from '@object-ui/types/zod';
+ * 
+ * // Validate a schema
+ * const result = ButtonSchema.safeParse({
+ *   type: 'button',
+ *   label: 'Click Me',
+ *   variant: 'primary',
+ * });
+ * 
+ * if (result.success) {
+ *   console.log('Valid schema:', result.data);
+ * } else {
+ *   console.error('Validation errors:', result.error);
+ * }
+ * ```
+ * 
+ * @packageDocumentation
+ */
+
+// ============================================================================
+// Base Schema - Foundation
+// ============================================================================
+export {
+  BaseSchema,
+  SchemaNodeSchema,
+  ComponentInputSchema,
+  ComponentMetaSchema,
+  ComponentConfigSchema,
+  HTMLAttributesSchema,
+  EventHandlersSchema,
+  StylePropsSchema,
+} from './base.zod';
+
+// ============================================================================
+// Layout Components - Structure & Organization
+// ============================================================================
+export {
+  DivSchema,
+  SpanSchema,
+  TextSchema,
+  ImageSchema,
+  IconSchema,
+  SeparatorSchema,
+  ContainerSchema,
+  FlexSchema,
+  StackSchema,
+  GridSchema,
+  CardSchema,
+  TabItemSchema,
+  TabsSchema,
+  ScrollAreaSchema,
+  ResizablePanelSchema,
+  ResizableSchema,
+  AspectRatioSchema,
+  PageSchema,
+  LayoutSchema,
+} from './layout.zod';
+
+// ============================================================================
+// Form Components - User Input & Interaction
+// ============================================================================
+export {
+  SelectOptionSchema,
+  RadioOptionSchema,
+  ComboboxOptionSchema,
+  CommandItemSchema,
+  CommandGroupSchema,
+  ValidationRuleSchema,
+  FieldConditionSchema,
+  ButtonSchema,
+  InputSchema,
+  TextareaSchema,
+  SelectSchema,
+  CheckboxSchema,
+  RadioGroupSchema,
+  SwitchSchema,
+  ToggleSchema,
+  SliderSchema,
+  FileUploadSchema,
+  DatePickerSchema,
+  CalendarSchema,
+  InputOTPSchema,
+  ComboboxSchema,
+  LabelSchema,
+  CommandSchema,
+  FormFieldSchema,
+  FormSchema,
+  FormComponentSchema,
+} from './form.zod';
+
+// ============================================================================
+// Data Display Components - Information Presentation
+// ============================================================================
+export {
+  AlertSchema,
+  StatisticSchema,
+  BadgeSchema,
+  AvatarSchema,
+  ListItemSchema,
+  ListSchema,
+  TableColumnSchema,
+  TableSchema,
+  DataTableSchema,
+  MarkdownSchema,
+  TreeNodeSchema,
+  TreeViewSchema,
+  ChartTypeSchema,
+  ChartSeriesSchema,
+  ChartSchema,
+  TimelineEventSchema,
+  TimelineSchema,
+  KbdSchema,
+  HtmlSchema,
+  DataDisplaySchema,
+} from './data-display.zod';
+
+// ============================================================================
+// Feedback Components - Status & Progress Indication
+// ============================================================================
+export {
+  LoadingSchema,
+  ProgressSchema,
+  SkeletonSchema,
+  ToastSchema,
+  ToasterSchema,
+  SpinnerSchema,
+  EmptySchema,
+  SonnerSchema,
+  FeedbackSchema,
+} from './feedback.zod';
+
+// ============================================================================
+// Disclosure Components - Collapsible Content
+// ============================================================================
+export {
+  AccordionItemSchema,
+  AccordionSchema,
+  CollapsibleSchema,
+  ToggleGroupItemSchema,
+  ToggleGroupSchema,
+  DisclosureSchema,
+} from './disclosure.zod';
+
+// ============================================================================
+// Overlay Components - Modals & Popovers
+// ============================================================================
+export {
+  DialogSchema,
+  AlertDialogSchema,
+  SheetSchema,
+  DrawerSchema,
+  PopoverSchema,
+  TooltipSchema,
+  HoverCardSchema,
+  MenuItemSchema,
+  DropdownMenuSchema,
+  ContextMenuSchema,
+  MenubarMenuSchema,
+  MenubarSchema,
+  OverlaySchema,
+} from './overlay.zod';
+
+// ============================================================================
+// Navigation Components - Menus & Navigation
+// ============================================================================
+export {
+  NavLinkSchema,
+  HeaderBarSchema,
+  SidebarSchema,
+  PaginationSchema,
+  NavigationMenuItemSchema,
+  NavigationMenuSchema,
+  ButtonGroupButtonSchema,
+  ButtonGroupSchema,
+  NavigationSchema,
+} from './navigation.zod';
+
+// ============================================================================
+// Complex Components - Advanced/Composite Components
+// ============================================================================
+export {
+  KanbanCardSchema,
+  KanbanColumnSchema,
+  KanbanSchema,
+  CalendarViewModeSchema,
+  CalendarEventSchema,
+  CalendarViewSchema,
+  FilterOperatorSchema,
+  FilterConditionSchema,
+  FilterGroupSchema,
+  FilterFieldSchema,
+  FilterBuilderSchema,
+  CarouselItemSchema,
+  CarouselSchema,
+  ChatMessageSchema,
+  ChatbotSchema,
+  DashboardWidgetLayoutSchema,
+  DashboardWidgetSchema,
+  DashboardSchema,
+  ComplexSchema,
+} from './complex.zod';
+
+// ============================================================================
+// ObjectQL Components - Smart Data Components
+// ============================================================================
+export {
+  HttpMethodSchema,
+  HttpRequestSchema,
+  ViewDataSchema,
+  ListColumnSchema,
+  SelectionConfigSchema,
+  PaginationConfigSchema,
+  SortConfigSchema,
+  ObjectGridSchema,
+  ObjectFormSchema,
+  ObjectViewSchema,
+  ObjectMapSchema,
+  ObjectGanttSchema,
+  ObjectCalendarSchema,
+  ObjectKanbanSchema,
+  ObjectChartSchema,
+  ListViewSchema,
+  ObjectQLComponentSchema,
+} from './objectql.zod';
+
+// ============================================================================
+// Union Types - All Component Schemas
+// ============================================================================
+
+import { z } from 'zod';
+import { LayoutSchema } from './layout.zod';
+import { FormComponentSchema } from './form.zod';
+import { DataDisplaySchema } from './data-display.zod';
+import { FeedbackSchema } from './feedback.zod';
+import { DisclosureSchema } from './disclosure.zod';
+import { OverlaySchema } from './overlay.zod';
+import { NavigationSchema } from './navigation.zod';
+import { ComplexSchema } from './complex.zod';
+import { ObjectQLComponentSchema } from './objectql.zod';
+
+/**
+ * Union of all component schemas.
+ * Use this for generic component rendering where the type is determined at runtime.
+ */
+export const AnyComponentSchema = z.union([
+  LayoutSchema,
+  FormComponentSchema,
+  DataDisplaySchema,
+  FeedbackSchema,
+  DisclosureSchema,
+  OverlaySchema,
+  NavigationSchema,
+  ComplexSchema,
+  ObjectQLComponentSchema,
+]);
+
+/**
+ * Version information
+ */
+export const SCHEMA_VERSION = '1.0.0';

package/src/zod/layout.zod.ts

@@ -0,0 +1,262 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @object-ui/types/zod - Layout Component Zod Validators
+ * 
+ * Zod validation schemas for layout and container components.
+ * Following @objectstack/spec UI specification format.
+ * 
+ * @module zod/layout
+ * @packageDocumentation
+ */
+
+import { z } from 'zod';
+import { BaseSchema, SchemaNodeSchema } from './base.zod';
+
+/**
+ * Div Schema - Basic HTML container
+ */
+export const DivSchema = BaseSchema.extend({
+  type: z.literal('div'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Span Schema - Inline text container
+ */
+export const SpanSchema = BaseSchema.extend({
+  type: z.literal('span'),
+  value: z.string().optional().describe('Text content'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Text Schema - Text display component
+ */
+export const TextSchema = BaseSchema.extend({
+  type: z.literal('text'),
+  value: z.string().optional().describe('Text content'),
+  variant: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'caption', 'overline'])
+    .optional()
+    .default('body')
+    .describe('Text variant/style'),
+  align: z.enum(['left', 'center', 'right', 'justify']).optional().describe('Text alignment'),
+});
+
+/**
+ * Image Schema - Image component
+ */
+export const ImageSchema = BaseSchema.extend({
+  type: z.literal('image'),
+  src: z.string().describe('Image source URL'),
+  alt: z.string().optional().describe('Alt text for accessibility'),
+  width: z.union([z.string(), z.number()]).optional().describe('Image width'),
+  height: z.union([z.string(), z.number()]).optional().describe('Image height'),
+  objectFit: z.enum(['contain', 'cover', 'fill', 'none', 'scale-down']).optional().describe('Object fit property'),
+});
+
+/**
+ * Icon Schema - Icon component (Lucide icons)
+ */
+export const IconSchema = BaseSchema.extend({
+  type: z.literal('icon'),
+  name: z.string().describe('Icon name (lucide-react)'),
+  size: z.number().optional().default(24).describe('Icon size in pixels'),
+  color: z.string().optional().describe('Icon color'),
+});
+
+/**
+ * Separator Schema - Divider component
+ */
+export const SeparatorSchema = BaseSchema.extend({
+  type: z.literal('separator'),
+  orientation: z.enum(['horizontal', 'vertical']).optional().default('horizontal').describe('Separator orientation'),
+  decorative: z.boolean().optional().describe('Whether decorative'),
+});
+
+/**
+ * Container Schema - Generic container component
+ */
+export const ContainerSchema = BaseSchema.extend({
+  type: z.literal('container'),
+  maxWidth: z.union([
+    z.enum(['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full', 'screen']),
+    z.boolean(),
+  ]).optional().default('lg').describe('Max width constraint'),
+  centered: z.boolean().optional().default(true).describe('Center the container'),
+  padding: z.number().optional().describe('Padding value'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Flex Schema - Flexbox layout component
+ */
+export const FlexSchema = BaseSchema.extend({
+  type: z.literal('flex'),
+  direction: z.enum(['row', 'col', 'row-reverse', 'col-reverse'])
+    .optional()
+    .default('row')
+    .describe('Flex direction'),
+  justify: z.enum(['start', 'end', 'center', 'between', 'around', 'evenly'])
+    .optional()
+    .default('start')
+    .describe('Justify content alignment'),
+  align: z.enum(['start', 'end', 'center', 'baseline', 'stretch'])
+    .optional()
+    .default('center')
+    .describe('Align items'),
+  gap: z.number().optional().default(2).describe('Gap between items (Tailwind scale 0-8)'),
+  wrap: z.boolean().optional().default(false).describe('Allow items to wrap'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Stack Schema - Vertical flex layout (shortcut)
+ */
+export const StackSchema = BaseSchema.extend({
+  type: z.literal('stack'),
+  direction: z.enum(['row', 'col', 'row-reverse', 'col-reverse']).optional(),
+  justify: z.enum(['start', 'end', 'center', 'between', 'around', 'evenly']).optional(),
+  align: z.enum(['start', 'end', 'center', 'baseline', 'stretch']).optional(),
+  gap: z.number().optional(),
+  wrap: z.boolean().optional(),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Grid Schema - CSS Grid layout component
+ */
+export const GridSchema = BaseSchema.extend({
+  type: z.literal('grid'),
+  columns: z.union([
+    z.number(),
+    z.record(z.string(), z.number()),
+  ]).optional().default(3).describe('Number of columns (responsive)'),
+  gap: z.number().optional().default(4).describe('Gap between items (Tailwind scale 0-8)'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Card Schema - Card component
+ */
+export const CardSchema = BaseSchema.extend({
+  type: z.literal('card'),
+  title: z.string().optional().describe('Card title'),
+  description: z.string().optional().describe('Card description'),
+  header: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Card header content'),
+  body: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Card body content'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Child components'),
+  footer: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Card footer content'),
+  variant: z.enum(['default', 'outline', 'ghost']).optional().default('default').describe('Card variant style'),
+  hoverable: z.boolean().optional().default(false).describe('Whether the card is hoverable'),
+  clickable: z.boolean().optional().default(false).describe('Whether the card is clickable'),
+  onClick: z.function().optional().describe('Click handler'),
+});
+
+/**
+ * Tab Item Schema
+ */
+export const TabItemSchema = z.object({
+  value: z.string().describe('Unique tab identifier'),
+  label: z.string().describe('Tab label'),
+  icon: z.string().optional().describe('Tab icon'),
+  disabled: z.boolean().optional().describe('Whether tab is disabled'),
+  content: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).describe('Tab content'),
+});
+
+/**
+ * Tabs Schema - Tabs component
+ */
+export const TabsSchema = BaseSchema.extend({
+  type: z.literal('tabs'),
+  defaultValue: z.string().optional().describe('Default active tab value'),
+  value: z.string().optional().describe('Controlled active tab value'),
+  orientation: z.enum(['horizontal', 'vertical']).optional().default('horizontal').describe('Tabs orientation'),
+  items: z.array(TabItemSchema).describe('Tab items configuration'),
+  onValueChange: z.function().optional().describe('Change handler'),
+});
+
+/**
+ * Scroll Area Schema
+ */
+export const ScrollAreaSchema = BaseSchema.extend({
+  type: z.literal('scroll-area'),
+  height: z.union([z.string(), z.number()]).optional().describe('Height of scroll container'),
+  width: z.union([z.string(), z.number()]).optional().describe('Width of scroll container'),
+  orientation: z.enum(['vertical', 'horizontal', 'both']).optional().default('vertical').describe('Scrollbar orientation'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional(),
+});
+
+/**
+ * Resizable Panel Schema
+ */
+export const ResizablePanelSchema = z.object({
+  id: z.string().describe('Unique panel identifier'),
+  defaultSize: z.number().optional().describe('Default size (percentage 0-100)'),
+  minSize: z.number().optional().describe('Minimum size (percentage 0-100)'),
+  maxSize: z.number().optional().describe('Maximum size (percentage 0-100)'),
+  content: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).describe('Panel content'),
+});
+
+/**
+ * Resizable Schema - Resizable panels component
+ */
+export const ResizableSchema = BaseSchema.extend({
+  type: z.literal('resizable'),
+  direction: z.enum(['horizontal', 'vertical']).optional().default('horizontal').describe('Direction of resizable panels'),
+  minHeight: z.union([z.string(), z.number()]).optional().describe('Minimum height'),
+  withHandle: z.boolean().optional().default(true).describe('Show resize handle'),
+  panels: z.array(ResizablePanelSchema).describe('Resizable panels'),
+});
+
+/**
+ * Aspect Ratio Schema
+ */
+export const AspectRatioSchema = BaseSchema.extend({
+  type: z.literal('aspect-ratio'),
+  ratio: z.number().optional().default(16 / 9).describe('Aspect ratio (width / height)'),
+  image: z.string().optional().describe('Image URL to display'),
+  alt: z.string().optional().describe('Image alt text'),
+  body: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Child components (alternative to image)'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Child components'),
+});
+
+/**
+ * Page Schema - Top-level page layout
+ */
+export const PageSchema = BaseSchema.extend({
+  type: z.literal('page'),
+  title: z.string().optional().describe('Page title'),
+  icon: z.string().optional().describe('Page icon (Lucide icon name)'),
+  description: z.string().optional().describe('Page description'),
+  body: z.array(SchemaNodeSchema).optional().describe('Main content array'),
+  children: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Alternative content prop'),
+});
+
+/**
+ * Layout Schema Union - All layout component schemas
+ */
+export const LayoutSchema = z.union([
+  DivSchema,
+  SpanSchema,
+  TextSchema,
+  ImageSchema,
+  IconSchema,
+  SeparatorSchema,
+  ContainerSchema,
+  FlexSchema,
+  StackSchema,
+  GridSchema,
+  CardSchema,
+  TabsSchema,
+  ScrollAreaSchema,
+  ResizableSchema,
+  AspectRatioSchema,
+  PageSchema,
+]);

package/src/zod/navigation.zod.ts

@@ -0,0 +1,159 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @object-ui/types/zod - Navigation Component Zod Validators
+ * 
+ * Zod validation schemas for navigation components.
+ * Following @objectstack/spec UI specification format.
+ * 
+ * @module zod/navigation
+ * @packageDocumentation
+ */
+
+import { z } from 'zod';
+import { BaseSchema, SchemaNodeSchema } from './base.zod';
+
+/**
+ * Nav Link Schema
+ */
+export const NavLinkSchema: z.ZodType<any> = z.lazy(() =>
+  z.object({
+    label: z.string().describe('Link label'),
+    href: z.string().describe('Link URL'),
+    icon: z.string().optional().describe('Link icon'),
+    active: z.boolean().optional().describe('Whether link is active'),
+    disabled: z.boolean().optional().describe('Whether link is disabled'),
+    children: z.array(NavLinkSchema).optional().describe('Sub-navigation items'),
+    badge: z.union([z.string(), z.number()]).optional().describe('Badge content'),
+  })
+);
+
+/**
+ * Header Bar Schema - Header/navigation bar component
+ */
+export const HeaderBarSchema = BaseSchema.extend({
+  type: z.literal('header-bar'),
+  title: z.string().optional().describe('Header title'),
+  logo: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Logo content'),
+  nav: z.array(NavLinkSchema).optional().describe('Navigation links'),
+  left: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Left content'),
+  center: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Center content'),
+  right: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Right content'),
+  sticky: z.boolean().optional().describe('Whether header is sticky'),
+  height: z.union([z.string(), z.number()]).optional().describe('Header height'),
+  variant: z.enum(['default', 'bordered', 'transparent']).optional().describe('Header variant'),
+});
+
+/**
+ * Sidebar Schema - Sidebar component
+ */
+export const SidebarSchema = BaseSchema.extend({
+  type: z.literal('sidebar'),
+  title: z.string().optional().describe('Sidebar title'),
+  nav: z.array(NavLinkSchema).optional().describe('Navigation links'),
+  content: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Sidebar content'),
+  footer: z.union([SchemaNodeSchema, z.array(SchemaNodeSchema)]).optional().describe('Sidebar footer'),
+  position: z.enum(['left', 'right']).optional().describe('Sidebar position'),
+  collapsible: z.boolean().optional().describe('Whether sidebar is collapsible'),
+  defaultCollapsed: z.boolean().optional().describe('Default collapsed state'),
+  collapsed: z.boolean().optional().describe('Controlled collapsed state'),
+  width: z.union([z.string(), z.number()]).optional().describe('Sidebar width'),
+  collapsedWidth: z.union([z.string(), z.number()]).optional().describe('Collapsed width'),
+  onCollapsedChange: z.function().optional().describe('Collapsed change handler'),
+  variant: z.enum(['default', 'bordered', 'floating']).optional().describe('Sidebar variant'),
+});
+
+/**
+ * Breadcrumb Item Schema
+ */
+export const BreadcrumbItemSchema = z.object({
+  label: z.string().describe('Breadcrumb label'),
+  href: z.string().optional().describe('Link URL'),
+  icon: z.string().optional().describe('Breadcrumb icon'),
+  onClick: z.function().optional().describe('Click handler'),
+});
+
+/**
+ * Breadcrumb Schema - Breadcrumb navigation
+ */
+export const BreadcrumbSchema = BaseSchema.extend({
+  type: z.literal('breadcrumb'),
+  items: z.array(BreadcrumbItemSchema).describe('Breadcrumb items'),
+  separator: z.string().optional().describe('Custom separator'),
+  maxItems: z.number().optional().describe('Maximum items to display'),
+});
+
+/**
+ * Pagination Schema - Pagination component
+ */
+export const PaginationSchema = BaseSchema.extend({
+  type: z.literal('pagination'),
+  page: z.number().optional().describe('Current page number'),
+  totalPages: z.number().describe('Total number of pages'),
+  siblings: z.number().optional().describe('Number of sibling pages to show'),
+  showFirstLast: z.boolean().optional().describe('Show first/last page buttons'),
+  showPrevNext: z.boolean().optional().describe('Show previous/next buttons'),
+  onPageChange: z.function().optional().describe('Page change handler'),
+});
+
+/**
+ * Navigation Menu Item Schema
+ */
+export const NavigationMenuItemSchema: z.ZodType<any> = z.lazy(() =>
+  z.object({
+    label: z.string().describe('Menu item label'),
+    href: z.string().optional().describe('Link URL'),
+    description: z.string().optional().describe('Item description'),
+    icon: z.string().optional().describe('Item icon'),
+    children: z.array(NavigationMenuItemSchema).optional().describe('Submenu items'),
+  })
+);
+
+/**
+ * Navigation Menu Schema - Navigation menu component
+ */
+export const NavigationMenuSchema = BaseSchema.extend({
+  type: z.literal('navigation-menu'),
+  items: z.array(NavigationMenuItemSchema).optional().describe('Menu items'),
+  orientation: z.enum(['horizontal', 'vertical']).optional().describe('Menu orientation'),
+});
+
+/**
+ * Button Group Button Schema
+ */
+export const ButtonGroupButtonSchema = z.object({
+  label: z.string().describe('Button label'),
+  variant: z.enum(['default', 'secondary', 'destructive', 'outline', 'ghost', 'link']).optional(),
+  size: z.enum(['default', 'sm', 'lg', 'icon']).optional(),
+  disabled: z.boolean().optional().describe('Whether button is disabled'),
+  onClick: z.function().optional().describe('Click handler'),
+  className: z.string().optional().describe('Button class name'),
+});
+
+/**
+ * Button Group Schema - Button group component
+ */
+export const ButtonGroupSchema = BaseSchema.extend({
+  type: z.literal('button-group'),
+  buttons: z.array(ButtonGroupButtonSchema).optional().describe('Group buttons'),
+  variant: z.enum(['default', 'outline']).optional().describe('Button group variant'),
+  size: z.enum(['default', 'sm', 'lg']).optional().describe('Button group size'),
+});
+
+/**
+ * Navigation Schema Union - All navigation component schemas
+ */
+export const NavigationSchema = z.union([
+  HeaderBarSchema,
+  SidebarSchema,
+  BreadcrumbSchema,
+  PaginationSchema,
+  NavigationMenuSchema,
+  ButtonGroupSchema,
+]);